In mid-June 2021 Google’s algorithm will undergo some changes concerning web core vitals. One metric that will increase in importance is the CLS, Cumulative Layout Shift.
In short: this occurs when the page’s layout adjusts as certain elements change in size after the initial page load. This can be font swapping, images loading without a fixed height, and late-loading content added by javascript. The Appwiki partner plugin falls in the latter category, especially if the widget is displayed above the fold. This means when a user loads the page and they are able to see the widget without needing to scroll down the page. This can be noticed as a glitch or jump while the page is loading.
Here is an example of CLS happening:
As you can see the #protip box at the top just pops ups into place after everything has loaded causing the layout shift.
To prevent our plugin from having a negative impact on this metric and thereby on the ranking in Google’s search results, we’ve built a tool that reserves space for the Appwiki widget early in the page loading process to prevent content from appearing to jump
Disclaimer: this solution only solves the CLS issues caused by the Appwiki feeds. It won’t affect other issues contributing to CLS (for example by banners or images).
To enable the solution, the following needs to be added as high up as possible in the head section of pages that use one of our widgets:
<script src="https://proteus.appwiki.nl/prevent.js" async></script>So it should look something like this:
<head>
<script src="https://proteus.appwiki.nl/prevent.js" async></script>
<title>My website about software</title>
<head/>The implementation of this plugin can be done in two ways:
The first option has the advantage that it is simple to implement and will be a quick fix for all pages, so you’ll be done straight away. Additionally, if you want to create new pages with the Appwiki feed, the solution will work straight away. The disadvantage is that the script will also be loaded onto pages where there aren’t any Appwiki feeds, and therefore will be unnecessary.
The second option will require more work, but will not have the previously mentioned disadvantage. With this option you will need to add the script to the <head> section of new pages with the Appwiki feed.
The tool will start measuring the height of the widget after it has been loaded and stores it in our measurements database. During the next page visit it will reserve the space using a css selector that targets the specific widget. Since the height is dependent on the viewport and subject to changes from customizations and advertiser's budgets the heights are separated by viewport and a median of the latest measurements is taken to respond to these changes quickly.