Google PageSpeed Insights分数如何提升(wordpress cms)？

作者

如何提升 WordPress 网站的 PageSpeed Insights 分数？我分享一些策略和个人经验。

Google PageSpeed Insights 和网站有什么关系？

Google PageSpeed Insights 是一款由 Google 创建的旨在分析、优化网站的工具。他通过遵循网络最佳实践建议，会分别计算网站 PC 、移动端的分数，并给出一些使您的网站速度更快、更适合移动设备的方法。这里我要提醒大家的是，不用过分追求 100/100 分。如果一个 WordPress 网站使用了功能丰富的主题，不可避免地会使用一些插件，这导致网站使用大量的外部脚本，所以，你很难得到一个完美的分数。

真正值得关注的是网站的速度，确保您的网站能快速加载，而不是分数。

那为什么还要使用 Google PageSpeed Insights 来测网站（比如 WordPress）的分数呢？大多数情况下，当网站运行缓慢，您很可能会在 Google PageSpeed Insights 中收到大量警告，许多建议与响应时间有着密切关系，而这些拖慢网站速度的罪魁祸首，可能会影响网站本身的 SEO 排名。

一步步优化 WordPress 网站的 Google PageSpeed Insights 分数

我创建了一个测试网站，服务器是腾讯云1核1g 的标准型S1，运行 Nginx、 WordPress 5.0 和 Twenty Nineteen 主题，配置 SSL 并安装了以下两个插件：

  • Akismet
  • Yoast SEO

通过运行 Google PageSpeed Insights，测试网站获得的初始分数分别是 82/84。接下来，让我们深入每一个提示，一步步的优化网站。

Google PageSpeed Insights 评分
Google PageSpeed Insights 评分

缩短服务器响应时间（TTFB）

缩短服务器响应时间（TTFB）
缩短服务器响应时间（TTFB）

大多数情况下，当使用预算比较低低共享主机方案时，就会出现这样低优化建议。因此，为了解决这个问题，我们需要实现缓存以加快网站运行速度。有很多优秀低插件可以使用。

在本示例中，我们将使用 KeyCDN 团队开发的免费 Cache Enabler 插件。

Cache Enabler WordPress 插件
Cache Enabler WordPress 插件

截止今日，Cache Enabler 插件已经 50,000 多个有效安装，星级评分为 4.6 分。它是 WordPress 的轻量级缓存插件，通过生成静态 HTML 文件和 WebP 支持，从而使得你的网站更快。如果你想获取更快的速度，那么建议你参阅 KeyCDN 的官方文档添加一些额外的代码配置。

现在，我们再运行一次 Google PageSpeed Insights 测试。可以看到缩短服务器时间（TTFB）的优化建议已经消失。

移除阻塞渲染的资源

下一个我们要修复的 Google PageSpeed Insights 优化建议是：移除阻塞渲染的资源。这里其实有两层含义，第一是移除阻塞渲染的 Javascript，第二是移除阻塞渲染的 CSS。

移除阻塞渲染的资源
移除阻塞渲染的资源

当浏览器在加载网页之前，需要下载并处理一些 Javascript 和 CSS 资源。但在一些特定的情况下，他们都是有条件地参与首屏渲染，或者根本无需参与首屏渲染。所以如果想为用户提供最快的加载体验，我们应该尝试消除首屏内容所不需要的任何阻止渲染的资源。

关于阻止渲染的Javascript，Google 有三条建议：

  • 如果外部脚本较小，可以内嵌。我建议大家使用Autoptimize等插件来实现。但值得注意的是，这通常仅适用于小型网站，大多数 WordPress 网站都有很多外部脚本，那么这个方案可能会让你失望。
  • 异步加载 Javascript。异步加载的本质是在 HTML 解析期间下载文件，并在下载完成后暂停 HTML 解析器并执行它。
  • 延迟加载 Javascript。Defer 属性同样是在 HTML 解析期间下载文件，但它仅在解析完成后执行。

在我们的示例中，我们将异步加载 Javascript。为此，将用到一个 Async Javascript 的免费插件。在撰写本文时，他已经有超过 50,000 多个安装及 4.2 的评分。它的原理是将 “async” 或 “defer” 属性添加到 WordPress wp_enqueue_script 函数加载的所有 Javascript 函数中。

异步示例：

