动手改善Google PageSpeed

69 阅读 0 评论 46 点赞

我是靠谱客的博主勤恳未来，最近开发中收集的这篇文章主要介绍动手改善Google PageSpeed，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是Google PageSpeed？

Google PageSpeed是一款免费工具，可评估您的网站在移动和台式机平台上的性能和可用性。这一点特别重要，因为Google使用它来确定我们的SEO排名的关键要素，即我们在搜索结果中的排名。

如果您想获得更多有关提高网站速度的好处的背景信息，请阅读Moz的“ 为什么要将网站速度优化作为您的SEO策略的一部分” ，其中着重指出：“ ...一些案例研究表明，加载速度更快的页面与更高的收入密切相关。”

在本教程中，我将引导您完成一些技术方法，以优化WordPress网站的PageSpeed。虽然基本更改非常简单容易，但更全面的更新实际上可能具有挑战性。

有趣的是，自定义网站可能比WordPress网站更易于优化-这是因为该框架广泛使用了第三方主题和插件。它还基于在流行之前设计的体系结构，并且依赖于不完美的体系结构来实现向后兼容性。

在开始之前，请记住，我确实会尝试参加以下讨论。如果您有任何问题或建议，请在下面发表评论，或通过Twitter @reifman与我联系。我对您在WordPress和PageSpeed方面的经验很感兴趣。

我的初始PageSpeed得分

对于本教程，我将专注于改善我的个人网站JeffReifman.com 。

不久前，我的PageSpeed是Mobile 65和Desktop 64-不太好：

注意：如果您对 Russell Wilson 的 有趣移动屏幕截图 感到好奇，请阅读以下文章 。

在开始进行优化之前，让我们谈谈一些基本的WordPress性能因素。

基本WordPress性能

有几种主要方法可以开始优化WordPress网站以提高性能并提高PageSpeed。

主题选择

各种主题的PageSpeed受到JavaScript文件和CSS使用的数量和大小，使用的图像数量和大小以及其移动实现方式（即当今通常响应）的影响很大。

如果您正在寻找一个新的WordPress主题市场并希望评估PageSpeed，您可能会惊讶于著名主题的得分通常在60年代和70年代，甚至到90年代。这是几篇通过ColorLib和WPMU评估主题和PageSpeed的文章。无论如何，我期望更高。

我已经使用“我的网站，我的方式”的“构建”主题已有好几年了。有趣的是，该公司的支持网站最近一直保持沉默，他们没有为用户留下任何解释。

但是，因为将不再有主题的更新，所以它使我对本教程的性能进行了一些根本性的更改变得更加容易，而不必处理公司将来的代码更新。我会尽快解决。

托管公司

使用专用服务器的性能很可能会比日益常见且价格更便宜的共享虚拟服务器更好。过去，我已经写过关于如何在共享提供商（例如Digital Ocean）上安装WordPress的文章。诸如WP Engine之类的服务之间也存在中间关系，它可以吸引开发人员以及共享和专用服务器。

主机的质量也很重要。许多共享的WordPress提供商的准系统可能会提供不一致的性能。

例如，我在Digital Ocean虚拟服务器上托管的WordPress和WP Engine上托管的Flee the Jungle中都使用了KnowHow主题。这些站点的内容权重相当相似，例如，文本和图像的使用情况。使用WordPress的PageSpeed进行发布的PageSpeed是Mobile 73和Desktop 88，而WP Engine的Flee the Jungle则要快一些（Mobile 78和Desktop 91）。 WP Engine的托管托管比我在共享服务器上的自助托管要快一些。

我还看到亚马逊的低端AWS托管的性能不佳。你得到你所付出的。

快取

WordPress缓存对于性能至关重要，因此我经常写我的收藏夹：W3TC和Varnish Cache，例如，使用Varnish和W3 Total Cache优化WordPress 。

内容分发网络（CDN）

另一个至关重要的服务是内容交付网络。早些时候，我写过有关使用 Envato Tuts +的KeyCDN加速内容交付的信息，然后决定切换到它们。

图像优化

定期减小整个WordPress中图像的尺寸和文件大小既耗时又至关重要。

我经常使用Acorn作为轻量级工具来快速缩小网络图像。最近有人在推特上说他们刚刚打开Photoshop，并在加载时可以打个电话，我笑了起来-Acorn又小又快。 Adobe订阅模型的加载速度太慢，很抱歉，订阅者。

也有自动图像优化插件，例如WP-Smush 。我最近开始尝试KeyCDN的新Optimus 。另外，这是WPMU的10个最佳图像优化插件的摘要，可加快WordPress网站的运行速度。

我也越来越多地从Flickr外部访问帖子中的图像。例如，当我关于西雅图由亚马逊驱动的邻里增长的帖子在Slashdot上广为传播时，所有照片都没有性能问题或带宽成本，因为Flickr负责了。

您可以阅读《 Google PageSpeed的图像优化指南》，但我越来越发现，Google帮助过于注重研究（作为资源很高兴），但对解决自己的问题不是很有用。那里博士学位可能太多，而实际用户却太少。

我更新的PageSpeed分数

虽然我一直都有W3TC和Varnish，但是添加KeyCDN和Optimus可以将PageSpeed提升到Mobile 72和Desktop 82，比65和64有了很大的改进：

有趣的是，无论您如何改进，Google的图像缓存投诉似乎都可以无限期地继续下去。在本教程中，我尝试优化了一些确定的剩余违规者，以了解会发生什么。结果很有趣，稍后我将告诉您更多信息。

PageSpeed优化挑战

