How to fix CLS issue in your blog or web ?

 

Fixing CLS issues is a big deal. That's because most of your competitors won't fix CLS problems and as a result won't rank well compared to those who fix CLS problems. So let's learn to understand the real CLS problem, and then fix the CLS problem.

Want to know how to fix CLS? Your visitors too! Actually, they don't care how to fix CLS - they care that it didn't happen.

I recently fixed a bad case of CLS and documented the process. Check out my hands-on demo and explanation or continue reading below.

What is CLS ?

CLS, otherwise known as cumulative layout shift, is a measure of how much a web page shifts. Pages usually shift on load, but Google says it measures "over the entire life of the page."

Why is this important?

The higher the CLS, the worse the user experience.

It's really not fun to go to a web page and start reading the content for something else to load and pan the content. You then have to find where you read and hope the page doesn't shift anymore.

Another example is if you try to click on something and the target shifts because the page loads an additional item.

Your visitors care about "layout shifting," and as a result, so does Google. CLS is now the main ranking signal in Google's search algorithm.

Acceptable CLS Limits

A perfect CLS will result in a score of zero, meaning the page doesn't shift on load.

That's an unfair goal. Not only is it difficult to achieve, but sometimes CLS is a by-product of increased performance. For example, there is a tactic of loading the system default font first then loading the custom font after the page has finished loading. The font change causes less CLS, but delivers content to visitors faster.

Google defines acceptable standards for CLS.

Google categorizes cumulative layout shifts in three tiers: good, needs improvement, and poor.

• Good is <= .1
• Needs improvement is > .1 and <= .25
• And everything greater than .25 you need to get your shit together

How to Find CLS Issue

Step 1 - You need to use Chrome or Chromium as there is a built-in Lighthouse profiling tool

Step 2 - Go to the webpage you want to analyze

Step 3 - Right-click on the webpage and click "Inspect"

Step 4 - Navigate to the "Lighthouse" tab on the top of the drawer that opened

Step 5 - Check "Performance" and either "Mobile" or "Desktop" (whichever one you want to profile)

Step 6 - Ensure the visible website is sufficient to profile. If the drawer is taking up too much space, click the three dots in the top right of the drawer and change "Dock side" to unlock in a separate window.

Step 7 - Click "Generate report"

Step 8 - Note the Cumulative Layout Shift score

Step 9 - Click "View Original Trace"

Step 10 - Check the "Web Vitals" box to focus on these metrics

Step 11 - Find each of the "LS" that appear on the timeline. LS stands for "Layout Shift" and is marked for each point in the page load where the layout shifted around.

Step 12 - Hover over the top row and align the hover with the LS. The top row shows screenshots of the page load, and you'll see where the shifts are occurring.

Step 13 - By scrubbing back and forth, you should be able to isolate the layout shifts. Make note of them.

How to Solve CLS Issue

We've determined which tools can warn us about CLS issues, the tool to find the exact CLS issue, and finally, let's discuss how to fix CLS issues.

The primary CLS issue comes from an image loading in and displacing the content. It's like a boat dropping into the water and pushing the water out.

To fix this CLS issue, we need to create a placeholder for where the image will load into. The placeholder will then get replaced by the image, and no displacement will occur.

The following solution to CLS issues will work for images, iframes, and other content that loads in and displaces surrounding content.

You need to set a fixed width and height on the element.

Take for example an image's html:

<img src="/cat.jpg">

You'll need to make it look like the following, but with your own dimensions.

<img src="/cat.jpg" width="100%" height="450">

The image HTML loads in before the actual image which is the cause of most CLS issues.

By appending the width and height, you are setting the dimensions of the image HTML before the image loads in. Once the image loads in, it'll just take up the space reserved for it.

This method will resolve most CLS issues.

How to Lazy Load Video YouTube Embed in Blogger?

 

Have you ever thought about how important it is to implement lazy loading on YouTube videos embedded in website/blog content? Yes, you are right, the application of lazy loading on youtube videos embedded on the website is certainly very important, because it will keep the optimation website's performance.

Therefore this time I will share the lazy load youtube video script to blogger friends for free. This is the best script for lazy loading youtube videos and has been proven to be able to maintain optimal website/blog performance even though there are many embedded youtube videos.

Don't believe it yet? Take a look at the comparison of the results of the following analysis before and after using the lazy load youtube video script.

I've done 3 website performance tests.

1. Test website performance without embed youtube video.

2. Test website performance with embed youtube video, but without lazy load script

3. Test website performance with embed youtube video and lazy load script.

How are you interested in using lazy load youtube videos? If so, follow the steps on how to install the lazy load youtube video script below.

Step 1. Go to your blogger admin dashboard. Select "Post" menu >> Fill the post title >> select "HTML View". And Copy this HTML Code :

