Javascript 为什么我的Google PageSpeed Insights分数降低了这么多？ 戳

对于桌面，我有一个页面速度得分不错的网站（目前为96分）：

阶段 我正在努力提高分数（主要是针对移动设备），但不知怎么的，我把分数弄得更糟了（目前桌面上的分数是69分）：

问题 在将网站从Angular（第一个链接）转换为纯JavaScript（第二个链接）的过程中，我成功地将桌面Google PageSpeed Insights得分从96降至69

我已经大量减少了JavaScript和其他资源的数量（prod上的2MB比stage上的500KB）

分析 通过这些数字，我发现prod的FCP（第一个内容绘画）为0.7秒，而stage的FCP为2.0秒。这对我来说似乎很奇怪，因为舞台应该快得多，但显然慢得多

查看缩略图的移动时间表（桌面有点难看），似乎stage可以更快地呈现第一个“完整内容”：

我突出显示了那些在视觉上看起来“完整”的（舞台在顶部，prod在底部）

截图 下面是一些截图，您可以看到我所做的事情（每次运行时，PageSpeed Insights都有相当大的差异）

现阶段：

以下是制作：

更改摘要 以下是我在努力提高分数时所做的主要事情：

• 我将JavaScript从角度转换为普通JavaScript，显著减少了呈现页面所需的JavaScript
• 我延迟加载JavaScript（例如，Google Maps JavaScript在需要时才加载）
• I延迟加载图像（例如，幻灯片最初仅加载第一个图像）
• 我减少了DOM元素的数量（从4600个减少到1700个）
• 我正在使用HTTP/2ServerPush尽可能快地加载新的纯JavaScript

这些变化应该会提高分数

问题:

---

你知道为什么尽管我尽了最大努力，PageSpeed得分还是下降了吗？

我建议你研究一下

Prod

和

Staging

环境中第三方脚本的不同之处

大多数时候，当我遇到pagespeed问题时，是第三方脚本导致了这个问题。YMMV，不过

只是一些开始的指针，当我比较两者之间的统计数据时，我注意到这个特定的Witia脚本的工作方式非常不同，可能不是脚本本身的问题，但它的嵌入方式不同或是其他什么

在产品上

• Wistia：主线程阻塞时间：3ms（部分：最大限度减少第三方使用）
• Wistia：总CPU时间：87毫秒（部分：Javascript执行时间）
• Wistia：脚本评估：76毫秒（部分：Javascript执行时间）

登台时

• Wistia:主线程阻塞时间：229毫秒（部分： 减少第三方代码的影响）
• Wistia：总CPU时间：425毫秒
• Wistia：脚本评估：376毫秒

---

我建议您研究在

Prod

和

Staging

环境中如何包含第三方脚本之间的差异

大多数时候，当我遇到pagespeed问题时，是第三方脚本导致了这个问题。YMMV，不过

只是一些开始的指针，当我比较两者之间的统计数据时，我注意到这个特定的Witia脚本的工作方式非常不同，可能不是脚本本身的问题，但它的嵌入方式不同或是其他什么

在产品上

• Wistia：主线程阻塞时间：3ms（部分：最大限度减少第三方使用）
• Wistia：总CPU时间：87毫秒（部分：Javascript执行时间）
• Wistia：脚本评估：76毫秒（部分：Javascript执行时间）

登台时

• Wistia:主线程阻塞时间：229毫秒（部分： 减少第三方代码的影响）
• Wistia：总CPU时间：425毫秒
• Wistia：脚本评估：376毫秒

您遇到的问题 你已经做了很多正确的事情，但是你的分数因为

第一次有意义的绘画

和

第一次有内容的绘画

查看加载顺序等，我注意到主HTML文件的大小实际上增加了33%，从60kb增加到81.6kb

这是第一个指示出问题所在的指示器，因为在浏览器开始考虑渲染之前，必须加载所有HTML

下一个问题是Lighthouse（PSI背后的引擎）向您显示没有渲染阻止内容，但我认为该方法在显示阻止渲染的内容方面并不完美

您的站点仍然需要

SVG徽标

和

icomoon

文件来呈现折叠上方的所有内容

在主站点上，这些内容被提前加载，而在临时站点上，这些内容被推迟加载，并且开始加载的时间要晚得多，这会延迟您的

第一次内容绘制

等

可能还有其他的东西，但我一眼就发现了一对

如何修复我提到的两个项目

HTML大小

-可能会将一些

JSON

等外部化。您已经内联了很多内容，而是懒散地将其加载（只是建议，尚未探讨是否对您可行）

SVG徽标

-修复简单，抓取组成徽标的实际文本并将其内联，而不是使用外部资源

icomoon

-不太容易修复，但可以将所有图标替换为内联

svg

奖金-通过将图标从字体更改为

SVG

，您可以帮助那些拥有自己的样式表覆盖字体的人实现可访问性（因为图标的字体已经过时，毫无意义）

奖金2-少一个请求

怎么

<script src="/preload.js" defer></script>

// Optimization to preload all the JavaScript modules. We don't want to server push or preload them
// too soon, as that negatively impacts the Google PageSpeed Insights score (which is odd, but true).
// Instead, we start to load them once this file loads.
let paths = window.preloadJavaScriptPaths || [],
    body = document.querySelector('body'),
    element;
paths.forEach(path => {
    element = document.createElement('link');
    element.setAttribute('rel', 'preload');
    element.setAttribute('as', 'script');
    element.setAttribute('crossorigin', 'anonymous');
    element.setAttribute('href', path);
    body.appendChild(element);
});