如何在Google PageSpeed Insights测试中取得满分

我们在《网站速度测试教程【附15个常用网站速度测试工具】一文中提到的网站性能测试工具之一就是Google PageSpeed Insights，它是前端开发中经常使用的在线开发工具之一。Google PageSpeed Insights可以全面考察网站的各个方面，对其进行评估评分并给出相应的建议，便于技术开发和网站的针对性优化。

对于一个追求完美的WordPress站长来说，他期待自己的网站获得更高的Google PageSpeed Insights评分。分数越高，你的网站优化越好。

今天，我们将与您分享一些技巧和策略，帮助您的WordPress网站在Google PageSpeed Insights中获得更高的分数。

本文的核心内容包括:

# 1谷歌页面速度洞察的重要性

#2如何实现Google PageSpeed Insights测试满分2.1开启Gzip压缩

2.2优化图像音量

2.3移除阻碍渲染的资源。

2.4启用浏览器缓存

2.5缩短服务器响应时间

2.6最小化JavaScript

# 3 page speed的其他改进点

# 1谷歌页面速度洞察的重要性

Google PageSpeed Insights是Google开发设计的网站性能测试工具，可以帮助你根据最佳优化建议全方位优化你的网站。

截至2018年，速度得分现在通过Lighthouse(灯塔)计算，这是一个开源的自动化工具，旨在提高网页质量。灯塔实际上可以检查网站的前端内容，如性能、可访问性、渐进式web应用等。

Google page speed insights网站

但是有一点很重要的是要记住，不要总是太执着于100分满分。因为对于一些网站来说，这个完美的目标几乎是不可能的。比如很厉害很复杂的题材，电商，会员制网站，这些网站都比较复杂，拿满分就不错了，比如上天堂。

我们更应该关注网站的速度，而不是分数。Pingdom、GTMetrix和Google PageSpeed Insights等测速工具的分数有时会让你误入歧途。真正重要的是保证你的网站加载快，感知性能达标。感知性能是指网站用户感受到的加载速度。

此外，网站加载速度也成为搜索引擎对网站评级的标准之一。所以网站SEO优化如果有效果，这部分的运营是不可忽视的。关于WordPress网站的SEO，也可以关注我们推出的一系列相关插件:

智能搜索引擎优化工具WordPress博客易于使用的搜索引擎优化插件

百度搜索推送管理WP插件Pro版-提高百度收藏效率

spider analyst——WordPress搜索引擎蜘蛛统计分析插件

在热门关键词推荐插件Pro-WP里找关键词就是这么简单。

谷歌会使用PageSpeed Insights吗？

Google使用PageSpeed Insights是考虑SEO和页面速度排名因素还是纯粹的响应速度？谷歌网站站长趋势分析师加里·伊莉斯回应道，“两种方式我都会选。”

部分原因是，在大多数情况下，当你的网站运行缓慢时，你很可能会在Google PageSpeed Insights中收到许多警告。许多建议都与它们和纯响应时间的关系密切相关。它们并不总是100%相关，但Gary也提到，如果你的网站很慢，会影响你的排名。

2018年，谷歌进一步加强了网站加载速度在网站排名上的权重。以前，页面速度排名是根据你的网站在桌面系统上的加载速度来衡量的。但截至2018年7月9日，页面速度也成为移动搜索的排名因素。这意味着优化你的WordPress移动设备比以往任何时候都重要！

在本教程中，我们将以WordPress的默认主题Twenty Seventeen为例，安装Google Analytics、Akismet、Yoast SEO等。，然后使用PageSpeed Insights进行分析评估，根据评分建议逐一优化。最后，使用WordPress网站PageSpeed Insights的桌面设备和移动设备均达到100分(满分)。

虽然这是一个小网站，但至少可以帮助你了解Google PageSpeed Insights的工作原理，以及如何根据PageSpeed Insights的建议完成各种优化，让网站得到一个满意的分数，最重要的是提高网站的加载速度。

