Skip to content
How to Avoid Large Layout Shifts in Magento 2
1. Overview
Visitors get irritated when elements shift throughout the page. Page elements such as images , videos, fonts, and buttons may change around unexpectedly while the page is still loading.
It degrades your website’s overall user experience, forcing visitors to leave before they’ve even had a chance to look at your content.
This happens with many users when they visit the site or try to click the ‘Search’ or ‘Add to Cart’ button. Really these kinds of encounters are both aesthetically frustrating.
Let’s discuss the Cumulative Layout Shift (CLS) metric in detail.
CLS stands for Cumulative Layout Shift, a Core Web Vitals metric that measures unexpected layout adjustments and is included in the Google Page Experience upgrade.
The CLS score of a website determines how well it manages unexpected layout adjustments.This means it assesses content instability by examining how much material shifted in the viewport without user intervention, and it assesses the distance between two points.
2. Tools to check cumulative layout shift metrics
There are various tools to check your site CLS score. The term “Lab Data” refers to the use of tools to replicate the user’s experience. The performance tools mentioned below enable you to view your CLS lab results.
Field tools
Lab tools
3. Causes of poor CLS?
The most common causes of a poor CLS are:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Unformatted images
- dynamic advertisements
- heavy embeds
4. What is a good CLS score?
A CLS score can be as low as 0 for completely static pages and rises when the page’s layout shifts. Your layout will be more stable if you get a lower score.
The following are the official CLS scores used by Google’s performance tools:
- Good if CLS is less than 0.1.
- Needs Improvement if CLS is between 0.1 and 0.25.
- Poor if CLS is greater than 0.25.
Keep your CLS score below 0.1, according to Google.
5. How to Avoid Large Layout Shifts in Magento 2
The next step is to fix the unexpected layout alterations that are causing your CLS scores to rise after you’ve analysed your web page and discovered them. Apply below given solutions to avoid large layout shifts.
5.1 Use placeholders when there is no ad available to show
Using placeholders for smooth loading of picture and video assets on the web page is also an advanced method.
This allows developers to utilise lower-resolution placeholder images that load faster on poor connections. It’s worth noting that the image and video width and height properties must still be specified in the code to prevent layout shifts.
5.2 Add Dimensions to Avoid Layout Shifts
By adding height and width properties to the page’s backend, you can set the image and video dimensions. Apply the height of the section or image/video which affects the layout of the page moves down when the site is loading.
These properties inform the web browser how much space is required for each picture and video on the page, based on the size of the user’s screen.
Large layout shifts are bound to happen when developers use CSS to resize and alter pictures and video elements on a web page.
This is due to the fact that page space for the image or video will only be allocated once it has been downloaded.
After downloading, it will take up some page space until it can be displayed where it belongs.
This results in a significant layout shift on the web page, resulting in an unattractive result.
5.3 Add width and height Attributes to Images and Videos
By adding height and width properties to the page’s backend, you can set the image and video dimensions.
These attributes tell the web browser how much space each image requires.
5.4 Reserve Space for Ads, Embeds and iFrames
This one is a bit more difficult to handle. Ads that trigger CLS can be dealt with by styling the element where the ad will appear. If you format the div to have unique heights and widths, for example, the ad would be limited to certain dimensions. If there is a shortage of supplies and an ad does not appear, there are two options. If an ad-containing feature does not display an ad, you may specify that an alternate banner ad or placeholder image be used to fill the space.
5.5 Optimize Font Delivery (FOUT/FOIT)
Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) can also be caused by downloaded web fonts. Using rel=”preload” in the download link for the web font will help avoid this. Lighthouse can assist you in determining the cause of CLS.
6. CLS scores we achieved using above techniques
