2024 年 5 月 10 日 我的频道
Wordpress 优化经验
  • 2022
  • Sunny

做了站点有几年的时间,根据 Wordpress 的特性做出了优化,把自己的总结的经验和大家分享一下,如有不足的地方请提出指正。
网站加速,在之前的文章中也提过了一些的插件,例如缓存插件,最出名的就是火箭,可以提速,压缩 Css,图片懒加载等,都有特别显著的效果。再一个是作者最近在搜索优化的资料的时候,发现最多的就是图片。大量的图片当然是可以充实网站的内容,显得多元化,但是图片不进行优化,也是减慢网站速度最致命最直接的元凶。现在目前图片最小的就是 webp 图片,科普一下 webp 图片:

WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式。
WebP 最初在 2010 年 9 月发布,其支持库于 2018 年 4 月发布 1.0 版本。截至 2021 年 5 月,已有 94%的浏览器支持此格式。
WebP 的设计目标是在减少文件大小的同时,达到和 JPEG、PNG、GIF 格式相同的图片质量,并希望借此能够减少图片档在网络上的发送时间。根据 Google 较早的测试,WebP 的无损压缩比网络上找到的 PNG 档少了 45%的文件大小,即使这些 PNG 档在使用 pngcrush 和 PNGOUT 处理过,WebP 还是可以减少 28%的文件大小。
WebP 支持的像素最大数量是 16383×16383。有损压缩的 WebP 仅支持 8-bit 的 YUV 4:2:0 格式。而无损压缩(可逆压缩)的 WebP 支持 VP8L 编码与 8-bit 之 RGBA 色彩空间。而无论是有损或无损压缩皆支持 Alpha 透明通道、ICC 色彩配置、XMP 诠释资料。
WebP 有静态与动态两种模式。动态 WebP(Animated WebP)支持有损与无损压缩、ICC 色彩配置、XMP 诠释资料、Alpha 透明通道。
Google 于 2010 年 9 月 30 日首次公布 WebP 格式,它派生自影像编码格式 VP8,被认为是 WebM 多媒体格式的姊妹项目,是 Google 在购买 On2 Technologies 后获得技术发展而来的,该格式及其派生的支持库以 BSD 授权条款发布。
2011 年 10 月 3 日,Google 给 WebP 添加了扩展格式以让其支持 ICC 色彩特性文件、可扩展后设资料平台和 EXIF。
2011 年 11 月 8 日,Google 开始让 WebP 支持无损压缩和透明色(alpha 通道)的功能,而在 2012 年 8 月 16 日的参考实做 libwebp 0.2.0 中正式支持。截至 2022 年 1 月,已有 94%的浏览器支持此格式。
WebP 的有损压缩算法是基于 VP8 视频格式的帧内编码,并以 RIFF 作为容器格式。因此,它是一个具有八位色彩深度和以 1:2 的比例进行色度子采样的亮度-色度模型(YCbCr 4:2:0)的基于块的转换方案。[20] 不含内容的情况下,RIFF 容器要求只需 20 字节的开销,依然能保存额外的元数据(metadata)。WebP 图像的边长限制为 16383 像素。
WebP 是基于块预测的。每个块都是根据它上面三个块的值和其左边一个块的值进行预测的(块解码以光栅扫描顺序完成:从左到右,从上到下)。块预测有四种基本模式:水平、垂直、DC(单色)和 TrueMotion。利用离散余弦变换或沃尔什-阿达玛转换将预测错误的数据和未预测块压缩在 4×4 像素子块中。这两种转换都是使用定点算术完成的,以避免舍入误差。输出使用熵编码进行压缩。WebP 也明确支持并行解码。
参考实现包含一个 Linux 命令行程序的转换器,以及以及用于解码的库,与 WebM 相同。开源社区很快设法将转换器移植到其他平台,例如 Windows。
WebP 的无损压缩采用先进的技术,例如用于不同颜色通道的专用熵代码,利用反向参考距离的 2D 位置和最近使用的颜色的颜色缓存。这补充了字典编码、霍夫曼编码和颜色索引变换等基本技术。

Wordpress 其实是可以支持 Webp 图片的,但是一些主机空间是不支持 Webp 的上传的,这样无疑中就局限了站点速度优化的一个关键。幸亏现在还有云服务端和免费的支持 Webp 图像的图床可以让我们使用。只要让 Wordpress 支持远程图像作为特色图像即可。而我们要做的就是把图像先进行压缩处理,再转换成 Webp 图像上传,然后直接调用图片的地址即可,下面提供 Webp 图床的地址以及图片压缩和生成 Webp 图片的网站地址:

1、图片压缩工具:https://tinypng.com/ ,支持 Webp、Png、Jpeg 图像上传压缩,而对图像清晰度不造成任何影响,起码肉眼分不清楚;

2、Webp 转换:https://www.online-convert.com,这个站点巨多工具,包括我们说的把图片转换成 Webp 格式;

3、Webp 图片图床:https://z4a.net/ ,免费注册,然后验证邮箱后即可上传,把上传好的文件地址直接放到后台中的文章远程特色图像地址栏即可,系统会自动把该图片生成到默认的特色图像中去;

4、远程特色图像插件:Featured Image from URL (FIFU),可以在 Wordpress 后台的插件库搜索,安装后直接激活即可,不用设置。

5、通过优化插件:wp-rocket 设置 Css 合并优化,设置预缓存,设置预加载链接,设置预加载字体。

自此,网站的图像转换就可以顺利进行。请注意一下,Webp 图像转换的网站对批量处理不是很友好,而且会识别图像是否为非法图像,请大家注意一下。

WORDPRESS
1780
0

Author Box

名字:Sunny
注册:Jan 30, 2021
简介:技术菜鸟,拷贝、黏贴代码中 ……

Comment Box

5 1 投票
Article Rating
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论