蘑菇短视频第一次用的加载速度，我给你一套可复制的操作

蘑菇视频1592026-03-08 00:08:01

标题：蘑菇短视频第一次用的加载速度，我给你一套可复制的操作

引言蘑菇短视频第一次打开的体验决定用户会不会继续看下去。首屏白屏、视频缓冲、卡顿，都会让留存掉链。下面这套可复制、能立刻上手的操作，覆盖前端、后端、视频处理和部署四大维度，目标是把“第一次用”的加载时间降到最低、把首帧和首屏内容快速呈现给用户。

核心思路（一句话）把首包变小、把关键资源优先加载、把视频做成多码率并用 CDN 分发、在客户端用缓存/骨架屏/先展示视觉占位来掩盖真实加载时间。

一、度量指标（先测再改）先用这些指标来衡量改进效果：

TTFB（Time To First Byte）目标 < 200ms
FCP（First Contentful Paint）目标 < 1s
LCP（Largest Contentful Paint）目标 < 2.5s
Time to Interactive 目标 < 3s 工具：Lighthouse、WebPageTest、GTmetrix、Chrome DevTools Network/Performance

二、前端：把首包变小并优先展示关键内容 1）把关键 CSS 内联、延后非关键 CSS 示例（HTML 片段）：

并将非关键样式用 defer 加载：

2）脚本用 async/defer，拆分主包

3）使用 skeleton / 骨架屏替代空白页（提升感知速度） HTML 结构示例：

在主 JS 加载后替换为真实内容。

4）预加载关键资源（First-frame、首个视频分片、字体）示例：

5）字体优化

使用 font-display: swap
把常用图标改为 SVG 精灵或内联，避免大字体文件阻塞渲染

6）使用现代图片格式与响应式图片

WebP/AVIF 替代 PNG/JPG
srcset + sizes

三、视频处理与分发（核心：多码率 + 小首段） 1）多码率清晰层（HLS/DASH）用 ffmpeg 生成多码率 HLS（示例命令）： ffmpeg -i input.mp4 -preset veryfast -g 48 -scthreshold 0 \ -map v:0 -s 1280x720 -b:v:0 3000k -maxrate 3210k -bufsize 6000k \ -map v:0 -s 854x480 -b:v:1 1200k -maxrate 1284k -bufsize 2400k \ -map v:0 -s 640x360 -b:v:2 600k -maxrate 642k -bufsize 1200k \ -map a:0 -b:a:0 128k -b:a:1 96k -b:a:2 64k \ -varstreammap "v:0,a:0 v:1,a:1 v:2,a:2" \ -f hls -hlstime 4 -hlsplaylisttype vod -hlssegmentfilename "v%v/fileSequence%d.ts" v%v/prog_index.m3u8

要点：

首个 segment 要短（2–4s），首段体积小，能快速下载并播放首帧
开启自适应码率，让低网速用户先看到流畅低码率

2）生成视频首帧图（poster）并预加载先用 ffmpeg 提取首帧： ffmpeg -i input.mp4 -ss 00:00:00 -vframes 1 -q:v 2 poster.jpg

在页面上预加载 poster，提高视觉响应速度：

3）开启快速起播（progressive / pseudo-stream）

对 web：使用 HLS + MSE 或 native HLS（iOS），并通过设置小 segment 和短首段提高起播速度
对客户端：优先请求第一个分片并立刻开始播放，后台再下载后续分片

四、服务器与 CDN：让内容靠近用户 1）将视频和静态资源放到 CDN（CloudFront、Akamai、阿里云 CDN 等）

设置 Cache-Control：静态资源极长缓存（例如 7 天或更长）并用版本号管理示例 nginx 配置片段： location ~* .(js|css|jpg|jpeg|png|webp|avif|mp4|m3u8|ts)$ { add_header Cache-Control "public, max-age=604800, immutable"; }

2）开启 gzip / brotli 压缩（文本类） nginx 示例（核心配置）： gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

brotli if module available

3）使用 HTTP/2 或 HTTP/3（QUIC）

多路复用、头部压缩，减少延迟
CDN 大多支持 HTTP/2/3，确保 origin 与 CDN 之间也有优化

4）优化 TTFB：缩短后端处理、启用边缘缓存、使用缓存层（Redis、Memcached）

把首屏数据（视频列表、用户偏好）缓存为预渲染的 JSON，直接返回

五、移动端/原生 App 的优化（如果你的蘑菇短视频有 App） 1）拆分 APK / App Bundle 按需下载模块（Android App Bundle） 2）首次启动只加载最低限度的模块，非关键功能延后初始化 3）使用本地缓存或数据库（Realm/SQLite）存储已下载的 poster 和首个分片 4）在启动页显示骨架和首帧图，后台异步拉取播放资源 5）使用 ExoPlayer 或 AVPlayer 做流式播放，并配置优先缓存第一个 segment

六、Service Worker（PWA / Web）示例：缓存首屏资源示例 service-worker.js（简化）： self.addEventListener('install', event => { event.waitUntil( caches.open('shell-v1').then(cache => { return cache.addAll([ '/', '/index.html', '/static/critical.css', '/posters/vid123.jpg' ]); }) ); });

self.addEventListener('fetch', event => { if (event.request.url.includes('/video/vid123/segment0.ts')) { // 尝试网络优先，回退缓存 event.respondWith( fetch(event.request).catch(() => caches.match(event.request)) ); } else { event.respondWith( caches.match(event.request).then(resp => resp || fetch(event.request)) ); } });

七、测试流程与回归验证（每天迭代） 1）在改动前后分别跑 Lighthouse 和 WebPageTest，记录 FCP、LCP、TTFB、TTI 等指标 2）A/B 测试骨架屏、poster、不同首段时长设置对转化和留存的影响 3）监控真实用户指标（RUM）：用 Google Analytics / Sentry / Datadog 收集首次加载时间分布

八、完整可复制的快速清单（操作步骤）