通过这9个高级技巧，降低速度优化速度

通过这9个高级技巧，降低速度优化速度

以下是Google的PageSpeed Insight Rules细分以及有关优化网页以获得更高速度性能的最佳做法建议。因为对速度的需求永远不会停止。

如果您在过去一个月内将自己的网址插入Google的PageSpeed Insights，您会发现它看起来有点不同。您曾经收到一个简单的优化分数，您的分数现在按平台划分，并分为两个分数，“页面速度”和“优化”。

这些更改是在2018年7月9日推出的新速度更新的基础上进行的。现在，Google不使用实验室数据，而是使用现场数据来衡量网站速度。通过从Chrome用户体验报告（CrUX）数据库中提取信息，Google可以识别普通用户找到您网站的速度。

这意味着，即使您的网站在您的终端闪电般快，使用旧智能手机的访问者可能会遇到延迟 – 这可能会影响您的速度分数，也可能影响您的网站排名。如果您还没有，那么是时候加快速度优化了。

我将打破谷歌的九个PageSpeed Insight Rules，列出他们的最佳实践建议，然后深入探讨一些可以进一步优化网站速度的高级步骤。

1.避免登陆页面重定向

为什么重要。 重定向延迟页面呈现并降低您的移动网站体验。每个重定向都会添加额外的超文本传输​​协议（HTTP）请求 – 响应往返，有时还会添加许多额外的往返，以执行域名系统（DNS）查找，传输控制协议（TCP）握手和传输层安全性（TLS）协商。

谷歌推荐的内容。创建一个响应式网站，其中包含从给定网址到最终目标网页的重定向不超过一个。

高级建议。 尽量避免重定向。但是，如果您需要使用重定向，请根据您的需要选择重定向类型：

301对302重定向。删除旧内容并重定向到新内容时，或者当您没有将用户重定向到的备用页面时，请使用永久重定向（301）。在进行短期更改（例如限时优惠）或将用户重定向到特定于设备的URL时，请使用临时重定向（302）。别担心; 你不会失去任何方式的链接资产！

JavaScript与HTTP重定向。JavaScript和HTTP重定向之间的主要区别在于HTTP重定向会导致服务器端的延迟，而基于JavaScript的重定向会降低客户端的速度（他们需要下载页面，然后在触发重定向之前解析并执行JavaScript ）。Googlebot支持两种类型的重定向。

2.启用压缩

为什么重要。减少内容的大小可缩短下载资源所需的时间，减少客户端的数据使用量并缩短页面的呈现时间。

谷歌推荐的内容。 Gzip所有可压缩内容。您可以通过HTML5 Boilerplate项目找到大多数服务器的示例配置文件。

高级建议

优先删除不必要的数据。压缩很棒，但最佳优化的资源是未发送的资源。定期检查您的站点资源并在压缩前消除不必要的数据，以确保获得最佳结果。

考虑Gz​​ip编码的替代方案。如果你想使用Gzip以外的工具，Brotli是一种无损压缩算法，它结合了LZ77算法的现代变体，霍夫曼编码和二阶上下文建模。它得到了所有现代浏览器的支持，其压缩比可与目前最好的通用压缩方法相媲美。Brotli压缩速度非常慢并且快速解压缩，因此您应该使用最高级别的Brotli + Gzip预压缩静态资源，并使用Brotli在1-4级压缩动态HTML。

对不同的资源使用不同的压缩技术。压缩可以应用于HTML代码，以及您的页面所需的各种数字资产，但您需要将不同的技术和算法应用于您的Web字体，图像，CSS等，以获得最佳结果。例如，如果您正在使用HTTP / 2，那么对HTTP响应头使用HPACK压缩将减少不必要的开销。

3.改善服务器响应时间

为什么重要。快速的服务器响应时间是必要的; 53％的移动访问者将放弃在三秒钟内未加载的页面。

如果您想避免中央处理单元（CPU）饥饿，缓慢的应用程序逻辑，慢速数据库查询，慢速路由，慢速框架和慢速库，那么高质量的网站开发是必不可少的。

谷歌推荐的内容。服务器响应时间应始终低于200毫秒。

高级建议。

测量服务器响应时间和实际用户测量（RUM）。 使用WebPageTest.org，Pingdom，GTmetrix或Chrome Dev Tools等 工具 来查明现有的性能问题，并找出导致内容交付流程变慢的因素。请记住，即使您的测试显示网站速度<200毫秒，使用慢速3G的老一代Android用户也可能会遇到400毫秒RTT和400kbps传输速度。这将对您的网站速度得分产生负面影响。为了改善用户的体验，您必须瞄准：

第一个有意义的油漆<1s。

SpeedIndex值<1250。

重复访问的传输时间间隔（TTI）<5s和<2s。

