Herbelin, lightening the French watchmaker's Shopify store

A Shopify store to lighten, without changing the theme

About Herbelin

Herbelin is an independent French watchmaking house, founded in 1947 in Charquemont, in the Haut-Doubs region. Its collections (Newport, Cap Camarat, Art Déco, Antarès) are sold in authorized stores and on herbelin.com, a Shopify store recently migrated from WooCommerce, which showcases the watches through large videos and a strap configurator.

Why contact us

After the migration, the e-commerce team entrusted us with a performance pre-audit: fourteen quantified actions, from the most profitable to the most technical. They applied some of them internally, then asked us to review what had been deployed, to resolve the discussed points, and to carry out the remaining corrections ourselves: a Shopify optimization intervention carried out from start to finish, up to the final report.

Expected Performance

The field Core Web Vitals were already "good" (LCP of 1.3s at the 75th percentile on the mobile homepage, INP of 129ms, zero CLS). The goal was therefore not to get out of a red zone, but to significantly lighten the pages, especially on mobile where every megabyte costs data and battery, to make the visitor's first action more responsive, and to reliably collect consent.

Challenges and Constraints

The theme, an Online Store 2.0 theme in Liquid customized by sections and blocks, is linked to the brand's developer's GitHub repository: any modification had to be reflected there, without ever overwriting ongoing work. The visual identity (full-screen videos, variable title font, licensed text font) had to remain strictly identical to the eye. And part of the weight does not depend on the theme but on the platform itself: it was necessary to distinguish what can be corrected from what cannot, in order to charge only for real gains.

Project Stages

Technical alignment: reviewing the pre-audit

Each action from the pre-audit was re-checked with the same measurement protocol (GTmetrix from Paris, Pixel 9 mobile on 4G, unthrottled computer), on the live theme. Verdict: three actions declared as done were indeed done (editorial images converted, image variants capped, asynchronous decoding), four points discussed by the team were valid, and two key actions had not produced their effect. No gain is displayed without a before and after measurement, using the same protocol.

Tracking implementation: consent finally respected

The consent banner was displayed, but its blocker was inactive: analytics, targeting, and audience measurement tools loaded before the visitor made any choice. We activated strict blocking of the CMP, declared the domains that its automatic blocker did not recognize, and submitted the custom pixel declared in Shopify's client events (Web Pixels) for consent. A check on multiple loads in incognito browsing then revealed that an application script could still bypass the blocker, depending on the file loading order: the theme now holds it itself and only releases it upon marketing consent, read by Shopify's Customer Privacy API. Six out of six loads are clean, and everything loads normally as soon as the visitor accepts.

Shopify Optimization: What Was Fixed

"Login with Shop", two hidden iframes on every page. The admin setting does not disable without Shop Pay. The cause: the two native <shopify-account> components in the header and menu, which prepared the Shop login for every non-logged-in visitor: two 248 KB iframes, a long-task account script of 80 to 167 ms, and a dedicated font and sprite. The component is no longer served except to logged-in customers; others see the same icon, linked to the login page. Result: 126 requests and 0.85 MB less on the desktop homepage.

Smart, deferred script loading. The existing mechanism held application scripts until the visitor's first interaction, then released everything at once: 87 off-screen media, about fifty requests, and 34 ms of synchronous work at the precise moment the visitor interacted. We replaced it with the agency's in-house loader, adapted for Shopify: targeted interception of scripts injected by the platform via content_for_header (application ScriptTags, analytics, Shop Pay features) or via application blocks, execution during processor idle time, staggering, and media loaded only as they approach the screen, including carousels. Work on the first interaction drops to 9 ms. Shopify and Shop Pay analytics, whose execution triggers the preloading of the payment funnel (61 requests), are reserved for actual interaction.

Mobile videos re-encoded at the right bitrate. On phones, the homepage loaded 9.8 MB of video. The resolution was right; the bitrate, not. We produced a scale of x264 encodings and measured each with VMAF, Netflix's perceived quality indicator, to keep the first tier above 95/100. The background video, served in 1920 × 1080 even though the screen only shows a 486-pixel band, is cropped for portrait phones. The files are served from the theme's assets, which Shopify serves as-is (a video uploaded to the admin files is re-encoded in HLS adaptive streaming), and a <source media> source reserves them for phones: 3.7 MB total, with no visible difference.

A title font reduced by half, and compliant with its license. The variable font for titles included two full axes (width and weight) and 543 characters, whereas the theme fixes the width and only uses weights 300 to 700. Instantiated and limited to the Latin alphabet, it goes from 158 to 69 KB, with not a single pixel's difference on 60 compared elements. Its free license reserving the original name, the lighter version was renamed. Finally, each weight has a fallback font calibrated on site texts and registered in No More Font Shift, the agency's tool, so that text no longer shifts when the font loads: width difference less than 0.4%.

Intervention Report

Each change was put online file by file, after verifying that the online version had not changed in the meantime, and is included in the brand's GitHub repository with its rollback procedure. The 14-page report details each task, the before and after measurements, and the points left for the client to decide, as well as the technical choices to be respected so that future theme updates follow the same direction.

What the theme controls, and what it does not control

Why was this Shopify store slow?

Not because of Shopify itself, but because of what's added to the theme: duplicated native components that prepare invisible services, apps that inject their scripts into the header, videos encoded for fiber optic, a font loaded with variants that are never displayed. On the mobile homepage, nearly 230 out of 321 requests were avoidable.

What can be optimized, and what cannot be optimized, on Shopify?

Checkout preloading (dozens of modules loaded after display) and Shopify's Web Pixels Manager are mandatory for all stores: they cause delays and cannot be removed. Everything else depends on the Liquid theme and app settings: rendered components, scripts injected into the <head>, media, fonts, consent. Server response time, however, remains excellent on Shopify's infrastructure. This is where all the gains measured here were found.

Do you need to leave Shopify to have a fast site?

No. Without changing the platform or theme, the mobile homepage lost 57% of its weight and 70% of its requests. A well-executed Shopify optimization works with the platform, not against it.

Technical Stack

The results in numbers

GTmetrix measurements from Paris, before and after intervention, with the same protocol; visitor without consent or interaction.

Desktop homepage: from 352 to 188 requests and from 2.94 to 1.58 MB, blocking time from 443 to 132 ms. Mobile product page: from 350 to 124 requests, LCP from 1.90 to 1.10 s. Mobile PageSpeed Insights score from 71 to 84. Google's real-world data, already good, incorporates these gains over a rolling 28-day period.

Does your store deserve the same treatment? Discover our Shopify optimization service.

The rest and end in images