问题背景: PageSpeed Insights 得分越来越低.

png_score

我发现最近发布的博客, PageSpeed Insights的评分都不高.

简单分析了下, 主要是因为最近都是直接贴各种截图,导致图片体积累积起来就有点大了.所以现在图片越多的博文, 得分会越低. 本身应该不是什么复杂的问题, 所以先根据提示把图片由 png 截图,换为 webp 格式的图片.

large_png

目前用的解决方法: Google cweb 库.

这个地方, 其实是有一些权衡的.

  • 我本意,是想找一个在线的工具网站.我期望能直接粘贴图片, 生成一个 webp 格式的图, 供我下载.但是没有找到合适的.

    • 交互不合适. 我试用的几个都是从文件夹上传图片, 不能直接复制图片. 这和我的工作流程,不太搭.我都是截图, 此时可以快速复制图片.至于图片本身的保存, 目前是保留在远端服务器的.

    • 隐私的担忧. 担心不小心截图泄露敏感信息. 也担心工具网站, 无良插入暗水印. 为一个不太重要的需求, 不值得冒这么大的风险.

  • 为什么要选择 cweb ?

    • 使用了下, 效果确实不错.我试用了一下, 图片体积缩小了约 87%. 当然, 仅供参考.不同的图片,压缩后的体积变化, 肯定是不同的. try_cweb

    • 是命令行库. 我现在的自我研究,都是在一个 Linux 服务器上. 所以真的很搭.

    • 和其他 shell 命令配合, 能实现批量操作. 这个很迫切. 因为我需要批量将一批图片改为 webp 图片.最好是同目录,同名称.然后最好还能自动删除原来的 png 图片.

更进一步: 写个简易脚本, 批量将 png 转换为 webp 图片.

  • 在开始之前, 系统里需要先安装 webp:
sudo apt update
sudo apt install webp
  • 然后 cd 放置博客图片的目录, 执行命令:
# 仅转换图片.
find . -type f -iname "*.jpg" -o -iname "*.jpeg"  -o -iname "*.png" -exec bash -c 'cwebp -quiet "$0" -o "${0%.*}.webp";' {} \;

# 转换,并删除原图片.(慎重.请确认好当前文件夹路径)
find . -type f -iname "*.jpg" -o -iname "*.jpeg"  -o -iname "*.png" -exec bash -c 'cwebp -quiet "$0" -o "${0%.*}.webp";' {} \; -delete

注意: 命令末尾的 ; 前的 \ 是必须的. 不然会报错:

find: missing argument to `-exec’

  • 然后, 就是批量将博客中的 png 图片的引用, 换为 webp 图片.因为目前量不大, 我就直接用 VSCode 的全局替换功能做了.主要是将 .png) 替换为 .webp)

replace_in_vscode

效果如何? – 97分! 暂时没有进一步优化的必要了.

其实 90分以上,就很好了. 我看了几个博客网站, 平均都在50分左右.当然, 面向的受众群体不同,倒也可以理解.

暂时应该不会进一步优化了. 多学点东西, 然后发点有价值的东西, 才是硬道理.

new_score_97

参考: