This presentation by a web performance consultant at Shopify delves into the implementation and real-world impact of Early Hints (HTTP 103 status code) on the Shopify platform. Early Hints enable browsers to proactively fetch critical resources before receiving the final HTML response, aiming to accelerate page load times. While Shopify provides default pre-connects and allows merchants to add preloads for up to 10 resources with specific prioritization, data analysis reveals that preload hints are significantly underutilized. Performance metrics show that on desktop, Early Hints can offer some front-end load time advantages, but on mobile, preloading too many resources can paradoxically slow down page rendering due to bandwidth limitations. The speaker emphasizes the critical importance of strategically selecting only truly essential resources for preloading and advocates for a continuous cycle of measurement, evaluation, and iteration using tools like Shopify's new Core Web Vitals reports to optimize performance.
Exploring Early Hints at Shopify: Impact and Best Practices
0:00:12 Introduction: Estella, a web performance consultant from Shopify's growth services team, introduces the topic of Early Hints and their application within Shopify.
0:00:29 What are Early Hints?: Early Hints are an informational HTTP status code (103) that allows a server to send an early response to the browser, providing "hints" (like pre-connects and preloads) for critical resources before the final HTML response is ready.
0:00:49 Browser Proactivity: These hints enable the browser to start downloading essential resources and pre-connecting to origins, utilizing idle time while the server generates the full HTML.
0:01:19 How Early Hints Work: The process involves the client requesting a page, the CDN forwarding it to the origin, and the CDN immediately responding with 103 Early Hints. While the origin server works, the browser fetches hinted resources. The CDN then caches these hints for future requests before sending the final HTML.
0:02:22 CDN Caching: Early hints are cached by the CDN. The first request to a specific URL/location might not receive them, but subsequent requests will benefit.
0:03:01 Potential Performance Impact: By enabling parallel fetching of resources, Early Hints can accelerate page load times, allowing assets to be downloaded concurrently with server-side HTML generation.
0:04:04 Shopify's Implementation: Shopify includes two default pre-connects to its CDN. Merchants can add up to 10 additional preload resources using Liquid preload tag filters or preload: true arguments with stylesheet and image tags.
0:06:42 Resource Prioritization: Shopify prioritizes preloaded resources in this order: stylesheets, other preloads (like fonts), scripts, and finally images.
0:07:17 Data Collection: Shopify collects real user data on performance, which feeds into Core Web Vitals reports available in the Shopify admin and informs platform improvements.
0:07:55 Usage Distribution: Real user data shows that approximately 50% of page views (desktop and mobile) only receive the default pre-connect early hints, indicating significant underutilization of preload functionality.
0:09:22 Performance Impact (Desktop): Analysis of desktop data suggests that using Early Hints (both pre-connects and preloads) can lead to slightly faster Largest Contentful Paint (LCP) performance, especially when isolating the front-end impact.
0:10:59 Performance Impact (Mobile): On mobile, however, the trend reverses: not using early hints or using only default pre-connects tends to result in faster loading. Preloading more resources can negatively impact mobile performance due to increased bandwidth contention.
0:13:38 Knowns & Unknowns: The speaker highlights that real user data is highly diverse, mobile conditions are generally slower than desktop, and the collected data excludes Safari. Key unknowns include the necessity of preloaded resources for the page, the specific types of resources merchants are preloading, and why merchants are not utilizing Early Hints more.
0:16:53 Key Takeaway: Use Wisely: The primary recommendation is to use Early Hints responsibly. Preload only truly critical resources needed for the initial "above-the-fold" content to avoid potential slowdowns, particularly on mobile.
0:17:59 Continuous Measurement & Iteration: It's crucial to measure current performance, evaluate what to preload, implement changes, re-measure, assess the impact on real users, and iterate. Shopify's new Core Web Vitals reports can assist in this detailed analysis.