<script src="file1.js" async></script>

延迟示例：

<script src="file1.js" defer></script>

安装完成后，只需进入网站后台设置页并启用 Async Javascript。

Async Javascript 设置
Async Javascript 设置

针对中大型网站，脚本排除可以派上用场（或者购买插件的高级版本）。本示例中我们无需购买。值得一提的是，如果你拥有一个大量 Javascript 的网站，只是通过 Async Javascript 插件将网站外部脚本都设置为 Async 或 Defer，那么你可能或者一定会遇到错误。在这种情况下，你需要针对特定的脚本进行排除。

Async Javascript 脚本排除
Async Javascript 脚本排除

如果你不想使用插件，那么你还有一些其他选择，比如添加以下代码到主题的 function.php 文件中：

/*function to add async to all scripts*/
function js_async_attr($tag){
    # Add async to all remaining scripts
    return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr');

以下是另外一篇文章，讨论在没有插件的情况下添加异步或延迟的案例。

关于阻塞渲染的CSS，Google 建议如下：

  • 内嵌较小的 CSS 文件
  • 请勿内嵌较大数据 URI
  • 请勿内嵌 CSS 属性

解决阻塞渲染的 CSS 最简单的办法是使用 Autoptimize 插件。

Autoptimize 自动优化 WordPress 插件
Autoptimize 自动优化 WordPress 插件

Autoptimize 是一个轻量级插件。在撰写本文时，它就有超过 70,0000 多的有效安装及 4.5 的评分。它可以帮助我们合并及压缩 Javascript 或者 CSS 脚本，同时也可以将样式（CSS）移动到页首，将脚本（Javascript）移动到页脚。Autoptimize 插件与之前安装的 Async Autoptimize 插件完全兼容，好吧，他们就是由同一个人开发的。

安装插件后，进入网站后台设置页并勾选 “优化 CSS 代码”，然后打开高级选项（标题右侧），启用 “聚合内联 CSS” 和 “内嵌所有 CSS”。值得注意的是，对于中大型网站，该方法可能并不适用，内联会导致很糟糕的结果，那么在这种情况下，简单的忽视 Google PageSpeed Insights 的建议会更好一些。

Autoptimize 自动优化 WordPress 插件设置
Autoptimize 自动优化 WordPress 插件设置

同时，我也建议大家启用优化 HTML 代码选项。

优化 HTML 代码
优化 HTML 代码

好的，我们再运行一下 Google PageSpeed Insights，可以看到关于移除阻塞渲染的资源这条优化建议已经消失。但是缩短服务器响应时间这条建议又出现了，博主认为这是服务器配置太低，以及国内网络环境的原因导致的。

优化移除阻塞渲染的资源
优化移除阻塞渲染的资源

采用高效的缓存策略提供静态资源

接下来，我们要修复的下一个建议是采用高效的缓存策略提供静态资源。

采用高效的缓存策略提供静态资源
采用高效的缓存策略提供静态资源

触发这条建议的最常见原因是 Web 服务器没有为资源添加适当的标头。在上面的截图中，我们可以看到所有的内部脚本及图片都没有指定过期的时间。

有两种方法可以解决这个问题，一种是 Cache-Control 标头，另外一种是 Expires 标头。Cache-Control 标头打开客户端缓存并设置资源的 max-age；Expires 用于指定资源失效的时间点。

你不一定同时添加这两个标头，因为这显得多余。Cache-Control 通常是推荐的方法，但是，某些 Web 性能工具（例如 GTmetrix）依然会检查 Expires 标头。本示例中我将简单地在 Nginx 中添加 Cache-Control 标头。

在 Nginx 中添加 Cache-Control 标头

添加以下内容至 Web 服务器的 Nginx server 段，以设置 Cache-Control 标头。

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 15d;
    add_header Cache-Control "public, no-transform";
}

在 Nginx 中添加 Expires 标头

location ~* \.(jpg|jpeg|gif|png)$ {
    expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
    expires 15d;
}

在 Apache 中添加 Cache-Control 标头

通过 .htaccess 文件添加以下内容来设置 Cache-Control 标头。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=604800, public"
</filesMatch>

在 Apache 中添加 Expires 标头

同样的，通过 .htaccess 文件添加以下内容来设置 Expires 标头。

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

