10年前，我（和很多充满理想的开发者）干过这么一件事：
- 把网站所有的图片都改为CSS Background的形式
- 然后把所有这些图片拼成一张大的图片(这是一个很枯燥的工作，你需要在Photoshop里按照像素移动图层）
- 使用background-position来为不同的元素设置背景偏移（这同样是很恐怖的任务，因为你要定位图片的像素坐标）
这样做的目的只有一个：让网站加载的时候仅请求一次图片文件。换句话说，那时候用户打开我的网站，浏览器的Network Tab里只显示了5个东西：
- index.html
- style.css
- all-images.jpg
- jquery-min.js
- main.js
不可能再少了。
不知道从什么时候开始，这一切都戛然而止。人们在HTML里写CSS，在JS里写HTML，在CSS里写JS，没有人在意用户打开一个页面后会从服务器请求几百个文件（不信你现在按F12看看）。到了2026年，谈起提升页面性能，我们能做的其实越来越少，LightHouse里那些建议往往都很难实现，一些优化往往非常的“宏大”，比如Angular框架用了将近2年的时间消灭Zone.js这种宏伟叙事，我们开发者能做的只是看着和鼓掌。
而对于网站开发者来说，就像标题提到的那样，目前真正的，最有效的提高网页性能的#1方法依旧是：使用WebP。
WebP图片格式现在已经被几个主流浏览器充分支持，但是遗憾的是无论是Photoshop还是我现在正在使用的免费的photopea.com都不能直接输出WebP格式的图片，好在现在网上有很多免费的转换工具，有的至少可以免费转换10个左右，但最近我一直使用的免费转换工具叫LoveWebP （没有任何限制的真免费），你甚至不需要互联网连接，在浏览器里直接转换，只转换成WebP格式，联想到它的名字，看来这个网站对WebP是真爱，哈哈。
在一番操作过后，我网站使用图片文件由原先的总体积下降了50%以上：
（一个重度使用图片代替图标的网站，把所有图片换成了WebP）
如果你想了解更多WebP压缩技术的细节，请访问这里。