Google Search & Webpage CLS

I spent a good part of the day trying to recover from a loss of search engine ranking. Yeah, I have been super busy dealing with insurance agents and people coming and going. Now things are settling down, I jumped back into the website more so. On to the website stuff.

My biggest hit was a problem called Content Layout Shift, or CLS for short. We had most of the mobile phone pages were as high as 0.44, which is a huge fail.

Now to see this for me I have to logoff and view from a guest level. Yeah this started to explain the problem why the search engine is dropping search results we are falling out of the first place.

Now to fix this problem, being I have a dynamic webpage. Mopar1973Man.Com will allow you on a desktop to pull the window frame smaller width-wise and the webpage will automagically change from desktop, to tablet, then to mobile format screen. Basically, we need to make sure that frames for Google Ads are pre-laid out, in other words, reserve space on the screen for the ad to be placed without skewing any page text or graphics up or down. Inside the backend of the website, I have a way to add CSS scripts to the theme so I can alter the way information is displayed.

Here is my Custom CSS

/* GOOGLE AD CODE FOR RESPONSIVE ADS */
#ipsLayout__main .adsbygoogle { 
  width: 320px; 
  height: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:500px) { #ipsLayout__main .adsbygoogle { width: 480px; height: 300px; } }
@media (min-width:800px) { #ipsLayout__main .adsbygoogle { width: 780px; height: 300px; } }
@media (min-width:1050px) { #ipsLayout__main .adsbygoogle { width: 1040px; height: 300px; } }

Now you have to go back over your Google Adsense code to add a bit of custom code around the Google Adsense code.

<div id="ipsLayout__main" class="adsbygoogle">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>
<!-- Header Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Here is how the magic works.

The custom CSS script creates a container on the webpage. I'm more worried about the height pixel more so than the width. It's the vertical shift of information on the page that is where the issue of CLS comes into play. The CSS script checks the screen size (window) and then, if the window size is at the "min-width" value, then the reserved space is width and height values to the right on the same line. This keeps the layout from moving as the ad loads from Google. The <div> tags in the HTML code of Google AdSense this is what create this container in the code.

The results of the code change below. The Google side panel is on the right showing the CLS value of a few random pages.