你的首屏慢得像蜗牛？这6招让页面“秒开”

用户打开你的网站，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()）：路由级别的懒加载。

js 复制代码

// 路由懒加载
const UserPage = () => import('./pages/UserPage');

分割第三方库：把react、lodash等抽成单独的vendor文件，利用缓存。

js 复制代码

// vite.config.js
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        ui: ['antd']
      }
    }
  }
}

四、第3招：压缩与优化资源

图片：首屏最大杀手

换成WebP ：比JPEG小30%左右。用<picture>标签提供fallback。
懒加载：首屏之外的图片先不加载，滚动到再加载。

html 复制代码

<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异步加载。

html 复制代码

<style>/* 首屏CSS */</style>
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

给JS加defer或async

defer：并行下载，但按顺序执行，在DOMContentLoaded之前执行。
async：并行下载，下载完立刻执行，执行顺序不定。

html 复制代码

<script defer src="app.js"></script>

对于首屏不需要的JS，可以延迟到页面空闲时加载。

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秒以内。用户开心，老板也开心。

如果你觉得今天的提速课够实战，点个赞让更多人看到。明天我们继续性能优化第二弹------运行时优化，让你的页面滚动、动画、输入都不掉帧。我们明天见！