官网访问太慢处理办法

对于官网，一般主要是背景图，及简短的一些文字，主要加载比较慢的原因是图片过大，由于ui一般会适配出不同的图，例如4k分辨率图片一般较大，导致实际加载较慢，即使在使用cdn后，也会因为文件大小的问题，无法彻底解决，下面是几个解决思路。

1. 优化图片大小，压缩图片，由于原图一般过大，所以可以使用 https://squoosh.app/ 工具直接对图片进行压缩
   
   可以看到压缩后图片大幅缩小，这时在使用cdn缓存，将会大幅减少加载时间。
   另外为了进一步优化图片加载，可以使用 LQIP 低质量图片占位符，优先加载一个模糊图片，在高清图加载完毕后，替换，用户体验即为，图片开始略微模糊，几秒后清晰。
   压缩 LQIP 可以按上面的方法，压缩方法选择 Lanczos3，Preset 选择最低的 25%，生成的图片基本可以满足。

// 先安装 lazysizes ，实现图片懒加载
// 引入 lazysizes
import 'lazysizes';
 <!-- 背景图层 -->
 <div class="background-image-layer">
   <img alt="背景图"
        class="lazyload"
        src="/home_bg@lqip.webp"
        data-srcset="https://cdn.test.example/home_bg@1x.webp 1x,
        https://cdn.test.example/home_bg@2x.webp 2x"/>
 </div> 

如上所示：

• class 需要指定为 lazyload，这是 lazysizes 需要。
• src 指定为 LQIP 图片地址
• data-srcset 就是具体高清图地址，浏览器会根据分辨率自动选择

2. 另一个加载慢的原因，可能是字体文件过大，一般官网文字较少，但是ui为了美观，会引用一些其他字体，例如我使用的是小米的字体，单个字体文件8m，两个字体文件16m，也是加载慢的原因之一，这个可以使用 glyphhanger 工具来处理，只保留使用的字体子集，可以大幅减少字体文件加载时间，具体可以参考另一篇博客
3. 在经过前面两步处理后，可以在 nginx 中接着添加 gzip 压缩，进一步减少 js 和 css 加载时间

# 开启 gzip 压缩
gzip on;
# 指定需要压缩的文件类型
gzip_types text/javascript application/javascript text/css text/plain text/xml application/json;
# 只有大于 1KB 的文件才会被压缩
gzip_min_length 1024;
# 压缩等级，1-9，6是推荐值，兼顾压缩率和性能
gzip_comp_level 6;
# 允许 nginx 处理代理服务器的压缩请求
gzip_proxied any;
# 让代理服务器可以缓存不同的压缩版本，提高缓存命中率
gzip_vary on;