如果您已完成上述所有主要基础知识，那么使用WordPress改进PageSpeed可能需要大量的工作，并且可能会非常耗时。

WordPress的挑战

静态站点通常只有一个包含CSS和JS的文件，这些文件可以轻松缩小和合并。 WordPress要复杂得多。

如此之多是通过WordPress的动态创建的-比完美的架构还差。查找文件的创建位置，主题文件或插件文件以及如何解决这些问题可能需要花费一些时间。事实证明，当您有七个包含JavaScript文件的插件，并且想要在允许常规插件升级的同时将它们最小化并将它们合并为一个include时，这是一个很大的挑战。

使用缩小

HTML缩小

更新我的W3TC HTML缩小设置可以快速解决PageSpeed关于此问题的投诉。

CSS缩小

对于CSS，我必须单独添加PageSpeed提醒我的文件到W3TCCSS文件管理中。然后W3TC开始精简我CSS，并将命名的文件组合成一个要包含的文件。

这解决了PageSpeedCSS缩小要求。

它还将报告用于渲染阻止CSS文件的数量从七个与主题相关的文件减少到四个（在“优化CSS交付”下首先列出）：

剩下的三个文件来自主题之外的插件目录（我们将在后面进行探讨）：

我希望这能使您对WordPress PageSpeed优化Swift成为兔子的空洞感有所了解。

JavaScript缩小

虽然缩小和合并CSS通常很容易，但是当您尝试执行此操作时，JavaScript往往会失败很多，从而造成重大的站点中断错误。

有趣的是，PageSpeed现在提供了它不喜欢的文件压缩版本的完整压缩下载。

它列出了我要修复的十个JS文件：

作为参考，这里有更多关于HTML，CSS和JS的Google PageSpeed的最小化资源。我还使用了Refresh SF ，它可以轻松地通过Web访问各种压缩工具。

压缩和合并JavaScript肯定会造成bug，因此我必须逐步解决。使用W3TC的JS文件管理，我在Construct主题内缩小并合并了七个JS文件：

这使我无法解决我的插件的JS文件或遇到的一个神秘的，无法找到的外部托管base.js文件。让我们继续研究“渲染阻止”问题，然后再返回到JS缩小。

消除渲染阻塞

如果您需要加载多种文件以样式（CSS）并激活（JS）网页功能，则在并行请求四个资源后，大多数浏览器将变慢。

这是PageSpeed中CSS渲染阻止投诉的示例：

虽然W3TC已将其中许多组合到了它的include.c46b63.css中，但是上面的下三个来自我的插件。

博主Justin Tadlock提供了一些指导，解释了如何要求WordPress不要加载我的插件已排队加载CSS文件。答案是注销它们，然后自行加载合并的文件。

这是我的目录插件，将其JS和CSS文件放入队列：

/**
* Register and load CSS and javascript files for frontend.
*/
function wp_enqueue_scripts()
{
    $js_vars = array();
	
	// register our CSS and scripts
	wp_register_style( 'toc-screen', $this->path . '/screen.min.css', array(), TOC_VERSION );
	wp_register_script( 'toc-front', $this->path . '/front.min.js', array('jquery'), TOC_VERSION, true );
	
	// enqueue them!
	if ( !$this->options['exclude_css'] ) wp_enqueue_style("toc-screen");
	
	if ( $this->options['smooth_scroll'] ) $js_vars['smooth_scroll'] = true;
	wp_enqueue_script( 'toc-front' );

按照Tadlock的建议，我注销了插件，将其包含在主题的functions.php中，首先将其CSS删除-您必须找到插件开发人员使用的引用：

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

  function my_deregister_styles() {
      wp_deregister_style( 'toc-screen' );
  	wp_deregister_style( 'blogsynthesis_jss_css' );
  	wp_deregister_style( 'edd-styles' );  	
  }

我使用这三个插件样式表手动创建了组合CSS文件。然后，我要求W3TC将该文件缩小并将其合并为自己的mega-stylesheet：

这里存在一个主要问题，当我更新插件时，可能需要更新此组合CSS文件及其随附的JS文件。

这是一篇博客文章，提供了一些其他方法可用于应对这些挑战。

使用Tadlock的方法，以下是PageSpeed渲染阻止的样子：

对于JS文件，我遵循了相同的步骤，只是稍加小心。渐渐地，我对我的网站的PageSpeed的JS投诉变得相当轻微：

但是，正如您在下面看到的那样，它还抱怨我无法在代码库中找到JS文件的链接，例如Doubleclick的ad_status.js。

删除旧版YouTube播放器嵌入

最终，我发现JS缩小问题和此缓存问题均与我使用外部YouTube视频播放器有关。

虽然我很想尝试此处建议的一个小修补程序，以防止在没有用户操作的情况下加载视频，但我决定只从主页幻灯片放映中删除视频。

我的Construct主题嵌入YouTube文件的方式很可能是旧解决方案。 YouTubeHTML5支持现在可能会好得多。尽管如此，一个Google服务如何影响另一个Google服务的性能得分还是有点有趣。

删除主页上嵌入YouTube视频的一项功能可以解决一些问题：

由于我不想让您错过在被WordPress破坏之前能见到我更好的一半的机会，因此我将在此处提供视频。我曾经是一个好人。

这是正在发生的事情：

它要压缩的外部托管s.ytimg.com base.js文件是由此YouTube视频嵌入生成的。
而且static.doubleclick.net/instream/ad_status.js也是如此。花了一段时间来跟踪此文件的位置。 Safari开发者控制台帮助我看到了YouTube框架内的base.js和ad_status.js（在PageSpeed改进的深渊中，我现在爱丽丝向我介绍了自己）：