13 May

Core Web Vitals – Effective Tips for Optimizing CLS on WordPress

Core Web Vitals - Effective Tips for Optimizing CLS on WordPress

Are you struggling with Cumulative Layout Shift (CLS) on WordPress? We have discussed some of the useful tips for optimizing CLS on WordPress. Cumulative Layout Shift or CLS is one of three key metrics in Google’s new Core Web Vitals project. Other than just being a good measure of your website’s user experience, Google announced that it will start using Core Web Vitals as one of the essential ranking factors from May 2021.

If your CLS score is not coming within Google’s recommended range, you’ll need to fix it now to touch Google’s threshold, avoid unforeseen issues, and subsequently create a better experience for your users. Being a reputed WordPress website development company, we have explained what Cumulative Layout Shift is and how it is related to your WordPress site. We have shared some WordPress-specific tips to increase your Cumulative Layout Shift score.

Cumulative Layout Shift on WordPress – A Brief Overview

Have you ever come across a situation where you’re reading an article on a publisher website like news and the content of the article gets pushed down when new ads are loaded? That can be very annoying! It is the best example of Cumulative Layout Shift.

CLS on your website occurs when the site’s content ‘shifts’ around as it gets loaded. As it is an annoying experience, Google is encouraging webmasters to focus on and improve this key metric.

What is a Good CLS Score?

To help you understand your WordPress site’s CLS, Google provides a range of three possible values:

  • Good – within 0.1
  • Needs Improvement – between a range of 0.1 to 0.25
  • Poor – above 0.25

Pro Tips to Identify Elements that Are Shifting on Your WordPress Site

As CLS is one of three key metrics in Core Web Vitals, it is imperative that you increase its score on your WordPress website. However, before you follow the actionable tips to increase your CLS score on your WordPress website, you need to find what the problems are. Luckily, Google helps you find these easily with PageSpeed Insights.

  • Google’s PageSpeed Insights

First, go to PageSpeed Insights and analyze any of your site’s URLs, let’s say for example home page. You will see the summary of your Cumulative Layout Shift score right at the top. With PageSpeed Insights, you can identify the key elements that are ‘shifting’. To find these elements, you need to scroll down to the Diagnostics section and enlarge the Avoid large layout shifts guidance.

You can find that the heading of our portfolio is the greatest contributor to layout shift. However, it is still quite small. Make sure to check the Mobile as well as Desktop results. For example, while our website has three elements that Google flags while considering the mobile result, it does not have any flagged elements on the desktop results.

You may also notice something like this or a different set of shifting elements both in mobile and desktop results.

  • Chrome Developer Tools

Another option to view how your website’s content shifts are to use Chrome Developer tools to reduce your connection artificially. This makes it much easier to identify even slightly shifting content.

In Chrome Developers Tools, you need to go to the Network tab and use the Online drop-down to fix a custom value that is very slow, for example, 60kb/s download.

After that reload your WordPress website and you’ll be able to see more clearly how your site’s content is shifting when it gets loaded.

Once you are aware of what is shifting, you can now put your effort into resolving those issues. If you have less expertise and knowledge of the technicalities of these tools and WordPress, it is advisable to hire WordPress developers who will get the job done correctly, adhering to Cumulative Layout Shift best practices.

How to Optimize Cumulative Layout Shift on WordPress?

Unlike enhancing the Largest Contentful Paint on WordPress, optimizing your Cumulative Layout Shift can be a technical process. Most of these solutions involve digging deeper into the code. Therefore, it is best to approach a WordPress website development company for professional technical assistance.

However, it is difficult to avoid ever looking at code here, but we’ll try to include plugin solutions wherever possible.

  • Make Sure to Set Image Dimensions

If you do not set the dimensions of the image in your website’s code, your images can lead to the shifting of your content as they get loaded.

Fortunately, if you’re adding images using the WordPress editor, WordPress will automatically do the job for you. It can also set up responsive images using srcset. If you’re manually adding images to your website through code, you need to include the dimensions every time. You need to see the width and height attributes in the image HTML.

