本文介绍使用SiteGround主机搭建的B2B外贸网站如何做网站加速优化。本文还包含了原生插件和WP Rocket优化结果的测试对比,另外还将网站迁移到Cloudway主机进行对比。
首先介绍一下网站加速优化环境背景
SiteGround主机套餐:GrowBig。
主题:Astra Pro
页面编辑器:Elementor Pro
由于网站是客户正式站点,相关信息会全部打码。
网站加速优化前的测速结果
我通常使用的两款测速工具GTmetrix 和Google PageSpeed Insight
GTmetrix除了结果分数,我主要关注TTFB的时间,这个时间越短越好,最好不要超过1S 。
![image - SiteGround主机B2B外贸网站加速优化指南2022 - NUTSWP image - SiteGround主机B2B外贸网站加速优化指南2022 - NUTSWP](http://nutswp.com/wp-content/uploads/2022/08/image-1024x967.png)
Google PageSpeed Insight 主要关注桌面端的结果,手机端需要AMP,因此暂时没有参考价值,但是优化之后手机端的分数也相应提升,只是达不到绿色标准。
![image 1 - SiteGround主机B2B外贸网站加速优化指南2022 - NUTSWP image 1 - SiteGround主机B2B外贸网站加速优化指南2022 - NUTSWP](http://nutswp.com/wp-content/uploads/2022/08/image-1-935x1024.png)
SiteGround主机端的网站优化配置
1、NGINX 直接交付设置
通过 NGINX Direct Delivery,我们将直接通过 NGINX 为您网站的大部分静态资源(图像、JS、CSS 等)提供服务,以实现最快的加载时间。它适用于所有类型的应用程序,无需额外定制。
直接开启SiteGround主机端的NGINX 直接交付。
2 动态缓存设置
动态缓存是针对非静态资源的整页缓存机制。它可以防止不必要的数据库查询、每次页面访问的处理等等。它极大地提高了您的加载速度和页面的 TTFB(到第一个字节的时间)。
WordPress网站要配合插件SG Optimizer plugin使用配置,这里我们先说主机端的配置。
默认就是开启的状态,如果需要清除缓存,点击下面的小扫帚按钮即可。
3 Memcached (对象缓存机制)设置
Memcached 是一种对象缓存机制,和Redis类似,在Cloudway主机我通常是设置Redis来善应用程序与其数据库之间的连接。
网站后台SiteGround Optimizer 插件的配置
1、SiteGround Optimizer 插件缓存设置
1)进入网站后台缓存设置页面
2)开启动态缓存
3)开启基于文件的缓存(配置默认即可,用户单独缓存不需要勾选)
4)开启内存缓存
5)开启自动清理
你还可以设置不需要被缓存的内容
2、环境设置
1)开启HTTPS强制执行,这里在主机也可以开启,安装了证书之后就可以开启。
2)修复不安全的内容,如果网站中有些内容不是HTTPS开通,这里开启将可以得到修复。我这里不需要开启。
3)心跳检测,会占用CPU资源,一般默认不开启。
4)数据库优化,建议开启。
3、前端优化设置
CSS文件优化全部开启
JS文件的优化全部开启
常规设置全部开启
4、媒体设置
图片压缩设置,压缩等级选择高一点,否则会影响清晰度
备份所有的源文件,这样可以恢复到初始文件
压缩现有文件
1)webp不要开启,RankMath社交媒体转发不支持Webp文件格式,需要手动修改图片文件格式,或者直接不修改。
2)开启图片懒加载
3)修改最大图像宽度为1920像素
以上就是SG Optimizer插件的设置内容,但是你会发现,做完这些,我们来测一下网站速度情况。
TTFB确实提升了很多,但是测评的分数其实一般,我用浏览器无痕模式查看了一下,大概心里默念到5s之后可以看到页面内容。
所以其实结果并不是很理想。
切换到WP Rocket插件(付费插件)配置并测试结果
WP Rocket安装配置教程→
由于以上结果没有达到我的预期,我先将SG Optimizer插件停用,并且去主机清除缓存之后,切换缓存优化插件WP Rocket来进行配置优化,并测试结果如下:
但是最终的测试结果,也并不如意,使用浏览器模仿用户打开,大概也需要默数到5才可以看到页面。
继续做有些其它的优化项目来看效果。
Astra 开启在本地加载 Google 字体
Astra Pro提供了性能设置项本地化Google字体,通过自定义可以进入修改。
开启本地化Google字体和预加载本地字体之后并刷新本地字体,让后点击发布。
然后你可以在测试一下结果,这里我就不测试了。
开启并设置脚本优化插件Perfmatters (付费插件)
注意,这里的优化插件还是WPRocket,配置完整之后,我将切换到SG Optimizer插件去测试结果进行对比。
我们来看看WP Rocket +Perfmatters 优化完成之后测速结果
模仿用户实际打开的感受大约默数到5左右看到页面内容。
接下来我们切换回GS Optimizer插件并测试优化结果。
原生的插件效果确实会比WP Rocket效果更好一点。
移除网站上一些动画和自动播放效果
目前的速度效果并没有达到我们的预期,如果需要进一步提升,需要将网站的内容做一些优化,如果你的网站上用到了一些动画特效或者自动播放,建议取消,因为这些内容都需要额外加载脚本,从而减慢网站的速度。
删除之后我们再看测试结果。
结果会稍微有些提升,但是实际打开的话大概默数4之后有画面的样子。
网站迁移到Cloudway主机对比测试结果
我又将网站迁移到cloudway主机进行对比测试,加速插件切换成WP Rocket,其它插件和网站内容都不变。
需要说明一下,我部署的Cloudway主机是2核4G的配置,里面已经再跑了7个网站。
我们来看测试结果。
实际模仿用户打开,心里默数到3就会有画面。
总结
影响网站速度的因素有很多,一般情况下靠一个插件解决网站的速度问题也未必有效,如果你的网站只是一个简单博客,那么可能你都不需要任何加速优化的操作就已经拥有很快的访问速度。
有时候为了提升网站的访问速度,我们甚至可能需要重新搭建网站,才能实现最终效果。
上文中我没有单独提到图片压缩压缩优化(SG optimizer插件中包含了图片压缩功能),如果你是使用WP Rocket插件,建议配合一个图片压缩插件来压缩优化上传的图片。
压缩优化插件推荐:
免费:reSmush.it Image Optimizer (效果一般)
付费:ShortPixel Image Optimizer (站长推荐)