打开一个网页要等十几秒，再好的内容也留不住人。我们近期翻看了不少站点，发现很多网站加载慢，问题往往不在网页本身，而是它依赖的资源没有优化到位。
网页的加载流程大致是这样：浏览器先拉取 HTML 页面，解析后再根据页面内容请求 JavaScript、CSS 和图片等文件，最终把页面渲染出来。所以，影响展示速度的主要是这些附属资源的体积和数量，把它们的加载优化好，页面自然就快了。
下面 7 个方法都是我们在实际项目里常用、见效也快的做法：
- 优化图片格式和大小 图片通常是页面里最占体积的资源。在保证显示质量的前提下，尽量选用压缩率更高的格式，可以按 webp > jpeg > png > bmp 的优先级来选；同时按实际展示尺寸加载对应大小的图片，不要直接把原图拿来用。我们遇到过这样的情况：一个 196×196 的展示位，图片文件竟然有好几兆，最后排查才发现是把 1960×1960 的原图直接挂上去了。
- 开启 gzip 压缩 浏览器请求网页时会带上 Accept-Encoding: gzip 之类的标记，表示支持压缩传输。如果服务器端开启了 gzip，文本类资源通常能减少 70%～80% 的传输流量，加载速度的提升非常明显。
- 利用浏览器缓存 同一站点的不同页面通常会复用一批 CSS、JS、图片等公共资源。把这些文件设置成可缓存后，用户刷新页面或跳转时就不用重新从服务器拉取，速度自然快很多。
- 减少重定向 有些网站对不同终端准备了不同域名，访问时先跳转再加载。每一次重定向都会让浏览器重新发起一次请求，白白增加等待时间。与其这样，不如用响应式设计，让一个站点覆盖所有终端。
- 用 CDN 分发静态资源 CDN 会把静态内容缓存到各地的节点，用户访问时自动从离自己最近的节点获取，能明显缩短资源的传输距离。页面里的图片、CSS、JS 等基本是不变的内容，很适合整体放到 CDN 上。
- 减少 DNS 查询次数 如果页面里的资源分散在多个域名下，浏览器就要逐个解析域名，每次解析都会耗时。把图片等静态资源集中到同一个域名下，减少 DNS 查询，是成本很低但很有效的优化手段。
- 压缩 CSS 和 JS 这一步和第 2 点不同，gzip 是在传输层压缩，这里说的是去掉 CSS、JS 文件里的多余空格和换行，并缩短变量名，从源头上减小文件体积，拉取速度也会跟着变快。
以上 7 条归结起来核心就三点：减少请求数、减小资源体积、缩短资源传输距离。如果你的网站还没有做过这类优化，不妨对照自查一遍，改完之后加载体验会有很直观的改善。
