WordPress网站加速 终极完整版

仅以此文,献给辛苦的网站工程师。 WordPress网站加速 本身就是一个课题。本文从最基础的部份说明,希望可以带大家了解 WordPress加速的核心秘密。

几年前,我在一个网站建置项目中扮演了很重要的角色。即使到了今天,那个网站仍然是一个非常成功的案例,除了一个缺点以外。那就是网站变得非常的缓慢。在数据库中,充满了一堆垃圾。有些页面由于图片的数量以及其他的页面需求,甚至得花上26秒才能才能读取完成。

我们认为现在正是做些事情来解决这些问题的时候。我们最近重新架设了这个网站,利用一些已经测试并证实过的加速技巧,来让我们复杂页面的读取时间降到2秒内,如果是比较简单的页面甚至飙到800毫秒以内。

下面列出了我使用的22个技巧。这些技巧可以大幅的减少网站的读取时间,其中包括了网站速度以及开发时的相关处理方式。

这边可不是一般你看到的” X步骤 来加速你的WordPress ”。在这篇明确且一步一步的导引中,我会带你们经历网页优化以及如何让你的 WordPress网站加速 。

  1. 为什么网站速度很重要
  2. 网站速度缓慢的原因
  3. 如何加快网站读取速度
    • 一般性的 网站加速
      1. 更新核心科技
      2. 更新内容管理系统
      3. 减少页面需求
      4. 移除不需要且浪费资源的插件
      5. 移除没用的视觉效果
      6. 使用CDN
      7. 启用快取
      8. 优化数据库
      9. 优化图片
      10. 取消图片外部链接
      11. 启用Gzip压缩
      12. 选择优良的主机商
      13. 监视网站行动
    • 针对开发过程的 网站加速
      1. 了解工具
      2. 减少网页需求
      3. 最小化档案
      4. 页脚读取脚本
      5. 内容区优先读取
      6. 适合的图片尺寸
      7. 减少并优化数据库查询
      8. 启用,关闭,或是移除Hook
      9. 教育你的客户
  4. 结论

为什么网站速度很重要

如果你是依赖网站来赚钱的话,网站速度绝对是你不可忽视的部份。Loadstorm在做过一些研究后,制作了一张信息图表。图表中清楚的告知,只要增加一秒钟的读取速度,就会降低7%的网站转换率和减少11%的页面浏览数,并且减少16%的客户满意度。

结论:减少一秒钟的网页读取时间就可以增加7%的获利。人们似乎也忘记网络质量在全世界并不相同。即便使用了CDN,并且把所有组件都优化。

页面读取时间在纽约可能是2秒,或是都柏林需要2.3秒,但是很有可能在印度会需要4-5秒。

透过更深入的优化,可能只能降低在美国区域的0.3秒,可是在印度却可能减少1.8秒。这样一来就有可能产生更多的订单。但是别忘记网络中任何你看到用来举例的数字只是一个平均值,而你经历的任何数字只是一个在大数据中的单一个案。

除了这些好处以外,页面速度也是一个网站SEO的重要因素。Google 故意模糊了这个因素的重要性,但是有一些研究阐明了相关的重要性。其中有个确定的因素,那就是在Google的眼里,较好的速度 = 较高的排名

如果你是个环保人士,你可以把这个练习想象成减少碳足迹。一个比较快速的网站通常是一个较少页面需求或是较少的处理时间,而这意味着计算机在处理你的 网站时,可以比较轻松,所以减少了热的输出,以及只需较少的冷却。这个差别可能在单一服务器中比较不易察觉。可是当你把数据放大时,将有非常可观的差异。

如何开始

这篇文章会分成三个部分。首先,我先讨论一些一般性的考虑并且了解那些速度议题的细微差异。接下来的二个章节将会着重在一般使用者可以设定的部份, 以及程序设计师可以设定的部份。这两个部分会有一些地方有些相同。即使不是程序设计师都可以仔细的阅读。许多增加速度的策略即便需要一些程序语言,其实他 们都可以由简单的指令来达成。

最后,希望每个人都可以至少利用一到两个方式让他的网站速度增加。

网站速度缓慢的原因

了解是通往聪明决定的关键。一个架设在便宜主机网站 和 一个程序没有效率以及一堆超大图片的网站在本质上是完全不同的!虽然两者都是慢。

这边得要提一下,以下列出的并不包含某些总是可以被”处理”的事情。我会列出不同的面向来增加网站速度。我们的任务将是优化速度。以现在来说,我们得先要了解网站的元素。

最基本的程序语言

用在网站上的语言和技术将会决定程序在服务器上处理所需的时间。如果只使用HTML的话,这个部分将不会有任何的问题。但是现在大部分的网站都已经使用服务器端的程序语言来架站。

