How to optimize the Cumulative Layout Shift (CLS)?
How to optimize the Cumulative Layout Shift (CLS)? |
Last week we reviewed what the Cumulative Layout Shift
(CLS) is, a Google metric that detects unexpected movements within your
website content, measures the sum total of all individual design change scores
for each unexpected design change. that occurs throughout the life of your
page.
And as you already know, this is part of the Google search
algorithm, so your website must be up to the task for proper SEO. That is
why this week we will see what parameters you should consider optimizing the
CLS on your website.
What is causing the unexpected content movement (CLS)?
According to Google, the most common causes of high
CLS are:
- · Images without specifying the dimensions.
- · Ads or embedded iframes without dimensions.
- · Dynamically added content, such as a Chat on your website.
- · Web fonts that cause flashes of invisible text (FOIT) and flashes of unstyled text (FOUT) .
- · Actions that wait for a network response before updating the DOM.
How to optimize for unexpected content movement (CLS)?
Using font values: display and link rel = preload
If your site is using fonts that are hosted on your website
or from third parties, it could be the root cause of FOIT (Flashes Of the
Invisible Text) and FOUT (Flashes Of the Unstyled Text).
When the user's browser downloads fonts from the server, it
often shows white space until your website's font loads. After downloading
and displaying the font, the layout usually moves quite a bit. It's called
FOIT (Flashes Of the Invisible Text).
Another scenario occurs when the browser displays one of the
system fonts, the one the user has by default on his computer, until the
website font is downloaded. This is called FOUT (Flashes of The Unstyled
Text). Since the system font may be different from the website font, it
may take up different space, so your website design may also move after the
custom font is loaded on your website.
To avoid this you can use font: display values like auto,
swap, block, fallback and optional. But if you want an even better result,
you can also preload the sources using <link rel = preload>, in this way
they are downloaded as a priority file, before the user can see the content of
your website.
Width and height in videos and images
In the old days of the internet, web developers used to
include width and height elements everywhere on the site. It looked like this:
<img src = ”example.jpg” width = ”800 ′ ′ height
=” 300 ′ ′ alt = ”Example Image”>
A few years ago, when responsive designs became popular, we
stopped setting the height and width of images, in this way we adapt them with
CSS according to the device that is visiting the website.
With the CSS method, the width and height are assigned only
after the browser begins to download the image, so depending on the design, it
could be moved by adapting the image to the space that corresponds to it.
A solution to this could be to resize the images using the
aspect ratio, the ratio between width and height (eg 16: 9). This
allows the browser to calculate the space required to display the image and
thus reduce the risk of unexpected content movement (CLS).
Dynamically loaded content
CLS will ignore all content changes that appear within half
a second of user input. This means that the CLS evaluation stops for 500
ms after every user interaction with your website. Therefore, if the
design or content change is intentional and caused by the user, it will not
affect the CLS rating.
Dynamically loaded content, like loading content from
an API for example should never appear once the website is already
loaded. The only exception to this rule is that you load the content
dynamically within this 500 ms when entering the website for the first time or
after an interaction.
Conclusion
Optimizing the CLS can help you diagnose why users are not
satisfied with your site or how you could improve their
experience. Remember that CLS is part of the Google search algorithm, so
optimizing CLS will make you stand out from your SEO competition.
No comments
Note: Only a member of this blog may post a comment.