#2如何在Google PageSpeed Insights测试中获得满分

我们的测试站点安装在Apache主机上，使用WordPress的默认主题模板Twenty Tencent Theme。该网站配置了SSL和以下插件。

Yoast SEO

阿基斯米特

我们还将谷歌统计代码谷歌分析插入到header.php文件中。我们所做的唯一修改是将特色图片添加到默认的“Hello world！”在文章中。我们通过Google PageSpeed Insights运行我们的测试网站，得到了69个桌面分数和58个移动分数。默认分数低得可怜。让我们深入研究每个优化点，尽可能获得最高的评估分数。

优化前Google PageSpeed Insights评测评分截图

2.1打开Gzip压缩

我们先从桌面程序的优化点建议开始，因为很多优化点建议也适用于移动设备。我们可以看到Google PageSpeed Insights建议需要修复的第一点是启用压缩警告。

打开压缩建议

根据谷歌的说法，为了解决这个问题，我们需要启用Gzip压缩。一些服务器管理后台提供了启用选项，否则我们必须手动完成。

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

有几种方法可以实现Gzip压缩。第一种也是最简单的一种是使用支持Gzip的缓存插件。比如WP Rocket插件使用mod_deflate模块在中添加Gzip压缩规则。htaccess文件。w3cache插件也可以通过performance部分的设置来启用。

启用Gzip压缩的第二种方法是编辑。htaccess文件。如果你的WordPress主机使用Apache服务器，你只需要把下面的代码添加到。htaccess文件。你可以找到。通过FTP访问WordPress站点根目录下的htaccess文件。

# 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

确保将其添加到当前内容的下方。htaccess文件。例子如下:

添加GZIP压缩代码

如果你的WordPress站点运行在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;

如果您想检查您的网站Gzip压缩是否成功打开，您可以使用varvy gzip检测工具。以下是在我们的测试站点中启用Gzip压缩的效果截图:

为状态检测启用了GZIP压缩。

如果我们再次通过Google PageSpeed Insights运行我们的测试网站，我们可以看到Gzip compression on的警告现在已经消失了，桌面设备的评估分数从69增加到了80，移动设备的评估分数从58增加到了67。

启用GZIP压缩后的PageSpeed Insights分数

2.2优化图像音量

我们需要解决的下一个Google PageSpeed Insights建议是优化图像的警告。我们之前提到过“Hello world！”是WordPress主题的默认值。文章加了精选图片，所以会有这样的提示。

优化图片警告

这是一个非常重要和有用的警告。根据HTTP Archive的数据，截至2018年12月，图像平均占网页总容量的50%。优化图片可能是提高WordPress网站性能的最简单的方法之一。

有几种方法可以解决这个问题。其中之一就是使用WordPress图片优化插件。插件其实可以批量优化整个WordPress媒体库，上传时自动优化。以下是一些流行的图像优化插件:

图像优化器

Optimus图像优化器

短像素图像优化器

WP Smush

TinyPNG

这些插件会解决图片过大的问题，或者你可以在上传之前用Adobe Photoshop、Gimp或Affinity Photo等工具进行压缩。以下是触发该警告的精选图片。我们可以通过缩小和降低质量来预压缩。最好把图像保持得尽可能小。此图像的原始容量为2.32 MB。经过缩减和压缩后，卷可以压缩到99.38 kB。记住，上传之前最好将图片调整到最佳大小和音量，而不是依靠CSS来调整图片大小。否则会拖慢你的网站。

使用Affinity Photo压缩图像。

如果我们再次通过Google PageSpeed Insights运行测试网站，我们可以看到优化后的图片警告现在已经消失，桌面设备的得分从80增加到88，移动设备的得分从67增加到73。

压缩图像后评估分数。

推荐阅读:WordPress站长必备图片收藏及下载插件和图库网。

2.3移除阻碍渲染的资源。