你也许是用ASP.net ,PHP 或是用HHVM 来执行PHP,这当中并没有可以优化的部分。我并不是ASP专家,但是我相信ASP.net 技术上来说有能力可以比PHP要快速,但是两者之间的差异是可以被忽略的。

当HHVM 一发布的时候,它真的彻底的打败了PHP。因而这两种技术开始了一个(友善的)战争。现在看起来,PHP 7 似乎会打败HHVM 。重点是:这些进步都将使我们的终端用户感到非常满意。

在这个部分,你可以调整的是你服务器的设定。举例来说,服务器可以设定成以压缩的方式传输数据。也就是大家熟知的 gzip 压缩。这就是一个简单的设定。可以大幅且明显的增加你的速度。我们在之后章节会看一些类似这样的技巧。

内容管理系统

一般来说,所有的内容管理系统都会比一个正确建立的静态HTML网站要来得慢。虽然说页面快取可以有效的减少他们之间的差异,但是快取有时后仍然必须被清空,而登入的用户通常也不能得到快取后的页面。此外,管理内容时将会绝对需要比较多的系统资源。

虽然是这样,但是一个建置良好的内容管理系统,所得到的好处将远远大于缺点。它会比较安全,你将可以非常轻松地的 增加你的内容,而且还提供了成吨的功能让你可以在任何时候加入。所有大家熟知的内容管理系统中,包含WordPress, Joomla, Drupal 还有其他的系统,以速度的角度来看的话,都还是及格的。速度问题主要和主题,插件,附加功能的部分比较相关,而非系统本身。

内容管理系统的速度通常比一般的HTML的网站慢的主要因素是在于他必须要连结到服务器,而服务器必须处理传来的需求,接着产生出内容并且送回到浏览器。这个过程中通常有许多的数据库查询的动作,这也会增加读取时间。

大部分的系统都有他们自己的方式来优化这个过程,这也就是为什么网站通常也是在数秒中就可以读取完成。也因此这些内容管理系统才有可能成为可用的选项之一。

附加功能

我先在这边定义一下我说的附加功能:任何用来增加在你的CMS (内容管理系统 之后都简称CMS )的程序。以WordPress来说,指的就是主题以及插件。

绝大部分的状况是,主题和插件并不是由制作CMS的人做的。这代表,如果工程师不能完全的跟上目前CMS的进度的话,他们就会犯错。在写程序的过程中,有许多的方式可以编辑出不太优的程序而不会产生任何的错误。

举例来说:如果考虑的不够周详的话,你可能会查询三次数据库。虽然说根据你的需求,三次的查询的确有可能会比一次查询的快。我要说的重点是你必须非常小心来选择你要使用的技巧。

这大概也是为什么速度会很快的大幅减缓。我们将会检视某些有可能减缓你的速度的特定的编码技巧。现在你要知道的是,附加功能是会增加你的网站读取速度的一个面向。

在WordPress中,有个缺点是他的社群实在是太活跃了,但是这个同时也是WordPress最完美的部分。这个部分不应该被限制也不应该改变。但是他还是有缺点的,那就是你很容易就在上面得到不好的程序!没有任何事情可以阻止你建立一个可怕的烂主题并且贩卖!

服务器

服务器是网站速度中很重要的决定关键,特别是在高流量的时候。让我们先学习分辨两个名词后,才能够学习他们是如何影响速度。你的服务器是一台类似你家中的实体计算机。他有内存,中央处理器,硬盘以及其他的组件来决定他的速度表现。

你的主机方案是绑定在服务器上的服务资源。例如有可能包含了自动备份,服务器管理等等。

我们关心的部分将是你的主机方案是虚拟主机,或是VPS(云端主机)或是实体主机。

虚拟主机,VPS 以及实体主机

这三个名词代表了不同的服务器方案。简单来说,他们取决于多少人使用一台服务器来放置网站。

  • 虚拟主机中,你可能和数百个人共享一台服务器。这也就是代表着你和一大堆人一起使用相同的硬盘,相同的记忆 体,相同的CPU 资源以及带宽。资源并不会被平均分配,一个出包的网站很有可能使用了百分之80以上的资源,而除了他以外的全部网站使用剩下的20%资源。(编按:有些主 机商会使用 cloudlinux ,可以设定每个用户可以利用的资源。)
  • VPS (云端主机)一样是用分享的。但是通常只有数名使用者。而且全部的资源是平均分配给这些用户的。 举例来说,要是服务器中只有5个使用者,那么他们将都可以获得20%的资源,包含CPU以及内存。如果其中一个使用者想要超过他们的可用资源的话,他们 的网站就会下线。然而其他四位依然是正常无虞。
  • 实体主机中,你是唯一的使用者。全部的资源都属于你。因此他完全解决了”恶邻居”效应。而且相较来说,你也比VPS 方案拥有更多的资源。

