九大网站速度优化的优秀建议

发布时间：2024-10-24 19:24:18 / 浏览量：

今天我们就来说说网站速度优化的最佳建议，以提高速度性能。因为搜索引擎对速度的需求永远不会停止。现在，百度不是依靠模拟数据，而是使用现场数据来衡量网站速度。通过从用户体验报告数据库中提取信息，百度可以识别普通用户找到您网站的速度。这意味着，即使您的网站在您的终端闪电般快，使用旧智能手机的访问者可能会遇到延迟 - 这可能会影响您的速度分数，也可能影响您的网站排名。如果你还没有，那么是时候加快速度优化了。我们是根据9大速度优化原则列出最佳建议，然后深入探讨一些可以采取的解决措施，以进一步优化您的网站速度。

一、避免登陆页面重定向

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

我们的建议：一个网站从指定网址到最终目标网页的重定向不超过一个。尽量避免重定向。但是，如果您需要使用重定向，请根据您的需要选择重定向类型：

301对302重定向。删除旧内容并重定向到新内容时，或者当您没有将用户重定向到的备用页面时，请使用永久重定向（301）。在进行短期更改（例如限时优惠）或将用户重定向到特定于设备的URL时，请使用临时重定向（302）。别担心，你不会失去链接权重！
JavaScript与HTTP重定向。JavaScript和HTTP重定向之间的主要区别在于HTTP重定向会导致服务器端的延迟，而基于JavaScript的重定向会降低客户端的速度（他们需要下载页面，然后在触发重定向之前解析并执行JavaScript ）。

二、启用压缩

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

我们的建议：Gzip所有可压缩内容。您可以通过HTML5 Boilerplate项目找到大多数服务器的示例配置文件。

优先删除不必要的数据。压缩很棒，但最佳优化的资源是未发送的资源。定期检查您的站点资源并在压缩之前消除不必要的数据以确保获得最佳结果。
考虑Gz??ip编码的替代方案。如果你想使用Gzip以外的工具，Brotli是一种无损压缩算法，它结合了LZ77算法的现代变体，霍夫曼编码和二阶上下文建模。它受到所有现代浏览器的支持，并且具有与当前可用的最佳通用压缩方法相当的压缩比。Brotli压缩速度非常慢并且快速解压缩，因此您应该使用最高级别的Brotli + Gzip预压缩静态资源，并使用Brotli在1-4级压缩动态HTML。
对不同的资源使用不同的压缩技术。压缩可以应用于HTML代码，以及页面所需的各种数字资产，但是您需要将不同的技术和算法应用于Web字体，图像，CSS等，以获得最佳结果。例如，如果您使用HTTP / 2，那么对HTTP响应头使用HPACK压缩将减少不必要的开销。

三、改善服务器响应时间

快速的服务器响应时间是必要的，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查找，预连接，预取和预加载来加速交付。

四、利用浏览器缓存

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

最佳缓存策略：

是否可以缓存资源。
谁可以缓存它。
缓存多长时间。
缓存策略到期时如何有效地重新验证（如果适用）。

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

使用Cache-Control消除网络延迟并避免数据费用。缓存控制指令允许您自动控制（例如，“无缓存”和“无存储”）以及持续时间（例如，“max-age”，“max-stale”和“mini-fresh”）浏览器可以缓存响应，而无需与服务器通信。
使用ETag来实现有效的重新验证。实体标记（ETag）HTTP标头传递验证令牌，如果资源自上次请求后未发生更改，则会阻止数据传输。这提高了资源更新检查的效率。
最佳缓存控制策略的建议。创建了一个清单和流程图，可帮助您在尽可能长的时间内缓存尽可能多的响应，并为每个响应提供验证令牌。

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

五、缩小HTML，CSS和JavaScript

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

我们的建议：您的网络资源中没有冗余数据（例如，HTML代码中的注释或空格符号，CSS中的重复样式或不必要的图像元数据）。