Example:

<img src=”https://wplift.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024×874.png” alt=”SendGrid API keys” width=”1024″ height=”874″>

  • Make Sure to Set Dimensions for Embeds/iframes

Just like images, you also need to set dimensions for any embed or iframes that you are using.

Let’s say, for example, if you’re adding a YouTube video or Google Maps, you need to specify the height and width. You can also load a placeholder before the embed which is a good practice for performance. You can find numerous solutions that allow you to replace the YouTube embed with a placeholder image until a user plays the video by clicking on it. Some of the useful options include WP Rocket or the free Lazy Load plugin offered by the WP Rocket team.

  • Keep Space for Ads

Ads are simply another type of embed. Ads are one of the biggest contributors to Cumulative Layout Shift. There may be times that you might have landed on a website where the content kept shifting around due to late-loading ads.

You can fix this problem by reserving space for your ads in your website’s code. For example, if you want to show a 160×600 skyscraper ad in your sidebar, you could place it inside a <div> with the ad’s dimensions instead of simply adding the ad code directly. This way, sufficient space is reserved even if the ad content has not loaded yet. So, when the ad content loads, it doesn’t cause any shift.

Be cautious about placing ads near the top of visitor’s viewport because these placements are the ones that contribute to layout shifts.

  • Resolve Issues with Font Loading

One of the biggest problems with layout shift is how your custom fonts load. If you’re using Google Fonts or Adobe Fonts, those fonts can result in layout shift in two ways:

  1. Flash of Invisible Text (FOIT)
  2. Flash of Unstyled Text (FOUT)

The main issue with this is that a visitor’s browser might try to show the text before the custom font loads. When the custom font loads, then it updates the text’s styling which can cause it to shift as it switches from unstyled text to custom font.

You can fix this issue in different ways. One way is to preload essential font files. This compels visitors’ browsers to download the font file immediately which reduces the possibilities of FOIT/FOUT. However, you need to make sure that you are only preloading the most important resource, for example, the font for your above-the-fold content. But, using too much preloading will affect the speed of your website. You can create a list of font assets to preload with the Autoptimize plugin in the Extra section.

In the case of Google Fonts, you need to host the font file locally and preload it that way. You can set up this using the OMGF plugin, which comes with a decent feature to automatically preload the above-the-fold fonts.

You can even use a system font stack to eliminate the issues. This not only solves font loading issues but also reduces the number of HTTP requests and increases the speed of your website. With themes like GeneratePress, it is very easy to use a system font stack. However, the drawback is that you enjoy greater flexibility when it comes to design or style.

  • Be Cautious When Injecting Content Dynamically

If you are injecting content dynamically into email opt-in forms, GDPR, and other related content, then you need to be careful to prevent layout shift. It is wise to never dynamically inject content above existing content as long as it comes from any user interaction, such as clicking a button.

If you’re considering dynamically injecting some CTA element, then you need to place it below your blog post instead of putting it at the top or somewhere in the middle.

How to Increase Your WordPress CLS Score?

By following the above-mentioned tips, you can increase your WordPress Cumulative Layout Shift (CLS) score and achieve a higher ranking. As Cumulative Layout Shift is one of three metrics in Core Web Vitals, you’ll also need to focus on the other ones.

If you’re new to the technicalities of WordPress, you can hire WordPress developers from us to optimize your WordPress CLS properly.

Frequently Asked Question

FAQ-WordPressIndia

Q.1. Can you help me optimize my WordPress site for higher performance and speed?

Yes, of course. As a full-service WordPress website development company, we specialize in WordPress site optimization services to improve your site’s performance and speed.

Q.2. Is it possible to optimize a WordPress website without using plugins?

Yes, we can optimize your WordPress website without using plugins. Hire WordPress developers from us to optimize your WordPress website.

Q.3. Do you provide after-sale support and maintenance?

Yes. As a professional WordPress website development company, we offer dedicated support and maintenance service after the project delivery.

Looking for Reliable and Effective WordPress Optimization Services?