Google洞察力显示角度应用程序的性能非常低

时间:2020-08-22 09:52:54

标签: angularjs nginx pagespeed google-pagespeed lighthouse

我正在运行一个有角度的应用程序,该应用程序在google页面见解中显示的得分非常低(移动设备为13,台式机为43)。我在Nginx服务器上运行此命令,所有压缩和缓存问题都从Nginx方面解决,但在页面洞察力方面仍然得分很低。 页面中只有一幅图像,并且已经被压缩。

Erros将删除未使用的javascript和css文件。但是它们显示的错误文件是从有角度的生产版本生成的版本文件。我不知道该文件如何被使用。我在这里附上错误的屏幕截图。请帮助我解决这些问题。enter image description here enter image description here enter image description here

2 个答案:

答案 0 :(得分:0)

不是文件未使用,而是文件中有很大一部分包含未执行/不需要呈现初始页面的代码。

您要做的是将JavaScript分为“必需”和“非必需”。

“基本”是呈现/使用“折叠上方”显示的所有内容(无需滚动显示的内容)所需的所有内容。其他所有内容都是“非必需的”,因为页面可以在没有页面的情况下呈现,并且可以在后台加载。

整个过程的重点是感知的速度,该网站可能需要花费相同的时间来整体加载,但是如果您像这样分割JS,它的加载速度似乎会更快,从而有助于转化率等。

要实现此目的,您要么必须手动找到所有必需的JS并将其分别打包,要么使用诸如tree-shaking之类的方法来删除未使用的代码,然后使用code-splitting首先提供高优先级的JS。 (链接的文章是我在Angular中发现的第一篇有关代码拆分的文章,由于我不熟悉Angular工作流程,因此您必须进行自己的研究)。

延迟加载JS

下面是一种简单的方法,一旦您发现它可以一直回溯到IE9,就可以延迟加载任何非必需的JS。

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>

答案 1 :(得分:0)

问题是 Zone.js - Zone.js 在 google 页面速度上减慢了应用程序,我有同样的问题(多年来)。您也可以尝试通过禁用 polyfills 上的 zone.js,然后在资产上添加 zone.js 文件并加载为 index.html 上的脚本标记,您将看到问题,然后禁用 zone.js 标记和运行灯塔。

测试谷歌页面速度:

  1. polyfill 中的正常 zone.js。
  2. 在 index.html(头部)上带有 script 标签的资产中的 Zone.js - 确保禁用 polyfills
  3. 在 polyfills 和/或 index.html 上禁用 zone.js