SEO关键因素之提升网站加载速度

September 27, 2019 by 王海峰

这两天发现这个网站打开速度直线下降,不管是用国内IP,还是国外IP访问,网站打开速度都是慢的惊人。

这样下去,打开GA分析工具,数据会惨不忍睹,非常不利于SEO优化。

通过网站加载速度的优化,PageSpeed得分从之前的75%升至91%,YSlow也从惨不忍睹的64%升至81%。目前的分数和网站打开速度已经到达了老王的预期了,就没必要再花额外时间优化下去。

此外老王的服务器在新加坡,反复查看页面看实际的加载速度之后,也打消了我把服务器放在国内的念头,其实也麻烦。

这是优化前后的对比图片:
网站加载速度

网站速度优化之后,颜色好看了很多,心情也舒畅了很多:
速度优化以后的速度表现

老王到底是怎么做到的?如果你的内容站是使用Wordpress搭建的,那么实现这一切不要太容易。

提升网页加载速度的利器 – W3 Total Cache 和 CloudFlare

这两大利器,不仅功能上能实现网页速度优化功能,而且… 它们的免费版本就能满足了!

W3 Total Cache 就是利用缓存原理,访客访问网站时,数据直接是由缓存提供的,这样的话,减少了数据从服务器动态提取出来的时间,让访客更快的看到内容

CloudFlare 从另外一个角度切入,从而提升加载速度。它是一个CDN工具,CDN的全称是Content Distribute Network,他是一个内容分布存储系统,内容存储在世界各地的这个系统的节点上。无论你的访客在巴黎,东京,还是新加坡,他们都能就近找到离他们最近的数据中心,下载和浏览数据,从而提升网站的加载速度。

按照以下说明提升网速的效果:
初步提升网页速度

如何提升和调试 W3 Total Cache

在下载和和激活W3 Total Cache工具之后,在仪表盘左侧看到Performance,点击打开,你会看到有很多子功能,但其实我们用到的这些功能不多。

一: Page Cache – Enable

光这个选项就能实现很大的提升,所以开启这个选项是必须的。

开启页面缓存

二:Minify — Disable

老王将使用Cloudflare实现代码压缩功能,所以这里不勾选Enable。

不勾选Minify

三:Database Cache – Disable

你网站所有的数据包括页面,博客内容,评论,产品地址都存储在数据库中,数据库缓存能够提升页面打开速度,但是老王测试了以下提升效果(使用Wp Optimize插件),非常有限。
如果你使用的是共享服务器,建议不要勾选,会增加共享服务器的负担。

不要勾选数据库缓存

四:Object Cache – Enable

对象缓存和数据库缓存的弊端是一样的,如果服务器运算能力不够,反而会拖累速度,所以如果你在使用使用性能一般的服务器是,建议关闭。对象缓存会对你后台操作速度产生影响。这里老王选择开启。

开启对象缓存

五:Brower Cache -Enable

浏览器缓存通过缓存静态资源,不需要重复加载这些静态内容,来提升网站速度。所以必须选择开启。

开启浏览器缓存

六: CDN – Disable

你将使用 CloudFlare CDN,但是会在另外一个地方进行配置,所以在这里选择Disable。

CDN关闭

七:其他选项

现在为止已经操作了一些选项,往下面拉还有很多选项可供选择,但是可以到此为止,其他选择就让它默认存在,不用在做进一步的操作。包括Reverse Proxy,Monitoring,Debug – Disabled, 等等。

进一步设置

接下去就要对上面你Enable的选项在进一步进行设置,有3个:Page cache,Object cache,Browser cache。

设置 Page Cache

来到页面缓存设置选项,你可以按照如下指示进行选择。没有说明的地方,你可以不用管他们,保留他们的默认值就好。

一: General

在General下面,确保以下几个选项被选中:

  • Cache posts page
  • Cache feeds
  • Cache SSL,如果你的网站是https 可以选中,当然Cloudflare提供免费的SSL证书,你依然可以选择它即使现在你还在使用http
  • Don’t cache pages for logged in users

page cache setting

二: Cache preload

按照以下指示进行设置

  • Automatically prime page cache: 选中
  • Updated interval:900 seconds
  • Pages per interval:10
  • Sitemap URL:填入你的sitemap URL的地址,一般是这个形式:yourdomain.com/sitemap.xml
  • Preload the post cache upon publish events:选中

page cache preload

配置Configure object cache

除了以下两个要确保正确的值之外,其他的选项不用去动,忽略即可。

  • Default lifetime of cache objects: 180 seconds
  • Garbage collection interval: 3600 seconds

object cache setting

配置browser cache

这是W3 total cache最后一个要配置的地方。

  • Set Last-Modified header 选中
  • Set expires header 选中
  • Set cache control header 选中
  • Set entity tag (ETag) 选中
  • Set W3 Total Cache header 选中
  • Enable HTTP (gzip) compression 选中

browser cache setting

其他选项保留为默认设置即可。

以上,W3 total cache就配置完成了。

如何使用Cloudflare

假设你现在已经有了Cloudflare,并且已经在使用。

回到W3 total cache, 进入到Extensions页面,并激活Cloudflare。

cloud 设置

激活之后点击进入,需要授权才能使用,API秘钥需要到cloudflare账户中获取,点击右上角的My profile按钮,找到API Key区域。

Cloudflare授权才能使用

当Cloudflare功能被激活后,你可以看到页面下方多了一些设置选项。往下拉到“CloudFlare: Content Processing”区域,勾选以下选项,即完成了Minify功能。其他设置默认即可。

Cloudflare minify功能

假如你现在还没有在使用Cloudflare,老王会在国庆假期后录制一个简单的视频教你如何使用。

需要组合JS和CSS代码

使用上述方法,网站打开速度有了飞速提升,但是老王对速度检测分数还是不满,点击YSlow,发现能够优化的点在于减少HTTP请求次数。

降低HTTP请求次数

于是老王再次回到W3 Total Cache工具,刚才没有使用Minify功能,Minify功能里面有合并Javascript和CSS的功能。

在总设置(General settings)内开启Minify功能,但是Minify模式设置为Manual即手动模式,老王只是想使用合并功能。

Minify 手动设置

在General settings下面找到Minify,进入Minify细节设置:

JS:

JS 合并

再往下拉,找到CSS优化选项:

Css代码合并

完成以上配置后,鼠标网上滚道最前面的位置。找到Help按钮,并点击。

设置帮助

接着弹出一个窗口,会有很多单独的JS和CSS文件,将他们勾选,点击底下的应用按钮,即完成了合并设置。

总结

好了,虽然老王前面花了一些时间回顾了之前的优化思路,但结果不错,而且还是一劳永逸的。速度优化真的非常重要,赶紧使用 Gtmetrix工具来测一下你的网站速度吧。

网站速度不行?或许老王我能帮上你忙!

王海峰

希望能帮助你建立一套属于自己Online money making的英文网络营销系统,我在过去已经解决过的问题和相关知识点的整理,都会在这里和你分享...

发表评论

avatar
  Subscribe  
Notify of
error: 禁止转载 !
微信号:arvinwang1987