与压缩一起使用缩小。乍一看，缩小听起来像压缩，但它更精细。压缩算法非常适合缩小页面大小，但大多数人不知道从CSS（/ * ... * /），HTML（）和JavaScript（// ...）注释中删除不必要的代码，折叠级联样式表（CSS）规则或执行许多其他特定于内容的优化。
将缩小应用于其他资源类型。您可以缩小不仅仅是基于文本的资源，如超文本标记语言（HTML），CSS和JavaScript。图像，视频和其他类型的内容也可以根据您的需要缩小。例如，图像包含自己的元数据形式和各种有效负载，如果您要在照片共享网站上发布它们，可能需要保留这些形式。
自动化缩小。使用工具可以减轻网站上数千个（如果不是数百万个）不同资源的负担。Google的PageSpeed模块自动执行此操作，并且可以与Apache或Nginx Web服务器集成。或者，您可以使用第三方工具，如HTMLMinifier（用于HTML），CSSNano或CSSO（用于CSS）和UglifyJS（用于JavaScript）。

六、优化图像

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

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

请遵循此常用优化技术的清单：

消除不必要的图像资源。
利用CSS3替换图像。
使用Web字体而不是编码图像中的文本。
尽可能使用矢量格式。
缩小和压缩可缩放矢量图形（SVG）资产以减小其大小。
选择最佳光栅格式（首先选择正确的通用格式：GIF，PNG或JPEG，但也考虑为现代客户添加图像格式WebP和JPEG扩展范围（XR）资源。
尝试最佳质量设置。请记住，所有图像都没有单一的最佳格式或“质量设置”：特定压缩器和图像内容的每种组合都会产生独特的输出。
在服务器上调整大小并提供缩放到其显示大小的图像。
删除元数据。
使用srcset参数增强img标签，以获得高每英寸点数（DPI）设备。
根据设备特性（如设备大小，设备分辨率，方向等），使用picture元素指定不同的图像。
仔细使用图像喷精技术。使用HTTP / 2，最好加载单个图像。
考虑延迟加载非关键图像。
缓存图像资源。
自动化您的图像优化过程。

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

七、优化CSS

浏览器在呈现页面时通常遵循以下五个步骤：

处理HTML标记并构建文档对象模型（DOM）树。
处理CSS标记并构建CSS对象模型（CSSOM）树。
将DOM和CSSOM组合到渲染树中。
在渲染树上运行布局以计算每个节点的几何。
将各个节点绘制到屏幕上。

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

我们的建议：将小CSS直接内联到HTML文档中以消除小的外部CSS资源。

避免内联大型CSS文件。虽然内联小型CSS可以加快浏览器呈现页面所需的时间，但内联大型CSS文件会增加首屏CSS的大小，实际上会缩短渲染时间。
避免内联CSS属性。同样，在HTML元素上内联CSS属性通常会导致不必要的代码重复，并且默认情况下会使用内容安全策略阻止它。

八、优先考虑可见内容

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

我们的建议：将重叠内容的大小减少到不超过14kB（压缩）。

限制渲染首屏内容所需的数据大小。如果你一直在跟进，你应该已经使用资源缩小，图像优化，压缩和所有其他提示和技巧来减少你的首要内容的大小。
组织HTML标记以立即呈现首屏内容。更改HTML标记结构可以大大加快您的首屏内容加载和呈现的速度 - 但您更改的内容会因页面而异。例如，可能需要将CSS拆分为不同的部分：内联部分负责样式化内容的上部部分，样式表推迟剩余部分。或者您可能需要首先更改页面上加载的顺序（例如，小部件之前的主要内容）。

九、删除阻止渲染的JavaScript

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

我们的建议：在首屏内容中删除所有阻止JavaScript，尤其是外部脚本。

使JavaScript非呈现阻止。将脚本标记标记为异步将告诉浏览器在等待加载和执行脚本时不阻止DOM构造。但是，如果您知道在解析/构造DOM树时不需要更改DOM树中的任何内容，则应该只执行此操作。
内联关键脚本并推迟非关键脚本。应该内联呈现页面内容所必需的脚本以避免额外的网络请求。这些应该尽可能小，以便快速执行并提供良好的性能。非关键脚本应该异步并延迟到第一次渲染之后。请记住，不保证异步脚本按指定顺序执行。
将第三方JavaScript库推迟到折叠之后。增强交互性或添加动画或其他效果（例如，JQuery）的JavaScript库通常不需要在首屏上呈现。只要有可能，请使这些JavaScript元素异步并将它们推迟到页面中。