Github Pages部署的站点图片加载缓慢，如何优化提升加载速度？

加载缓慢原因说明 #

加载慢是两个因素共同作用的结果，并非单一问题：

• Github Pages服务器节点位于海外，国内访问本身存在固有网络延迟，若图片未经压缩体积偏大，传输耗时会进一步拉长
• 单页面同时触发20张图片的并发请求时，会受到浏览器同域请求并发数上限限制，后续请求需要排队等待，也会拉长整体加载耗时。你看到的图片量更大的站点，都是做了针对性的加载优化，才避免了加载慢的问题。

可落地的优化方法 #

1. 图片本身体积优化 #

• 优先压缩原图：在不影响肉眼观感的前提下，用常用的图片压缩工具处理所有站点图片，优先选择WebP、AVIF这类下一代图片格式，同画质下体积比传统JPG/PNG小30%~50%，能直接降低传输耗时
• 按实际使用尺寸切图：不要直接上传远大于页面显示尺寸的原图，比如页面上只需要展示200px宽的缩略图，就不要上传2000px的原图。也可以通过srcset属性配置多尺寸图源，让浏览器自动选择适配当前设备屏幕的图片加载，避免大材小用浪费带宽，示例代码如下：

<img 
  src="pic-400w.webp"
  srcset="pic-400w.webp 400w, pic-800w.webp 800w, pic-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="图片描述"
>

2. 加载逻辑优化 #

• 非首屏图片懒加载：不在浏览器首屏范围内的图片，不需要打开页面就加载，直接给<img>标签加上loading="lazy"属性即可，浏览器会自动在图片即将滚动到视口范围时再触发加载，大幅减少首屏需要并发请求的资源数量
• 低质量占位符优化：可以给每张图片提前生成一张只有几KB的模糊缩略图/提取图片主色当占位，打开页面时先显示占位内容，等原图加载完成后再替换，用户感知上的加载速度会快很多
• 首屏核心图预加载：如果是首屏必须展示的重点图片，可以在页面<head>标签中添加预加载规则，让浏览器优先调度资源加载这部分图片，避免被其他非核心资源阻塞：

<link rel="preload" as="image" href="首屏核心图路径.webp">

3. 缓存策略优化 #

给图片配置合理的长期缓存规则，用户第二次访问站点时，就可以直接读取本地缓存的图片，不需要重新从服务器请求，二次访问的加载速度会大幅提升。如果你的站点是基于Jekyll搭建的，可以在_config.yml中配置缓存头规则，静态站点也可以通过配置自定义HTTP headers实现。

内容的提问来源于stack exchange，提问作者itmemilan