服务器参数

就像我说的一样,你网站所在的服务器会有一些关键参数来决定他的速度。你的服务器的效能越高,你的网站速度也就越快。

当然,这是有前提的。如果你只是一个小网站,且每个月的浏览量不过数万,那么你真的不会感觉到如果你有1GB的内存和8GB内存时会有什么不 同。更深入一点的说,当我们讨论到如何可以增进你的速度时,我会告诉你何时该升级/更换你的服务器。我们等等就会讨论到这个部分。

另一个重要的因素就是你的服务器的所在地。这其实还蛮符合逻辑的。如果你的服务器在旧金山,那么如果你在圣地亚哥接收数据的速度将会远远快于你在澳洲墨尔本。

数据在光纤中传输时,是非常快的,接近光速。然而当他越来越靠近你的时候,他就会变慢。影响的因素有你的网络提供者(中华电信)。而数据也需要穿过防火墙,路由器,以及其他一些特殊设备。而这些设备也都会让速度变慢。

距离影响网页速度的关键在于你的request(需求)数量。意思是,从墨尔本下载一个1GB的档案所需的时间通常不会和从圣地亚哥下载的时间有很大的差别。可是,如果你下载1024个1MB的档案的话,那么距离将产生重大的影响!你会花费好几十甚至百倍的时间来下载。

这有什么重要?当网页读取的时候,会产生很多个需求。像是CSS的档案,图片,javascript,以及其他的档案。因此,如果可以减少需求的话,那么就可以优化网站的速度。

客户端的计算机

你所使用计算机的年龄将会严重影响你感觉的链接速度。也就是说,你用Ipad2来上网的时候,即使使用同样的网络,相较于使用另一台Mac的话,ipad2的速度是远慢于使用Mac上网的。

产生这样的差别有许多原因,但是我相信主要的因素在于年龄。组成组件的质量导致了ipad使用内存的效率较为低下。因此,在产出页面时,也就会比较慢。

时至今日,这已经不太是主要的原因了。大部分的计算都是在服务器端就处理完成了。然而随着越来越多有力的客户端,更加新奇的网站科技,现在的网站已经更加的仰赖客户端的处理速度。

举例来说网站将会有越来越多更快更平顺的动画特效,但是这同时也代表着处理速度较慢的客户端将会深受其害。

总结来说,任何一个网站的速度都是这几个因素影响的。 根本的程序语言,你的内容管理系统,你的服务器和你的服务器方案,以及客户的计算机。

如何加快网站读取速度

我和你们说明过这两个部分:程序设计师的方法以及非程序设计师的方法。注意,这不代表着所有的非程序设计师方法都是可以轻松完成的。我将会依照是否 需要程序编辑来决定这是属于设计师还是非设计师的。 基本上:所有必须从主题或是插件来编辑程序的将会分类到程序设计师的部份。

开始吧!

一般性的 网站加速(非程序设计师方法)

这边所提的技巧,方法都是不需要碰到任何的程序语言。你只需要编辑一些服务器档案,以及使用一些终端机指令。通常这些都不会是由你的程序设计师来做。除非你有额外聘请一些了解服务器的工程师,这些就可以由他们代劳。

这边列出一些我认为必须要做的优化。我尽量依照在网站速度缓慢的原因章节中所提到的顺序来说明,方便你们的查阅。

1.更新核心科技

在我们当中,99.999999999%的人并不能够优化我们的PHP,但是,我们却可以处理成较新的版本。在我的经验中,越贵的服务器方案,通常 代表着他们会比较常更新PHP。而其他比较便宜的方案则是在你要求的时候,可以帮忙更新你的PHP版本,但是通常不会主动更新。

如果你可以看一下PHP的版本效能分析图的话,你就会知道为什么这点这么重要了。

如你所见,不同的版本将可以带来巨大的影响,尤其是即将发布的PHP 7 。

至于如何更新你的PHP版本将会有些不同。有些主机商在你登入后,你可以找到PHP 组态,而且可以看到允许勾选的版本。

目前来说,最新的稳定版本是5.6.11。理想状态下,你应该可以使用5.6.x的版本。如果不行的话,至少选择5.4以上的版本较为可靠。

在你更新之前,有些危险性必须要让你知道。你网站的程序代码并不会因为更新而突然不见,但是如果你网站中有非常老旧的程序代码,你有可能会遇到不可预期的问题。如果你不能确定的话,请先询问你的主机商是否可以降级回去来解决这类的问题。

2.更新你的内容管理系统

这个部分,应该是不需要再强调了。但是我依然看到有些网站还在使用WordPress 3.5 版的。这个可是快要三年前的版本了。更新内容管理系统通常不会让你的速度有显著的提升,但是却可以维持你网站的安全性。

