如何设置完美的关键渲染路径

设置完美的关键渲染路径是为访问者创建网页快速初始视图的最重要方面之一。

Google的PageSpeed团队多年来一直在阐明这个概念，并认为它是页面速度的关键因素之一。

设置关键渲染路径基本上意味着您首先加载网站最重要的视觉部分，而不是一次性加载所有内容。

通常这意味着重要的首屏内容应该首先加载。

这样，访问者可以立即获得网站关键首屏内容的视图，并且可以立即开始使用您的网站，而不必等待所有其他不太重要的内容先加载。

这给访问者当他们访问您的网页之一时的”即时页面加载”体验，这是您应该喜欢它的原因。

什么是”首屏”？

首屏是访问者在访问您的网站时在屏幕上获得的第一个屏幕视图，而无需向下滚动。对于大多数网站，这包括徽标、导航链接、标题、文本内容和一张或两张照片。

“初始视图”的重要性

通过只专注于加载页面首屏初始视图所需的内容，您可以使具有数百个CSS和JavaScript文件的页面在不到一秒的时间内加载。当然，浏览器最终仍然必须加载那些数百个文件（值得一提的是，这实在是太多文件），但页面的首屏内容初始视图几乎立即对您的访问者可见。这就是为什么设置关键渲染路径对几乎所有网站都很重要，特别是对于有很多文件要加载的大型网站。您可以将每页首屏渲染速度从20秒提高到不到1秒。

浏览器的渲染路径

在我们学习如何设置关键渲染路径之前，我们应该学习浏览器如何使用HTML标记、文本内容、照片、CSS文件和JavaScript文件渲染典型的网页。这是浏览器将渲染这样的页面的方式：

• 浏览器读取和分析HTML标记以了解如何渲染页面。
• 浏览器检测页面有文本内容和照片，但必须先加载CSS样式和JavaScript文件，然后才能在浏览器中完整显示此内容。
• 浏览器开始逐个下载这些CSS和JavaScript文件以分析它们的代码并查看它们命令浏览器做什么。
• 当它们完成加载时，浏览器加载照片，然后在完成加载页面后向访问者显示完全加载的页面。

如您所见，上述CSS和JavaScript文件可能是减慢页面渲染过程的关键因素，尤其是如果您有多个文件。这也是可以在页面速度方面做出重大改进的地方，因此我们要专注于渲染这些最重要的文件的原因。

如何设置完美的关键渲染路径？

我们可以采取某些措施来加快初始视图。这是您可以做的：

• 延迟或异步加载低优先级JavaScript
• 延迟加载CSS
• 将CSS代码放在页头的样式标签中（内联）而不是调用.css文件
• 内联小型JavaScript
• 减少或内联功能图片
• 延迟加载照片
• 压缩您的CSS、JavaScript或PNG、GIF和JPG文件
• 移除或最小化社交按钮

最后一个选项是可选的。如果您真的需要社交按钮，您不应该移除它们，但社交按钮真的可能减慢您的网站速度。

分析您自己的网站

要为您自己的网站设置最佳关键渲染路径，您首先需要分析您自己的页面。从您的网站访问一个关键页面（您的访问者最常使用的页面类型）并问自己这个问题：这个页面严格需要加载首屏内容、初始视图的哪些文件？

您需要的内容

请记住，每个网站都有自己的初始视图内容，但对于大多数网站，这是基本页面通常需要用于显示首屏内容的内容：

• HTML页面
• 页头和首屏内容的CSS
• 徽标图片文件
• 文本内容
• 首屏照片

您不需要的内容

以上通常是为您的页面提供快速但立即可用的第一视图所需的全部内容。请记住，除了徽标外，永远不要使用图片，而应严格使用CSS进行网站设计。如果您为网站设计使用很多图片（不推荐），您显然也应该加载这些图片。

现在，关于大多数网站的初始视图，这意味着您通常不需要……

• 大多数JavaScript
• 首屏内容不需要的CSS
• 广告
• 首屏照片
• 社交按钮
• 任何其他类型的脚本、功能或对您的网站的添加

您可以很好地加载首屏内容的第一个初始视图。