接下来，我们需要修复的下一个Google PageSpeed Insights建议是删除第一个绘图页面中阻碍呈现的资源JavaScript和CSS。

删除阻止呈现的资源警告

当浏览器加载网页时，JavaScript和CSS资源通常会阻止网页在浏览器下载和处理之前显示。在显示任何内容之前，需要下载和处理一些资源。但是，很多CSS和JavaScript在第一次绘制页面时是不需要的。为了给用户提供最快的体验，您应该尝试删除阻止呈现的资源。

谷歌对移除Javascript这一阻碍渲染的资源有三点建议:

如果页面没有很多JavaScript并且很小，您可以内联解决这个问题。您可以使用Autoptimize之类的插件来内联JavaScript。然而，这实际上只适用于非常小的站点。大部分WordPress网站都会有三个以上的JavaScript，这种方法一般都适用。

第二种是异步加载JavaScript。异步Javascript本质上是在HTML解析过程中下载一个文件，下载后会暂停HTML解析器执行它。

第三是延迟加载JavaScript。defer属性也在HTML解析期间下载文件，但它仅在解析完成后执行。此外，具有该属性的脚本按照在页面上出现的顺序执行。阅读异步和延迟之间的区别。

在我们的例子中，我们将异步加载JavaScript。为此，我们将使用一个名为Async JavaScript的免费插件。你可以从WordPress插件库中下载，或者在WordPress仪表盘的“插件>安装插件”下搜索安装。在撰写本文时，它目前有8w+的有效安装，星级为4.5。本质上，该插件利用WordPress的wp_enqueue_script函数为所有JavaScript添加“async”或“defer”属性。开发人员还提供了一个高级版本，允许您选择异步或延迟的脚本。

异步加载示例

延迟装货的例子

安装后，只需进入设置并启用异步JavaScript。

异步加载JavaScript

对于较大的网站，脚本排除可以派上用场。或者获得插件的高级版本。在这个优化示例中，我们不需要它，但是如果您有一个包含大量JavaScript的网站，那么简单地将JS文件设置为Async或Defer可能弊大于利。这种情况下，需要对症下药，分别优化不同的JS脚本。

异步排除

如果不想为此使用插件，也可以通过修改代码来实现。例如，将以下代码添加到functions.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’, 10 );

我们再次通过Google PageSpeed Insights运行网站测试，可以看到阻止渲染JavaScript的问题已经修复。下一步是优化CSS交付。

优化CSS交付的技巧

可以看到我们需要优化的第一个CSS是Google Font(fonts . Google APIs . com)。默认情况下，CSS会阻止呈现资源，包括来自Web字体的CSS。为了解决这个问题，我们将安装一个免费插件来禁用谷歌字体。安装插件后，你的谷歌字体明显会坏掉。所以需要访问Google字体，手动获取嵌入代码。我们选择同样的字体作为27主题的默认字体。

谷歌字体嵌入

然后，您需要将它添加到footer.php文件中，就在标记之前。注意:这样做会产生FOUT，也就是他们所说的无风格内容的闪烁。指的是Web字体在下载渲染前短暂显示无风格文本的情况。但也会摆脱渲染阻塞问题。你必须考虑FOUT是否是你的访问者可以接受的用户体验。你也可以使用谷歌的网页字体加载器。

WordPress页脚中的谷歌字体

我们再次通过Google PageSpeed Insights运行我们的测试网站，发现只有一个优化CSS发送过程的警告，那就是style.css文件。

优化CSS发送过程。

解决这个问题最简单的方法之一是使用由弗兰克·古森斯开发的免费插件Autoptimize。

WordPress插件-自动优化

这个插件非常轻量级，不到200KB。在撰写本文时，它目前拥有超过100万个有效安装，其中4.5星。这个插件可以帮助您连接脚本、压缩文件、终止页眉、将样式移动到页眉、将脚本移动到页脚。这个插件与之前使用的异步JavaScript插件完全兼容。