安全性的漏洞可能导致恶意的程序注入到你的网站,这会导致你的网站逐渐停摆下来。

此外,内容管理系统的更新通常会优化系统,使用更好的程序架构。这样一来也许可以让你的数据库不再那么样的拥挤,你查询数据库的语法也可以更快速的执行,进而增进网站速度。

不要期待你从WordPress 4.2.x 更新到WordPress 4.3 后速度会有很显著的提升。你可以期待的是,如果你努力的更新你的系统的话,因为数据库的拥挤而导致网站速度降低的日子会比较晚才来到。

3.减少页面需求

这个部分我们会在工程师的章节中更深入地讨论,因为若是在编辑主题或是插件时处理这个部分会比较轻松。然而,有些地方你依然可以先行处理来获得比较优秀的速度。

首先,要知道网站到底提出多少需求。你可以利用一些工具,像是浏览器的开发人员工具中看到全部的需求。或者可以使用像是 Pingdom 这类的服务来得到不错的总览。当你把内容加入到你的网页时,实际上是在增加页面的需求。增加图片或是其他的多媒体都是一个需求。基本上,每个对象都是一个需求。

如果你增加了艺廊(Gallery)到了你的文章中,并且显示前5张图片在你的汇整页面,你会发现在那个页面大概就有60-70个需求。

如果你是个摄影师,艺术人员,或是一个喜欢摄影的人,你可能不会希望只用一点点的照片。在这些例子中,减少每页文章数量的设定或是在汇整页面中显示较少的图片

要减少你的每页显示文章数量,你只需要到后台的 设定 > 阅读 把内定的10篇减少为6到8篇 。

你也可以考虑减少那些会影响你前台的插件。许多插件在前台增加了样式表单或是脚本。不使用这些插件通常可以减少一到两个需求,而且如果是编写得不好的插件甚至可以减少7-8个。

更换主题也可以减少很多需求。虽然这在大部分的情况下都是不允许这样做的。我也注意到有些主题提供了所有的功能,但是也读取了许多不需要的样式表单或是脚本。

延后加载图片(Lazyload)是个用来让你的网站看起来更快的强大工具。实际上,你并没有减少需求数。他是让你依照页面需求来逐渐地加载图片。延后加载的概念在于出现在较下方的图片并不需要一开始就读取进来。而是当使用者滑动页面到比较下方的时候才会显示他们。Rae写了一篇用来比较6个延后加载插件的文章,你可以在那边了解更多相关知识。

减少需求中最棒的一个就是合并( concatenation)档案。这部分我们会在程序设计师的区块中详细讨 论。相对于读取10个Javascript 脚本,你可以把他们合并成一个档案。如果本来要下载10个20kb的档案,在经过合并后,只需要下载一个200kb的档案。这样所需的时间是远远低于前者 的。这个部分如果在刚开始建立网站的时候就这样规划的话,实施起来并不困难。可是要是在之后才决定这样做的话,将会困难许多。

有些插件,像是MinQueue, Merge + Minify + Refresh 以及 Dependency +Minification 将这个步骤某些程度的自动化了。你可以试试看,如果测试成功了,你会发现页面需求显著的减少。

我个人并不喜欢文章中有页数导览。有些时候,如果把一篇文章分成数个页面的话甚至在速度的表现上会比较好。但是,请千万不要这样做来增加页面浏览数。如果你有需要列出你最爱的500家饭店并且包含他们各自的图片的话,那么将他们分成25-50段区块会是一个不错的主意。

4.移除不需要且浪费资源的插件

插件不仅增加你的页面需求,同时也可能导致各式各样的问题,像是内存或是安全上的漏洞。有个很棒的插件叫做P3(Plugin Performance Profiler)可以帮助你确认最有问题的坏蛋是谁。

同时你可以取消启用任何你较少使用的插件。我有一些常用的工具像是Regenarate Thumbnail Theme Checker 或是P3。当我使用他们的时候,这些工具对我来说都是无价之宝。但是我大约一个月只用一次。所以当我不用的时候,我就必须要确认他们绝对没有对我的网站效能产生任何的影响。

5.移除没用的视觉效果

网站中常有有许多设计元素以及模块来让网站看起来更漂亮。他们主要都是Javascript的脚本。但是通常他们都没啥意义。让我举两个例子给你。

第一个例子是令人厌烦的组件。假设你有个使用者选单。选单会在你鼠标在上方的时候用很酷炫的方式展开。当一个使用者第一次看到的时候,他觉得,哇,这真酷!然而,当他用了第三次之后,他们会觉得这个东西真烦!为什么我必须要等一秒钟然后才能让我要点选的选单出现呢?

