在“消除渲染阻止资源”之后，为什么我得到较低的PageSpeed分数？

Question

我是PageSpeed的新手，试图了解它希望我进行优化的各个方面。有没有我可以遵循的准则，例如可以删除，推迟执行的代码等？我绝不是开发人员。

我的分数随我延迟的每个.js文件而波动。有时会变得更好，有时会变得更糟。这对我来说毫无意义，令人沮丧。

我希望PageSpeed得分会有所提高，但随着我延迟的每个.js文件的出现，它会波动甚至有时会变差。

Answer 1

尽管PageSpeed显示了一些有趣的静态信息，例如，第一个令人满意的绘画，进行交互的时间等。如果不查看页面加载过程的时间轴，就很难弄清楚幕后的情况。下面的屏幕快照显示了您的页面如何在Google chrome中加载。您可以按照以下指南自行查看：https://developers.google.com/web/tools/chrome-devtools/network/

主要的阻碍因素之一是服务器的响应时间，服务器至少需要2秒钟来处理对网站的请求，这相当高，这使我相信您可能在hostmonster上制定了具有成本效益的计划。相反，StackOverflow.com的响应时间为300ms。基准测试虚拟主机的一种简单方法是在全新的wordpress安装上运行此测试。它会告诉您您自己的效率低下的wordpress设置是否会导致延迟，或者主机在服务php方面天生缓慢。我感觉到您的php代码中出现了严重膨胀，从而导致了这种情况。

接下来，您有一个CSS文件，耗时880ms，压缩后为200kb，但未压缩1.9Mb（在Coverage标签中显示为1 860 013字节），这非常大，即使在最大的网站上也不应超过1Mb。 CSS文件的98.6％未使用。使用通用框架时，有90％以上的未使用CSS并不罕见，但是通用框架永远不会有接近2MB的css文件。大多数网站上的css捆绑软件都低于500kb。这不仅增加了下载时间，还增加了浏览器解析该文件并呈现页面所需的时间。

还有一个标头图像，大小为423KB，下载需要1.3秒。通常，该分辨率的图像可以压缩到小于100kB。

瀑布上的红线表示何时认为页面已满。过大的标题给它增加了很多。由于服务器的响应时间，整个加载过程推迟了2.2s。您会看到，与这两个脚本相比，脚本的加载时间微不足道。这可能就是为什么您将标签更改为延期时观察到加载时间无动于衷的原因。

总而言之，调查一下为什么服务器需要2秒钟以上的时间才能做出响应，因此请清理CSS。力争尺寸的一半。压缩标题图片。目标大约100kb。修复这些问题后，您可以研究延迟脚本以实现最佳加载时间。