https:/
Barry shows here a few ways to prevent layout shifts and make your visitors happier.
All of these techniques basically involve setting aside the correct amount of space before additional content is loaded — whether that is media or JavaScript-injected content, but there’s a few different options available to web developers to do this.
Looks like Google likes it when we start improving websites performance! 🚀
I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.
This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞
Priority Hints and optimizing LCP
Increasing the priority of a resource usually comes at the cost of another resource, so Priority Hints should be used sparingly. However, if the browser…
Of course we don't work on performance improvements only for Google, but the Search Console is our clients' main concern, so when it shows such a graph, it's satisfying for everyone! 🎉
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! 🙏
Barry Pollard