CODEWITHSUNDEEP
javascriptreactjsnext.jspagespeed
GuiPab
GuiPab

Reputation: 475

NextJs - Improve "Total Blocking Time" on Google Pagespeed


I'm using NextJS and i'm pretty new on that. I'm trying to increase my ranking on Google Pagespeed, and i already did some good progress on that.
As you guys can see on the screenshot, the only bad metric is the "Total Blocking Time":

enter image description here

If you guys want to try the page speed, thats the link: Google PageSpeed

Right now i'm running out of options on how to make that one better, i'm alredy dynamically importing my components, removed unused JS, i'm using the NextJs best practices.

I'll really appreciate any help that you guys could have

Thanks in advance

Upvotes: 4

Views: 17324

Answers (2)

An2ta
An2ta

Reputation: 19

Actually, dynamically render everything is an bad practice, hence more bad performance. You will want to dynamic import component that doesnt include in the first build time, for example, a footer or chatbox.

Upvotes: 0

angel.bonev
angel.bonev

Reputation: 2232

So lets start from what is TBT as the docs says

The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.

How to improve your TBT score You need to start with a Lighthouse performance audit

So if you find some action that aren't necessary you need to delay it. Most common are :

  1. Unnecessary JavaScript loading, parsing, or execution. While analyzing your code in the Performance panel you might discover that the main thread is doing work that isn't really necessary to load the page.
  2. Inefficient JavaScript statements. For example, after analyzing your code in the Performance panel, suppose you see a call to document.querySelectorAll('a') that returns 2000 nodes. Refactoring your code to use a more specific selector that only returns 10 nodes should improve your TBT score.

For example you have some element in the footer or the hole footer it self. You can split your javascript and css and loaded that part dynamically. You can use IntersectionObserver , the support for that is good enough, but it's allways a good practice to ensure if not supported:

Example code (in vanilla javascript):

let IOObjects = [
    {"idToObserve": "myFooter", functionToTrigger: "someFinction"}
];
let someFinction = () =>{
    //load some events, another js or another css
}
IOObjects.forEach(function (e) {
    if (document.getElementById(e.idToObserve)) {
        if (!window.IntersectionObserver) {
            window[e.functionToTrigger]();//Trigger the function if not supported
        } else {
            let observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.intersectionRatio > 0) {
                        observer.unobserve(entry.target);
                        window[e.functionToTrigger]();
                    }
                });
            }, {rootMargin: '50px 0px', threshold: 0.01});
            observer.observe(document.getElementById(e.idToObserve));//Observe the element if it's visible
        }
    }
});

You can read more about rootMargin

Upvotes: 8

Related Questions