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

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>