3. 管理渲染阻塞资源

Showcase, discuss, and inspire with creative America Data Set.
Post Reply
arafatenzo
Posts: 15
Joined: Sun Dec 22, 2024 3:29 am

3. 管理渲染阻塞资源

Post by arafatenzo »

如果 Web 服务器是 IIS(较少见但可能的情况),则有两种不同类型的压缩:静态和动态。官方文档解释了如何启用压缩。

为什么罕见但可能?因为,作为一项规则,像上面提到的更经典的 CMS 是用 PHP 创建的,PHP 是一种典型的 Linux 机器的服务器端编程语言,具有本机 Apache WebServer 而不是 IIS ,而 IIS 是 Windows 解决方案专有的,其中良好的解决方案首选旧版ASPX语言、CSHARP和.NET(是的,也带有句点)。

这是微软官方文档。

这是最常导致网页加载速度过慢 波兰手机区号 的原因之一。通常,特别是对于 CMS,很难阻止主题或添加的插件使用过于复杂和繁重的 CSS 和 JavaScript 文件,因此发现自己处于必须最好地管理通常称为的内容的情况是很正常的首屏内容之上,即用户在其视图中可用的第一个屏幕上显示的内容,并且即使在访问者执行初始滚动之前,该内容也必须立即有用。

这些块资源(通常)加载到文档的第一部分,然后加载到 HEAD 部分,并且需要几分之一秒的时间才能由浏览器正确处理。与其余内容相结合的分数可以大大延长整个页面的正确呈现时间。

然后浏览器:

以 HTML 格式下载当前页面的输出;
负责CSS/JavaScript/杂项文件;
然后转向结构中包含的文本内容和图像;
同时,它会在每一步检查 CSS 和 JS。
这是为了确保一切都按顺序进行,然后才继续将完整内容最终呈现给用户。您是否看到短短几分钟内发生了多少事情?现在的问题在于,虽然浏览器在短短几秒钟内执行所有这些检查,但用户面临着空或不完整的内容,等待实际加载,并且可能会感到疲倦并走开。

Image


那该如何优化呢?
对于样式表,通过方法调用 CSS 很有用,但在安装的主题中通常会通过另一种方法进行调用接受导入,表示如下: 强制浏览器在了解导入是否成功之前验证导入的正确性,占用了宝贵的时间。

第二个技巧是,不要将样式表分解得太多,而是使用更少的样式表,即使它们更丰富,这可能会很有用。

该解决方案在美观上不太优雅,但减少了浏览器的搜索时间,因此也减少了最终加载时间。

然而,对于 Javas cript 文件,情况要复杂一些,因为您确实需要知道每个文件的确切位置、每个文件如何干预页面的呈现以及如何移动或操作它们。幸运的是,通过谷歌工具,我们可以尝试在我们的网站上进行(广泛的)分析,以快速报告情况并知道是否/在哪里/如何进行干预以手动移动资源。我们正在谈论Google Page Speed Insights,它只需几个步骤即可向我们展示应优化的每一个资源。

PS:有几种工具可以为我们提供或多或少完整的信息(例如 GT Metrix 和 WebPagetest),但让我们检查一下 Google 的工具,因为大多数用户都用它来搜索我们,并且它假设专业工作(而不是反对)其用户。
Post Reply