奇叔
Well well well! 今天总算找到点时间开始记录下这个过程！随着2021 Google推出新的算法，刚用Elementor改版完成的Woocommerce外贸独立站要全部推翻重来，当时那个悔啊！那个心痛啊！别说有多难过了！这次迁移整个过程耗时1个半月，大多时间感觉是耗在学习上了。其实如果所有的工具都了解，估计也就一周就能完成的工作！好了废话不多说，今天就来整理总结下整个过程！
这一次的更新Google强调速度对SEO的重要性，使其成为实际的排名因素。借助 Google PageSpeed Insights 这个工具可以对网站的具体页面进行检测。这里会用打分的形式给出移动端和桌面端页面的具体速度。分数如果超过90会是绿色，这代表优秀，黄色代表良好，红色代表糟糕！在之前一直使用Elementor作为站点的页面编辑器，它真的很好用，在我心目中它是非常不错的wordpress page builder, 可以在不依靠很多插件的情况构建出一个功能强大，且外观靓丽的网站。但在Google这次更新后，不得不含泪弃用！鱼与熊掌不能兼得，功能强大外观靓丽是有一定代价的，强大功能意味着复杂的JS程序，外观靓丽意味着需要复杂的CSS代码。恰好Elementor在代码的精简上真的做的不怎么好比较臃肿，这将严重影响网站在移动端的浏览速度并影响SEO排名！让我不得不把新做好的网站从Elementor迁移至Gutenberg，进行重新编辑！
在测试网站上可以看见同一服务器下使用Elementor和不使用Elementor对网站速度造成的影响！本次测试服务器都选用Google Cloud，主题选用同一款主题Blocksy Pro，插件都安装Woocommerce和页面编辑器，页面编辑器分别使用Elementor和Gutenberg。在页面上都编辑同的元素，可以看见两者分数有明显的差别。更别说在实际运用中还需要其他插件添加功能的情况！
两测试网站插件安装如下图：
可以看见使用Wordpress自带Gutenberg编辑器的测试站上即使插件数量多一点，但速度上依然有优势！由于从统计信息来看，通过移动端来访问网站的用户占到一半以上，并且成交转化移动端的用户也大于桌面端，Google指出的是在4G用户访问网站的响应速度作为参考标准，5G可能会改变一切，但在此之前，请确保你专注于提高移动设备的站点速度。
请缩短初始服务器响应用时
第一点的影响因素在于服务器的响应时间。这台Google Cloud的测试机器在这点上显然不是太达标，响应时间都超过1秒，超过3秒如果未能打开页面基本会导致高跳出率！但鉴于免费我还是只能说真香，而且只是用了台小鸡也不能要求它太多！但是在实际生产环境中，还是建议选用更适合的主机或VPS。这里比较推荐Cloudways 他家主机也是本人现在实际销售Woocommerce站点部署位置，优点是对Wordpress友好，站点迁移非常方便，面对欧美客户有绝对速度优势，PageSpeed测试评分优秀，入门级价格不高，灵活配置选择随时升降并且不影响运行站点，3天免费试用。缺点是反人类的注册过程，非常不友好！有空的时候做一次他家的主机测评！如果个人用户对云主机觉得用起来有难度，还是想要简单的cPanel我真的真的还是只有推荐ICDsoft了，虽然他们家空间速度觉得一般般吧！但是作为用了它快十年的老用户来说还是很推荐，优点：香港节点对大陆用户友好，特别是广东省，那完全有时候超越本省其他城市速度。美国节点不太建议面对大陆用户使用，大陆访问延迟较高，跑PageSpeed测试评分比Google Cloud免费小鸡略快！
移除阻塞渲染的资源
这里主要是受各个插件和主题的JS文件以及CSS文件影响，从上图可以看出在dev站点虽然插件数量上多于local，但local站点上多出来一个Google的CSS文件，网址来自fonts.googleapis.com。这是Elementor调用Google字体的CSS，这种第三方网址内容将严重影响网站速度，不论是Google统计或者PayPal支付代码又或Facebook Pixel都将严重影响评分。这里的建议是Google字体或者Adobe字体本地化并swap，统计代码等酌情添加，最好只用在需要用的页面而不是出现在全站，尽量减少第三方代码对网站影响。
适当调整图片大小 / 采用新一代格式提供图片
图片过大也会导致加载迟缓，修正这个问题的方法是采用新一代图片格式将JPG或PNG格式图片转换到webp格式，什么是webp请自行Google或百度，这里就不展开了。JPG或PNG格式图片转换到webp有很多在线转换网站例如：https://cloudconvert.com/png-to-webp
https://convertio.co/zh/png-webp/
当把图片转换到新格式以后还需要进一步压缩，可以在这里进行在线压缩！
WordPress 更新到5.8以后默认支持webp格式图片这个非常友好。
对于很多网站另一种方法是使用插件，由于网站内容过多是不可能一张一张慢慢去调整图片的，这个时候就只能借助插件了。在尝试了很多插件以后这里推荐Smush，这个插件可以在WP插件中心找到，免费版本可以帮你一次性转换整个网站图片格式到webp，我觉得免费版已经很好用了。
采用高效的缓存策略提供静态资源
如果不是经常要修改的文件，建议为伪静态！时间要设置成8个月以上，如何设置伪静态请参看另一篇文章。
总结以上所有归根结底就是：
- 减少CSS和JS使用，尽量精简。在功能和性能上尽量平衡，在编辑之初就规划好功能，减少插件使用。基本上不用去尝试插件压缩网站现有css和js，除非你现在网站的css和js非常臃肿，要不基本上是负优化，用插件整合的css和js，往往会起到反效果，压缩过后的文件往往也不小。
- 采用响应速度快的主机。
- 采用代码精简优秀的主题。
- 不要用Elementor或DIVI这种复杂的page builder, 改用自带Gutenberg。
- 采用最新一代的webp格式图片，并压缩图片大小，并采用延迟加载。
- 网站不常编辑元素需伪静态。
- 不要编辑过于复杂页面，减少轮播和过长的页面，减少页面DOM，不要在页面上使用视频播放器，视频播放尽量链接到另一个页面，不要使用瀑布流，改用分页。尽量不要调用instagram信息。不要添加在线聊天，改用联系页面。
- 尽量不要在网站使用第三方代码，比如Google统计和Google字体等。
- 字体一定需要设置SWAP，尽量使用系统字体减少加载时间，使用特别字体一定字体本地化。
- 尽量少采用Woocommerce插件，不到万不得已尽量不用。
- 至于要不要使用CDN，这个需要根据自己的实际情况酌情考虑！如果大多长时间不变动，并且不需要经常编辑网站觉得还是可以使用，反之亦然。当然在使用CDN之前，确保你的网站已经优化好！要不CDN没什么作用！
本次优化所有步骤用到的工具：
- 主机选择：Cloudways（现阶认为最满意的）
- 网站主题：Blocksy pro（尝试使用过最后觉得最好的，代码精简完全不影响速度，但是功能强大，基本上替代了大部分Elementor功能，关于它完全可以开一篇单独讲了）
- 页面编辑：Stackable pro（现阶段尝试使用过最好的Gutenberg blocks。）
Kadence Blocks（补充Stackable一些不足的功能）经过反复测试在安装了两个blocks插件并不影响网站速度，只有在页面添加区块的时候才会影响。 - 联系表单：Fluent Forms Pro （没有多余代码，不会乱调JS，不影响速度。仅限出现在你想让它出现的页面，非常强大的表单工具，服务售后非常好，不论你是不是他的pro用户回复都很积极。）
- 图片压缩：Smush （尝试了一圈以后，最终定格的插件，也不影响网站速度，但实现功能无多余代码插入）
如果有不明白的地方可以留言！如果觉得文章对你有帮助，欢迎点赞打赏请我喝杯咖啡！
