Most websites are created to be accessed from different types of devices with different screen sizes and resolutions. However, holding the exact experience across different platforms can be tough and challenging. In the matter of web development, users navigating from page to page on a website may often experience a change or page loaded inappropriately, the text becomes weird, images not loaded or not in their position or the entire page layout alters. This known as Cumulative Layout Shift (CLS), is one of three metrics in Google’s Core Web Vital metric, and measures how the website is stable visually. This visual stability is calculated in the form of a score that determines how many page layout shifts occur without interacting with the page.
A good CLS score ranges from 0.0 to 0.10. A score above 0.1 and below 0.25 needs improvements and a score above 0.25 is a poor score. No doubt that WordPress makes multi-platform web design smooth and easy. However, in any form of software development, building one solution that fits all can be complicated. Moreover, CLS exists for WordPress as well.
This article will explain some tips on how we can improve Cumulative Layout Shift (CLS) for WordPress.
Set Dimensions For The Media Files
Media files such as images and videos without dimensions cause the layout shift. Because the web browser does not know the size of these files and doesn’t know how much space to allocate to them while loading a webpage. Moreover, after the page is loaded, these files will be taking more space than required and the other content’s position will be disturbed as well. Thus setting dimensions for the media files is highly important. It can be done by adding size properties in the source code.
Use Default fonts
The text is one thing that must stay visible during page loading. One must use default fonts instead of using third-party font websites. Fetching fonts from other websites will load slowly and cause a layout shift. If the users want to use fonts from the font websites then plugins like OMGF shall be used to host the fonts locally and load them faster.
Set Ads, Embeds, and Iframes’ Dimensions
The exact issue of dimension goes for ads, embeds, and iframes. Not setting dimensions for ads, iFrames and Embeds can take much larger space and destroy the alignments of other elements as well causing CLS. Some best practices to avoid layout shifts for ads Embed and iframes is to assign fixed dimensions and reserve the large possible space for them so that they have enough space and dot alter the position of other content after web page loading.
Address Dynamic Content
Dynamic content including banners, email, and forms can also influence Cumulative Layout Shift. Therefore, users should avoid placing new content unless it is initiated by user interaction, as CLS counts the layout shifts that occurred with the page loads.
You Might Also Like to Read: 7 Easy Steps to Achieve Better WordPress Security
Avoid issues with Fonts
Web fonts can cause layout shifts and an unpleasant user experience while loading the page. Third-party fonts used in a website/ webpage can cause CLS in two ways:
- Flash of Unstyled Text (FOUT): In which text on the page appears in unstyled or fallback font while the page is loading. After the page loading, the complete fallback font is replaced by the custom font.
- Flash of invisible text (FOIT): It takes some time to load a custom font till then users have to wait before seeing any text displayed.
There are several ways to fix issues with fonts that are:
- Use preload font files in which the visitor’s browser downloads the font file and eliminates FOIT/FOUT. Pre-loaded fonts can be used using these plug-ins:
- WP Rocket
- Permatters
- Combine the WordPress Rocket feature enabled with the CSS line “font-display”. The CSS font-display determines how font files are fetched and displayed by the browser.
Disable animations
Animations shall be disabled for the mobile versions because they can increase the loading time of the website. Else CSS transform and translate options hall be used to use animations on the webpages or mobile versions.
The minimal CLS for the website the greater the WordPress site speed and performance. It all depends on how we have modified the elements used in the website so that when the page renders nothing goes out of the set alignment on all types of screens and resolutions. The more responsive the website is, the greater the chance of users revisiting it. Above shared some tips to boost WordPress Cumulative Layout Shift (CLS) score.
For Discount and Offers Visit our Official Twitter Page
