用户打开你的网站，3秒了还是一片白。他走了，去了隔壁。你丢了一个客户，就因为首屏慢了几秒。今天我们来给页面“提速”，6个实战技巧，从网络请求到渲染，让你的首屏加载快得像闪电。
前言
你有没有等过一个加载超过5秒的网页？那种感觉就像在机场等一艘船。用户耐心有限：3秒内没打开，一半人会走。今天我们不谈虚的理论，直接上代码、上配置、上工具，从源头把首屏时间砍掉一半以上。
一、首屏慢的三大元凶
- 请求太多：几十个JS、CSS、图片，每个都要握手、传输。
- 资源太大：未压缩的图片、没Tree Shaking的依赖。
- 渲染阻塞：CSS和JS阻塞了HTML解析，白屏时间拉长。
对症下药，我们一个个击破。
二、第1招：SSR或预渲染，让首屏“有内容”
纯SPA（单页应用）的HTML几乎是空的，需要等JS下载执行后才渲染。用户看到白屏的时间很长。
解决方案：
- SSR（服务端渲染）：用Next.js（React）或Nuxt（Vue），在服务器生成完整HTML，用户直接看到内容，然后JS“水合”绑定事件。
- 静态生成（SSG）：像Gatsby、Astro，构建时生成HTML，适合内容不频繁变化的页面。
- 预渲染（Prerendering）：用
prerender-spa-plugin在构建时把几个关键路由生成静态HTML。
如果你不想上SSR，至少做到骨架屏——在JS执行前先显示灰色占位块，让用户觉得“快了快了”。
三、第2招：代码分割，别一次加载所有
你只访问首页，结果整个后台管理系统的代码都下载了。浪费流量，也浪费时间。
Webpack/Vite内置代码分割：
- 动态导入（
import()）：路由级别的懒加载。
// 路由懒加载
const UserPage = () => import('./pages/UserPage');
- 分割第三方库：把
react、lodash等抽成单独的vendor文件，利用缓存。
// vite.config.js
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
ui: ['antd']
}
}
}
}
四、第3招：压缩与优化资源
图片：首屏最大杀手
- 换成WebP：比JPEG小30%左右。用
<picture>标签提供fallback。 - 懒加载：首屏之外的图片先不加载，滚动到再加载。
<img loading="lazy" src="..." alt="...">
- 响应式图片：用
srcset给不同屏幕尺寸加载不同大小的图片。
字体：FOIT（无样式文本闪烁）
- 用
font-display: swap先显示系统字体，等自定义字体加载完再替换。 - 只加载需要的字符集（比如只加载英文和数字）。
JS/CSS压缩
- Vite/Webpack生产模式默认开启压缩。但可以手动配置Terser去掉
console。 - 用
compression-webpack-plugin生成gzip或brotli文件，让服务器直接返回压缩版本。
五、第4招：优化关键渲染路径
浏览器先解析HTML，遇到<link>或<script>会阻塞渲染。
内联关键CSS
把首屏需要的CSS直接内联到<style>里，其余CSS异步加载。
<style>/* 首屏CSS */</style>
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
给JS加defer或async
defer：并行下载，但按顺序执行，在DOMContentLoaded之前执行。async：并行下载，下载完立刻执行，执行顺序不定。
<script defer src="app.js"></script>
对于首屏不需要的JS，可以延迟到页面空闲时加载。
// 空闲时加载
requestIdleCallback(() => import('./analytics.js'));
六、第5招：使用CDN和HTTP/2
- CDN：把静态资源放到离用户最近的服务器，减少物理距离导致的延迟。
- HTTP/2：多路复用，一个连接并发传输多个文件，比HTTP/1.1的6个连接限制强很多。
七、第6招：缓存策略，二次访问秒开
- 强缓存：
Cache-Control: max-age=31536000（一年），适用于不变的资源（带hash的JS/CSS）。 - 协商缓存：
ETag+Last-Modified，服务器确认资源没变化则返回304。 - Service Worker：离线缓存，甚至可以做到“骨架屏秒现”。
八、实战：用Lighthouse跑分并优化
Chrome DevTools → Lighthouse，生成报告，它会告诉你哪些资源浪费了时间、哪些图片可以优化、哪些请求阻塞渲染。
常见优化建议：
- 移除阻塞渲染的脚本。
- 压缩图片。
- 减少未使用的CSS（用
purgecss移除没用的样式）。 - 启用文本压缩（gzip）。
九、总结：首屏优化清单
- 开启Gzip/Brotli压缩。
- 图片转WebP、懒加载、响应式。
- 路由懒加载 + 第三方库分割。
- 关键CSS内联，非关键异步加载。
- JS加defer/async。
- 使用CDN + HTTP/2。
- 配置强缓存和协商缓存。
- 用Lighthouse反复测量。
优化完，你的页面首屏时间可以从3秒降到1秒以内。用户开心，老板也开心。
如果你觉得今天的提速课够实战，点个赞让更多人看到。明天我们继续性能优化第二弹——运行时优化，让你的页面滚动、动画、输入都不掉帧。我们明天见！
