网页的打开速度，尤其是首屏可感知的加载时间，已经成为影响用户留存与转化的关键指标。一次移动端页面的加载每延长一秒，跳出率就可能明显上升。优化不是简单地压缩图片或升级服务器，而是需要从前端资源体积、网络请求数量、缓存策略、服务端响应以及内容分发等多个环节协同处理。接下来围绕这些容易被落地的方向，拆解具体做法和配置示例。
一、压缩传输内容，降低资源体积
前端资源中体积最大往往不是HTML，而是图片和JavaScript。先说文本资源。对CSS、JS进行压缩可以显著减少字节数，例如移除注释、空白符和缩短变量名。很多构建工具如Vite、Webpack在生产模式会自动处理。如果服务端手动配置，需要开启Gzip压缩。下面是Nginx中的基本配置。
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 16 8k;
gzip_comp_level 6;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_vary on;
}
图片优化要优先选择合适的格式。照片类图片适合WebP或AVIF，图标类尽量使用SVG或字体图标。使用<img>标签的srcset属性可以根据屏幕宽度加载不同尺寸的图片，避免移动端下载桌面大图。此外，上传前用工具压缩图片，通常能在视觉差异很小的情况下减少50%以上体积。
如果有条件，可以启用Brotli压缩。Brotli在文本资源上通常比Gzip压缩率更高，尤其对HTML、CSS、JS效果明显。需要Nginx安装ngx_brotli模块，或使用支持Brotli的CDN。无论Gzip还是Brotli，都应设置最小压缩阈值，避免极小文件压缩反而增加CPU开销。
二、合理配置HTTP缓存，减少重复请求
缓存是加速回访用户加载最直接的手段。通过设置Cache-Control响应头，浏览器可以将静态资源缓存到本地，下次访问不再向服务器发起请求。常见的max-age表示资源在多少秒内新鲜，immutable表示资源内容不可变。对于带指纹的静态文件，可以放心设置一年缓存。
location ~* .(jpg|jpeg|png|gif|webp|css|js)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
try_files $uri =404;
}
对于HTML等需要及时更新的文件，可以使用协商缓存，通过ETag或Last-Modified配合Cache-Control: no-cache，让浏览器每次都询问服务器资源是否变化，未变化则返回304，避免重复下载。要避免同时设置过长的强缓存却不加版本指纹，否则更新发布后用户仍然看到旧版资源。
在构建流程中，把文件名加入内容哈希，例如app.a1b2c3.js，当内容变化时文件名变化，旧缓存自然失效。这是目前前端工程化中推荐的缓存更新策略。
三、削减请求数量并延迟加载非首屏资源
每个HTTP请求都包含建立连接、发送请求头等开销。在HTTP/1.1下，浏览器对同域名并发连接数有限，请求过多会排队。因此合并小文件、使用雪碧图或SVG sprite等可以减少请求数。但合并也不能过度，否则会降低缓存命中率和增加首屏解析成本。
延迟加载图片和iframe是提升首屏速度的有效方式。浏览器原生支持loading=lazy属性，可以对屏幕外的图片进行懒加载。
<img src='placeholder.jpg' data-src='large-image.jpg' alt='商品详情图' loading='lazy'>
原生懒加载在现代浏览器中已经得到较广泛支持。对于不支持的旧浏览器，可以借助IntersectionObserver实现自定义懒加载，思路是图片进入视口前不设置真实src，等到可视区域附近再赋值真实地址。
对于非关键CSS和JS可以异步加载。CSS里未参与首屏的样式可以异步加载；JavaScript使用defer或async属性，避免阻塞DOM解析。要分清defer和async区别：defer延迟执行且按顺序执行；async下载完立即执行，不保证顺序。
四、使用CDN与HTTP/2，缩短网络链路与服务端响应
CDN将静态资源缓存到离用户更近的边缘节点，减少RTT和抖动。特别是全国多地用户访问时，CDN能显著降低首包耗时。配置时把图片、CSS、JS等静态资源走CDN域名，并开启HTTP/2或HTTP/3。HTTP/2支持多路复用，可以在一个TCP连接上并行传输多个文件，减少连接建立开销。
服务端响应时间也是总加载时间的一部分。优化数据库查询、增加对象缓存如Redis、避免接口同步等待慢第三方服务等，都能降低TTFB。对于动态页面，可以考虑服务端渲染或静态化生成，把HTML直接返回，减少浏览器端渲染等待。
可以配合预加载和预连接。例如在<head>中使用<link rel='preconnect' href='https://cdn.ipipp.com'>提前建立到CDN的连接，或使用preload提前请求首屏关键字体和CSS。这些措施可以进一步缩短关键资源等待时间。