How Ads Impact Core Web Vitals and What Publishers Can Do About It?

Now that you know what Core Web Vitals are, it’s time to understand how ads affect the three metrics. Why?

Why should publishers care about Core Web Vitals?

Because Core Web Vitals not only affects the ranking factor but also affects the page speed score of the website. Thus, ad revenue. According to a survey done by AdSense, the revenue generated by web traffic gets doubled when the website is loaded within 5 seconds than a website loading after 19 seconds. 

Image Source – AdSense Blog

Table of Contents:

• How to Mitigate the Impact on Cumulative Layout Shift?
• How to Mitigate the Impact of First Input Delay?
• How to Mitigate the Impact of Largest Contentful Paint?

Impact on Cumulative Layout Shift (and How to Mitigate it)?

Ads may cause layout shifts on the web pages as they are usually loaded asynchronously. To put it simply, when the user’s browser fetches the ads, the rest of the page continues to load the content., If you don’t reserve sufficient space for ads, they can displace the content on the page, resulting in a sub-optimal user experience. 

It also helps you to avoid invalid clicks and keep you from a double click penalty.

During the entire ad-serving process on a webpage, shifts in the layout (of content, images, or any other embedded element) may happen due to various reasons. Let’s discuss them one by one.

How to Mitigate the Impact of CLS?

Here’s how you can reduce the Cumulative Layout Shift (CLS).

Reason #1

Expanding or collapsing an ad slot (based on its configuration) when a display ad is called. Many publishers use the collapseEmptyDivs ( ) function to collapse the ad slots when there is no ad to display. However, this can introduce unwanted layout shifts of the web elements on the page.

Solution

To mitigate the impact of layout shift and reduce Cumulative Layout Shift (CLS), use Google Ad Manager Historical report to know the fill rate of ad slots and ensure that:

• The ad slots that are likely to be filled should always start out ‘expanded’. 
• The ad slots that are unlikely to be filled should always start out ‘collapsed’.

Reason #2

Adding Fluid ad slots on the webpage. As you know fluid ad slots do not specify a fixed set of ad sizes and automatically resize to fit the ad creative. Due to this, you cannot reserve ad space for the fluid ad slots prior to requesting ad content.

Solution

To mitigate the layout shift, If you use fluid ads, try:

• Using the fluid size for ad slots that are below-the-fold (BTF), and
• Fetching the fluid ad slot as soon as possible so that by the time users view the ad slot, it is already resized.

Reason #3

Adding multi-size ad slots on the webpage. As we said earlier, the layout shift can be avoided by reserving enough ad space. But this method works fine for static ad slots, not for multi-size ad slots.

Solution

For multiple size ads, we suggest you:

• Reserve space for the largest ad size configured to serve, and
• Reserve space for the ad size most likely to be served. You can use Google Ad Manager reports to understand the historical fill data and reserve the ad space for the most likely ad to serve.

This suggestion comes with a risk as the ad creative served may not be of the exact size as defined. The ad creative may be smaller or larger than the reserved ad size. When this happens, users will see blank space around the ad or the ad may appear with cutoff or extended content out of the slot.

What can you do? Limit the range of ad sizes able to serve to the ad slot and resize the ad slot to fit the ad creative.

Additional Tip: Be careful when placing non-sticky ad slots near the top of the viewport. There should be enough space to ensure that the ad doesn’t move the headlines or other elements.

Image Source: Google Developers

Impact on First Input Delay (and How to Mitigate it)?

Not all users will interact with your website when they visit. For this reason, there are some websites that can have a 0 FID score. But chances are very less that you have 0 interactive elements on your website. Every publisher has at least basic interactions like scrolling, drop-down menu, zooming, etc.

Further, when you display ads, it can be a responsive ad or a video ad. Such ads require users to interact with them. And if the third-party ad codes block the rendering of your web page or take more time to render the ad, then FID will be bad as it focuses on the RAIL model.

Image Source: Google Developer

How to Mitigate the Impact of FID?

Reason

Third-party JavaScript execution delay. As you know, ad serving includes third-party ad tags and that can keep your website’s network busy and increase the interaction latency. Hence, unresponsive pages. 

Solution

• Remove third-party JavaScript – Your website has hundreds of JavaScript libraries and some of them might be of no use. Such unused JavaScript codes should be removed to reduce the latency caused by JavaScript. You can use the PageSpeed Insights tool to find out which redundant element has contributed to the latency and remove it.

• Optimize for Lazy loading – Lazy-loading is one of the best methods to improve page speed and Web Vitals. Ads are important and we all know that. But users visit your website for content, not ads. By implementing lazy-loading, you can deliver the content and ads faster. The technique is highly recommended for low priority ads (such as house ads) or below-the-fold ads.

Image Source – Web.dev

• Load ad tags asynchronously – Synchronous loading of ad tags blocks both content and ads from loading fast. Because of that, it is always recommended to load third-party scripts asynchronously. So, use the ‘async’ attribute to load Google Publisher Tags. Here’s how you can do it:

<script async src=”https://securepubads.g.doubleclick.net/tag/js/gpt.js”></script>

Impact on Largest Contentful Paint (and How to Mitigate it)?

As LCP reports the time taken to render the largest element of the web page, the metrics will only be impacted if any of your display or video ad ATF takes more time to render. For example, if an ad is placed above the fold of a webpage and is larger in size than other elements (cover image, etc.), then it may impact the metric. Moreover, publishers try to load the ads as fast as possible so that the visitors can view or click on the ad before getting distracted by any other element of the page. If you want to know how to test your ads load speed we have an article for you. 

But this strategy can lead to higher LCP if the header bidding auction takes time, then some of the resources of your website’s network will be occupied with the auction. Due to this, the network may have fewer resources to load the other important content of the page. In the end, the Largest Contentful Paint (LCP) goes up.

How to Mitigate the Impact of LCP?

Solution?

If a large and above-the-fold ad takes time to render, move it to below-the-fold and ensure it loads faster. Also, make sure that the header bidding auction or waterfall set-up is not increasing the latency. To fasten the page loading while running header bidding auctions, we have an article that you will find helpful.

Conclusion

Improving the Core Web Vitals and optimizing ads is not an easy task. It requires a deep understanding of user experience along with ad experience. As the proposal of Core Web Vitals will most likely come into effect in mid-2021, you’ve enough time to optimize your website’s content and ads for these performance metrics. Though some suggestions might require technical knowledge, the efforts will surely reduce the loading speed of pages and help you maintain the SERP rankings. Consequently, better traffic and better ad revenue.

And that’s how ads impact core web vitals. Still not able to pass the Core Web Vitals assessment? Leave a comment and we’ll help you find a solution for it.