• 时间:
  • 分类:

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

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

标签: none

添加新评论