Tip: Early Hints speed up page loads by preloading resources from preload/preconnect headers while the server generates HTML. Shopify make all their merchant sites 500ms+ faster using it. Learn about how Early Hints work: https://bit.ly/chrome-eh. They're available in Chrome 103 onwards. Expanded summary: Early Hints is an HTTP status code (103 Early Hints) used to send a preliminary HTTP response ahead of a final response. This allows a server to send hints to the browser about critical sub-resources (for example, stylesheet for the page, critical JavaScript) or origins that will be likely used by the page, while the server is busy generating the main resource. The browser can use those hints to warm up connections, and request sub-resources, while waiting for the main resource. In other words, Early Hints helps the browser take advantage of such "server think-time" by doing some work in advance, thereby speeding up page loads. Learn more about Chrome's experiments with Cloudflare and Shopify: https://lnkd.in/gR_y5Bwj https://bit.ly/shpfy-eh "In every geo, and OS+Browser combination the LCP (Largest Contentful Paint) from our RUM data was more than 500ms faster at the p50!" ~ Shopify. In my own tests, LCP sped up for my Shopify store by up to 1s on median mobile hardware. Great stuff. #webperformance #webdevelopers #google
I have this website https://indianswhodesign.in When running PSI, for mobile each time I get a different score ranging from 82-94. Is that expected? Something tells me it shouldn’t be this drastic. Why don’t the same appear for desktop version? In some cases I see the PSI stops analyzing before the main content even loads (FCP?) but the shell has loaded. I use batched image loading via webworkers (for now, later on, the batcher can be used for heavy lifting tasks as well)
Preloading fonts is one of the ways to speed up page loads.
Hey! Patrick Hund, Juan Picado, Alberto De Agostini, Alessandro Grosselle, Danilo Velasquez, 🧗♂️Fermin Hernandez Gil we need to try this in the Adevinta's products
Cam this may interest you because you mentioned Shopify recently
Addy Osmani will this make any significant difference in static websites compared to SSR ones because if we already have HTML generated why can't we send it right away.
Thank you for sharing Addy. Will try this out.
Fullstack Developer | React JS | Node JS
1yAddy Osmani I've looking for more content related to the reports provided by Lighthouse in the chrome dev tools. In your experience what should be the approach to make the performance of a webpage better? I tried some approaches and I was not able to increase at least one point. Could you share some of your thoughts about it? Thank you