代码改变世界

网站访问速度的优化

2023-02-08 10:57  麦舒  阅读(45)  评论(0编辑  收藏  举报

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

  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>