独立站速度优化一直是电商行业中讨论得最多的话题之一。我们常常遇到两类粉丝:
第一类是完全忽视速度优化的朋友。他们在独立站搭建完成后,可能并不知道加载速度还需要进一步的优化,觉得网站已经能正常运行就没什么问题了。
第二类是意识到加载速度对独立站的重要性,但又不知道从何入手的朋友。即使他们意识到了问题,每次寻求帮助时,却发现自己无法得到全面的解答,甚至会觉得网站速度还不错。其实,很多时候他们只是常常在同一设备上访问自己的站点,浏览器将页面内容缓存在本地。这样,页面加载时就能快速显示,而真实的情况是,当换到其他设备时,加载速度慢的问题才会显现出来。
实际上,许多人并不清楚,浏览器的缓存功能会让同一设备上的访问看起来非常流畅,而换到其他设备时,就会暴露出加载速度缓慢的问题。为了帮助大家更好地理解并解决这个问题,我花了一些时间整理了如何优化独立站速度的方案,整理了一些常见的优化技巧,并在这篇博客中为大家详细解析。希望大家通过这篇文章可以更清楚地了解如何提高独立站的加载速度,并为用户提供更好的浏览体验。
独立站速度优化的重要性
众所周知独立站页面加载响应速度是非常重要的。不仅影响着独立站的SEO还影响着独立站的各种转化,比如询盘转化、订单转化等。如果你的独立站页面的加载时间过长那一定会影响SEO,因为谷歌搜索引擎不会把客户体验不好的独立站推荐给它们的用户,你以为花了钱通过广告就能将访客带入自己的独立站,殊不知这些访客点了你的独立站的链接,扣了广告的费用,页面都没加载出来让他们瞅上一眼,就离开了。所以呢如果没做好独立站速度优化,无论你的页面文章写的多专业,质量多高,那都是留着给自己看的,广告投入再多的费用也都是打水漂。
独立站速度优化的6个维度
1.主机
- 硬件性能:优秀的主机通常采用的都是高性能服务器的硬件,比如大家熟知的SSD存储、强大的CPU等,可以非常明显的提升数据的处理速度和响应时间。
- 网络带宽:更高的带宽可以满足流量高峰同时访问,从而避免访问加载延迟。
- WordPress友好:如果你的独立站也是通过WordPress来搭建,那毫无疑问坚决不用国内服务商的服务器,且不说对于小白来说配置极其不友好,对WordPress也不友好。优先选择就是海外的Hostinger主机,其次就是海外的其他主机。
- 地址位置:毋庸置疑主机的位置对独立站加载速度有着非常重要的影响,然而优质的主机服务商在世界各地主要国家和地区都有数据中心可以选择,离你的目标客户越近,独立站的加载速度也就越快,所以我们购买主机后,选择数据中心的时候务必选择离你大部分目标客户最近的城市。
- 缓存技术:高性能主机一定内置了先进的缓存技术,可以最快速的提供静态内容,减少对服务器的依赖,从而实现快速加载独立站页面。
2.图片
和大部分人了解的一样,图片压缩可以大大提升独立站页面的加载速度,但是好的、专业的图片压缩可能和你理解的有些出入。

- 图片压缩插件
Imagify:这是一款我自己经常使用的图片压缩插件,它可以自动的来压缩上传的图片,同时也支持多种压缩级别,压缩后的图片肉眼基本上看不出图片质量上的变化
Smush:可以提供图片的无损压缩和批量压缩
ShortPixel:可以同时压缩多张图片,并且实时预览图片效果。如果图片数量不是很多的话,可以先使用它的免费版,每个月可以免费压缩的图片是有限的,如果额度用完的话,则需要等下个月刷新
- 在线压缩工具
TinyPNG:TinyPNG 可将文件大小减少高达 80%,同时不会牺牲图片质量,从而加快页面加载速度, 支持WebP、PNG 和 JPEG 压缩,让独立站运行速度更快
JPEGmini:支持 JPEG、GIF 和 PNG 格式的图像的压缩,最多一次可压缩20张图片
- WebP格式
没有特殊原因尽可能的将图片格式选为WebP格式,因为WebP格式的压缩效果比常见的JPEG和PNG更为突出。
- 删除不使用的图片
定期的删除媒体库中不使用的图片
3.不在主机上直接上传音视频
之前我也碰到过不少独立站,他们的视频直接放在自己的主机上,这样操作的问题一来独立站页面的加载速度毋庸置疑会变慢,二来就算访客好不容易进入你的页面观看视频也一定会卡顿,这一来二去的用户体验是极差的。更严重的当有访客在观看这些视频时,主机的CPU,内存、带宽瞬间会被拉满,出现主机短时间内无法正常运行,最终导致独立站瘫痪无法访问。类似这种严重的问题我的粉丝就遇到了,他在自己的主机上只放了一个10分钟左右的视频,没过几天独立站就瘫痪了,然后找到我解决。其实大家想在独立站上放音视频大可不必这么操作,完全可以把它们放在YouTube、Vimeo等这些海外专业的音视频平台上,你只要将对应的URL嵌入在独立站对应的页面即可,这样就可以轻松解决以上任何问题和风险。
4.速度优化插件
WP Rocket 正版分销是我一直用来提升独立站加载速度最好的一款插件。可以在页面缓存、延迟加载、预加载、文件优化、数据库优化、CDN集成等全方位来提升独立站的加载和响应速度。所以接下来我好好讲讲如何通过WP Rocket迅速提升独立站的加载速度,在具体操作前我们先做好两个动作。第一,备份好你的独立站,因为在速度优化的过程中不排除发生独立站页面报错等问题的出现,所以务必做好独立站的备份。
通过专业的测速网站测试独立站在速度优化前的各项数据并做好记录,一般我们通过pingdom或者gtmetrix来进行测速。

