网站图片与字体优化：先解决首屏慢，再谈跑分

先看首屏实际下载了什么

网站图片优化最容易变成追分：装一个插件、压缩全部图片、看到分数上涨就结束。读者真正感受到的是打开链接后多久能看清标题、图片是否突然挤动文字、滚动时是否继续卡顿。先在浏览器网络面板用移动网络限速重新加载，按体积排序，通常很快能看到最大图片和多余字体。 记录三项基线：首屏总传输量、最大一张资源、字体文件数量。不要只在本地高速网络测试；缓存清空后的第一次访问更接近搜索用户。

图片先按显示尺寸导出

一个在正文里只显示 720px 宽的截图，没有必要上传 4000px 原图。保留高密度屏所需余量即可，并删除不需要的透明边缘。照片通常适合 AVIF 或 WebP，界面截图要观察文字边缘，Logo 和图标优先使用可维护的 SVG。格式不是绝对答案，应以相同视觉质量下的实际体积比较。 为内容图片保存宽高比例，HTML 输出 width 和 height 或 CSS aspect-ratio，让浏览器下载前就预留空间。否则图片到达时会把后面的段落和按钮向下推，造成布局跳动。

响应式图片避免手机也下载桌面大图

使用 srcset 和 sizes 告诉浏览器有哪些尺寸以及图片实际会占多宽。sizes 写错时，浏览器可能仍选择大文件，所以要在不同视口的网络面板确认最终请求。

<img
  src="guide-800.webp"
  srcset="guide-480.webp 480w, guide-800.webp 800w, guide-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  width="1280" height="720"
  alt="文章编辑页的移动端布局"
>

alt 描述图片在当前上下文中的作用，不堆关键词。纯装饰图使用空 alt，避免屏幕阅读器重复朗读。

延迟加载不能覆盖首屏关键图片

视口外图片适合 loading=lazy，首屏主图却需要尽早发现。把所有图片统一延迟加载，可能让最大的可见内容更晚出现。轮播图的第二、第三张通常不该在首屏全部下载；如果首图只是装饰，也可以直接删除，节省的体积比换格式更可靠。 图片 CDN 和自动转换很方便，但要保留原图、转换规则和可迁移路径。不要让数据库只保存某家 CDN 生成后的临时 URL，否则更换服务时会很被动。

中文网页字体最容易输在字重太多

中文字体字形数量大，一个完整文件可能远大于拉丁字体。先问是否真的需要下载自定义中文字体。系统字体栈通常加载最快，也能适配不同平台。若品牌确实需要网页字体，只加载正文实际用到的字重，不要把 100 到 900 全部引入。 为 font-family 提供接近的回退字体，减少字体切换时的宽度变化；选择合适的 font-display 策略，观察慢网下是先显示回退字体，还是长时间空白。对固定字符的 Logo 字样可做子集，但正文动态内容不能用过小子集，否则缺字会回退成另一种字体。

不要在全站重复加载同一资源

检查第三方组件是否各自引入字体和图标库。一个页面同时出现两套图标字体、三个分析脚本和多个聊天挂件，图片再小也救不了首屏。优先删除没有明确使用价值的第三方资源，再处理压缩细节。 设置长期缓存时使用带内容哈希的文件名；文件内容变化，URL 也变化。HTML 不宜无限长期缓存，因为它负责引用最新资源。上线后用隐身窗口与真实手机复查，避免只看到本地缓存效果。

完成标准

首屏不再下载明显超出显示尺寸的图片，图片到达时不推挤正文，手机选择合适尺寸，视口外资源延迟加载，字体数量和字重可解释。保存优化前后的网络记录，后续改版才能发现退化。下一篇处理另一类容易‘看起来提交成功，实际没人收到’的组件：网站表单怎么做才不丢线索。