web性能优化建议

避免使用着陆页重定向

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：您使用了多个重定向来实现从给定网址到最终着陆页的跳转过程。

概览
重定向会触发额外的 HTTP 请求-响应周期，并会拖慢网页呈现速度。在最好的情况下，每个重定向都会添加一次往返（HTTP 请求-响应）；而在最坏的情况下，除了额外的 HTTP 请求-响应周期外，它还可能会让更多次的往返执行 DNS 查找、TCP 握手和 TLS 协商。因此，您应尽可能减少对重定向的使用以提升网站性能。

以下是重定向模式的一些示例：

example.com 使用自适应网页设计，无需任何重定向 - 快速且理想！
example.com → m.example.com/home - 会导致移动设备用户遭遇多次往返。
example.com → www.example.com → m.example.com - 移动浏览体验非常缓慢。
建议
了解自适应设计基础知识，以提供出色的多设备体验并消除不必要的重定向。

如果您的网站需要进行重定向，请参阅我们的重定向和用户代理检测指南。

启用压缩功能

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：所提供的资源是可压缩的，但未进行 gzip 压缩。
概览
所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小（最多可缩减 90%），从而显著缩短下载相应资源所需的时间、减少客户端的流量消耗并加快网页的首次呈现速度。 要了解详情，请参阅使用 GZIP 压缩文本。
建议
在您的网络服务器上启用并测试 gzip 压缩支持。HTML5 Boilerplate 项目包含所有最热门服务器的示例配置文件，以及对每个配置标记和每项设置的详细注解：请在列表中查找您喜爱的服务器，并找到 gzip 部分，然后确认您已使用推荐的设置配置了您的服务器。 或者，您也可查看您的网络服务器的文档以了解如何启用压缩功能：
Apache：使用 mod_deflate
Nginx：使用 ngx_http_gzip_module
IIS：配置 HTTP 压缩功能
常见问题解答
PageSpeed Insights 的报告显示，我的许多静态内容文件需要压缩为 gzip 格式，但我已将网络服务器配置为使用 gzip 压缩格式提供这些文件。为何 PageSpeed Insights 无法识别这些压缩文件？
在将文件下载到客户端计算机时，代理服务器和防病毒软件可能会停用压缩功能。由于 PageSpeed Insights 是根据实际返回到客户端的标头来报告结果，因此，如果您在使用此类防病毒软件或设有中间代理服务器的客户端计算机上运行分析（很多代理服务器都是透明的，您甚至可能意识不到代理服务器已介入您的客户端和网络服务器之间的通信过程），则可能会导致此问题。

改善服务器响应用时

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：您的服务器响应用时超过了 200 毫秒。

概览
服务器响应用时衡量的是花费了多长时间来加载必要的 HTML 以开始呈现服务器所托管的网页，其中减去了 Google 和您的服务器之间的网络延迟时长。每次运行所用的时间可以有所不同，但这种差异不应太大。事实上，如果各次服务器响应在用时方面存在很大差异的话，则可能意味着有潜在的性能问题。

建议
您应将服务器响应用时控制在 200 毫秒内。 很多潜在因素都可能会延缓服务器响应，例如缓慢的应用逻辑、缓慢的数据库查询、缓慢的路由、框架、库、资源 CPU 不足或内存不足。您需要充分考虑所有这些因素，才能改善服务器的响应用时。 若想找出服务器响应用时过长的原因，首先要进行衡量。然后，准备好相关数据，并参阅有关如何解决该问题的相应指导。当解决问题后，您必须继续衡量服务器响应用时，并设法应对任何会在将来出现的性能瓶颈问题。

收集并检查现有性能和数据。若无可用内容，请使用自动化的网络应用监测解决方案（市面上有托管的开源版本，适用于大多数平台）进行评估，或添加自定义的方法。
找出并修复首要的性能瓶颈问题。如果您使用的是热门网页框架或内容管理平台，请参阅与性能优化最佳做法相关的文档。
监测并提醒任何会在将来出现的性能衰退问题！

使用浏览器缓存

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：您的服务器响应不包含缓存标头，或者某些资源被指定为只缓存一小段时间。

概览
通过网络获取资源既速度缓慢又代价高昂：下载过程可能需要在客户端和服务器之间进行多次往返，这会导致延迟处理，并可能会阻止网页内容呈现，还会致使访问者支付数据费用。所有的服务器响应都应指定一种缓存政策，以帮助客户端确定是否以及何时能够重用之前获取的响应。

建议
每项资源都应指定一种明确的缓存政策来回答下列问题：该资源是否可被缓存、可由谁缓存、可缓存多长时间，以及（如果适用）如何在缓存政策到期后对该资源进行有效的重新验证。当服务器返回响应时，它必须提供 Cache-Control 和 ETag 标头：

