[深圳SEO]如何加速WordPress?网站速度优化,实际测试给你看!

小帅帅 9503 0

你觉得你的WordPress 网站很慢吗?想要提升网页速度却不知道该怎么做?快速加载的网页可以改善网站的使用者体验,增加网站的浏览量,还可以帮助网站的SEO。本篇文章将会跟你分享最实用的WordPress 网站速度优化技巧,提升网站效能和加快网页加载速度,让你的网站在各项网站速度测试中拿到高分。

在本篇文章中,我不只会告诉你加速网站的方法,我还会试着解释所有导致网站缓慢的原因和各种加速的原理,并且透过实际的网页速度测试来证明这些优化WordPress 的方法是确实有效并且立即就可以验证的。

为什么网站速度很重要?

国外研究报告指出:

如果网页加载的时间超过8 到10 秒,使用者的将会感到烦躁。

大约三分之一的网站访客不愿意等待网页加载超过4 秒钟,几乎有一半的访客不会等待超过6 秒钟。

对于Google 而言,页面加载时间从0.4 秒增加到0.9 秒会使流量和广告收入减少20%。

而对于Amazon 而言,每100 毫秒的加载时间增加,销售额就下降1%。

一个网站的加载速度将会是访客对你的网站的第一印象,比起你网站上的内容、文字或是图像,使用者将透过页面的加载时间来判断你的网站是否可靠并值得信任。

如果你的网站内容无法快速的显示出来,甚至需要大量的时间才能加载完毕,就算他们没有离开你的网站,对于网站的安全性和信任度也会大打折扣。

除了直接影响网站内容的信任度之外,还会影响网站商品的转换率和使用者体验。不好的使用者体验,例如过高的跳出率和过低的网站停留时间,都很有可能会导致Google 降低你网站的搜寻排名,进而减少网站的浏览量和点击率!

这样子的恶性循环,久而久之,缓慢的网站速度将会变成造成营业损失、伤害品牌的罪魁祸首。

因此,千万不要小看网站速度优化的重要性。

如何测试网站速度?

正确的进行网站速度测试,才能让我们分析所使用的网站优化方法是否有达到预期的效果,所以在你开始进行优化之前,不要忘记以下几个测试网站速度时的重点。

使用网站速度测试工具

选择有效能分数、页面加载时间、瀑布图、请求数量、页面档案大小等功能的线上网站速度测试工具,越多种的测试结果越能帮助我们全方面的分析网页效能。

我比较常使用的有:

GTmetrix

Pingdom

WebPageTest

这些测试工具都是免费的,所以你可以先使用几个不同的工具,然后挑选一个你比较喜欢的使用,毕竟每个工具测试出来的结果多少会有些差距,如果要比较加速前后的差异,最好使用同一个工具的测试结果,会比较准确。

保持同样的测试位置

上面提到的3 个测试工具都能让使用者选择要测试的位置,通常我们会选择最靠近目标受众的位置来做测试,或者你也可以按照你的需求做改变,但是不要忘记测试主机的位置会受到网路延迟的影响,不同的位置将会导致测试成绩有所差异。

所以在一连串的比较测试当中,测试的位置应该要保持一致。

增加测试的次数

我们常常会使用快取来加速网站,不管是快取外挂、浏览器快取还是使用CDN,都能帮助我们增加网页的效能,但是也因为这样,你必须要确认测试出来的结果是否有真正的反映到WordPress 的变更,或者还是停留在上一个快取的状态。

你通常可以从HTTP 请求的数量来检查测试结果是否已经反映变更。

如果测试的结果,没有按照所预想的做出改变,你可以

清除外挂生成的快取

清除CDN 上的快取(如果你有使用CDN 的话)

清除浏览器快取

重新测试

在你清除快取后,通常还是会有一段时间差,你可以等待30 秒左右之后再进行测试,或者是重复测试,大约2 到3 次,直到测试结果更新。

网站速度优化的步骤

网站速度优化或是网页效能最佳化(Web Performance Optimization)指的是提升或是优化在使用者的网页浏览器上,下载和显示网页的速度。

WordPress可以用来架设各式各样的网站,依照不同的网站内容,我们可以将他们分为「静态内容」的网站或是「动态内容」的网站,这两种不同类型的网站,在整体的运作方式上有很大的不同。