这个部分通常是因为程序设计师在网站中并非使用和访客相同的方式来浏览网站。我通常会直接造访/wp-admin/来登入任何一个WordPress的网站。但是一般的使用者通常是使用登入链接或是页首的窗体来登入。你一定要确定提供给访客的是很流畅的体验,而不是那个乍看之下很炫但是实际使用几次后觉得很鸡肋的功能。

除了干净的使用者体验以外,网站也可以得到额外的速度提升。因为比较少的组件要动态化,整体的javascript数量会比较少。而这些都将转化成网站实际上更快速或是看起来更快速的感觉。不管是实际上或是感觉上,这两点其实是一样的意思。

第二个例子是关于效率和转换率。我这边最爱使用的范例是Slider。几乎全部研究显示:Slider 是个烂东西。没有人使用他,他们使用太多的空间,他们降低你的SEO并且在你的网站速度上收取了很高的费用。(也就是花费甚巨)

我想要强调的是,针对一桩生意来说,网站的目的并不是要看起来漂亮。看起来漂亮只是一个工具,一个用来达成一个更真实的目标的工具。而那个目标就是:获得利润。如果全部的研究都指向说你应该把Slider给埋到地下去,并且这样做可以增加你的收益的话,请问你还需要在意那个所谓的漂亮嘛?

在一个理想世界中,你应该检视网站中全部的组件,并且做下是否留存的决定,或者至少是经过研究后揣测是否需要留下。请针对你的Slider做研究。最重要的是,去测量他的结果来决定是否留存。

请记住有些情况下,完全移除Slider是绝对没问题的。然而在一些例外的情况下,你可能必须替换成别的组件。单纯移除Slider的确是有可能会减少你的转换率。但是如果你取代成简单的文字和链接的话,一般说来都可以大大地增加带来的效应。

6.使用CDN

对我来说,使用CDN就是网站加速的神奇工具。他们可以让所有的东西都变成更简单而且更快速。这边有两个原因我喜欢使用CDN,那就是建立一个无图片的服务器,并且减少图片读取时间

针对这篇文章讨论的重点,后者才是我们想要这么做的原因。简单想想就知道,我喜欢建立一个无需提供图片的服务器,因为这样可以让我有更多的空间可以 使用。此外,我可以任意变更我的网域,我也可以轻松更换服务器主机商,一切的一切都是因为多媒体档案都是在另一个不会改变的地方。通常一个网站的数据库和 主题只会使用大约10到25mb。然而,却会有2GB的图片。如果这些档案都不在我的主服务器上,你需要在意的只有25Mb ,那真的是很小很小!

回到速度议题!使用CDN的概念在于把需要的资源放在离你比较近的地方。例如:我的个人网站架设在美国的某处,但是我使用Amazon Cloudfront 当成是我的 CDN. 这代表如果你从加州存取我的网站,很有可能你是在加州的数据中心得到那些图片的。如果现在我在中欧的布达佩斯,那么我也许会从柏林的主机得到相同的图片。这减少了传输的时间以及节点还有许多其他的因素。这可以让你的网站变得非常快!

如果你希望这样做的话,你可以使用像是Amazon Cloudfront 这样有和WordPress整合的CDN,设定好之后,就不需要再理它了。(编按:本网站就是使用Amazon Cloudfront 来当CDN的)

7.启用快取

快取绝对是第一名的选项,同时也是第一个会被使用的方法。因为他可以带来非常巨大的速度提升。快取的概念可以利用一个简单的分析让你了解。还记得你第一次学习加法的时候嘛?你如果需要算5+4的时候,你会用手指或是手边的小东西去算出答案。

然而现在,我相信你已经可以记住答案并且回答是9。你的大脑已经帮你快取了那个答案了。你再也不需要慢慢的加上去。

但是网站中有两个不太相同的地方。首先是同一个问题的结果并非永远都是一样的。来,我解释给你听。想象一个网站只有显示你的名字和现在的年份。这个网站的内容一年才会变化一次。然而,你每次造访这个网站的时候,他都会重新计算一次目前的年份。

快取做的事情就是他在一定的时间内,存了一份已经计算过的HTML网站数据。在我们的案例中,我们可以设定那个一定的时间为一天。这也就是说,一天 中有一次他会正常的读取网站,然后他会侦测到需求,并且让服务器处理并且得到需要的HTML。然后他也会将html的结果存在内存中。

当下一次某个人造访了网站,快取将会读取内存中的HTML而不是叫服务器再一次去计算年份。以这个案例来说,或许不会有多大的差别,但是如果是一般的网站,这将会产生数秒以上的读取时间差。

我这边说明的是整页快取,他还有许多其他的类型。快取本身就是个专门知识。但是幸运的是,在WordPress中,你可以很轻松的使用他。

