如何达到100的PageSpeed
欢迎使用Google PageSpeed系列的第二部分。 在第一集中 ，我优化了网站当时主题MySiteMyWay的Construct的PageSpeed。 我设法达到了70 Mobile和86 Desktop。
但是，随着MySite的关闭 ，我选择了一个新主题，并为Mobile和Desktop达到了100 PageSpeed。 我花了大约12个小时的额外精力来完成此任务。 现在，我的网站的性能是我很长时间以来看到的最快的WordPress网站之一- 请查看 。 浏览几乎是瞬时的。
在本教程中，我将带您逐步了解如何完成此工作以及对WordPress和Google PageSpeed的了解。 在我工作的大部分时间里，我认为我可能会在90年代达到顶峰。 当桌面版的PC突然跃升至100时，我感到有些惊讶-剩下一些细节可以最大化Mobile。
对于那些不知道的人， Google PageSpeed是一个免费工具，可以评估您的网站在移动和台式机平台上的性能和可用性。 这一点特别重要，因为Google使用它来确定我们的SEO排名的关键要素，即我们在搜索结果中的排名。
如果您想获得更多有关提高站点速度的好处的背景知识，请阅读Moz的“ 为什么站点速度优化应成为您的SEO策略的一部分” 。 它着重指出：“ ...几个案例研究表明，加载速度更快的页面与更高的收入密切相关。”
Google和WordPress并不容易
最终，优化我的PageSpeed需要花费大量时间和精力，并使我的网站容易受到将来的插件和Google脚本更新的攻击。 这项工作很多都是令人困惑，注重细节且耗时的。 这也有点发疯和麻木。 谢谢，谷歌。
静态站点通常只有一个包含CSS和JS的文件，这些文件可以轻松缩小和合并。 WordPress要复杂得多。 如此之多是通过WordPress的动态创建的-比完美的架构还差。
查找文件的创建位置，主题文件或插件文件以及如何解决这些问题可能需要花费一些时间。 事实证明，当您有七个包含JavaScript文件的插件，并且要在允许常规插件升级的同时将它们最小化并合并为一个包含，这在主题和插件不断变化的WordPress世界中是一个很大的挑战。
这使许多开发人员感到悲伤 ：
图片来源：我的照片来自巴黎毕加索博物馆。 现在可以称为“面向移动55 /台式机62的哀伤的开发人员PageSpeed”
就是说，让我通过展示我的工作方式来鼓励您（您今天没有任何有用的事情，对吗？）。 请记住，您网站的需求可能与我的有所不同。
在开始之前，请记住，我确实会尝试参加以下讨论。 如果您有任何问题或建议，请在下面发表评论，或通过Twitter @reifman与我联系 。 我对您在WordPress和PageSpeed方面的经验很感兴趣。
PageSpeed 100的基本步骤
选择一个新主题
如果您正在寻找一个新的WordPress主题市场并希望评估PageSpeed，您可能会惊讶于著名主题的得分通常在60年代和70年代，甚至到90年代。 这是几篇通过ColorLib和WPMU评估主题和PageSpeed的文章。 无论如何，我期望更高。
就像业界期望的一个例子一样， 《纽约时报》网站给我的评分是53/55，远远低于100。
各种主题的PageSpeed受到JavaScript文件和CSS使用的数量和大小，使用的图像数量和大小以及其移动实现方式（即当今通常响应）的影响很大。 有些创作者在构建时似乎并没有看其PageSpeeds。
数组主题中
对于本教程，我将专注于改善我的个人网站JeffReifman.com 。 我出于某些原因选择了“按阵列主题排列 ”。
首先是其基线速度。 中级得分的Mobile 74和Desktop 89从其演示服务器开始。 尽管这已经比我将最大的Construct最大化了，但它是一个更现代的主题，还有很多我可以尝试的优化步骤。 我希望将PageSpeed带入80年代或90年代的低谷。
另外，鉴于移动读者的增长，我想摆脱对侧边栏的依赖，尤其是在广告展示位置上（我希望在 正在进行的Google DFP系列中 写下我的新收入方向 ） 。 中型主题很好地完成了将左侧边栏折叠为响应菜单并隐藏其右侧边栏的工作。
中型的初始PageSpeed
这是中型演示的初始PageSpeed（演示托管从未严格优化）。 看到它有很多未解决的问题实际上是令人鼓舞的，因为它表明，在进行额外的努力以及我知道为提高其得分而执行的类似任务之前，它比我优化过的Construct更好：
这里有更多的问题：
和更多：
而用户体验的挑战则更加局限在：
最后，这是其演示版桌面得分：
受基础分数的鼓励，我在服务器上购买并安装了Medium主题 ，然后开始工作。
请记住，更改主题可能会非常复杂。 对我而言，用Construct主题替换，消除和更新内置的短代码花费了最多的时间，而我还没有完全完成，例如首字下沉，pullquote变体，按钮，选项卡和基于页面的导航菜单。 无论如何，我争取100的努力使我前进。 如何在WordPress中执行大量搜索和替换为查找和替换短代码提供了一些很好的解决方案。
虽然本教程不会指导您完成将网站的PageSpeed提升到100的确切步骤，但将指导您完成许多可能的解决方案并找出常见的障碍。 最后，我将分享另一个很棒的通用资源。
WordPress性能的基石
我确实联系了ArrayThemes，了解有关Medium主题的100以下演示性能的信息。 他们收到了很好的回应：
PageSpeed优化测试应该花一点时间...我们的演示由于不进行缓存而令人难忘，但是我们实际上并不需要在演示中进行缓存... PageSpeed建议并非完全准确，也不是性能的典范一个主题。 这将完全取决于您的设置，服务器，缓存以及您决定进行的其他优化。
这是审查WordPress性能的常见基础要素的完美起点。 下面的所有性能领域都针对基本的PageSpeed得分，而不是基础。
快取
WordPress缓存对于性能至关重要，因此我经常写我的收藏夹：W3TC和Varnish Cache，例如， 使用Varnish和W3 Total Cache优化WordPress 。
事实证明，有一些旨在帮助您应对高效缓存挑战的插件。 这是我尝试过的最好的两个：
- Minit ：一个结合CSS和JavaScript文件的WordPress插件。
- 依赖关系最小化：使用标准依赖关系系统自动串联和最小化所有排队的脚本和样式表。
图片来源： WordPress Tavern
两者都很有帮助，但对我而言，都没有消除与PageSpeed相关的障碍，例如将CSS嵌入我的标记中以消除PageSpeed问题； 换句话说，这个外挂程式可能无法让您一路攀升至100 PageSpeed。 我发现“依赖最小化”是有效且有用的，但是它缺乏灵活性，使我无法使用。
最终，我将反复回到W3 Total Cache并找到更强大的新方法来提高性能。 它不是完美的，并且肯定有一些UX错误，它可以用足够的方式很好地工作，让我找到其他使用PageSpeed 100的方法的道路。
最后，我只选择了一个新插件，该插件可以轻松解决Disqus上的PageSpeed问题，我将在下面进一步讨论。
内容交付网络（CDN）
另一个至关重要的服务是内容交付网络。 早些时候，我在Envato Tuts +上写过有关使用KeyCDN加速内容交付的信息 ，然后决定以客户身份转向他们。
最后，您可以选择多种CDN，例如CloudFlare和RackSpace 。
图像优化
最近，我开始尝试使用KeyCDN的新Optimus图像优化服务和WordPress插件。 它由旧的Apple Lisas和Macs建造的机器人运行的可能性很小：
它运作良好，但另一个流行的替代方法是WP-Smush ，这是一个拥有300,000多用户的较旧的插件。
消除渲染阻塞
如果您需要加载多种文件以样式（CSS）并激活（JS）网页功能，则在并行请求四个资源后，大多数浏览器将变慢。
这是PageSpeed中CSS渲染阻止投诉的示例：
由于主题和插件架构，这可能是一个很难消除的WordPress项目。 我们将回到它。
哪些步骤最终将我的网站推到了100个？
目标优化方法
如果您已完成上述所有主要基础知识，那么使用WordPress改进PageSpeed可能需要大量的工作，并且可能会非常耗时。
让我们一步一步地介绍已发现的问题区域以及我解决这些问题的方法。 实际上，我做了很多尝试不同工具和方法的实验。 我定期放弃一种方法，然后又返回另一种方法。 事实证明，我的解决方案是对解决方案的妥善管理。 路径不是直接的尤达。
压缩HTML，JavaScript和CSS
例如，以下是在W3 Total Cache中最小化HTML的方法：
在页面末尾捆绑JavaScript
同样，在W3 Total Cache中最小化JavaScript很容易。 请注意以下内容，我指示W3TC将压缩文件嵌入到而不是 。 延迟JavaScript可能会提高您的PageSpeed得分。
从主题和插件中最小化组合CSS
由于主题和插件都使用JavaScript和CSS，因此需要花费一些时间才能将它们最小化并组合到一个文件中（这对于PageSpeed甚至还不够，我将在下面进一步讨论）。
为了阻止插件加载自己CSS并指示W3TC加载压缩版本和组合版本，您需要找到CSS文件的插件句柄（与文件名不同），并在主题中添加代码以中断插件加载指令。 然后，在上方的W3TC对话框中输入每个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的建议，我从CSS开始注销了我的插件包括在主题的functions.php中，您必须找到该插件开发人员使用的引用：
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'toc-screen' );
}我使用这三个插件样式表手动创建了组合CSS文件。 然后，我要求W3TC缩小该文件并将其组合成自己的巨型样式表，如上所示。
为PageSpeed优化CSS加载
W3TC可能结合了我所有的主题文件和插件文件，但PageSpeed仍然不希望看到其中包含一个CSS（对于良好HTML开发实践而言，它是如此）：
我最终加载了九个CSS文件（下面仅显示了七个）。 首先，您必须如上所述找到CSS的插件句柄并在主题中注销它们。 然后，您必须将它们全部指向W3TC。
尽管有几种方法可以缩小所有这些版本，但实际上我只是抓住了W3TC的压缩文件。 我在TextEditor中使用搜索和替换删除了所有缓存查询参数，例如?cbe3w2 。 我仍然是TextMate的忠实用户，但实际上，它有很大的延迟，每当我尝试浏览一个缩小CSS文件时，它就会挂起。 因此，TextEditor帮助我分别编辑了这些文件。 向纯粹主义者表示歉意，我还没有继续讨论Sublime。
当我将缩小CSS粘贴到标头中时，我后来需要对其进行更改以动态获取CSS文件的内容并将其回显到适当位置。
一旦添加了另一个用于社交共享的插件，粘贴便不再起作用，我不得不使用上述机制将文件分开。 这也为将来提供了更大的灵活性。 Google PageSpeed从未发现过这种情况，我的Varnish缓存掩盖了包含两个文件的所有速度下降。
最终，我在W3TC中配置了所有CSS文件，制作了压缩文件的副本，然后关闭了此包含功能：
W3TC的一个缺点是，即使您故意以不寻常的方式使用它，它也会反复显示烦人的错误消息。
将CSS文件移出插件目录时，请确保为图像等设置正确的相对路径，以便从站点的根目录进行操作。 在很多情况下，除非找到解决这些问题的方法，否则无法加载图像。 我将在下面的“ 疑难解答”部分中分享一个示例。
在浏览器中缓存外部脚本
有趣的是，如果您从外部加载其JavaScript库，则Google的PageSpeed会抱怨。 我收到有关Flickr，Disqus和Google Analytics（分析）的外部脚本的缺点：
事实证明，这是一个很大的障碍，需要大量时间和复杂性才能完全解决这些问题。
消除Flickr嵌入问题
首先，我最近从一次印度之旅中回来 ，并将带有Flickr嵌入照片的个人博客帖子放在首页上。 我的中级主题快速滚动浏览了许多帖子，因此PageSpeed抱怨了所有这些帖子。
在观察到PageSpeed抱怨Flickr托管的嵌入式图像大小（各种像素数）并看到这些外部JavaScript缺点之后，我回到了自己网站上的自托管优化图像。 他们仍然链接到Flickr，用于我正在进行的印度专辑。
这是一个很好的示例，说明如何尝试使用功能强大的第三方服务（其简单目的是嵌入照片）会杀死您的PageSpeed得分。 Flickr在帮助WordPress用户解决此问题方面做得还不够出色。 仅作为示例，他们将需要：
- 提供嵌入式尺寸，使PageSpeed的图像优化保持令人满意的效果（可能是因为PageSpeed损害了单独的导出选项，因此Flickr的图像质量受到影响）
- 轻松发布JavaScript代码以集成到WordPress和W3TC组合文件中
自托管外部JavaScript文件
对于剩余的Google文件， 最好的解决方案是在本地托管Analytics和DFP脚本的副本，并使用cron脚本在服务器上定期更新它们 。
首先，我停止使用Google Analytics（分析）插件，并将修改后的代码手动添加到主题的标题中：
//...
注意，我将路径更改为脚本的本地副本。 然后，我为Google Analytics（分析）和Google DFP广告管理系统制作了脚本的本地副本，不久之后在PageSpeed中解决了我的浏览器缓存后，除了Disqus之外。
解决Disqus插件加载问题
我不确定是出于安全性，多平台支持还是纯粹的“灵巧性”，但Disqus和其他提供商（例如Flickr）似乎掩盖了它们与其他文件一起加载的实际文件。 这使得优化PageSpeed变得更加困难，而且常常无法解决。
诚然，我花了2到3个小时尝试各种不同的方法来优化Disqus插件，但对我来说毫无用处。
最终，我卸载了Disqus插件并安装了Disqus Conditional Load ：
尽管这意味着要做很多事情，但它也使通过安装优化PageSpeed成为可能。
突然，PageSpeed的Leverage Browser Caching缺点消失了。 尊敬的DCL！
固定点击目标
PageSpeed经常抱怨移动设备中的链接间距太小。 我尝试了几种方法，最终只是停止在移动设备上显示标签。
如果我花更多的时间，我可能可以改善他们的用户体验，并通过PageSpeed进行传递。
故障排除
压缩和组合CSS中缺少图像
在右侧栏中显示跟随图标的ArrayToolkit插件已停止为我工作。 我花了一段时间才弄清楚需要使用绝对路径对哪些路径进行编码才能使其正常工作。
最终，我找到了这些路径并将其替换为原始插件目录的正确相对路径：
// Had to put path in plugin css
@font-face {
font-family: 'array';
src: url('./fontello/array.eot');
src: url('./fontello/array.eot#iefix') format('embedded-opentype'),
url('./fontello/array.woff') format('woff'),
url('./fontello/array.ttf') format('truetype'),
url('./fontello/array.svg#array') format('svg');
font-weight: normal;
font-style: normal;
}JavaScript损坏
我还有一个问题需要解决。 我的新标签页插件（Construct具有内置标签页）在此过程中停止了工作。 我只需要花时间调试它，但是应该很容易理清它。
选择最佳粉碎机
我在W3TC上使用YUI Compressor进行了实验，以压缩我JavaScript和CSS文件。 一切都没有打破，而是导致速度提高。
如果您有兴趣找出我做错了什么，可以像这样安装Java和YUICompressor：
#good luck
sudo apt-get install openjdk-6-jre
cd /usr/local/lib
sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar如果您知道如何使其在WordPress中很好地发挥作用，请在评论中发布。
收盘时
在有关新主题的第二轮工作之后，一切工作都比我希望的要好。 我从来不知道自己会达到我的最佳目标。
我的最终PageSpeed分数
我在移动版和台式机上都获得了100 PageSpeed的得分。 更值得注意的是，我的网站运行得非常快，比我以前运行过的博客要快。 我很想知道入站搜索流量和读者活动如何在接下来的几个月中对更快的得分和性能做出反应。
这是我最终的PageSpeed得分，第一部手机：
现在是台式机：
桌面首先达到100，我不得不回过头来完成一些调整（解决水龙头目标），以使Mobile在那里。
同样，该站点的速度使其值得快速浏览。 如果您知道其他以100 PageSpeed运行的商业网站，请在评论中分享它们。 我很高兴见到他们。
就像SEO更改的一个例子一样，我关于约会的热门文章跃升为“ 西雅图约会 ”（在移动设备上还没有在桌面上）排名第三。不容易。
未来维护的挑战
为了最大程度地利用网站的PageSpeed，我必须对主题进行一些调整，这些调整现在将对外部脚本的更改以及主题和插件的更新产生依赖性。 现在我已经完成了短期目标，现在我需要进行工作来组织系统以更轻松地管理此目标。
外部文件Cron
很快，我将需要实施该cron脚本，以同步自托管的Google Analytics（分析）和DFP广告管理系统脚本 。
这是一家提供更简单方法来使用Google Analytics（分析）的公司，而不会惩罚PageSpeed，从而解决了Google PageSpeed Insights的最后问题 。 我宁愿不依赖其他第三方。
管理主题更新
我还需要更好地跟踪Medium的主题更新并集成更改。 根据我的更改构建儿童主题可能也会简化此过程。 通常，我会寻找覆盖我的，更新的（或附加的）JavaScript和CSS文件的更改。
管理插件更新
同样，当插件更新时，我需要注意相同类型的更新。 它可以帮助我更好地组织使用WordPress插件对GitHub的使用。 我已经将其用于主题。
自动化
我可能想花一些时间编写脚本来跟踪哪些JavaScript和CSS文件与更新的主题和插件一起使用，将它们下载到我的服务器上，并最小化和打包适当的文件以进行链接或包含。
SSL协议
最后，令我惊讶的是，不需要达到100的PageSpeed即可使用SSL。这在一定程度上说得通，但强调了各种不同的组件可能会影响您的Google搜索排名。 我将写有关很快用WordPress实现Let's Encrypt的免费SSL的文章 。
下一步是什么？
如果您喜欢此方法，但又想阅读更通用的教程，而该教程没有深入探讨可能适用于您的细节，那么KeyCDN的Google PageSpeed Scoring 100/100 with WordPress是一个很好的补充。 我还在Envato Tuts +（ 使用KeyCDN加速您的内容交付 ）上写了一篇有关CDN的赞助文章，然后继续作为客户继续与他们合作。
将来，我将研究更多增强功能以改善网站的整体性能。 这些包括：
- 查看我最受欢迎的帖子（例如Amazon Marketplace Fraud Made Easy ，目前为97）中的各个PageSpeed ，以确保它们都运行在100。在此示例中，通常只是嵌入的图像大小会扰乱PageSpeed。
- 改善主题和插件的管理，以在更新到达时尽可能轻松地维持这些优化，例如，跟踪更新中JS和CSS文件的更改，保持外部JS文件（如Analytics（分析））的副本已更新，重新压缩已更新的文件等。
- 将我的服务器升级到PHP7 。 升级有望使性能提高近2倍。 在捆绑的Ubuntu版本之前进行升级并非易事，但并不是太困难。
- 将服务器升级到Varnish4 。 升级需要重新配置文件，我不确定它的性能是否提高以及与W3 Total Cache的兼容性，但是我愿意尝试一下。
- 探索 KeyCDN的CacheEnabler， 以便为 Chrome用户提供更有效的Webp图像 。 Webp文件大小明显较小，但Safari尚不支持。 实际上，我对于为此改善用户体验感到非常兴奋。
如有疑问，请在下面发布。 或者，您可以通过Twitter @reifman与我联系 。 请查看我的Envato Tuts +讲师页面，以查看我编写的其他教程，例如在Linux中（在90秒内）克隆WordPress 。
相关链接
- Google PageSpeed
- 带有WordPress的Google PageSpeed评分100/100
- 网页测试
- 12个用于分析Web性能的网站速度测试工具
- 网站速度测试：整页性能检查
- 数组主题中型主题
- 在线JavaScript和CSS压缩器（刷新SF）
- 清单：更改WordPress主题之前必须做的15件事
翻译自: https://code.tutsplus.com/tutorials/optimizing-google-pagespeed-to-100-in-wordpress--cms-25804