我正在运行一个 Angular 应用程序，该应用程序在谷歌页面洞察中的得分非常低（移动设备为 13，桌面设备为 43）。我在 Nginx 服务器上运行它，所有压缩和缓存问题都从 Nginx 端解决，但它在页面洞察力方面仍然显示非常低的分数。 页面中只有一张图片，并且已经被压缩了。
错误是删除未使用的 javascript 和 css 文件。但是他们显示错误的文件是从角度生产构建生成的构建文件。我不知道这些文件是如何被使用的。我在这里附上错误的屏幕截图。请帮我解决这些问题。
【问题讨论】：
标签： angularjs nginx pagespeed google-pagespeed lighthouse
问题是 Zone.js - Zone.js 正在减慢谷歌页面上的应用程序速度，我有同样的问题（多年来）。您也可以通过禁用 polyfills 上的 zone.js 来尝试，然后将 zone.js 文件添加到资产上并作为脚本标签加载到 index.html 上，您将看到问题，然后禁用 zone.js 标签和运行灯塔。
测试谷歌页面速度：
【讨论】：
并不是文件未被使用，而是大部分文件包含未执行/渲染初始页面所需的代码。
您想要做的是将您的 JavaScript 分为“必要”和“非必要”。
“基本”是渲染/使用“首屏”出现的任何内容（不滚动显示的内容）所需的一切。其他一切都是“非必要的”，因为页面可以在没有它的情况下呈现，并且可以在后台加载。
这一点的重点是感知速度，网站可能需要相同的时间来加载整体，但如果你像这样拆分你的 JS，它的加载速度会更快，帮助转化率等。
要实现这一点，您要么必须手动找到所有必要的 JS 并将其单独打包，要么使用 tree-shaking 等方法删除未使用的代码，然后使用 code-splitting 先服务高优先级 JS（文章链接是我在 Angular 中的代码拆分中发现的第一个，恐怕您必须自己进行研究，因为我不熟悉 Angular 工作流程）。
下面是一个简单的方法，可以在您识别出任何非必要的 JS 后延迟加载它，该方法一直可以追溯到 IE9。
var dfr = function () {
var n1 = document.getElementById("ds");
var r1 = document.createElement("div");
r1.innerHTML = n1.textContent;
document.body.appendChild(r1);
n1.parentElement.removeChild(n1);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf)
raf(function () {
window.setTimeout(dfr, 0);
});
else
window.addEventListener("load", dfr);<head>
<noscript id="ds">
<script src="some-script-that-is-not-essential.js"></script>
</noscript>
</head>【讨论】：
defer 或 async 添加到脚本中（如果您的站点依赖于依赖项的加载顺序，异步会更难）。然后，您需要开始处理站点上的其他事情，例如内联关键 CSS 等。此外，对于“初始服务器响应时间”，您似乎正在查询数据库或动态构建内容，缓存页面是一个很好的步骤在那里。
async 和 difer，但没有任何帮助