Tom Ewer比较了最优秀的三个快取插件。你可以检视看看并且选出你喜欢的。(编按:W3 Total Cache )

每个插件当中都有非常众多的选项,建议你可以仔细的调整每个设定来获得最佳的效能。

在我的经验中,如果你用最基本的设定的话,你已经可以得到80%的最大速度提升。所以这个部分绝对值得一试,即使你是个WordPress新手。

同时要知道,较好的快取通常是被建立在服务器的层面上。有些WordPress的专门服务器主机商并不会让你安装类似这类的快取插件,因为这样反而拖慢网站的速度。

8.优化数据库

随着时间增加,你的数据库将会越来越肥大。这是无法避免的。在这边有两个主要的重点:不再使用的数据和数据库层面的废物(overhead)。

不再使用的数据可能来自各处。如果你用了一些特定的方式来删除使用者的话,也许你的方式并不会把用户的额外信息也删除。因此可能会留下数百条的数据是不属于任何人的。

你也可能会使用一些自定字段在文章中。而当那些自定字段已经不再需要时,由于这些自定字段已经加到数以百计的文章中了,他们将会导致你的数据库的肥大。

清理这些东西并不十分困难。Jenni McKinnon 写了一篇很好的文章来讨论如何保持你的数据库干干净净,而我则是在我的文章 如何重建你的网站 的“Clean Up And Migrate The Database” 段落中谈论到这件事。

针对数据库层面的废物,你可以使用一个MySQL内建的工具来自动帮忙处理这个部分。他叫做table optimization。这些东西很类似硬盘的重整硬盘破碎扇区。看看这篇文章的“Optimize Your Tables” 来知道他是如何达成的。

9.优化图片

我们已经讨论过使用较少的图片。现在让我们转移我们的注意力到那些我们必须要使用的图片吧。压缩图片可以让图片缩小至少30%到80%的体积,而且不会被发现到差异。

(编按我都直接使用Photoshop 来压缩图片。ctr+shift+alt+w 会是你最好的伙伴)

10.启用Gzip压缩

这个部分是另一个可以显著提升速度的方式。Gzip压缩可以压缩各式各样的组件后,再将数据送到你的浏览器去编译出来。这个部分是需要再你的服务器中设定的。看看这篇GTmetrix的文章来了解如何设定。

Gzip有效的原因是在于CSS和HTML使用了很多重复的内容。越多的重复的Pattern 被使用的话,压缩就会越好。举个非常简易的范例:如果你有”卡卡东真是无敌”这些字出现100次在你的网站上,(为什么不?)你可以取代这个文字为12d 并且省下非常多的空间。这就是所有压缩的本质,而且越多(越长)的Pattern 就代表你可以达到越高的压缩率。

11.取消图片外部链接

这也许不会直接加速你的网站,但是他可以移除一些你的服务器的负担,尤其是你有个很受欢迎的网站时。图片外部链接会将你的图片放在别人的网站上,并且使用你的服务器资源。

换言之,我不需要将你的图片存在我的服务器中,我只要连结到你的服务器,然后就可以有效的偷取你的带宽。这就像是偷取其他人的Wifi 一样。

幸运的是,你可以很简单的利用.htaccess的魔法,轻松的防止这一切。要知道如何让这个事情完成的话,请从这边查询。

12.选择优良的主机商

我不打算针对这个议题讨论过多的细节,因为这保证会让文章的整体意义改变。选择好的主机商是一门艺术,同时也是一种赌博。除非你是个非常了解这个部分的高手。

我非常简短且过度简化的建议是,不要使用虚拟主机!除非你真的必须要使用。或者是你有一堆网站你通常也不在使用的。不可靠的服务以及其他人过度使用资源而产生下线状态在虚拟主机上都是常常发生的。

我同时也不建议实体主机。如果你不知道你自己在做什么的话,那你将会完全迷失在主机当中。而且如果使用的话,你也不需要我告诉你该用哪个主机商。实体主机是给那些真正了解服务器技术并且网站有高使用率的人使用的。

如果你的网站真的是那么热门到一定得要使用实体主机的话,你也许应该仔细的找寻并雇用那些真正了解背后的科技在哪的人才。

基本上还有两个选项没提到。 VPS 绝对是个很好的起点。高阶VPS主机常常也比低阶的实体主机还要强大。所以你应该可以在这个部分赚到不少。

VPS 通常是(几乎)不会受到恶邻效应的影响。他们给你自己的资源,而且常常提供额外的服务像是备份,自动更新等等。

另一个选项是有专家管理的WordPress主机商。这个部分他们提供了以WordPress为服务核心的方式来提供服务器。在VPS上,你可以执行任何的应用程序,而在有管理的WordPress主机上,你只能使用WordPress。

由于服务器基本上是就是设计用来架设WordPress的网站的,他们通常会提供服务器等级的快取,以及其他的好处来让你的WordPress网站跑起来像飞的一样。

但是,缺点就是他们可能会有些限制。有些事情可以做,有些事情不能做。基于速度或是安全性的考虑上,主机商可能取消某些插件和主题的安装许可。

如果你想要找寻优良的主机商,我们有这些选项给你。来看看并选择最适合你的。这将可以帮助你决定,而且你也会得到你期待的支持。(虽然他们真的都很贵)

13.监视你的网站

这并不会加速你的网站,但是当有时候事情不对劲的时候会警告你。而你也可以及时抓到这些逐渐变坏的趋势。针对速度议题在他还没有被注意到前做出反应是让访客开心的最好办法。网域监视服务像是 Deez.io 或是 Pingdom 以及其他可以自动测试你的网站在线与否的服务都是值得你去研究的。

针对开发过程的 网站加速

设计师常常喜欢说网站速度的减缓主要是因为使用者的使用方式错误。当然,有时候这个是事实,但是我认为许多的程序设计师编写了遗漏一部分(不完整)的程序才是主因。

技术上来说,那些程序并没有错,也不包含着错误,同时也不会主动地减缓你网站的速度。然而,他并不会增加速度或是保证网站可以保持速度。这句话并没有任何的敌意,只是我们的程序通常都是这样被写出来的。

这边提出一些部分是让程序设计师可以用来保证出来的成品可以很顺利的被执行,并且尽量远离那些可能导致变慢的影响。

1.了解你的工具

这看起来似乎很简单,但是很少程序设计师真正知道这代表什么。并没有什么方式可以让你了解类似WordPress这么大的项目的每个部分。但是,当你发现一些问题的时候你却可以仔细去研究原因。换言之就是了解你的工具,并且不断的学习精进。

让我举个我最喜欢的例子。你是否曾经想要抓取一篇文章中大量的自定字段的信息。也许你用了大约20次的 get_post_meta () 。你可能会认为这很浪费资源,因为好像得要做20次的数据库查询。

我曾经看到有人使用WPDB的类别来直接抓取文章全部的自定字段信息,然后再把那些信息重新排列后放到Array中来获得自己想要的信息。虽然我很感谢程序设计师这么体贴,但是以这个案例来说的话,他完全是用错地方了。

第一次使用get_post_meta()的时候,他其实就已经把全部的信息抓出来并且快取起来了。在同一篇文章中,任何之后的函数调用都将使用这个快取出来的数据,并非真正去搜寻数据库。

当你决定做任何事情之前,请确定你已经去看过WordPress Codex,而且阅读过相关的文献。

2.减少网页需求

这边我又再次的提到减少需求…. 身为一个程序设计师,这个绝对是你的工作。 如果你的主题或是插件使用了一堆的Javascript以及CSS的话,请合并他们。我个人喜欢把我的脚本以及样式表单分成一个又一个的档案因为这样比较容易开发。

接着我使用像是Gulp的工具来自动合并我的档案。最后通常可以只产生一个样式表单和一个javascript。如此网站的速度当然会增加不少。

另一个有力的工具就是Sprites。 Sprites是用来合并图片的。除了一个一个地读取你的社群icon之外,你可以选择把他们合并成一个图案,并且利用那个图案当成背景,正确定位(CSS的position)后,那个将是你唯一需要的社群Icon图。Twitter也使用Sprites。而且因为可以降低许多页面需求,许多许多的大型网站都使用这个技术。

当我需要使用Sprite的时候,我通常使用这个超棒的在线工具 Stitch 。他可以让你上传图片并且排列之后,产生你需要的样式表单。

3.最小化档案

合并和最小化档案通常都是两者并行的。一旦你已经完成了你的最后的档案合并后,这个时候正是想办法让他们尽可能的缩小。毕竟,你的浏览器并不需要你那可爱的备注,空格键,断行,缩排等等的。你的浏览器可以很开心的了解一些你不容易看懂的程序。

我使用Gulp来达成这件事,但是还有其他的像是Grunt以及一些网络上的工具可以用来处理像是编码是否有错,优化图片,最小化档案等等。

4.在页脚读取脚本

除非你绝对需要脚本在页首被读取,不然的话,请确定他们在页脚。当使用wp_enqueue_script()的时候,设定第五个参数为 True ,可以让脚本在页脚中才被读取。

这样可以明显地增加网站的速度。他并不会减少要求或是档案大小,但是这样可以确定你的主要内容将可以被优先读取。如果一个脚本卡住了,也不会导致主体内容无法呈现。

5.内容区优先读取

其他区域的内容一样可以被优先读取,就像是把脚本放在页脚一样。如果你的侧边栏包含了相关的信息以及不必要的内容的话,你可以让他在主要的内容读取完后再去读取。

这个部分不必然是一定可以达成的选项,但是如果你尝试并且尽可能地更早一点读取主要内容区的话,你会有一个看起来比较快的网站以及比较高的SEO排名。

5.使用正确的图片尺寸

当你要在WordPress 中输出图片的时候,你可以设定要使用的影像尺寸。绝大部分的时候你会知道这三种图片要多大:特色图片,小的文章Icon 以及 Avatars等等。

使用add_image_size()可以让你设定特定的图片尺寸。请注意,这代表着当你上传了一张图片的时候,WordPress将自动的把这个图片产生这个特定大小的缩图。

这个概念是这样,当我们需要一张600*320的图片的时候,我们应该撷取刚好那个大小的图片用来放在页面上。主要有两个原因:

  • 如果我们抓了比较大的图的话,我们在浪费带宽而且减低速度
  • 缩放图片 – 不论我们是放大或是缩小,这都会让图片降低他的质量。

7.减少并优化数据库查询

数据库查询可以导致明显的速度变慢,主因来自于内存的使用量。我曾经在一个项目中发现主机因为错误的数据库查询而崩溃多次,最后主机商就暂停了那个账户。

这边有两个策略可以使用。减少和优化查询。注意我前面提到的,优化查询有可能代表着需要增加查询的次数来取代原本超级吃资源的查询。

首先,在WordPress中尽量避免直接的数据库查询。WordPress有包含许多的函式可以利用。包含你想要抓取留言,自定的分类,或是自定义的字段。

如果你真的必须要自己编写数据库的query的话,记住绝对要使用 WPDB 的类别,因为在WordPress中,它拥有最高的安全性以及最好的效率。尝试尽量避免去 Join 表格或是一些复杂的查询。在大部分的需要复杂查询的情况下,建议使用两个但是比较快速的查询。

有许多工具可以用来检查你的query是否写得够好。有些工具可以在一个要求中看到所有的query.

你可以使用Query Monitor 插件或是在你的wp-config.php中增加

  1. define(‘SAVEQUERIES’, true)

,然后利用$wpdb->queries来印出所有的query.

你同时也可以记录那些缓慢的MySQL查询。大部分的主机商都有开启这个功能,或是你可以自己开启。你可以在MySQL网站中找到更多信息

8.启用,关闭或是移除Hook

许多时候插件不全然可以达成客户的所有要求像是建立额外的角色,重新产生重写规则,增加一些自定的数据库表格等等。

你应该把这些写在一个启用函式中,只有当必要的插件开启时才会启用。这个部分可以让之后的维护处理更加快速。

另一方面,当你移除了一些原本的组件后,你应该要确定完全移除某些你增加的额外函式或是数据库表格。

这样可以让WordPress 的数据库保持像原版的一样,透过简单的优化将足以把事情带回轨道上,并减缓因为数据库中的垃圾产生的延迟。虽然这个部分是无法避免且一定会发生的。

9.教育你的客户

是的,你的客户可以有千百种方法把你辛苦建立的网站搞慢。但是这也就是最好的时机去教育他们。建立终端用户手册将可以让网站保持快速,并且增加客户的满意度。长远来看,这样可以减少你的工作量。

专注在这些像是正确插件使用方式问题的面向上。

结论:速度不是唯一需要关心的事情

我想要强调的是,速度的确很重要但绝对不是唯一需要关心的事情!最极致的作法是不要使用图片然后也不要使用Javascript. 这有可能让你的页面读取速度只要0.03秒,但是这样真的有意义嘛?永远记得你的网站的目标是什么。

如果你的网站是要帮你赚钱,那么你应该尽你的全力来达成这个目标。目标的达成通常是透过许多工具间的相互平衡来达成的。网站速度只是其中的一环。

你也需要让你的网站看起来吸引人。同时也得要让他使用起来非常亲民。而且你还得要提供必要的信息给你的访客。这些面向通常是对立的,因此需要彼此妥协来达成最好的结果。

同时你也许也应该权衡一下经济上的考虑以及花费的时间。付给程序设计师2000美金或是用一个月的时间来让你的网页速度从3-4秒减低成1.8秒听起来是个不错的决定。但是如果你需要更快的话,工作可是会变得越来越困难。

再花个2000美金或是一个月让你的网站速度由1.8秒降到1.2秒可能不是一个好决定。你可以把钱或是时间花在增加销售或是市场策略上,或是带着你的团队去度个假!

我希望这篇文章可以帮助你让你的网站更快一些。如果你只能达成其中的一点到两点的话,也是不错的。 每一点都有他的帮助!

文章来源:WPMUDEV,翻译:卡卡东