WordPress图片服务优化

分类: 技术分享   |  标签: wordpress, 技术分享   |  共有: 824 次浏览 , 暂无评论

这两天的WordPress折腾之旅即将画上尾声，前面根据Google的网站分析工具，进行了不少的优化和修复，不过Insights测试的分数还是没有很高，但也无所谓了，最后要进行优化的，是其中图像存储和显示部分。目的是通过对WordPress的服务和图像的优化，提升页面响应速度和用户的访问感受。

优化的参考来自于Google 的PageSpeed，里面可以对当前页面提出了很多优化建议，经过我一阵折腾以后，还有下面一些问题是无法解决的：

• 网页中的JS和CSS嵌入：这部分问题在桌面版上还好，只是两个jquery和一个CSS，我之前把其他几个小的CSS都进行了合并，如果全部嵌入页面显然不现实。这部分可以通过服务器缓存来进行提升速度。不过在移动版的网页中，由于又调用了遮罩脚本，所以多嵌入了几个js代码也没办法了。
• 网页上图片的优化：这部分工作，我是用WP的插件来完成的，经过对比，我最终选择了“Compress JPEG & PNG images”这款插件。注册完成以后，每个月可以进行500张图片的优化，而且无缝的整合入媒体库中，还可以对历史文件进行优化，其实，你只要选择优化大图就可以了，所以每个月的额度绰绰有余。不过实际使用下来，相较我用PS保存的文件，只有10%左右的优化空间。
• 使用浏览器缓存：这个需要在nginx上面进行新的缓存策略设定，我开始以为是设置在nginx主配置文件里面的，后来发现是要设置到vhost的虚拟站点配置文件里面，设置完成之后，重启一下服务就好了，为了方便调试，我还是把css的缓存时间给设置小了一些，而其他的都设置的比较久。
• 缩减CSS：其实CSS本身尺寸就很小，所以无所谓缩减了，因为缩减完成以后，在阅读性上面会差很多，我还是喜欢按自己的习惯来写。

另外，就是写一下关于Lazy load的设置，这是一个针对图片显示的插件，在WP上用的很多的一个就是这个，另外一个就是 Infiniti Scroll，不过因为我设置了分页，所以的话我觉得只要配置Lazy load就好了，有很多不同的Lazy load插件，其实只要选择最简单的那个就可以了，所实现的效果就是：当页面需要显示图片的时候再进行加载，然后用fade的方式进行显示，感觉效果还是不错的。

Lazy load的原理是先加载一个1*1px的透明图片，等需要的时候，再加载整个图片内容，我在实际使用的时候，在PC版本上面显示的很好，但是在移动版本上面发现完全没有用，我开始以为是Safari没有捕获到视窗口大小，后来发现是我修改了标准的文章展示模版，在标准模块之前提前加载了图片，导致插件的代码没有对这张图片产生影响。解决的办法就是手工把Lazy load的属性代码添加到手工写的代码当中，就好了。

后来又发现一个问题，在模拟页面加载的时候，手机端网页会先出现很长一块空白然后再进行回缩，以我聪明的才智，发现是css中的一个img属性出现了问题，默认的情况下，img的属性是 width:100%, height:auto; 结果那个1*1px的透明图片在撑满100%宽度的时候，高度也就变成了正方形大小。解决办法就是自己再写一个透明图片，宽度和当前题图一样，高度依然是1px，然后用来替换题图的加载。这个问题在PC版本里面并不会出现的原因，是因为在PC版的CSS中没有对img做这样的限制。

这次的WordPress终于告一段落了，这几天写的代码好像比我之前一年写的都还要多，下次不知道什么时候才有精力再来折腾这个了，要不弄个微信小程序玩玩？

---