口碑炸裂!玩具巨头争着推《玩4》授权玩具~
Hey guys, 小孟今天给大家分享一个WordPress图片优化的实战攻略。
为什么要优化图片?
原因很简单 - Speed matters!
网站速度直接关系到访客体验、SEO关键词排名,也会对跳出率、停留时长、转化率等产生影响。
一个健康的Affiliate网站,网页大小最好控制在2MB以内,而一个高清图片,大小很容易到数MB,比整个页面还要大。
如果你的网站含有大量图片,网站内容对高清图片又有很大需求,那么就要特别小心了。
网站准备工作(WP)
需要工具、服务-
TinyPNG:在线图片优化工具
(https://tinypng.com/)
SmushIt:一款WordPress插件,用来优化图片
(https://wordpress.org/plugins/wp-smushit/)
Amazon S3:用来存放图片
(https://aws.amazon.com/s3/)
Offload Media:也是一款WordPress插件,用来连接WP与Amazon S3
(https://wordpress.org/plugins/amazon-s3-and-cloudfront/)
完成WP网站设置
1. 安装Offload Media插件,并将网站与Amazon S3相连接。
详细教程:
https://www.codeinwp.com/blog/wordpress-s3-guide/
2. 安装SmushIt插件,注册并完成插件配置,重点关注如下几个设置。
Automatic compression:所有新上传的图片,自动进行优化。
Amazon S3 Support:自动使用S3存放图片。
Lazy Load:加快网页加载速度。
注:Smush分为免费版和收费版,官网有详细说明。
Ok,设置部分到这里就结束了,下面介绍一下图片上传、优化流程。
网站图片优化 - 简单三步走
随便搜一张图片来做测试。
实验图片原始大小: 3.1MB
(北境之王,沉默而霸气的男子)
第一步
使用TinyPBN,对图片初步进行压缩,并下载。
此时图片大小:703KB
第二步
将压缩后图片上传到网站,Smush会自动对其进行压缩。
这时图片大小为:256KB
第三步
设置图片Alt、Description(Google Image SEO存在很多机会噢),大功告成。
从3.1MB到256KB,就是这么简单。
那么效果如何呢?
用最新版的MacBook Pro在网页上对比查看,反正我是没看出来两者有太大差别(也许视觉不够敏感?。。。)
Btw,假如不用第一步的TinyPNG,直接使用Smush,上传到WP的图片大小为2MB。3.1MB -> 256KB和3.1MB -> 2MB,差距还是挺明显的。