网站访问速度的优化

网站运营的同事，提了个需求。把网站的访问速度优化一下。一般来说，优化访问速度有以下几种方案。

1. 提升网络的带宽
2. 增加服务器，通过在不同的地区，缩短用户的访问时间
3. 优化页面，包括：压缩 JS, CSS, HTML 文件、压缩图片、异步加载图片等
4. 将页面缓存成静态的 HTML 文件

我们这次的优化，从优化图片入手

1. 把图片转换为 webp 格式
2. 对图片进行异步加载

实现方案

这次我们依然是通过中间件去完成这次任务。

1. 图片元素的转换
2. 实现图片异步加载

图片元素转换

原图片元素为：

<img src="http://www.kibtoy.com/Content/file/1311/samll_20220412115011.jpg" alt="image">

通过中间件，该元素转换为：

<img src="https://shop-image.gemwon.com/image/blank" alt="image" data-img-src="https://www.kibtoy.com/shop-image/image?id=http%3A%2F%2Fwww.kibtoy.com%2FContent%2Ffile%2F1309%2Fsamll_20220412110100.jpg&amp;type=webp">

即把路径和生成的图片类型，传到 http 接口去。同时，用一张空白图片替换掉原来的图片。

图片异步加载

图片的异步加载，是通过一个 js 文件实现的。这个脚本的引用，同样是通过中间件添加到页面。

<script src="/delay-load-image.js"></script>