安装插件后，点击设置，选择“优化CSS代码”。然后点击高级选项卡，启用“聚合内联CSS”和“内联所有CSS”。请注意，根据您正在做的主题，它可能不推荐这种方法。对于大型网站，内联并不适用。在这种情况下，最好直接忽略特定的Google PageSpeed Insights警告。请记住，使用HTTP/2，连接有时会降低网站速度。

优化CSS代码

我们还建议启用优化HTML代码选项。

优化HTML代码

如果我们再次通过Google PageSpeed Insights运行我们的网站，我们可以看到消除渲染阻塞的JavaScript和CSS警告已经消失，并且它还修复了Minify CSS警告。到目前为止，我们已经将桌面设备的得分从88分提高到92分，将移动设备的得分从73分提高到89分。现在我们离目标越来越近了。

JS和CSS优化后PageSpeed Insights的评测结果

2.4启用浏览器缓存

下一个Google PageSpeed Insights建议我们需要解决的是网站没有配置浏览器缓存警告。其实我们早前写过一篇关于浏览器缓存的文章——《如何使用插件/无插件优化WordPress网站的浏览器缓存》。

浏览器缓存未使用警告

触发浏览器缓存警告的最常见原因是您的Web服务器没有合适的头。在上面的屏幕截图中，您可以看到我们所有的内部脚本都没有指定到期日期的警告。在缓存方面，使用了两种主要方法:Cache-Control头和Expires头。当Cache-Control标头启用客户端缓存并设置资源的最大年龄时，Expires标头用于指定资源在特定时间点不再有效。

不一定需要加两个头，因为有点多余。Cache-Control是一种较新的、通常被推荐的方法，但是一些Web性能工具(如GTmetrix)仍然检查Expires头。这些都是例子。您可以更改文件类型、到期时间等。根据你的需求。这里有一些选择。我们将简单地在本教程的WordPress网站主机上添加Apache中的expire头。

在Nginx中添加缓存控制头
您可以通过在服务器Nginx配置文件中添加以下内容来添加缓存控制头。

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

在Nginx中添加Expires头
您可以通过在服务器Nginx配置文件中添加以下内容来添加Expires头。在此示例中，您可以了解如何根据文件类型指定不同的到期时间。

location ~* .(jpg|jpeg|gif|png)$ {expires 365d;}location ~* .(pdf|css|html|js|swf)$ {expires 2d;}

在Apache中添加缓存控制头
您可以通过将以下内容添加到。Apache服务器的htaccess文件。

Header set Cache-Control “max-age=604800, public”

在Apache中添加Expires头
您可以通过在中添加以下内容来添加Expires头。Apache服务器的htaccess文件。

## EXPIRES HEADER CACHING ##ExpiresActive OnExpiresByType 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”## EXPIRES HEADER CACHING ##

还记得我们之前启用Gzip压缩的时候吗？这是我们的。添加过期头后，htaccess文件看起来像现在这样。我们只是把它放在压缩模块下面。

过期的标题代码

我们再次通过Google PageSpeed Insights运行我们的测试网站，浏览器缓存警告说只剩下一个Google分析脚本了。真是讽刺。毕竟这是你谷歌提供的脚本。要知道，Google只为这个资源设置了2小时的缓存时间，如下图截图所示。Google之所以设置这么短的缓存时间，应该是因为他们在更新脚本代码的时候，客户端可以第一时间获得最新版本。不过，还是有办法解决这个问题，那就是在本地托管Google Analytics脚本。请注意，谷歌不建议这样做。

谷歌分析统计代码脚本缓存

有一个免费的小插件叫做完整的分析优化套件，由金奎大·范·登·伯格创建和开发，它允许你在WordPress网站上本地托管谷歌分析。

WordPress插件-CAOS

