Every month, more than 50,000 developers from around the world visit DavidWalshBlog to learn JavaScript tricks and solve code problems. Unfortunately, some of them had a slow experience with the site.
David uses request metrics to track core web vitals performance and overall performance. Recently, we noticed that his CLS performance scores were trending significantly slower for both desktop and mobile users.
Wait, what is CLS?
Cumulative Layout Shift (CLS) is one of the Core Web Vital performance indicators. It doesn’t measure load time directly; it measures how long a page takes to load. rotation While loading. You are definitely annoyed by this. As a result of these changes, the site feel It’s slow for users.
CLS and the rest of your core web vitals are very important. Not only does it measure user experience, but it also affects page rankings on search sites. And search traffic is the lifeblood of bloggers, media sites, e-commerce stores, and just about anyone who runs a website.
If we can fix the site’s CLS issues, it will give our readers a faster experience and improve our search rankings, allowing David to help more people. Sounds like a great incentive, let’s find out.
Conflicts with Google Lighthouse
To find performance issues, many developers use tools like Google Lighthouse. I ran the Lighthouse report on David’s site, and here’s what I got:
Perfect score! Let’s pack our bags and go home.
the problem is Google Lighthouse is a lie. Real users don’t have this capability. This score represents only a single test conducted on a high-speed computer in the United States over a fast broadband connection.
David’s real users come from all over the world, across a variety of devices and networks, at any time of day. Their performing experience is not perfect. That’s why real user monitoring of performance is necessary. Otherwise you’ll never know if there’s a problem.
Where is the CLS problem?
David has been writing for a long time and has hundreds of posts on his site. Request metrics can help you zero in on issues by tracking the CLS score per page.
The highest traffic page is the root page and has a good CLS. However, many of his posts, such as his Play Grand Poo World and Pornhub interviews, have issues with his CLS score. He can also trace the element responsible for CLS and for most posts main > article > p. This means that the first paragraph of the article is changing. Why is that so?
What do the posts with the lowest CLS scores have in common? image. Images are a very common cause of CLS problems because the browser does not always know the size of the image until it is downloaded. The browser assumes it’s 0x0 until it gets the image. rotation Everything around you takes up space.
Image-heavy posts were moved multiple times as each image was downloaded and the article moved to make room for new content.
Use images correctly for CLS
To avoid layout changes when using images, you need to give the browser a hint about the image size. The browser uses these hints to reserve space in the image layout once the download is complete.
<img src="https://davidwalsh.name/path/to/image" width="300" height="100" />
Width and height are specified as their own properties, not as part of the style tag. These properties set both the default size of the image and the aspect ratio to use. Here too, you can use CSS to make the image bigger or smaller.
Also note that there are none. px Units are specified.
Image Size in WordPress
DavidWalsh.name is hosted on WordPress, which has some built-in tools to do this. can utilize wp_image_src_get_dimensions Get the dimensions of the image you’re using and add it to your markup.
Proven effectiveness
David changed his image a few days ago and is already showing improvement. CLS fell 20% to 0.123. We are now very close to the “good” range for CLS.
There are still a few issues to sort out around the font, but I’ll talk about that in another post next time.
If you’re looking to improve your site’s actual performance or are worried about your SEO juice being lost due to Core Web Vital issues, take a look at your requests metrics. There are tools to track performance and actionable tips to actually fix the problem.
Plus, it’s free, so it’s worth it.
About Todd Gardner
Todd Gardner is a software entrepreneur and developer who has built several profitable products. He seeks simple tools, maintainable software, and a balance of complexity and risk. He is the co-founder of TrackJS and Request Metrics, helping thousands of developers build faster, more reliable websites. He also produces the PubConf software comedy show.
toddhgardner.comTodd Gardnerpost