减少资源体积，让页面轻装上阵
打开一个网页，等得越久，关掉的几率就越高。尤其是现在用手机上网的人越来越多，网络环境复杂，如果图片、JS 和 CSS 文件又大又没压缩，用户可能还没看到内容就走了。把图片转成 WebP 格式，用工具压缩 JS 和 CSS，能明显缩短加载时间。
比如你做个美食博客，首页放了十张高清图，每张都两三 MB，那普通 4G 网络下得卡好几秒。换成压缩后的 WebP 图片，总大小可能直接降到 1MB 以内，滑动一下就出来了。
合理使用缓存策略
用户第一次访问时下载的静态资源，没必要每次刷新都重新拉一遍。设置好 HTTP 缓存头，像 CSS、JS、图标这些不常变的内容，可以让浏览器存下来，下次访问直接读本地。
Cache-Control: public, max-age=31536000<br>ETag: "x13a-3fda00"这样用户再进你的站点，像是导航栏、主题样式这些都能秒出，体验自然更顺。
懒加载非首屏内容
页面一打开就加载所有图片和视频？太浪费了。特别是长文章或商品列表页，很多内容用户根本没滑到就离开了。这时候可以用懒加载，只有当元素快进入视口时才去请求资源。
<img src="placeholder.jpg" data-src="real-image.webp" class="lazy">配合简单的 JavaScript 监听滚动事件，或者直接用 Intersection Observer API，轻松实现延迟加载，减少初始请求压力。
提前解析关键域名
如果你的网站引用了 CDN 上的字体、脚本或图片，可以提前告诉浏览器：“这几个地址我肯定要用”。通过预解析，减少 DNS 查询等待时间。
<link rel="dns-prefetch" href="//cdn.example.com"><br><link rel="preconnect" href="//fonts.googleapis.com">就像出门前先查好路线，而不是走到路口再问路，省下的都是时间。
精简第三方脚本
统计代码、在线客服、社交分享按钮……这些功能确实方便，但每个都可能拖慢页面。有些第三方脚本还会阻塞渲染，导致白屏时间变长。不是非用不可的，尽量去掉；必须用的，考虑异步加载或延迟初始化。
比如客服浮窗，完全可以等页面主体内容显示后再加载，用户不会察觉，但性能影响小多了。
服务端配合也很关键
别光盯着前端。开启 Gzip 压缩、启用 HTTP/2、使用 CDN 分发，这些服务端配置直接影响资源传输效率。哪怕前端做得再干净，服务器响应慢，一切白搭。
想象一下快递打包很快，但物流公司半天不取件，客户照样收不到货。前后端协同优化，才能真正提速。