Boost Your Website Performance: Solving Cumulative Layout Shift (CLS) Issues
Are you a developer looking to enhance your website’s performance and user experience? Look no further than DavidWalshBlog, where over 50 thousand developers worldwide flock every month to learn JavaScript tricks and troubleshoot their code. However, some users have reported a slow experience on the site.
David closely monitors his Core Web Vitals and overall performance using Request Metrics. Lately, he noticed a decline in his CLS performance scores for both desktop and mobile users.
Wait, what is CLS?
Cumulative Layout Shift (CLS) is a crucial Core Web Vital metric that measures how much a page shifts during loading, affecting user experience. Poor CLS scores can lead to a site feeling slow to users, impacting search rankings and traffic.
Running a Google Lighthouse report might initially show a perfect score, but real user experiences can vary significantly. Implementing real user monitoring is essential to identify and address performance issues accurately.
Where are the CLS problems?
By analyzing individual page CLS scores on Request Metrics, it was evident that specific posts, such as Play Grand Poo World and Pornhub Interview, had troublesome CLS scores. The common culprit? Images. Images often cause layout shifts as browsers struggle to determine their dimensions before fully loading.
Using images correctly for CLS
To avoid layout shifts caused by images, provide width and height attributes in the image tags to help browsers reserve space appropriately. Ensuring images have specified dimensions helps browsers render content seamlessly without unexpected shifts.
Utilizing WordPress tools like wp_image_src_get_dimensions can further streamline the process of adding image dimensions to the markup.
Proving it works
After implementing image dimension changes, David observed a 20% drop in CLS, bringing it closer to the desired “Good” range. While some font-related issues remain to be addressed, the performance improvements are already noticeable.
If you’re seeking to enhance your website’s performance and address Core Web Vital issues, consider leveraging Request Metrics. With tools for performance tracking and actionable insights, Request Metrics can help optimize your site’s performance and boost user experience.
And the best part? It’s free to use, making it a valuable resource for developers and website owners.
About Todd Gardner
Todd Gardner is a software entrepreneur and developer dedicated to building maintainable and efficient software products. As the cofounder of TrackJS and Request Metrics, Todd helps developers worldwide create faster and more reliable websites. In addition, he hosts the PubConf software comedy show.
toddhgardner.com
toddhgardner
Posts