Google is once again updating its algorithm–and it’s big. The Core Web Vitals update rolls out in May, and it’s all about speed and the user experience. More specifically, Google will start measuring all of the following: Largest Contentful Pain (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
For this blog post, we’ll focus on only one of these elements: Cumulative Layout Shift and what you can do as a frontend developer to fix it.
How do you know if you have cumulative layout shifts
Use Page Speed Insights to quantitatively see your website’s content shift is (along with other metrics such as LCP and FID).
Because Core Web Vitals is about the user experience, it might be helpful to have a tool like Airbrake Performance Monitoring. With a performance monitoring tool designed for developers, you’ll gain instant insight into the UX of your application with features that measure Apdex Score, latency, query and route information, and so much more.
Combine this with Moovweb, which fully optimizes the speed of your website, and you’ll be in an excellent place to not only measure the UX of your application but stay five steps ahead.
Once you know where your website stands as far as its UX and CLS, it’s time to fix it.
How frontend developers can fix cumulative layout shifts
Have you ever tried to click on an article on a website, only to have it suddenly move, and you end up clicking on something else? Or, maybe, you’re in the middle of reading an article, and everything shifts down. Yup, those are examples of cumulative layout shifts. A cumulative layout shift occurs when an element on your website loads after everything else has loaded. It can be highly annoying to users. Not only will Google ding you on this, but you’ll lose potential users who would rather go to a different website than wait for yours to load. Prevent this by taking the time to fix CLS issues before they impact your users.
As a Frontend Developer, here are four actions you can take to reduce the cumulative layout shift on your website:
Update fonts
Fonts add character and personality to a website, but those specialized fonts come at a cost. Due to the large nature of font files, browsers tend to compensate by using FOIT, otherwise known as the flash of invisible text. FOIT can severely slow down web page loading times.
Instead of relying on FOIT, you should use the “flash of unstyled text” method (FOUT). The easiest way to change website text to FOUT is with the following method:
Traditionally, you code font as such: @font-face { font-family: Georgia; }
Instead, you should use the following bit of code: @font-face { font-family: Georgia; font-display: swap; }
The “Font-display” tells the API t0 display font immediately using a system font. Once your font file has loaded, it will then swap it out with the font you want on your website.
Unfortunately, the FOUT method may not work with all browsers. If it doesn’t, then the browser will revert to its default behaviors for loading fonts. You can see a detailed breakdown of these behaviors using this tool.
The second method you can use to eliminate long load times for font files works with all browsers, but it’s not as simple as updating a code line.
Just like with the previous method, you’ll wait until the default font is fully loaded and then switch it out for a custom font. The difference is that you’ll need to dive into both the CSS and JavaScript code of your website.
First things first, you’ll want to avoid using custom fonts upon the initial page load by updating your CSS. Use a system font to get the text on your page downloaded as soon as possible.
By using JavaScript code, you can then implement the Font Face Observer. This code will monitor and notify you when a web font is loaded. By using scroll events, the Font Face Observer can load fonts quickly. For the complete guide, check out the fontfaceobserver GitHub page.
As a frontend developer, these are some simple changes you can make to improve your font loading times.
Fix images on your website
How images load on your website will significantly impact and reduce cumulative layout shifts. Images uploaded without attributes tend to cause massive shifts. That’s why it’s best to use the following practices when adding images to your website:
Use size attributes on images and video elements
Before this update, adding “width” and “height” attributes to your images made little to no impact on how your website ranked on Google. Now, with the Core Vitals Update, it’s going to make a significant difference. You’ll want to take the extra time to include attributes to your images from here on out.
When you upload an image as such:
Ex: <h1>Error Monitoring is Awesome</h1>
<p>Find and Fix Broken Code Quickly</p>
<img src=”Erron_image.jpg” alt=””>
<p>With the right error monitoring software, you can keep your code bug-free.</p>
The following happens: the user’s browser will read and download the HTML first. Once it’s done that, it will finally download the image. What ends up happening is a content shift on the webpage as the browser makes room for the image.
Fixing this CLS problem is simple: All you need to do is add the height and width attribute tags to your image.
Ex: <h1>Error Monitoring is Awesome</h1>
<p>Find and Fix Broken Code Quickly</p>
width=”450” height=”450”>
<p>With the right error monitoring software, you can keep your code bug-free.</p>
When you add the width and height to the image, you’re telling the browser to leave space for it on the webpage as the rest of the HTML document downloads.
For a less stringent approach, you can also use CSS aspect ratio boxes.
Neither approach is incorrect, but it’s imperative you use one or the other to prevent cumulative layout shifts on your website.
Carefully place dynamic advertisements
Ads are terrible when it comes to content layout shifts. They’ll have your content going all over the place if you’re not careful with them.
When placing ads on your website, use these tips to prevent shifts in your content:
Just like with images, you need to make sure that ads have enough reserved space on your website.
Don’t place ads at the very top of your webpage. There’s a chance that this will cause a content shift for all of the content below it.
Place ads near the middle or bottom of a webpage.
These are the best practices when it comes to dynamic ads. Not only will they drastically improve the user experience, but cumulative layout shifts, as well.
Be wary of embedded widgets
Embedded widgets are a game-changer for websites. They allow you to create interesting and portable content for your website, but they do have significant drawbacks. Unlike images and ads, it can be challenging to reserve space on your website for a widget.
Say you have a widget for Twitter. Sometimes a tweet may only be a few characters long; other times, it may include images and links, so how do you know how much space you need to reserve when the space required is continually changing?
You can fix this by uploading a placeholder for your embeds by reserving space on your website. But how to do that?
You’ll need to create a “GlobalKey” and assign it to your widget. Once you have a key, you’ll be able to find the size of your widget and reserve the appropriate amount of space on your website for your widgets.
Conclusion
There are only a few methods you can use to reduce cumulative layout shifts on your website. Many issues relating to CLS involve space and reserving enough space on your website for images, ads, and widgets. How you upload fonts will also significantly impact the speed of your website.
Remember that with the rollout of Core Web Vitals in May, you should start making these changes now to avoid falling in Google’s rankings.
