NextJS-改进“总阻塞时间”在Google PagesPeed上

发布于 2025-02-10 23:53:25 字数 712 浏览 1 评论 0 原文

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":

如果你们想尝试页面速度，那就是链接：

现在，我已经用完了如何使该方法更好的选择，我正在动态导入组件，删除未使用的JS，我正在使用NextJS最佳实践。

我非常感谢你们可能会

提前感谢的任何帮助

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你在我安 2025-02-17 23:53:25

因此，让我们从 tbt

总阻塞时间（TBT）度量度量第一个内容涂料（FCP）与交互式时间（TTI）之间的总时间（TTI），其中主线程被阻止了足够长的时间以防止输入响应。

>

如何提高TBT分数
您需要从a lighthouse绩效审核

因此，如果您发现某些动作不需要您延迟它。最常见的是：

不必要的JavaScript加载，解析或执行。在性能面板中分析您的代码时，您可能会发现主线程实际上不是加载页面的实际工作。

效率低下的JavaScript语句。例如，在性能面板中分析您的代码后，假设您看到返回2000节点的document.queryselectorall（'a'）的调用。重新分配您的代码以使用仅返回10个节点的更具体的选择器应提高您的TBT分数。

例如，您在页脚或孔页脚上有一些元素。您可以将 JavaScript 和 CSS 拆分，并动态加载该部分。
您可以使用 noreferrer“> intersectionObsererver //caniuse.com/intersectionObserver“ rel =“ noreferrer”>支持因为这已经足够好了，但是如果不支持，这是一个很好的做法：

示例代码（ ）在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
        }
    }
});

您可以阅读更多有关

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 :

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.

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

回复收藏 0 原文