Cache-Control 指定了浏览器和其他中间缓存可如何缓存单项响应以及可缓存多长时间。要了解详情，请参阅使用 Cache-Control 进行缓存。
ETag 提供了一个重新验证令牌，该令牌是由浏览器自动发送的，用于检查自上次请求相应资源后该资源是否发生了变化。要了解详情，请参阅使用 ETag 验证缓存的响应。
若想确定适用于您的网站的最佳缓存政策，请参考以下指南：

指定最佳的 Cache-Control 政策
使缓存的响应失效和更新缓存的响应
缓存核对清单
对于静态素材资源或不常变化的素材资源，我们建议至少缓存 1 周，至多缓存 1 年。如果您需要精确控制资源的失效时间，我们建议使用网址指纹或版本控制技术 - 请参阅上面的“使缓存的响应失效和更新缓存的响应”链接。

缩减资源（HTML、CSS 和 JavaScript）的大小

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：可通过缩减大小操作来缩减您的某项资源的大小。

概览
缩减大小是指在不影响浏览器处理资源的情况下移除冗余/不必要的数据（例如代码注释和格式设置）、移除未使用的代码、缩短变量和函数名称，等等。

要了解详情，请参阅预处理和根据具体情况进行优化。

建议
您应缩减 HTML、CSS 和 JavaScript 资源的大小：

要缩减 HTML 的大小，请尝试使用 HTMLMinifier。
要缩减 CSS 的大小，请尝试使用 CSSNano 和 csso。
要缩减 JavaScript 的大小，请尝试使用 UglifyJS。Closure Compiler 也很有效。您可创建一个使用这些工具的构建流程，以便缩减和重命名开发文件并将其保存到正式版目录。
或者，您也可使用 PageSpeed 模块，此类模块可与 Apache 或 Nginx 网络服务器集成以自动优化您的网站（包括缩减资源的大小）。

优化图片

当PageSpeed Insights 检测到以下情形时，就会触发此规则：网页上的图片可被优化以减小其文件尺寸，且不会显着影响其视觉效果。

概览
对于网页来说，在所下载的字节数中，图片往往会占很大比例。因此，优化图片通常可以卓有成效地减少字节数和改进性能：浏览器需要下载的字节数越少，对客户端带宽的争用就越少，浏览器下载内容并在屏幕上呈现内容的速度就越快。

建议
在为您的图片资源寻找最理想的格式和优化策略时，您需要仔细分析多个方面：要编码的数据的类型、图片格式功能、质量设置、分辨率，等等。此外，您还需要考虑：是否最好以矢量格式提供某些图片、是否可通过 CSS 实现所需的效果，以及如何为每类设备传送已进行相应调整的资源。

针对所有类型的图片进行优化
遵循提供自适应图片的最佳做法
参阅各种图片的图片优化核对清单
针对 GIF、PNG 和 JPEG 图片进行优化
GIF、PNG 和 JPEG 格式在整个互联网的图片流量中占 96%。鉴于这些图片格式的热门程度，PageSpeed Insights 提供了具体的优化建议。为方便起见，您可以直接从 PageSpeed Insights（它使用的是 modpagespeed.com 中提供的图片优化库）下载经过优化的图片。

您还可以使用相关工具（例如 ImageMagick 提供的 convert 库）来应用类似的优化 - 请参阅下面的示例说明。

如果您使用第三方工具，则请注意：倘若您的图片在此之前已进行了充分的优化，转换后的图片可能会变大。如果发生这种情况，请使用您的原始图片。

GIF 和 PNG 均是无损格式，因为压缩过程不会对这两类图片的外观做出任何修改。对于静止图片，PNG 可以实现更好的压缩宽高比和更好的外观质量。对于动画图片，请考虑使用 video 元素（而不是 GIF）以实现更好的压缩效果。

始终将 GIF 转换为 PNG 格式，除非原始图片是动画图片或非常小（不足几百字节）。
对于 GIF 和 PNG，如果所有像素都是不透明的，请移除 Alpha 通道。
例如，您可以使用 convert 库通过如下命令优化 GIF 和 PNG 图片（括号内的参数是可选的）：

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cuppa.png
cuppa.png（1763 字节）
convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png（856 字节）
JPEG 是一种有损格式。压缩过程会去除此类图片的外观细节，但压缩宽高比可能会是 GIF 或 PNG 的 10 倍。