现在，我们再来运行 Google PageSpeed Insights 测试，采用高效的缓存策略提供静态资源建议已经消失。

优化采用高效的缓存策略提供资源
优化采用高效的缓存策略提供资源

从现在开始，我将给出其他 Google PageSpeed Insights 的修复建议，但这些修复建议并没有在测试网站中出现，因为他们是通过的状态。

推迟加载屏幕外图片

首先是推迟加载屏幕外图片。

推迟加载屏幕外图片
推迟加载屏幕外图片

屏幕外图片指的是在屏幕视口以外的图片，由于只有当用户滚动屏幕后才能看到这些图片，所以我们可以试着让他们延迟加载，也就是说浏览器打开网站时只加载首屏内的图片。

我们使用 WordPress 插件 BJ Lazy Load 来实现推迟加载屏幕外图片。在撰写本文时，它有超过 80,000 多的有效安装及 4 星评分。它允许浏览器延迟加载缩略图、头像、Iframe，并使用占位图替换内容。

启用文本压缩

启用文本压缩
启用文本压缩

所以现代浏览器都支持并自动协商 Gzip 所有 HTTP 请求的压缩。启用文本压缩可以将传输响应的大小减少多达 90%，这可以显著减少资源下载的时间，减少客户端的数据使用量，并缩短首次呈现页面（TTFB）的时间。

我们可以借助 Gzip 压缩工具来检查网站是否已经设置并启用来文本压缩。

Gzip 检查工具
Gzip 检查工具

有几种方式来启用文本压缩，首先最简单的方法是使用支持启用 Gzip 的缓存插件。例如，WP Rocket 使用 mod_deflate 模块自动在 .htaccess 文件中添加 Gzip 压缩规则。W3 Total Cache 也可以在它的性能部分启用 Gzip 压缩。

第二种方法是编辑 .htaccess 文件并添加以下部分。您可以通过 FTP 在 WordPress 的根目录找到 .htaccess 文件。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

如果你的 Web 服务器运行 Nginx，那么添加以下部分到 nginx.conf 中。

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

对图片进行高效编码

优化图片
优化图片

对图片进行高效编码也就是说优化图片。这是一个非常重要且有用对建议，根据 HTTP Archive，截止 2016年11月，图片平均占网页总大小的 65%。优化图像也可以说是改进 WordPress 性能的最简单有效的方式之一。

有几种方法可以解决这个问题，首先是使用图片优化插件。插件可以批量优化 WordPress 现有的图片，或者在上传图片的时候优化他们。下面是一些常用的图片优化插件。

这些插件都可以解决问题，或者你可以把图片上传至 Adobo Photoshop、Affinity Photo、Squoosh、TinyPNG等工具对图片进行压缩后再上传至服务器。

使用 Affinity Photo 压缩图片
使用 Affinity Photo 压缩图片

一些补充

除了以上一些 Google Pagespeed Insights 提供的优化建议之外，还有一些我认为可以进行优化的部分，我们接着往下看。

移除 Google 字体造成的阻塞渲染

在移除阻塞渲染的资源那一部分，如果网站上安装了 Google 字体，那么 Google PageSpeed Insight 会认为它阻塞了网页的渲染。要解决这个问题，我们可以使用禁用 Google 字体插件，安装插件后，网站会停止显示 Google 字体。如果我们必须安装 Google 字体，那么我们可以到 Google 字体手动获取并嵌入代码。

<link href =“https://fonts.googleapis.com/css?family= Libre + Franklin：300,300i，400,400i，600,600i，800,800i ”rel =“stylesheet”>
Google 字体代码获取
Google 字体代码获取

然后，我们把这段代码添加到 footer.php 文件中，比如 </body> 之前。但是注意，这样做会导致 FOUT，也就是大家经常看到的字体闪烁。但同时它也会解决渲染阻赛的问题。

WordPress 页脚添加 Google 字体
WordPress 页脚添加 Google 字体

总结

通过这篇文章，我们更好的理解了 Google PageSpeed Insights 修复建议的含义及对应解决措施。当然，对于大型网站，你可能永远也不会获得 100/100 的分数。但是，如果你这样做了，那么你会看到网站速度的提升是显著的。请永远记住，网站的速度和感知性能永远是最重要的，不要过分沉迷分数。

如果你喜欢这篇文章，请记得点赞，转发请标明https://www.rateltalk.com/。