<div class="youtube-iframe-container">
    <iframe class="youtube-video iframe-video cordial-lazyload" 
        data-src="https://www.youtube.com/embed/xxxxxx"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

Change red text color with your video embed id. and Publish.

Step 2. In your blogger admin dashboard. Select "Theme" menu >> select down arrow beside "Customize" then select  "Edit HTML".

Step 3. In the box press "CTRL + F" to search type "</skin>" . Copy code bellow before "</skin>

    .youtube-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

and Save theme.

Step 4. In your blogger admin dashboard. Select "Layout" menu >>  in the navbar select "Add Widget" then select "HTML/Javascript". And copy javascript code below :

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.cordial-lazyload");
            var iframeObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && entry.target.src.length == 0) {                    
                        entry.target.src = entry.target.dataset.src;
                        iframeObserver.unobserve(entry.target);
                    }
                });
            });

            iframes.forEach(function (iframe) {
                iframeObserver.observe(iframe);
            });
        } else {
            var iframes = document.querySelector('iframe.cordial-lazyload');

            for (var i = 0; i < iframes.length; i++) {
                if (lazyVids[i].getAttribute('data-src')) {
                    lazyVids[i].setAttribute('src', lazyVids[i].getAttribute('data-src'));
                }
            }
        }
    })
</script>

Then Save the widget. 

And Finish, now you can test your blog/web performance with ligthouse.

How to solve the LCP Issue/ problem on core web vitals due to google adsense ads?

 

Performance blogs or websites will eventually drop when advertised by third parties such as ads on Google Adsense and other digital advertising. To avoid that, a special method is needed to load ads so that loading or website performance is maintained.

Generally the method used to load ads so as not to affect the performance of the website/blog is to apply lazy load to fish (adsense), therefore here I will give a fairly complete review of lazy load adsense.

You can solved the LCP Issue/ problem on core web vitals due to google adsense ads with Lazy Load Adsense.

Without Lazy Load Adsense your LCP can be poor or higher than 4s. The best LCP is lower than 2,5 s.

What is Lazy Load Adsense?

Lazy load adsense is a lazy loading or smart loading script on adsense ads to reduce the impact of third party code on the website and maintain optimal website performance.

There are several methods for making smart loading on adsense ads including Ad event listeners, Event-based ad requests and Lazy loading, all three of which can be referred to as lazy load adsense.

Why Should You Use Lazy Load Adsense?

Currently there is no better method than lazy load adsense to solve all kinds of website performance issues caused by third party ads.

There are many things that can be solved with lazy load adsense, related to website/blog performance problems, including:

• Third party webfont load
• JavaScript execution time
• Main-thread work
• Impact of third party code, etc

That's why in my title tag it says, lazy load adsense is the best solution for the performance of websites or blogs that are installed with third-party ads.

Immediately I will share the lazy load adsense script with all of you, there are 3 (three) lazy load adsense scripts that I will share and both lazy load scripts are equally good for maintaining the performance of your website and also support auto ads.

Instructions for Using Lazy Load Adsense

How to use the lazy load adsense script is very easy, you only need to install one of the lazy load adsense script codes in the head or body of the website, then remove all adsense javascript library tags from the website/blog template.

Change your adsense script :

<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

//or a new version of the javascript library
<script async="async" data-ad-client="ca-pub-1234567890123456" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

//or updated version
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4209467777280582" crossorigin="anonymous"></script>

To :

<script type="text/javascript">//<![CDATA[
var lazyloadads=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false===lazyloadads||0!=document.body.scrollTop&&false===lazyloadads)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-420946777728xxxx";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyloadads=true)},true);
//]]></script>

Change the red text with your adsense publisher code

How the Lazy Load Adsense Script Works ?

Lazy Load Adsense is completely different from lazy load images because basically lazy load adsense is a scroll event listener, the adsense javascript library in the lazy load adsense script will only be loaded or run when the user scrolls your page.

And that means that adsense ads will only appear when the user scrolls through your blog or website, if there is no page scrolling activity from the user, the ad will also not be loaded (not displayed).

Lazy Load Adsense From Adsense Policy Side

Google is very open to implementing lazy loading on their ads (adsense), Please see the google help center entitled "Viewability best practices". On that page, Google recommends the use of lazy load adsense or also known as smart loading.

For detail step by step yo can watch this video below.

 

That means Google doesn't care about the use of lazy laod adsense. But according to google the best practice for implementing lazy load adsense is to use the Google Publisher Tag (GPT).

Reference

https://www.cordialblogger.com/2021/04/lazy-load-adsense.html

https://nanokaryamandiri.com/

How to fix send button not working or Blogger contact form not working?

 

 

     A blog should have a contact us page. This is to help users when they want to contact the blog admin, and also the requirements if the blog will be registered with google adsense later. There are several ways to add a contact us page in