非开发人员将WordPress加载时间缩短2秒的指南(含数据)

作者:晏簌禳

<p>随着Google在最近的算法更新中继续关注用户体验和参与度指标,对于营销人员而言,关注他们网站的速度变得更加重要页面速度长期以来一直是桌面搜索结果的排名因素,它可能会很快影响移动设备排名以及改善加载时间的好处远远超出了它们对搜索引擎优化和网站有机排名的影响,但是请考虑最近的谷歌数据,其中显示“如果移动网站加载时间超过3秒,53%的访问将被放弃, “或者说”对于移动页面加载的每一秒延迟,转换次数最多可降低20%“那么,您如何实际加速网站的加速</p><p>对于许多非技术营销人员来说,试图弄清楚如何提高页面速度可能是一项艰巨的任务</p><p>实际上,您应该采用哪种杠杆来产生结果</p><p>您如何在您的网站上实施这些更改</p><p>我不是开发人员我的公司拥有并运营了许多基于WordPress构建的不同(相对简单)的发布网站,我着手努力改善这些网站的加载时间,而无需任何开发人员干预,看看有什么样的影响可以通过简单的方式产生调整任何人(甚至是我!)可以制作在这篇文章中,我将介绍每个优化,解释对我们网站的影响是什么,并分享关于加载时间的实际数据,Google Speed分数以及更多三个重点我'回到后面的帖子:所有这些都说,这篇文章(并了解一些可用于提高页面速度的基本杠杆)应该可以帮助你更好地理解你网站上提高速度的可能性就像许多SEO开始时一样,我专注于页面速度,基于谷歌免费的PageSpeed Insights工具建议它直接来自谷歌的口,提供了非常容易理解的指标(一个年级,就像学校一样!)并且有用的su加速页面加载时间的方法该工具绝对有用,但是当您深入了解页面速度时,您可能会发现:相对于您的SERP竞争对手而言,关于您的速度的粗线位是非常重要的;如果你有一个简单的B2B网站,你可以看一个成功的电子商务网站并说:“他们的网站比我们的网站慢,而且做得很好!我们应该没问题!“但事实是,那不是你与谁竞争你想让你的网站尽可能快,所以你应该将它与最重要的搜索结果排名的网站进行比较对于您的网站因此,如果我们没有使用Google的PageSpeed Insight工具评分作为我们优化工作的全部和最终目标,那么我们应该关注哪些指标</p><p>搜索引擎Land专栏作家克里斯·里弗里奇(Chris Liversidge)在不同页面速度事件的精彩帖子中做了更好的细分,但实际上我的重点是:再次,我们希望专注于我们网站上的用户体验,所以制作确保折叠上方的内容快速传递并且整个页面快速加载实际上是主要问题TTFB指标(虽然不完美)可能有用,因为它让我们知道我们的加载时间问题是否是服务器的结果问题所以这些是我们的指标我们怎么知道我们的网页是否甚至很慢</p><p>首先,我们需要一个工具来测量它们幸运的是,有很多很棒的免费工具用于这些目的我使用了网页测试,这些工具非常简单</p><p>这是搜索引擎土地的结果,这对于这样一个可视化的主页和一个庞大而复杂的发布网站:在涉及工具的地方,有很多选项来衡量速度和获得建议,包括:和其他为了我们的目的,我将使用来自网页测试的数据再次,页面加载时间将从利基到利基和SERP到SERP显着变化,因此我们的初始目标应该只是“变得更好”</p><p>这就是说,让我们看看围绕这些事件的目标时间的一些一般最佳实践指南:再次,如果您的整页加载时间是15秒,并且在关键路径渲染完成之前是5秒,请不要只是举起手来开始优化并努力降低这些数字,即使您可能无法让他们在一秒钟之内 越快越好!假设您测量页面速度,而且速度很慢;你能做些什么才能有所作为</p><p> Google的PageSpeed Insights工具(以及优化专家)提供的最常见建议包括:我将在此处介绍我能够在四个不同的WordPress网站上实施哪些优化,以及这些优化产生的前/后加载时间</p><p>所有网站的数字都不是真的,并不是每个最佳实践都会对每个网站产生同样的影响但我认为通过这个过程,你会看到一些简单,快速的优化如何对速度产生重大影响请注意虽然你可以通过对HTML的基本理解进行一些优化,但是有一些拐点,让技术资源进入并找出改善网站加载时间的最佳方法非常重要首先,我拍了快照每个网站的页面速度指标在网站的主页上和更深入的文章页面我专门为此帖子的目的做了这个如果你想要优化你的网站,你会理想情况下,想要在整个网站范围内查看指标,或者至少在最高流量网页上以及网站上每个模板的典型页面中进行查看与某些网站相比,这些数字并不可怕 - 但对于构建于此的简单内容网站没有很多花里胡哨的WordPress,肯定有很大的改进空间我们所做的是实现四种不同的通常推荐的页面速度优化下面,我们将看到每个优化实施的影响,然后累积影响所有优化所以让我们深入研究优化Google的PageSpeed Insights工具建议我们“缩小”每个网站的CSS,JavaScript和HTML为此,我们使用了一个名为Autoptimize的免费WordPress插件大约花了20分钟设置四个站点:优化HTML,JS和CSS并加载JS和CSS内联后,谷歌的工具移动缩小和“消除渲染阻止JavaScript和CSS在ab中过多的内容“进入”优化发现“栏目:影响是什么</p><p>正如您所看到的,大多数页面都有所改进,有些页面看到了显着的20%以上的升级但在某些情况下,几乎没有百分比改进,甚至更差的性能从测试到测试存在一些差异,但是你看到虽然这些改进通常会提高页面速度,但它们的影响程度会有所不同,并且取决于网站请注意:这是插件的免费版本,在理想设置下具有“最佳猜测”请注意进行更改您的网站代码,正如我稍后将在帖子中提到的,这是一个特殊领域,您可能希望向开发人员寻求指导</p><p>接下来,我们想利用浏览器缓存通常,您可以使用像WP Super Cache这样的WordPress插件或WP Rocket用于此目的,但这些站点托管在WP引擎上,这与其中一些插件存在一些兼容性问题因此,我们只是启用了WP引擎对象缓存:影响是什么</p><p>正如您所看到的,这比我们的代码清理工作产生了更大的影响,对于其中两个站点,我们看到了20%到30%的显着性能提升,只有两个页面看到了启动渲染时间的增加</p><p>再次,WP Engine已经它自己的CDN选项,所以我们启用了它,这也是WP引擎中一个非常简单的过程:影响是什么</p><p>这是我们实际看到性能显着下降的第一个实现</p><p>有一些需要注意的事项:重要的是,这里的重要内容是,并非每次优化都会对每个站点产生相同的影响,偶尔也会如此一些努力将产生最小影响或没有实际影响最后,我们致力于压缩和调整每个站点上的图像在某些情况下,网站上的图像已经被压缩,最大的罪魁祸首(正如您将看到的)第四站点的主页我发现在忽略它的网站上,图像优化通常是最快,最简单,影响最大的页面速度获胜为此,我们使用了一个名为Optimus的图像压缩插件 我们还对页面上的每个图像进行压缩和调整大小,“手动”,以确保压缩不会影响质量并且文件尽可能小:有许多用于WordPress的图像优化插件,包括但不是仅限于:每当您使用这些类型的插件时,如果您将它们应用于媒体库中的所有现有图像,则必须认识到网站某处可能出现的图像质量/渲染问题(经过一些额外的测试/来自页面速度专家的建议,以及更多关于下面的内容,我们实际上切换到短像素)在上传它们之前,还有许多工具可用于压缩单个图像,包括:还有许多其他工具也是如此影响是什么</p><p>正如您从几个主页中看到的那样,压缩图像可以带来一些最大的页面加载胜利最重要的是,压缩图像和替换未压缩的版本是您赢得的任务,通常需要任何类型的开发但是,再一次,改进的程度取决于图像已经被压缩和调整大小(或者恰好更小)的站点站点,这个特定步骤显然几乎没有收获</p><p>正如您所看到的,结果在这里因站点而异,但是我们通过以下步骤将负载时间缩短了2秒,并且几乎在每种情况下,我们都提高了访问者看到我们的首要内容的速度但是有些加载时间实际上我们所有的努力都有点糟糕,似乎对于一个简单的网站,我们应该能够击败很多这些加载时间所以,你还能做些什么</p><p>在我的一些业余DIY努力获得了大量收益之后,我决定继续聘请专门从事页面速度优化的开发人员我们的专家致力于进一步降低加载时​​间</p><p>具体来说,他们:这个过程实际上减少了我们(改进的)负载这是一个很好的例子,说明精通页面速度最佳实践的开发人员如何能够显着改善您的结果如果您在内部拥有开发资源,请传达您的目标(减少页面加载时间和用户看到重要的速度,折叠元素),并在必要时共享资源,以确保他们了解加速网站的最佳做法本文中表达的观点是客座作者的观点,....