优化用户体验。 配置服务器时：

使用HTTP / 2（并记住您的CDN也支持HTTP / 2）以提高性能。

在服务器上启用在线证书状态协议（OCSP）装订，以加速TLS握手。

支持IPv6和IPv4。IPv6的邻居发现（NDP）和路由优化可以使网站速度提高10-15％。

添加资源提示以预热连接并通过更快的DNS查找，预连接，预取和预加载来加快交付速度。

4.利用浏览器缓存

为什么重要。通过网络获取资源时，客户端和服务器之间需要进行更多的往返，这意味着访问者会有更多延迟和更高的数据成本。您可以通过实施缓存策略来缓解这个缓慢而昂贵的过程，该策略可帮助客户确定是否以及何时可以重用过去返回的响应。

谷歌推荐的内容。明确的缓存策略，回答：

是否可以缓存资源。

谁可以缓存它。

缓存多长时间。

缓存策略到期时如何有效地重新验证（如果适用）。

Google建议静态资产的最短缓存时间为一周，最长为一年。

高级建议。

使用Cache-Control消除网络延迟并避免数据费用。 缓存控制指令允许您自动控制（例如，“无缓存”和“无存储”）以及持续时间（例如，“max-age”，“max-stale”和“mini-fresh”）浏览器可以缓存响应而无需与服务器通信。

使用ETag来实现有效的重新验证。 实体标记（ETag）HTTP标头传递验证令牌，如果资源自上次请求后未发生更改，则会阻止数据传输。这提高了资源更新检查的效率。

请参阅Google针对最佳缓存控制策略的建议。Google创建了一个清单和流程图，可帮助您在尽可能长的时间内缓存尽可能多的响应，并为每个响应提供验证令牌：

经验法则是应该在很短的时间内缓存可变（即可能更改）的资源，而应该无限期地缓存不可变（即静态）资源以避免重新验证。

5.缩小HTML，CSS和JavaScript

为什么重要。缩小可以消除传递给访问者的资源中的冗余数据，并且可以对整体网站速度和性能产生巨大影响。

谷歌推荐的内容。 您的网络资源中没有冗余数据（例如，HTML代码中的注释或空格符号，CSS中的重复样式或不必要的图像元数据）。

高级建议。

与压缩一起使用缩小。乍一看，缩小听起来像压缩，但它更精细。压缩算法非常适合减小页面大小，但大多数人不知道从CSS（/ * … * /），HTML（）和JavaScript（// …）注释中删除不必要的代码，折叠级联样式表（CSS）规则或执行许多其他特定于内容的优化。

将缩小应用于其他资源类型。您可以简化不仅仅是基于文本的资产，如超文本标记语言（HTML），CSS和JavaScript。图像，视频和其他类型的内容也可以根据您的需要缩小。例如，图像包含自己的元数据形式和各种有效负载，如果您要在照片共享网站上发布它们，则可能需要保留这些形式。

自动化缩小。使用工具可以减轻您网站上数千个（如果不是数百万个）不同资源的负担。Google的PageSpeed模块自动执行此操作，并且可以与Apache或Nginx Web服务器集成。或者，您可以使用第三方工具，如HTMLMinifier（用于HTML），CSSNano或CSSO（用于CSS）和UglifyJS（用于JavaScript）。

6.优化图像

为什么重要。 图片平均占网页大小的60％，而大图片可能会使您的网站速度变慢。优化图像有助于减小文件大小而不会显着影响视觉质量。

谷歌推荐的内容。 确保您的网站和图片具有响应性。使用图像的相对大小，根据设备特征指定不同的图像时使用图片元素，并使用img元素中的srcset 属性和x描述符通知浏览器何时使用特定图像。

高级建议。 请遵循此常用优化技术的清单：

消除不必要的图像资源。

利用CSS3替换图像。

使用Web字体而不是编码图像中的文本。

尽可能使用矢量格式。

缩小和压缩可缩放矢量图形（SVG）资产以减小其大小。

选择最佳光栅格式（首先选择正确的通用格式：GIF，PNG或JPEG，但也考虑为现代客户添加图像格式WebP和JPEG扩展范围（XR）资源。

尝试最佳质量设置。请记住，所有图像都没有单一的最佳格式或“质量设置”：特定压缩器和图像内容的每种组合都会产生独特的输出。

在服务器上调整大小并提供缩放到其显示大小的图像。

删除元数据。

使用srcset参数增强img标签，以获得高每英寸点数（DPI）设备。

根据设备特性（如设备大小，设备分辨率，方向等），使用picture元素指定不同的图像。

仔细使用图像喷精技术。使用HTTP / 2，最好加载单个图像。

考虑延迟加载非关键图像。

缓存图像资源。

自动执行图像优化过程。