如果图片质量较高，请将其降至 85。当图片质量大于 85 时，图片会迅速变大，但外观上的改善却微乎其微。
将色度采样率降至 4:2:0，因为人类视觉系统对亮度（与颜色相较而言）更敏感。
对超过 10k 字节的图片使用渐进式格式。渐进式 JPEG 通常可为大型图片实现更高的压缩宽高比（与基准 JPEG 相较而言），并具有渐进式呈现图片的优势。
如果图片是黑白的，请使用灰度色彩空间。
例如，您可以使用 convert 库通过如下命令优化 JPEG 图片（括号内的参数是可选的）：

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

Puzzle.jpg
puzzle.jpg（13501个字符）
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_converted.jpg（4599 字节）

优化 CSS 发送过程

̇ 当 PageSpeed Insights 检测到以下情形时，就会触发此规则：网页包含会阻止内容呈现的外部样式表（它们会延迟内容的首次呈现时间）。
概览
浏览器必须先处理当前网页的所有样式和布局信息，然后才能呈现内容。因此，浏览器会阻止呈现网页内容，直到外部样式表已下载完毕并处理完毕（这可能需要进行多次往返，因而可能会导致首次呈现时间延迟）。 要想详细了解关键呈现路径，请参阅呈现树结构、布局和着色；要想获取与如何取消阻止呈现以及优化 CSS 发送过程相关的提示，请参阅会阻止内容呈现的 CSS。
建议
如果外部 CSS 资源较小，您可将它们直接插入到 HTML 文档中，这称为“内嵌”。以这种方式内嵌较小的 CSS 文件可让浏览器顺畅无阻地呈现网页。 请注意，如果 CSS 文件较大，完全内嵌 CSS 则可能会导致 PageSpeed Insights 通过优先加载可见内容规则向您发出网页首屏部分体积过大的警告。 如果 CSS 文件较大，您便需要确定和内嵌用于呈现首屏内容的 CSS，并暂缓加载其余样式，直到首屏内容显示出来为止。
内嵌较小 CSS 文件的示例
请勿内嵌较大数据 URI
请勿内嵌 CSS 属性
内嵌较小 CSS 文件的示例
如果 HTML 文档如下所示：

并且 small.css 资源如下所示：
。黄色{背景-颜色：黄色;} 。蓝色{颜色：蓝色;} 。大{字体-大小：8em ; } 。粗体{ font - weight ：粗体; }

您就可以按照如下方式内嵌关键的 CSS：

</ body> </ html>

当您启用 prioritize_critical_css 过滤条件后，PageSpeed 优化模块可为 nginx、apache、IIS、ATS 和 Open Lightspeed 自动完成这一转换操作（包括确定关键/非关键 CSS、内嵌关键 CSS 以及延迟加载非关键 CSS）。

另请参阅 loadCSS 函数以帮助异步加载 CSS，该函数可与 Critical（一种用于从网页中提取关键 CSS 的工具）搭配使用。

系统会在网页中内嵌用于设置首屏内容样式的关键样式，并会立即将其应用到文档中。待系统完成对网页内容的初次绘制之后，整个 small.css 才会开始加载。一旦 small.css 加载完毕，系统便会将其样式应用到网页中，因而不会阻止初次呈现关键内容。

请注意，网络平台很快就会支持以不阻止内容呈现的方式加载样式表。届时，您可以使用 HTML Imports，而无需再使用 JavaScript。

请勿内嵌较大数据 URI
在 CSS 文件中内嵌数据 URI 时，请务必慎重。您可选择在 CSS 中使用较小数据 URI，毕竟内嵌较大数据 URI 可能会导致首屏 CSS 变大，进而延缓网页呈现时间。

请勿内嵌 CSS 属性
应尽量避免在 HTML 元素（例如

）中内嵌 CSS 属性，因为这经常会导致不必要的代码重复。此外，在默认情况下，内容安全政策 (CSP) 会阻止在 HTML 元素中内嵌 CSS。

缩减首屏内容的大小

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：系统需要进行更多次的网络往返来呈现网页的首屏内容。

概览
如果所需的数据量超出了初始拥塞窗口的限制（通常是14.6kB 压缩后大小），系统就需要在您的服务器和用户的浏览器之间进行更多次的往返。如果用户使用的是延迟时间较长的网络（例如移动网络），该问题可能会显着拖慢网页加载速度。

建议
为提高网页加载速度，请限制用于呈现网页首屏内容的数据（HTML 标记、图片、CSS 和 JavaScript）的大小。 为此，您可以尝试下述几种方法：
合理地构建 HTML，以便首先加载关键的首屏内容
减少资源所用的数据量
合理地构建 HTML，以便首先加载关键的首屏内容
请首先加载网页的主要内容。合理地构建网页，以使来自服务器的初始响应发送必要数据，从而立即呈现网页的关键部分并暂缓呈现其余部分。 这可能意味着，您必须将 CSS 拆分为两个部分：一个负责调整内容 ATF 部分的样式的内嵌部分，以及一个可暂缓呈现的部分。

请参考以下示例，了解如何调整网站结构以提高加载速度：

如果您的 HTML 先加载第三方微件，再加载主要内容，请将该加载顺序更改为先加载主要内容。
如果您的网站采用的是两列式布局（一列是导航边栏，另一列是文章），而您的 HTML 先加载边栏，再加载文章，请考虑首先加载文章。
减少资源所用的数据量
当经过重新设计的网站可在多种设备上正常运行并能首先加载关键内容后，请使用以下技术来减少用于呈现网页的数据量：
缩减资源的大小：通过移除不必要的空格和评论来缩减 HTML、CSS 和 JavaScript 的大小。通过使用可重命名资源中变量名称的工具，实现进一步的优化。
尽可能考虑使用 CSS，而非图片。
启用压缩功能

移除会阻止内容呈现的 JavaScript

当 PageSpeed Insights 检测到以下情形时，就会触发此规则：您的 HTML 在网页首屏部分中引用了一个会阻止内容呈现的外部 JavaScript 文件。
概览
浏览器必须先通过解析 HTML 标记来构建 DOM 树，然后才能呈现网页。 在此过程中，每当解析器遇到脚本时，它都必须先停止解析 HTML 并执行该脚本，然后才能继续解析。对于外部脚本，系统还会强制解析器等待相应资源下载完毕（这可能会产生一次或多次网络往返过程并导致网页的首次呈现时间延迟）。 要想详细了解 JavaScript 对关键呈现路径有何影响，请参阅使用 JavaScript 添加互动性。
建议
您应尽可能避免使用会阻止内容呈现的 JavaScript，尤其是必须先由系统获取然后才能被执行的外部脚本。用于呈现网页内容的脚本可内嵌到网页中，以避免产生额外的网络请求，但内嵌的内容不能太大，而且必须可被快速执行以提供良好的性能。对初次呈现不重要的脚本应设为异步加载，或推迟到首次呈现完毕后再开始加载。请注意，要通过这种方式缩短加载用时，您还必须优化 CSS 发送过程。
内嵌 JavaScript
会阻止内容呈现的外部脚本会强制浏览器等待系统获取 JavaScript，这可能会使系统在网页得以呈现之前增加一次或多次网络往返过程。如果外部脚本较小，您可将其内容直接内嵌到 HTML 文档中，以避免造成网络请求延迟。例如，如果 HTML 文档如下所示：

资源 small.js 如下所示：
/ 小JavaScript文件的内容 /

您就可以按照如下方式内嵌脚本：

内嵌脚本内容可消除对 small.js 的外部请求，并可使浏览器缩短首次呈现网页所需的时间。但请注意，内嵌也会导致 HTML 文档变大，并且相同的脚本内容可能需要内嵌在多个网页中。因此，我们建议您只内嵌较小的脚本以实现最佳性能。
将 JavaScript 设为异步加载
默认情况下，JavaScript 会阻止 DOM 构建，因而会导致网页的首次呈现时间延迟。为防止 JavaScript 阻止解析器正常运行，我们建议您对外部脚本使用 HTML async 属性。例如：
<script异步src =“ my.js”>

要详细了解异步脚本，请参阅解析器被阻止与异步 JavaScript。 请注意，异步脚本未必会按指定的顺序执行，且不应使用 document.write。考虑到这些限制，如果脚本有赖于执行顺序或者需要访问或修改网页的 DOM 或 CSSOM，那么您可能需要重新编写此类脚本。
延迟加载 JavaScript
如果某些脚本对于初次呈现网页不是必不可少的，此类脚本的加载和执行便可被推迟到初次呈现网页后或网页的其他关键部分加载完毕后。这样做有助于减少资源争用并提高性能。
常见问题解答
如果我使用的是 JavaScript 库（例如 jQuery），该怎么做？
很多 JavaScript 库（例如 jQuery）都可用来增强网页，从而为网页增添额外的互动性、动画和其他效果。不过，这些行为大多可在首屏内容呈现后再添加，以确保无虞。 请考虑将此类 JavaScript 设为异步加载或推迟其加载时间。
如果我使用 JavaScript 框架来构建网页，该如何操作？
如果网页内容是由客户端JavaScript构建的，那么我们建议您考虑嵌入相关的JavaScript模块以避免产生额外的网络往返过程。同样，利用服务器端呈现可显着提升网页的首次加载速度，具体方法如下：在服务器上呈现JavaScript模板以加快首次呈现速度，然后在网页加载完毕后使用客户端模板。要想详细了解服务器端呈现，请参见http://youtu.be/VKTWdaupft0?t=14m28s。