主要内容为静态的网站其网页档案都较为固定、不常更新,也不会随着访客的不同而有所改变,像是「部落格」或是中小企业的「形象网站」、「摄影作品网站」等。

静态的内容可以透过快取或是CDN 的方式有效的提升网页速度效能、减少主机负担。

而主要内容为动态的网站,会基于某些特定的因素,例如:访客的地理位置、登入与否和留言互动而改变内容,像是「会员论坛」、「电子商务」、「社群网站」等。

和静态内容不同的是,动态的内容由更改页面内容的脚本生成,并非所有对伺服器的请求都可以直接从快取提供,会需要额外的主机资源和更多的数据库查询。

这解释了为什么把动态内容为主的网路架设在廉价的虚拟主机上,就算使用了快取外挂,对网站速度的提升还是很有限,所以不同类型的WordPress 网站需要使用不同的网页加速方式。

影响网页速度的因素还有很多,我会针对不同的因素来,并且由浅入深的分享加快WordPress 网站速度的7 个步骤:

挑选高性能的网页伺服器

选择最靠近访客的主机位置

减少DNS Lookup Time

选择快速的WordPress 主题

安装WordPress 快取外挂

安装WordPress 图片压缩外挂

使用内容传递网路CDN

1. 挑选高性能的网页伺服器

你可能留意到了,上面提到了主机资源,选用高性能的主机是改善网页速度问题的方法之一。

大多数第一次架站的初学者都是选用价格较低的共享虚拟主机,这并没有什么错,这种主机非常适合刚接触WordPress的朋友。但是随着你的熟练度增加、架站速度提升或是你的网站渐渐成长、访客流量慢慢升高,廉价的主机会开始不堪使用。

最新版本的PHP

PHP是一种开源的程式语言,WordPress的核心、布景主题以及外挂都是用PHP语言编写而成的。

你的虚拟主机会提供不同版本的PHP,而较新的PHP版本可以提供较佳的效能,所以你应该要选择有提供最新PHP版本的虚拟主机。

WordPress 与PHP 7+ 相容,与PHP 5 相比,PHP 7+ 的性能有了很好的提升,除非你有特别的需求非使用PHP 5 不可,否则请切换至PHP 7+。

如果你的虚拟主机后台是cPanel,那么你可以在cPanel 底下切换PHP 的版本,或是如果你是SiteGround 主机的用户,你可以使用SG Optimizer 外挂切换。

数据库

最常见的数据库是MySQL,请确定你选择的主机商有提供最新的版本。另一个选择是MariaDB数据库,据说有比较好的性能表现,但是我想差异并不会太大。

更多数据库的效能比较,请参考下列文章

Benchmarking InnoDB and MyRocks Performance using Sysbench

MariaDB 10.1 and MySQL 5.7 performance on commodity hardware

MySQL Performance : 8.0 and UTF8 impact

网页伺服器软体

目前常见的网页伺服器软体是Apache、NGINX + Apache和LiteSpeed。

Apache和NGINX都是免费开源的软体,所以受到广大的主机供应商所爱戴。虽然Apache目前还是拥有最高的市占率,也有很好的相容性,但是在效能上和其他两者相比就稍微弱势了一点。

如果你是因为.htaccess的便利性而使用Apache,那你应该选择NGINX + Apache或是LiteSpeed。

受到许多人喜爱的SiteGround虚拟主机便是采用NGINX + Apache的方式。

根据大多数人的测试结果,NGINX比Apache的速度还要快,尤其是在静态的网页内容上,而对动态内容而言两者的差异并不会太多。

Nginx vs Apache: Which Serves You Best in 2019?

NGINX vs. Apache (Pro/Con Review, Uses, & Hosting for Each)

Apache Vs NGINX – Which Is The Best Web Server for You?

LiteSpeed是另一个选择,它可以使用.htaccess并且完全兼容Apache成为Apache的替代品。它并不像Apache或是NGINX一样知名,主要的原因是它是由「LiteSpeed Technologies」所开发的付费软体,使用该软体的主机商必须支付一笔授权费用才可以销售。

它的效能媲美NGINX,有过之而无不及,我个人觉得LiteSpeed的最大优点是它提供了一个免费的加速外挂「LiteSpeed Cache」,该外挂能够大幅的提升WordPress网站的效能,在我实际测试之下,其结果完全不会输给著名的WP Rocket加速快取外挂(付费)。

你将可以在本文章中「使用快取」的段落看到「LiteSpeed Cache」更详细的测试。

如果你想使用LiteSpeed的虚拟主机,网易资讯会是不错的选择。

HTTP/2

HTTP/2标准于2015年5月发表,相较于HTTP/1.1,HTTP/2藉由新的改进,可以获得速度上的提升,页面载入速度可以加快11.81%到47.7%。

一般常见的主机

Endurance International Group (EIG)

2. 选择最靠近访客的主机位置

跟挑选主机一样,主机的地理位置也是一开始架设网站就必须决定的,选择最靠近你目标受众(Target Audience)的主机位置也许比这篇文章里头提到的任何网页加速方式都还来的重要。

因为主机位置将会决定「网路延迟」(Network Latency)的表现,减少网路延迟时间同时也代表减少网页加载时间(Page Load Time)和增加网页效能(Web Performance)。

网路延迟是指数据封包透过网路传输,从一个点到另一个点所需要花费的时间。可以指单向或是双向的延迟,在讨论网页效能的时候通常指的是双向。值得另外一提的是,高速的网路频宽能帮助加速下载网页内容,但是并不会减少网路延迟时间。

我们可以用「Dotcom-Tools」从全球25个节点来测试由网易资讯借给我位于台北机房的虚拟主机。

dotcom-tools 网路延迟测试

结果很明显,由于机房在台北,所有位于亚洲的城市都有比较短的网页加载时间,其次是美国再来是欧洲。而且最快(上海0.77 秒)和最慢(南非的约翰内斯堡5.2 秒)的速度差异相当大。

当然这跟机房的连外网路配置有关系,不过一般来说选择最靠近目标受众的主机位置绝对是正确的,因为缩短了地理距离通常也代表减少了传输过程中的节点(路由器)数量,就好比转机一定比直飞需要花的时间还要来得多。

除了对访客的网页加载时间有影响之外,网路延迟也会对使用WordPress 控制台的管理员造成影响,换句话说,撇开网页内容的多寡不谈,如果连WordPress 控制台使用起来都卡卡的,那就很有可能需要对网路延迟或是TTFB 效能做优化。

TTFB(Time to First Byte)

你可能常常听到许多人在讨论网页速度的时候会提到「TTFB」,到底什么是TTFB?它又会怎么影响我们的网页速度呢?

TTFB 是指从客户端(通常指浏览器)发送HTTP 请求开始到获取页面的第一个字节所需花费的时间。

我们可以把它分为3 个部分

客户端发送请求通过网路到网页伺服器所需的时间

网页伺服器处理请求和生成响应所需的时间

响应通过网路回传到客户端所需的时间

如果是远程网页速度测试,「网路延迟」将在发生在1. 跟3.,而2. 则会受到网页伺服器(主机)的效能所影响。

网路上有许多网页测试工具都可以测量TTFB,像是WebPageTest,但是其实使用Google Chrome 也可以观察从你的位置到该网页的TTFB。

WebPageTest TTFB 网页速度测试

Google Chrome 也可以看到TTFB

Google建议的TTFB时间为200 ms以下,如果TTFB过高通常表示

客户端和伺服器之间的网路状况不佳(高网路延迟)

响应缓慢的网页伺服器

知名的CDN供应商Cloudflare曾经做过一个关于TTFB的实验,他们把主机收到请求(headers)后的响应(HTTP/1.1 200 OK)延迟10秒后再回传,但是他们发现WebPageTest测速的结果显示TTFB的时间并没有因为那10秒钟而改变。

也就是说关于TTFB 的定义是有点争议的,到底「回传的第一个字节」指的是「页面内容」的第一个字节还是「页面状态」(HTTP/1.1 200 OK)的第一个字节?

Cloudflare 认为如果是「页面状态」的第一个字节,那用TTFB 来衡量网页效能将是没有意义的,因为这很容易透过伺服器的设置来达成目的,但是这样子对网页使用者的实际体验根本没有太大的帮助。

他们进一步解释,如果在NGINX 主机上采用目前主流的GZIP 网页内容压缩技术做测试,TTFB 将会因为主机使用CPU 处理压缩而增加了8 倍的时间(213 μs -> 1.7 ms),但是页面加载的时间却因为页面内容压缩的关系减少了5 倍(43 ms -> 8 ms)进而提升了整体的网页效能。

所以对使用者来说追求TTFB 极小化不一定是有意义的,最重要的还是实际上整体的网页读取速度。

参考来源:Stop worrying about Time To First Byte (TTFB)

3. 减少DNS Lookup Time

「DNS Lookup」时间也是我们在网页效能最佳化当中值得注意的一个环节,它代表的是当浏览器要获取某个网域的资源时向DNS 请求该网域的IP 位址所花费的时间。通常由DNS 主机的性能来决定Lookup Time 的快慢。

例如从我在浏览器上输入https://tw.yahoo.com/开始,我的浏览器会用「tw.yahoo.com」这个域名透过DNS(Domain Name System)来找查Yahoo台湾在网路上的位置,一直到当它收到DNS回传Yahoo台湾的IP位址时,这段时间就称为「DNS Lookup」。

用Pingdom 日本伺服器测试Yahoo 台湾的DNS Lookup Time

要怎么测试DNS Lookup?

你可以用「SolveDNS」来测试网站的DNS Lookup速度,它可以从全球各地测试该网站的DNS伺服器,这边有一些我测试的结果,给大家参考

SiteGround DNS Speed Test

这个网站所使用的DNS伺服器是SiteGround位于新加坡的主机,所以亚洲城市所花费的DNS Lookup时间都相对较短,新加坡有极快的速度(3.66 ms)也许代表该测试主机和SiteGround主机是在同一个数据中心。

从这边DNS Lookup 所发花费的时间也可以看得到地理距离所造成的网路延迟,这也是为什么你应该选择最靠近受众的虚拟主机。

Google DNS Speed Test

Google 的DNS 主机不意外的快上许多,但是……

同样使用SiteGround 新加坡虚拟主机架设的网站,改用Cloudflare 的DNS 主机后,DNS Lookup 时间大幅减少,有效的达到网页效能最佳化的目的。

我会在这篇文章的后半段分享如何使用Cloudflare CDN 来减少DNS Lookup 时间。

你还可以到DNS排名网站DNSPerf中查看众多DNS供应商的排名比较。

DNSPerf DNS 供应商排名

4. 选择快速的WordPress 主题

我在之前的文章中有提到过,好的WordPress主题应该要力求简洁并且拥有良好的加载速度,因为布景主题对WordPress网站的速度影响真的很大,原因是

CSS的数量和大小,档案越少、越小,读取速度就越快。

JavaScript的数量和大小,许多特殊的功能都要仰赖JavaScript,像是Slider或是特殊选单,数量太多或是档案太大都会造成页面读取时间增加。

第三方HTTP请求的数量,每个连外资源都需要连接到其他伺服器,如果有网路延迟或是对方伺服器忙碌都会影响网页效能,

例如Google字型、Font Awesome图标等。

图片的数量和是否有做最佳化,没有压缩的图片档案通常都会比压缩过后的档案大上好几倍。

编写程式的优劣,写得好的PHP小巧又快速,不好的档案大又慢,完全取决于开发商的功力。

这边我们先使用网易资讯借给我的主机安装全新的WordPress做为基准,并且安装标榜快速、轻量的Astra来测试布景主题对网页效能的影响。

在什么最佳化都没有使用的情况下,空白的WordPress在GTmetrix的测试中几乎拿到了满分,在没有使用快取的情况下已经是非常好的表现了。

预设的Twenty Nineteen 布景主题GTmetrix 测试

Astra在他们的网站上宣称这个主题拥有无与伦比的速度,让我们来测试看看。

Astra 拥有「无与伦比的速度」

刚安装完空白的Astra 果然最佳化的很好,居然可以比WordPress 预设的Twenty Nineteen 布景主题还要来的小。

只有9 个请求非常的简洁

但是为了让测试更接近实际日常使用的情境,我用「Astra Starter Sites」这个外挂来添加一个内容比较丰富的demo,并且选择大家最喜欢的Elementor页面编辑器来做搭配。

一键载入demo 真的很方便

安装完demo 之后分数从100% 下降至93%,页面大小增加了1 MB 多,HTTP 请求增加到45 个,导致网页读取时间增加了1.5 秒左右。

在45个HTTP请求中,CSS(绿色)占了10个、字型(红色)占了8个、JavaScript(紫色)则占了16个、其余的则是图片。虽然请求增多了但是档案都不大,显然Astra有特别留意网页效能的部分。

而真正比较会影响网页加载时间的第三方HTTP 请求,也只有Google 字型而已。

在汇入demo之后,CSS和JavaScript会大幅增加是因为安装了Elementor 页面编辑器的关系,不过这些档案都不大,和Elementor带给我们的功能性和便利性来说,我觉得是相当值得的,如果你还是有效能上的疑虑,可以考虑使用Astra古腾堡区块增强外挂的方案。

关闭Elementor 外挂之后,HTTP 请求数量从45 减少到21,测试的分数也从93% 提高到97%。

如果想要知道一个布景主题会怎么影响你的网页效能,你只需要使用一个具备瀑布图(Waterfall Chart)的测量工具,并且观察它增加档案的大小和加载时间,以及第三方HTTP 请求的数量就可以了。

选择轻量化且性能优异的布景主题是避免网页加载速度变慢的第一道关卡,轻量型主题缺乏的功能可以之后再用外挂的方式增加,请务必慎选你的布景主题。

如果你想要知道更多有关选择WordPress布景主题的重要性,请参考「如何选择WordPress最佳布景主题?」文章。

延伸阅读:6个最快的WordPress布景主题(2019)

为什么减少第三方HTTP 请求很重要?

第三方HTTP请求(Third-Party HTTP Requests)是为了获取额外的资源而连接到其它的伺服器下载。

由于这个过程中会受到网路延迟、DNS Lookup、对方伺服器响应时间和网路传输品质的影响(上图中绿色的部分),会需要花费较多的额外时间。

比较理想的情况是尽量将所有的额外资源都一起放在网页伺服器(虚拟主机),再搭配CDN 就可以减少第三方的HTTP 请求,避免上面所提到的问题。

Google 字型是一个很好的例子,我之前使用Google Noto Sans TC 作为网站主要字型,但是为了要避免在GTmetrix 上被扣分(Make fewer http requests),因此我把该字型上传到虚拟主机上,2 种font-weight、4 个档案(woff、woff2)就要6 MB(中文字型通常都比较大),所以这个方法一定要搭配CDN 才可行。(我现在已改用「微软正黑体」)

5. 安装WordPress 快取外挂

使用各种快取(cache)技术可以大幅提升WordPress的网页效能,这是不可或缺的最佳化方式。

什么是快取?

一般的情况下,当浏览器向网页伺服器(虚拟主机)发送请求时,网页伺服器将会处理这些请求,并一项一项的从储存档案的硬碟或是数据库中把这些数据回送给浏览器,最后显示到我们面前。

但是如果每一个访客的请求都是这样处理的话,会变得相当没有效率,尤其是有些档案特别庞大或是访客特别多的时候,所以我们会使用快取来加快这个过程。

我们指示伺服器主机将一些每次都会被请求的档案复制并且集中放在某个硬碟位置或是记忆体上,当下一次有相同请求的时候,就直接将已经集中好的档案立刻回传,不用再从数据库中查询。

这样不但能加快伺服器的响应时间(减少TTFB),也能减少伺服器的工作量、降低伺服器资源的使用。

快取的类型

能够用来加速网页效能的快取技术五花八门,不过在这边我把它们区分为

伺服器端的快取,在虚拟主机上应用的快取技术,不同的主机可能会有不同的快取技术,例如SiteGround提供了「静态快取」、「动态快取」和「Memcached」,而网易资讯的主机则是提供「LiteSpeed Cache」。

WordPress快取外挂,安装在WordPress上的外挂,像是「WP Rocket」、「W3 Total Cache」和「WP Super Cache」等。

CDN快取,使用CDN(Content Delivery Network)内容传递网路的快取。

静态快取与动态快取

静态快取适用于所有类型的网站,它能把网站上所有静态内容,包括CSS、JavaScript、图片和HTML等档案的快取副本存储在伺服器的记忆体中,因为记忆体的读取速度比硬碟的读取速度还要来得快,所以可以因此加快伺服器的响应速度和减少主机资源的使用。

在读取静态快取的过程中,我们只读取(Read)快取的资料而不进行快取的更新(Update)或是插入(Insert)。

一旦静态快取生成后,所有的请求将会一直从快取中取得,直到系统自动刷新快取或是手动清除快取才会更新数据。

动态快取适合应用在有动态内容的网站,像是「会员网站」或是「电子商务」等,它能把动态生成的内容储存在记忆体上,快速的回传给浏览器,或是CDN可以将生成动态内容的脚本直接快取起来,就不必一直从网页伺服器接收动态内容。不同的快取技术,采用的方法都会略有不同。

我们可以更新或是插入新的数据到动态快取当中。

动态快取的数据将会和目标内容同步。

可以使用「Memcached」或是「Redis」快取来最佳化高动态内容的网站。

伺服器端的快取

我们用「LiteSpeed Cache」来测试伺服器端的快取,根据开发商的说明「LiteSpeed Cache」外挂是只限于「LiteSpeed」产品的伺服器级外挂,和一般的PHP快取外挂不同。

在同一个安装了Astra demo的网站做测试,在还没安装「LiteSpeed Cache」外挂之前的TTFB是571.62 ms,内容下载是88.79 ms。

安装「LiteSpeed Cache」外挂之后我没有做设定上的变动,完全维持预设值,结果TTFB下降到156.68 ms,内容下载则缩短到0.54 ms。

两个测试分别使用不同的Google Chrome 无痕式视窗,并在测试前手动清除浏览器快取。

下面是使用GTmetrix 香港测试节点的结果

我们可以看到由于是同样的香港测试主机,不管在DNS Lookup、Connecting 或是ssl 上所花费的时间都是类似的。

但是,Waiting(TTFB)从427.3 ms缩短到46 ms和Receiving(内容下载)从124.7 ms缩短到2.6 ms具有非常戏剧性的差异,这就是快取的威力。

WordPress 快取外挂

我目前使用的快取外挂是SG Optimizer(SiteGround主机限定)+ WP Rocket(付费)+ Autoptimize(免费),他们能够互相搭配并且帮我解决彼此的小问题。

利益揭露我没有收到任何的报酬来撰写此篇文章,而且我只推荐我个人相信会对我的读者带来帮助的服务,如果你决定通过点击本文中的连结来购买产品,那么我可能会获得一笔小额佣金,这将不会影响你的任何权益或是购买商品的价格。如果你想要支持我继续经营本网站,请使用本站连结购买你需要的产品,我会非常感谢您。

这些快取外挂通常也会包含CSS、JavaScript、HTML缩小(minify)或是合并(combine)等最佳化功能,这对于减少HTTP请求和加速网页加载速度有帮助,但是这些功能有时候会影响网站的外观(CSS)或是功能(JS),我自己的经验是行动装置的选单失效,所以在使用时请务必彻底检查。

CSS、JavaScript 档案合并将整个网站上的CSS或是JavaScript档案合并,可以减少HTTP请求来达到加速效果。但是如果你的网站有支援HTTP/2技术的话,通常不建议使用该功能(反而会降低网页速度)。你可以在HTTP/2 test by KeyCDN测试你的网站是否支持HTTP/2。

「LiteSpeed Cache」外挂当中也有这些功能,我们来试试看效果如何。

先将「进阶功能」打开

然后到「优化」页面把所有选项都开启,之后别忘了要清除所有快取。

结果显示HTTP 请求由于档案合并的关系从45 个下降到了24 个,GTmetrix 的分数也有些许提升,其余的变化都不大,没有大幅度的提升我想是因为Astra 原本的CSS 和JavaScript 最佳化就做得不错了。

开启最佳化之前

开启最佳化之后

「LiteSpeed Cache」还有其他针对动态快取最佳化的设置,但是由于我们的demo 是属于静态网站我就不在这边做测试了。

延伸阅读:WP Rocket –快取加速外挂

6. 安装WordPress 图片压缩外挂

图片档案包括png、gif、jpg、jpeg、webp、icoor svg通常是整个网页档案当中占比最大的,它们的档案大小可以远比CSS和JavaScript巨大,就算你的伺服器和WordPress都做好了最佳化,没有压缩的图片还是可以非常容易的增加网页加载的时间。

网页图片的最佳化一点都不困难,这边有几个建议给大家

使用线上图片压缩工具,在上传图片到WordPress媒体库之前就先压缩好图片。

调整图片大小,一般来说,解析度越大的图片档案就会越大,使用符合你的网页解析度的图片尺寸可以帮助你减少图片的档案大小。

使用jpg或是jpeg的图片格式,有损压缩格式可以在可接受的品质范围内大幅度的减少档案大小。

使用WordPress 图片最佳化外挂,这些外挂能够自动帮助你压缩、最佳化所有上传到WordPress的图片。

使用图片压缩外挂

我们继续最佳化Astra demo 网站,从GTmetrix 的报告当中可以看到,有部分的图片还有压缩的空间。

我使用Imagify Image Optimizer这款图片外挂来测试

它可以帮我们一次压缩所有在WordPress 媒体库的图片

Imagify Image Optimizer压缩了57%的图片大小

压缩完,再使用GTmetrix 测试,发现图片未最佳化的提示已经解决,分数也来到了接近满分的98%。

更详细的图片最佳化内容请参照「4个步骤完成WordPress网站图片最佳化」。

7. 使用内容传递网路CDN

CDN是Content Delivery Network或Content Distribution Network的缩写。

这项技术能够将你的网站内容加载到世界各地的数据中心,利用最靠近访客数据中心的快取来传递档案,可以有效的加快网页档案的传输、减少网路延迟带来的影响,并且透过CDN 供应商的高速DNS 主机可以同时减少DNS Lookup 时间。

CDN还有一项优点是,在我们把DNS指向CDN后,它会充当在客户端和虚拟主机之间的中间伺服器,拦截所有客户端的请求,这样的好处是它可以提供强大的网页应用程序防火墙(Web application firewall),可以帮助阻止对你网站的恶意攻击。

我们使用免费的Cloudflare来测试CDN究竟能帮助我们加快多少速度。

启动Cloudflare CDN

首先到Cloudflare CDN 网站,注册一个帐号然后加入你的网站域名

Cloudflare 会检查你的域名是否可以使用他们的系统

选择你的方案

确认方案

确认DNS 设定

Cloudflare 提供的DNS 资讯

这个时候你需要将你的域名名称伺服器(Name Server)更改为Cloudflare所提供的,如果你不知道怎么做可以参考这里。

等待使用者将DNS 指向Cloudflare

设定好DNS 后,刷新页面就会看到如下图所示已完成启动的画面。

完成启动

Cloudflare 的控制面板

设定Cloudflare CDN

启动Cloudflare 后需要进行一些设定,你可以参考下面「网路攻略」网站的设定并依照自己的需求来做适当的调整。我只列出我有做修改的地方,没有列出来的代表我沿用预设值。

Crypto 页面

如果你有使用SSL 的话可以设定为「Full(strict)」

如果有收到「网页内容包含非安全连线」的警告可以开启这个选项

Speed 页面

在CF 端缩小CSS、JS、HTML 档案如果你已经有使用最佳化外挂这个选项不一定要开启

Caching 页面

使用档案的标头(header)来决定快取档案的保留时间

Page Rules 页面

这边的设定是最重要的,因为Cloudflare 预设只会快取CSS 和JS 等档案,但是要真正发挥Cloudflare 的能力我会将HTML 也加入快取。

避免快取预览页面

避免快取控制台页面

我设定快取所有的网页档案并且每2 个小时分别刷新「Browser Cache」(浏览器< – > CDN 数据中心)和「Edge Cache」(数据中心< – > 虚拟主机)的快取。刷新的时间可以依照你更新网站的需求来做调整。

快取所有的网站档案

Scrape Shield 页面

防止网站图片被盗连

