WordPress速度优化2018:实现网站加载速度从11秒到1秒的飞越

WordPress速度优化至关重要,直接影响谷歌排名和用户体验感,超过3秒的网站加载速度将会使您的网站无人问津。如果您关注各个搜索引擎的排名,您也需要加速您的网站,加载太慢的网站在搜索引擎中的排名会降低。我们采取了系统的WordPress加速方法,将您目前访问的博客【美国生活ABC】从最初的11.3秒加速到目前的1.4秒。我们使用网速检测工具对网站的速度进行检测,下面是当前博客网站在优化前和优化后的各项数据的对比:

图一:加速前的网站数据 (11.3秒)
图二:加速后的网站数据 (1.4秒)

在网站优化之前,网站的完全加载速度 (Fully Loaded Time) 超过11秒钟,两项评分指标(PageSpeed Score,YSlow Score) 都在50分左右。使用系统的优化方法之后,目前网站的加载速度已经接近1秒钟,同时PageSpeed Score和YSlow Score两项评分都几乎完美,达到99%的高分。可能您还注意到上面两张图中所显示的网页大小 (Total Page Size)  和网站发送请求数量 (Requests),在优化之后,都呈几何数集的减少。可以说,网站的各项指标和数据都得到了全面的优化和提升。

为什么进行WordPress速度优化?

大家从自己的亲身经验就可以知道,如果您浏览的网页速度太慢,那么您很快就会关闭这个页面。下面,我们列举了几个WordPress速度优化的必要性,如果您的WordPress网站比较慢,那么

  • 网站访客的体验感会很差,会很快的关闭网页;
  • 由于网站访客过早的关闭网页,造成网站的”Bounce Rate“过高,Bounce Rate指的是刚刚点击网页就关闭的人数与网站访问总人数的比例,数值越高,说明过早关闭网页的人数比列高;
  • 由于网页加载速度慢,网站在谷歌、Bing等搜索引擎中的排名会被压低;

所以,WordPress加速是每个网站编写人员和管理人员的必备工作。那么如何进行有效的WordPress加速呢?下面,我们为您逐一分析WordPress加速的所有细节,包括WordPress虚拟主机的优化、使用缓存技术 (Cache) 加速、使用CND加速等等关键技术。

WordPress网站速度检测工具

最为著名的两个网站速度检测工具分别是:GTmetrxPingdom。使用这两个在线工具都可以免费检测网站的加载速度和各项运行指标,包括网页文件的大小和网站发送请求的数量。这里引用Peter Drucker的一句话“You can’t manage what you can’t measure”,因此,网站测速对于网站加速至关重要。查看下面的视频,了解如何使用GTMetrix和Pingdom测试网站的速度和各项指标。

文章开始的两张网站速度分析图就是使用GTmetrix得到的,这里,我们再次使用Pingdom来检测我们的博客网站【美国生活ABC】以及亚马逊美国主站 (www.amazon.com) 的各项指标,如下所示:

【美国生活ABC】在Pingdom中的测速结果

亚马逊主站在Pingdom中的测速结果

您可以看到,我们的博客网站比亚马逊主站还获得了更好的测评分数,看来我们使用的加速方法效果明显。您现在就可以使用GTmetrxPingdom对您的网站进行速度检测,您可以把测试的结果发布在文末的”Leave a Reply“与大家分享,如果您有任何问题,我们也会帮助您进行分析。如果您的网站打开速度需要3秒钟以上,或者网站的Pagespeed和Yslow评分都在80分以下,那么您真的需要对您的网站进行加速优化了。请按照以下的步骤完成WordPress加速过程:

使用SiteGround虚拟主机

网站虚拟主机的速度直接决定网站的整体速度和性能。您在广告中常听到的虚拟主机,比如Bluehost, Hostgator等等,虽然价格便宜,其实它们都属于一家名为Endurance International Group (简称EIG) 公司的子公司,价格便宜主要是因为每个主机上的人非常的多,同时主机更新比较慢,所以可想而知,速度必然快不起来。这里,我们强烈建议您使用管理型的WordPress主机 (Managed WordPress Hosting),只要进行最简单的设置,就可以达到最佳的运行效果和主机响应速度,您可以点击了解《什么是Managed WordPress Hosting?》。一言以蔽之,管理型主机已经为使用者进行了主机方面的优化配置,并且进行管理,那么使用者不需要太多的管理,就可以达到最优质的网站加速效果。我们推荐的管理型虚拟主机是著名的SiteGround主机,综合了价格和速度的优势,它在多个fackbook最受欢迎的虚拟主机投票中都遥遥领先。

SiteGround所提供的管理型WordPress主机有下面三个类型:StartUp, GrowBig, GoGeek, 价格分别为$11.95/月,$19.95/月,$34.95/月。但是初次使用的优惠价格为$3.95/月,$5.95/月$11.95/月,如果您初次订阅三年的服务,那么最长可以享受三年的优惠价格。

我们建议选择GrowBig或者GoGeek:对于第二个选项GrowBig,您可以拥有20GB的硬盘空间,支持每个月2万5人次的浏览量;对于第三个选项GoGeek,您可以拥有30GB的硬盘和支持每个月10万的人次浏览量。其实,最重要其实还是下面三点:

  • GrowBig和GoGeek所使用的主机限制每个主机的使用人数,从而保持最优质的主机相应速度 (Responsive time);
  • GrowBig和GoGeek自动配备了网站加速工具SG Optimizer,从三个方面保证主机速度最优化,这三个工具分别是SuperCacher Config,HTTPS Config和PHP Config,如下图所示。其中SuperCacher可以将网站内容进行缓存,大大加快网站的打开速度,您不再需要安装W3 Total Cache或者WP Super Cache等付费WordPress插件;HTTPS Config可以为当前网站添加https,从而获得安全网站凭证;PHP Config是用于用于更新当前网站的PHP版本,保证主机使用最高的版本,因为PHP的版本极大影响网站的运行速度;

  • GrowBig和GoGeek提供免费的网站迁移服务,如果您目前正在使用其它的虚拟主机供应商,您可以免费将整个网站搬移到SiteGround主机。

目前您所访问的博客【美国生活ABC】已经迁移到了SiteGround主机,大家可以明显看到整个网站运行效果的提升。您可以立刻升级,或者等待网站内容完备,再将网站一次性迁移到SiteGround主机,整个网站的迁移都是免费的。

使用WP Rocket

WP Rocket能够从多个方面提高网站的速度,同时提升GTMetrix中的各个重要指标,从多个方面提升网站速度,包括缓存网站内容、优化网页的CSS和JavaScript脚本、优化视频和图片加载方式、采取预加载加速、优化网页数据库、同时可以与内容分发网络 (Content Delivery Network,简称CND) 和Cloudflare无缝连接。WP Rocket是一个付费插件,请购买并且下载WP Rocket,然后查看我们撰写的【WP Rocket完整使用教程】,详细了解如何设置WP Rocket,实现网站速度的优化,同时,WP Rocket可以与后文即将提高的两个加速工具 (MaxCDNCloudflare) 无缝集成。以下是当前博客所使用的WP Rocket的设置页面。

使用CDN加速

CDN是Content Delivery Network的缩写,中文翻译为”内容分发网络”。基本思路是将网站的内容复制到世界不同地点的服务器,从而加速网站在当地的加载速度。比如,网站的服务器在美国,但是您希望中国的访客可以更快的访问您的网站,那么您可以使用CDN将网站内容备份到中国的服务器上,那么在中国访问此网站就会大大提速。我们推荐的是名为MaxCDN的内容分发网络工具,MaxCDN在全球的网络图如下所示,可以看出MaxCND在全世界都分布了内容分发网络,亚洲的网络主要坐落在香港、韩国、日本、新加坡和菲律宾等地方。

在使用GTMetrix测试您的网站速度时,有一项YSlow指标叫做”Use a Content Delivery Network (CND)” 显示的就是CDN的得分,不使用MaxCDN之前,大家在下面第一张图中可以看到,得分是零分。

但在使用MaxCDN之后,这一项就会自动的解决了,在下图中,网站的这一项评分达到了100分,可见CDN对于网站加速的作用是不言而喻的。

MaxCDN是一种付费服务,费用是每个月$10。具体的设置步骤如下:

创建MaxCDN账户

登陆MaxCDN账户,如果您已经有StackPath的账户,直接点击下图中的按钮【LOG IN】登陆MaxCDN账户;如果您还没有注册StackPath免费账户,您可以点击下图中的Learn more about StackPath,首先免费申请一个StackPath账户。

如下图的右侧所示,使用您的Email注册免费的StackPath账户,这里提示:使用MaxCDN第一个月免费。

在下图的”Create An Account”对话框中,使用您的邮箱和密码创建一个账户,这里并不需要信用卡信息,最后点击按钮【Create An Account】完成账户注册。

为网站添加CDN服务

创建新账户后,您需要选择购买的服务,这里我们选择CDN服务,价格是10/月,第一个月免费。选择完成后,点击按钮【Next】,进入下一步。

下面为网页创建一个CDN主机,在下图的文本中输入需要使用CDN的网站域名,再点击按钮【Continue】。

之后系统会自动检测出网站的IP地址,您不需要任何设置,直接点击下图的按钮【Continue】。

系统会自动为您网站分配一个CDN URL地址,您不需要任何操作,但请将这个URL地址复制下来,在后面的操作中,我们需要再次使用。之后直接点击按钮【Continue】。

恭喜您,CDN主机的设置就完成了,如下图所示,状态 (Status)是Active。

在网站虚拟主机中添加CDN URL记录

下面需要把CDN URL存放在网站虚拟主机的CNAME中,这里您有两个选择:

  • 在WP Rocket中集成MaxCDN,请阅读【WP Rocket完整使用教程】,了解如何在WP Rocket中集成MaxCDN;
  • 在网站虚拟主机添加CNAME记录,下面我们来介绍如何在网站虚拟主机中添加CNAME记录。

首先登陆您网站的虚拟主机服务器,这里例子里,网站www.howlifeusa.com托管于SiteGround主机,那么这里我们登陆SiteGround主机,完成CNAME的设置。

首先登陆SiteGround主机,进入cPanel控制面板,找到下图的”Advanced DNS Zone Editor”选项。

进入后,按照下图填写网站域名,CNAME有效时间 (默认是14400秒钟,也就是4个小时) 以及之前MaxCDN为网站分配的CDN URL地址,最后点击按钮【Add Record】。

恭喜您,MaxCDN已经完成设置。这里要强调一下,如果您使用WP Rocket,那么您可以在WP Rocket中集成MaxCDN,您就不需要到SiteGround主机中添加CNAME记录了,而可以直接在WP Rocket设置中的CDN选项直接输入CDN URL,方便快捷,设置后的结果如下图所示。如果您想了解在WP Rocket中集成MaxCDN的方法,请查看我们撰写的博客【WP Rocket完整使用教程】

设置好CDN后,您会在您的StackPath账户中查看到过去24个小时之内CDN使用的流量信息,可以发现CDN已经起作用了,如下图所示:

使用Cloudflare加速

Cloudflare提供CDN和安全的双重服务,而且完全免费,Cloudflare的功能如下图所示:

上面这张图取自Cloudflare的网站 (点击查看英文的解释)。图中左侧是没有使用Cloudflare的网站架构,访客和黑客可以直接碰触到网站的重要内容,存在安全隐患;图中右侧是使用了Cloudflare的网站架构,首先,Cloudflare充当了一个防火墙的作用,黑客如果希望攻击网站主机,会被Cloudflare屏蔽,同时,Cloudflare充当了一个CDN,可以将网站的内容分发到世界上不同的服务器,达到网站加速的目的。

请查看我们撰写的免费教程【Cloudflare教程:免费提供WordPress的DNS安全保护和CDN加速服务】,掌握Cloudflare使用的第一首资料,Cloudflare也可以无缝集成到WP Rocket中,点击【WP Rocket完整使用教程】了解细节。

AMP手机加速

AMP是Accelerated Mobile Pages 项目的简称,中文翻译叫做”加速移动页面”,这是一项由Google公司领头研发的专注于提高手机浏览速度的项目。使用了AMP技术的网页,速度会大大增加,同时用户在使用手机搜索网页时,会出现下图中的“闪电”标记,提示该网页使用了AMP技术,从而大大提高网站在谷歌搜索中的排名。我们使用关键字“美国天才班2018”在谷歌中进行搜索,您看到我们撰写的博客页“美国天才帮:为什么这些孩子与众不同?” 排名第二,在网站的URL之前有一个类似于闪电的标志,这个标志表达的就是AMP技术。

您可以使用免费WordPress插件“AMP for WordPress”完成网站的AMP设置,请按照下面的步骤完成安装和设置:

  • 在WordPress控制面板中,点击左侧功能区的的按钮【Plugins】;
  • 在插件列表最上方点击按钮【Add New】;
  • 使用Keywords搜索区输入”AMP”,找到插件AMP for WordPress,如下图所示;

  • 安装和激活插件AMP for WordPress;
  • 在WordPress左侧功能区中会多出一个按钮【AMP】,点击进入AMP的设置;
  • 勾选Posts和Pages两个选项,将AMP结束应用于博客页和网页,最后点击【Save Changes】完成设置,如下图所示。

到目前为止,您就设置好了网站的AMP,您在编写博客页面的时候,在右侧的功能区的Preview按钮旁边,您会找到一个”闪电”按钮,点击可以预览AMP处理后的网页呈现效果,如下图所示:

写在最后

完成以上所有的设置后,请使用GTMetrix重新测评您的网站速度,您会发现网站的速度成倍数的提高,同时请查看PageSpeed和YSlow两项评分指标,分数应该都在90%以上。如果您的两项评分不能达到90%,或者检测到的速度提升不大,您可以在文章最后的Comment处给我们留言,我们会帮助分析可能出现的问题。

最后,再次总结WordPress加速的几个重要步骤:

如果您在操作过程中有任何的问题,请在文章底部的留言区给我们留言,我们会尽快给您答复。我们还撰写了WordPress网站创建课程【WordPress网页设计A-Z】,由浅入深的逐步教会您快速WordPress建站的方法和技术,点击查看更多。请 订阅【美国生活ABC】,跟踪更多创业、电商、市场推广等相关课程,我们会第一时间将这些关键技术推送给您。

请给这篇文章打分,如果您觉有内容有用,请分享给您的朋友
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

在美国获得工程学博士学位,曾经在美国大学任教,从事教学和科研工作 (已经发表的学术论文),目前投身少儿教育和在线教育领域。喜爱与家人、朋友共享美好时刻,热爱篮球、关注健康喜爱旅游跟踪新技术,特别关注儿童教育,目前投身于孩子的创造性解决问题能力少儿编程的培养之中,家长应该培养孩子的成长型思维方式 (Growth Mindset)、学会孩子应对关键对话 (Crucial Conversations),使孩子懂得成功依靠的是长期不间断的热情和坚持 (Grit)。

关于本站: 您正访问的个人博客【美国生活ABC】完全由WordPress制作和管理。该博客网站应用了系统的速度优化技术,网站加载速度从原先的11秒钟加速到1秒钟,请查看我们撰写的文章【WordPress速度优化2018:网站加载速度从11秒加速到1秒】。如果您希望制作专业网站,请查看我们编写的【WordPress网页设计A-Z】中文课程,一个星期之内,您就可以创建出您自己的网站了。不需要任何HTML,CSS,JavaScript或者PHP的编程经验,适合于网站搭建的初学者,以及已经了解WordPress,但希望再上一个台阶的朋友们。课程包含三种主要类型网站编写的实例:个人网站/博客、公司/品牌主站、电商网站。课程限时优惠正在进行中,查看更多

Leave a Reply

Your email address will not be published. Required fields are marked *