NextJs - 改善 Google Pagespeed 上的“总阻塞时间”

Question

我正在使用 NextJS，而且我对此还很陌生。我正在努力提高我在 Google Pagespeed 上的排名，并且我已经在这方面取得了一些良好的进展。
正如你们在屏幕截图中看到的，唯一不好的指标是“总阻塞时间”：

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

现在我已经没有办法让这个更好了，我已经动态导入我的组件，删除了未使用的 JS，我正在使用 NextJs 最佳实践。

我非常感谢你们能提供的任何帮助

提前致谢

Answer 1

所以让我们从文档中所说的TBT开始

总阻塞时间 (TBT) 指标测量首次内容绘制 (FCP) 和交互时间 (TTI) 之间的总时间量，其中主线程被阻塞足够长的时间以防止输入响应。

如何提高您的 TBT 分数 您需要从Lighthouse 绩效审核开始

因此，如果您发现某些不必要的操作，则需要推迟。最常见的是：

1. 不必要的 JavaScript 加载、解析或执行。在“性能”面板中分析代码时，您可能会发现主线程正在执行加载页面并不真正需要的工作。
2. JavaScript 语句效率低下。例如，在“性能”面板中分析代码后，假设您看到对 document.querySelectorAll('a') 的调用返回 2000 个节点。重构代码以使用仅返回 10 个节点的更具体的选择器应该会提高您的 TBT 分数。

例如，您在页脚或孔页脚本身中有一些元素。您可以拆分javascript并css动态加载该部分。您可以使用IntersectionObserver，对此的支持已经足够好了，但如果不支持，确保它始终是一个很好的做法：

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

您可以阅读有关rootMargin 的更多信息