由于我快取了所有的网页档案,有时候会不小心将前端网页上方的工具列也快取起来,导致一般的访客也会看到工具列,在不添加额外程式码的情况下,解决这个问题的方法有两个

只使用未登入的浏览器浏览网页前端

在WordPress「使用者」的页面中关闭显示前端工具列

关于「Cache Everything」用Cloudflare的「Cache Everything」来快取静态的HTML是非常激进的做法,虽然可以让你的网站快上一个档次,但是对于动态内容为主的网站却会造成很大的影响和不方便。

就算是静态的网站,WordPress工具列显示在未登入访客的页面和评论区显示管理员登入身分这两个问题也是在快取了HTML之后暂时还没有很好的解决办法。

目前唯一的方式就是加入Cloudflare的「商业方案」,该方案提供了「Bypass Cache on Cookie」的Page Rule可以有效地用Cookie的方式解决上述问题,但是$200美金的月费恐怕不是一般玩家或是部落客愿意负担的。(谢谢网友cras4202tw提供资讯)

测试Cloudflare 速度

由于Cloudflare 不支援子域名所以这边使用「网路攻略」的网站做测试。

这是没有开启 Cloudflare CDN的数据

这是开启 Cloudflare CDN的数据

从上面的测试结果可以看到开启Cloudflare后整体的读取时间从781 ms下降到235 ms,主要的原因是DNS Lookup和TTFB都有大幅度的下降。不用太在意下降的分数通常过几天之后会再上升。

你也可以用你的所在位置来测试Cloudflare 的速度

开启Cloudflare 之前

开启Cloudflare 之后

根据Cloudflare Support的这篇文章,你可以使用「https://www.example.com/cdn-cgi/trace」(记得替换网址)搭配「国际机场代码」查看你目前的所在位置是使用哪个地区的Cloudflare数据中心。

Cloudflare 包括台北在内在全球有175 个数据中心

Cloudflare TTFB 过高?

上面提到了使用「Cache Everything」能够大幅度的加快网页加载速度,但是那必须归功于快取HTML 之后所减少的时间。我发现如果我使用Cloudflare 但是不使用「Cache Everything」的Page Rule 的话,使用GTmetrix 香港主机测试,整体的TTFB 反而升高了。

这边是测试结果

没有将DNS 指向Cloudflare(完全不使用Cloudflare)

将DNS 指向Cloudflare 但是不开启连线

使用Cloudflare 「Standard Cache」Page Rule

使用Cloudflare 「Cache Everything」Page Rule

把测试数据做成表格后可以清楚看到

Cloudflare 的DNS 主机是比SiteGround 的还要快的

如果只用Cloudflare 预设的快取方式反而有可能导致网页效能下降

「Cache Everything」是提升效能最多的方式

DNS LookupTTFBFully Loaded Time

No CF70.4 ms147.1 ms1.7 s

CF DNS28.9 ms145.6 ms1.5 s

CF Standard23.7 ms566.5 ms2.0 s

CF Cache Everything20.6 ms44.2 ms1.1 s

国外的网友也有针对这样的问题进行讨论(这里和这里)。

Cloudflare 官方的说法很像比较偏向于,会导致TTFB 升高的因素可能有很多,包含了网路延迟、测试地点和他们主机的档案压缩方式等等,但是他们相信整体的网页效能会是增加的。

我个人对于Cloudflare 的结论是

如果Cloudflare 没能提升网页效能,可以只使用他们的DNS 主机

如果要追求最快效能就使用「Cache Everything」

延伸阅读:How to Use Cloudflare DNS Without CDN or WAF

结论

以上是我加速网站的心得,希望对大家有所帮助。网站加速的方法有很多,我在这边分享的有很多都是针对静态内容的网站,如果你的网站是以动态内容为主,也许从主机端去做加强(升级主机、动态快取)会更合适。

如果你喜欢这篇文章,请记得用电子邮件订阅本网站,有新文章发布时,我会在第一时间通知你,也别忘了到我的粉丝专页帮我按个讚喔。

如果你对本篇文章有任何问题,欢迎你在下方留言,我会尽快回覆你。

标签: 深圳SEO 深圳SEO优化 深圳SEO推广 深圳SEO教程 深圳SEO技术 深圳SEO博客

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~