If you use #Eleventy and know how to add fetchpriority="high" on your Largest Contenful Paint image, I made a plugin that adds a <link rel="preload"…> for it, even it it's responsive: https://github.com/nhoizey/eleventy-plugin-auto-preload
Feedback welcome! 🙏
Google On Why Google Search Console LCP Is Not Wrong
Caching should be a "cherry on top" to boost speed, rather than the only reason you have a fast site.
About https://techhub.social/@cloudcannon/112604279395366912
Alex […] shares how using CloudCannon for client sites boosts performance and efficiency 🚀
I love #CloudCannon's efficiency. 👍
But with an SSG, #WebPerf depends on the way you build pages. Good SSGs — as #Eleventy — don't force anything so performance is really just the result of developer's work.
The CMS should have no impact. 🤷♂️
Jeremy Wagner
New field insights for debugging INP
Interaction to Next Paint (INP) is a Core Web Vital that measures how responsive a page is to interactions. Due to INP's scope, it can be difficult…
Let's say a SPA first load has been optimized with SSR and the LCP image is loaded pretty fast because it's in the HTML.
But the JavaScript then builds a carousel in the DOM, which initially shows the very same image.
I guess there's a second render of the image. How can I check this easily?
Would it make sense that the LCP takes the late second render of the image, instead of the fast first one?
Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭
You can see this for my photography site in this WebPageTest result:
https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp
