WordPress图片服务优化

这两天的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终于告一段落了,这几天写的代码好像比我之前一年写的都还要多,下次不知道什么时候才有精力再来折腾这个了,要不弄个微信小程序玩玩?

wordpress技术分享
评论 (0)
添加评论