在图像优化方面，没有一种“最佳”方式可以做到这一点。许多技术可以减小图像的大小，但找到图像的最佳设置需要仔细考虑格式功能，编码数据的内容，质量，像素尺寸等。有关更多提示，请访问Google的优化图像指南。

7.优化CSS交付

为什么重要。浏览器在呈现页面时通常遵循以下五个步骤：

处理HTML标记并构建文档对象模型（DOM）树。

处理CSS标记并构建CSS对象模型（CSSOM）树。

将DOM和CSSOM组合到渲染树中。

在渲染树上运行布局以计算每个节点的几何。

将各个节点绘制到屏幕上。

换句话说，页面需要先处理CSS才能呈现。当您的CSS使用渲染阻止外部样式表膨胀时，此过程通常需要多次往返，这将延迟首次渲染的时间。

谷歌推荐的内容。将小CSS直接内联到HTML文档中以消除小的外部CSS资源。

高级建议

避免内联大型CSS文件。虽然内联小型CSS可以加快浏览器呈现页面所需的时间，但内联大型CSS文件会增加上层CSS的大小，实际上会缩短渲染时间。

避免内联CSS属性。同样，在HTML元素上内联CSS属性通常会导致不必要的代码重复，并且默认情况下会使用内容安全策略阻止它。

8.优先考虑可见内容

为什么重要。 如果您的首屏内容超过了初始拥塞窗口（通常压缩为14.6kB），那么加载您的内容将需要多次往返才能加载和呈现您的内容。这可能会导致高延迟和显着延迟页面加载，尤其是对于移动用户。

谷歌推荐的内容。将重叠内容的大小减少到不超过14kB（压缩）。

高级建议

限制渲染首屏内容所需的数据大小。如果你一直在跟进，你应该已经使用资源缩小，图像优化，压缩和所有其他提示和技巧来减少你的首要内容的大小。

组织HTML标记以立即呈现首屏内容。更改HTML标记结构可以大大加快您的首屏内容加载和呈现的速度 – 但您更改的内容会因页面而异。例如，可能需要将CSS拆分为不同的部分：内联部分负责样式化内容的上部部分，样式表推迟剩余部分。或者您可能需要首先更改页面上加载的顺序（例如，小部件之前的主要内容）。

9.删除阻止渲染的JavaScript

为什么重要。 您可以从提示＃7回忆一下，在浏览器能够呈现页面之前，页面需要通过解析HTML来构建其DOM。好吧，每次解析器遇到JavaScript时，它必须先停止并执行这个新脚本，然后才能继续构建DOM树。在外部脚本的情况下，这种延迟更加明显 – 它可以为渲染过程增加数万毫秒。

谷歌推荐的内容。在首屏内容中删除所有阻止JavaScript，尤其是外部脚本。

高级建议

使JavaScript非呈现阻止。将脚本标记标记为异步将告诉浏览器在等待加载和执行脚本时不阻止DOM构造。但是，如果您知道在解析/构造DOM树时不需要更改DOM树中的任何内容，则应该只执行此操作。

内联关键脚本并推迟非关键脚本。应该内联呈现页面内容所必需的脚本以避免额外的网络请求。这些应该尽可能小，以便快速执行并提供良好的性能。非关键脚本应该异步并延迟到第一次渲染之后。请记住，不保证异步脚本按指定顺序执行。

将第三方JavaScript库推迟到折叠之后。增强交互性或添加动画或其他效果（例如，JQuery）的JavaScript库通常不需要在首屏上呈现。只要有可能，请使这些JavaScript元素异步并将它们推迟到页面中。

结论：测试速度更新的结果

为了找出速度更新对SERP位置的影响，SEO PowerSuite（我的公司）团队和我进行了两次实验 – 一次是在Google推出更新之前和之后的一次实验。

我们甚至在更新之前发现，移动网站在SERP中的位置与其平均优化分数之间的相关性已经非常高（0.97），但该网站的第一个内容绘制（FCP）和DOM内容加载（DCL）指标（现在显示）在PageSpeed页面速度得分下面的洞察力对你的位置几乎没有影响。

更新后一周我们没有发现任何重大变化，这是可以理解的：更新需要一段时间才能全面展开。移动搜索引擎结果页面（SERP）中优化得分与位置之间的相关性较高，而FCP / DCL与位置之间的相关性较低。

在过去三个月内，排名在移动SERP排名前30位的网站的优化得分均平均增加了0.83分。我们认为这是整个行业网站质量的提升。

这告诉我们的是，构成快速优化网站的标准正在增加 – 而且你不能自满。像整个SEO这样提高速度是一个过程，如果你不进行调整和改进，你就有可能被抛在脑后。

本文来自投稿，不代表穷思笔记立场，如若转载，请注明出处：https://www.chons.cn/15206.html