安装完毕后,我们先打开WP Rocket操作页面

- File Optimization:在碰这一部分内容之前,建议大家先给独立站做一个备份,因为其中某些选项有可能会影响。如果取消勾选仍不能恢复的话,至少还可以通过备份将独立站恢复到设置之前的样子。首先来看CSS文件,这里我们可以将对应的两个选项都勾上,这个功能主要是会将CSS文件中大量的空格给删除。然后将文件进行整合,从而达到给文件瘦身的目的。

- JavaScript Files:javascript文件与上面类似,也是将这三个选项都勾选上。第二个选项的意思是延迟加载不必要的javascript文件,可以提升独立站整体的加载速度。第三个选项的意思是只有用户在与独立站有某些互动时,例如滚动鼠标或者点击某个链接,才加载相应的javascript文件,这也可以提升独立站的性能,设置完后点击保存。

- Media:接下来再看下Media设置,这里是与媒体相关的设置,我们将lazyload下面这四个选项都勾选上,然后保存一下。他们的作用就是随着独立站页面的滚动,会加载即将要显示的图片,如果页面还没有移动到的位置,则对应的内容是不会加载的。这就是lazyload这个设置的作用,它在一定程度上可以减少请求数量,节省服务器资源。

- Preload:再来看preload这个选项,这是一个非常实用的功能,通常情况下,用户只有访问过一次你的独立站,才会生成相应的cash。这样短时间内的下一次访问加载速度才会提升。而在cash的有效期过后,整个过程又要从头来过,而如果我们使用Preload这个功能的话,则就没有这方面的顾虑了,它会持续不断的预先加载和生成最新的cash来给用户使用,即使用户是第一次到达你的独立站,也可以享受最新cash带来的速度提升。Preload Links也要打开,它的作用就是每当我们的鼠标指针移动到某一个链接上时,这里都会预先加载这个链接页面的对应内容,而当我点击某一个链接时,对应页面的内容可以快速的显示出来,因为在鼠标点击之前,相应的内容已经在加载。

- Prefetch DNS Requests:这个选项是针对独立站如果有很多外部请求,例如外接视频、字体等等,可以使用这个选项来预处理这些请求,从而达到提速的目的。
- Advanced Rules:哪一个页面永远不要启用cash功能?如果是电商独立站的话,商品的信息和价格总是不断更新的,如果我们想让用户看到的永远都是最新信息的话,则可以不启用商品页面的功能。WooCommerce默认情况下就是这个shop页面,在这里按照它的格式输入URL,这样shop这个页面以及它下面的子页面都不会使用cash功能。


- Database:这里可以对数据库一些过期的信息进行处理,只需要将需要清除的信息勾选上就可以了。

- CDN:通常情况下,这项服务是需要单独付费购买的。简单来说,它是一项能够让用户从离他们最近的服务器获取独立站内容的服务。打个比方来说,如果你的独立站服务器在美国,那么一个欧洲的用户登录你的独立站可能需要加载3秒钟。如果使用CDN服务的话,你独立站的内容会预先加载到世界各地的服务器上,不同地区的用户登录你的独立站,都只需要从离他们最近的服务器读取内容即可,这样可以大大减少独立站的加载时间。如果你只有一个独立站,并且预算有限的话,可以使用Cloudflare CDN服务,一个独立站是免费的。

- Heartbeat:我们平常在编辑内容的时候,WordPress每隔一段时间会自动保存我们编写的内容,使用Heartbeat这个功能可以减少这个自动保存的频率从而节省服务器资源。

- Add-ons:Add-ons可以根据自己独立站的实际情况将对应的选项打开进行优化。
WP Rocket速度优化前的数据/WP Rocket速度优化后的数据

以上操作完毕后,我们接着打开上述的专业的测速网站pingdom或者gtmetrix,测试后你可以发现独立站的整体评分、页面大小、加载速度和请求数量都有了质地提升。上面两张图是我们独立站进行WP Rocket速度优化前后的对比图,可以看到经过优化后的独立站各项指标近乎完美!
5.精简插件
独立站的插件不是越多越好,相反安装越少的插件越有利于独立站页面的加载速度,所以我们在建站过程中,能通过技术手段解决独立站样式、功能的,就坚决不用插件。
- 加载速度:过多的插件就是一种负担,会严重增加独立站页面加载的时间,从而影响访客的用户体验和独立站的SEO。
- 资源消耗:每个插件都会占用一定的服务器资源,减少不必要的插件数量可以降低服务器负担,从而提高响应速度。
6.CDN
如果你的客户遍布世界,那么CDN就非常有必要了。CDN说白了就是内容分发网络,主要通过分布在世界各地不同地理位置的服务器来提升独立站内容传输和访问速度,它可以有效的将独立站静态资源如图片、CSS、JavaScript等缓存并分发给用户,从而提高独立站打开速度和响应时间。知名的CDN服务商有:Akamai、Cloudflare、Amazon CloudFront、Fastly、Microsoft Azure CDN、Google Cloud CDN等。
7.使用轻量化的主题
主题对独立站速度的影响较大,一款优秀的轻量化主题可以大大减轻加载负荷,从而减少加载时间,例如Hello ELementor,当然如果你的主题中包含了不必要的代码或者功能肯定也会拖累独立站的加载速度
8.定期监控和维护
独立站速度的优化不是操作一次后就一劳永逸了,需要定期的监测和检测独立站的网页加载速度,确保插件、主题和WordPress的更新,如果发现速度异常,找出问题所在,及时处理
结语
至此独立站速度优化的好处我就不赘述了,以上都是优化的最优解,通过上述优化操作后可以让你的独立站在不同设备和网络环境中都能快速得到响应