Addy Osmani’s Post

View profile for Addy Osmani, graphic

Engineering Leader, Google Chrome. Best-selling Author. Speaker. I want to see you win.

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

  • Speed up page loads using early hints in Chrome 103+
João Paulo Rodrigues Pereira

Fullstack Developer | React JS | Node JS

1y

Addy 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

Mostafa Abobakr

Senior Frontend Engineer with expertise in TypeScript, React, and Nextjs

1y

How to extend @types of img element in react to use fetchPriority ?

  • No alternative text description for this image
Like
Reply
Zeeshan Bhat

Loves to build delightful experiences and tools | PayPal

1y

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)

Like
Reply
Suman Sen

Senior XE @ Publicis Sapient | Angular | React JS | Next JS | Web Accessibility | Node JS | Micro Frontend | UI / UX

1y

Preloading fonts is one of the ways to speed up page loads.

Like
Reply
Joan León

Staff Frontend Engineer at Adevinta, Web Performance Consultant at nucliweb

1y

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

Like
Reply
Jordi Turull

Frontend Lead at MANGO | Cofounder at Happergy.es | A11y advocate

1y

Cam this may interest you because you mentioned Shopify recently

Shivam V.

Senior Full Stack Developer | AWS • React Native • NodeJS • TypeScript

1y

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.

Like
Reply
Swaroop Chakraborty

Baxter | AI | Healthcare | Entrepreneur | Writer | Clean Code | Cerner Master | Ex[TCS, Cerner, Siemens, Zantrik]

1y

Thank you for sharing Addy. Will try this out.

Like
Reply
See more comments

To view or add a comment, sign in

Explore topics