Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…
Contents tagged “Core Web Vitals”
There are 19 contents with this tag:
-
-
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with
<picture>andxdescriptors for fluid images… 😞With a
<img maxdensity="2.5" …>attribute for example!If you agree, comment:
https://github.com/whatwg/html/issues/4421 -
I love #SpeedCurve's simple and efficient Core Web Vitals Real User Monitoring, especially when everything is green! 🥳
This is a real e-commerce site, with many real users everyday. After a few months of performance optimisation.
-
Largest Contentul Paint change in Chrome 112 to ignore low-entropy images
This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…
-
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-preloadFeedback welcome! 🙏
-
widthandheightattributes on<img>help prevent layout shifts (CLS). Values should be unitless integers.But #Lighthouse sees
100%as100, thanksparseInt()…Do you think it should be improved?
-
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
-
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or…
-
Have Core Web Vitals made the web faster?
Barry dives into data from HTTP Archive to show how Google's push for web performance with Core Web Vitals helped — or not 😅 — improve the performance…
-
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
-
How To Fix Cumulative Layout Shift (CLS) Issues
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…
-
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭
Any suggestion?
-
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly…
-
How to Improve Core Web Vitals
Here's a great overview of both what will come soon in Google ranking algorithm, and how to detect and fix issues with these Core Web Vitals. Google…
-
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont…
Hubert Sablonnière
Jake Archibald
Barry Pollard
Simon Hearne
Monica Dinculescu
See all tags.