你可以从WordPress官网下载完整的分析优化套件，也可以在WordPress dashboard的“插件-安装插件”下搜索安装。截至撰写本文时，该插件目前已有1w+的有效安装量，并获得5颗星的满分。这个插件允许你在本地托管你的Google AnalyticsJavaScript文件(analytics.js ),并通过使用WordPress函数wp_cron()保持它的更新。其他功能包括能够轻松匿名的访客的IP地址，设置调整后的跳出率和脚本的位置(页眉或页脚)。

只需安装插件并输入您的Google Analytics跟踪ID，插件就会将Google Analytics的必要跟踪代码添加到您的WordPress网站，下载并保存analytics.js文件到您的服务器，并通过使用wp_cron()中的计划任务脚本保持更新。我们建议将其设置为在页脚加载。注意:这个插件与其他谷歌分析统计代码插件不兼容。

在本地存储Google Analytics脚本代码。

如果我们再次通过Google PageSpeed Insights运行我们的网站，我们可以看到没有关于浏览器缓存的警告！并且桌面设备和移动设备的评分分别提高到了97分和96分，近乎完美。

修复浏览器缓存警告后的PageSpeed Insights分数

2.5缩短服务器响应时间

我们需要修正的下一个Google PageSpeed Insights建议是减少服务器响应时间警告。很多时候，这通常是服务器响应时间慢造成的，也就是用的主机服务器就那样。因此，我们需要使用缓存插件来加快速度。这个例子使用了key dn-Cache Enabler开发的免费插件。

WordPress缓存插件-缓存启用程序

在撰写本文时，Cache Enabler已有40，000多个有效安装，评级为4.5星。它是WordPress的一个轻量级缓存插件，通过生成静态HTML文件和WebP来提高网站的加载速度。无需设置，只需安装并启用即可。这个插件完全兼容以前使用的异步JavaScript和自动优化插件。如果你想要更快的速度，我们建议你也添加高级代码片段来绕过PHP，以检索由WordPress Cache Enabler插件创建的静态HTML文件。。

再次通过Google PageSpeed Insights运行我们的网站，您可以看到减少服务器响应时间的警告消失了！桌面和移动设备得分都达到了99分的峰值。此时，你想要击掌吗？

响应时间问题修复后的PageSpeed Insights得分

但需要注意的是，有很多潜在的因素可能会拖慢服务器的响应速度:包括插件、框架、库、CPU或内存不足等。，导致数据库查询缓慢。

2.6最小化JavaScript

我们需要修正的最后一个Google PageSpeed Insights建议是Minify JavaScript警告。

最小化JavaScript警告

为了解决这个问题，我们实际上将返回到Autoptimize插件来设置启用优化JavaScript代码选项。因为您安装了缓存插件，所以您可能还需要在完成此操作后清除缓存才能看到结果。

如果你把自动优化插件作为优化WordPress的主要手段，推荐阅读WordPress网站优化插件自动优化设置教程。

优化JavaScript代码

终于，我们见证奇迹的时刻到了。我们测试网站的Insights评分达到了我们人生的巅峰——满分100分。

Google page speed Insights桌面设备得了100分。

以下是移动设备得分。我们没有为移动设备做任何额外的事情。桌面设备打了100分之后，移动版网站的用户体验得分也达到了100分。

Google page speed Insights为移动设备打了100分。

# 3 page speed的其他改进点

在本教程中，我们只针对Google PageSpeed Insights进行优化。其实除了以上几点，我们还可以做更多来提高网站的加载速度:

删除查询字符串

用CDN加速网站

通过出色的压缩进一步优化我们的图像。

懒惰加载图片

如果有机会，我们也可以花时间把这几点一一解释清楚。

总结

本教程的目的是更好地解释和理解Google PageSpeed Insights在检测网站时给出的警告，以及我们可以采取哪些措施来解决这些问题。一旦你更好地理解了这些，你就可以将这些策略应用到更大的网站上。当然，对于大型网站，你可能永远得不到满分100分！我们应该以满分为目标去做。虽然很难，但还是建议你尽量去做，网站的速度会大大提高。记住，网站的速度和用户体验非常重要。不要太在意分数。