网站冷加载优化前后的传输量、FCP、LCP 与 load 指标对比

从 30 秒到 4 秒:网站加载慢的系统排查与优化方法

“网站打开很慢”是一个症状,不是一个结论。 它可能是 DNS 解析慢、TLS 握手慢、后端首字节慢,也可能是页面一次下载了几 MB 的 JavaScript;还可能是资源已经下载完,却被串行依赖、超大 JSON 或主线程长任务拖住。不同原因的修复方法完全不同。 最近我对一个登录后的 Web 应用做了一次完整排查。优化前后的结果如下: 指标 优化前 优化后 冷加载传输量 4.57 MB 1.14 MB FCP 4.33 秒 1.34 秒 LCP 30.67 秒 3.90 秒 load 事件 30.46 秒 3.54 秒 热加载传输量 — 22.7 KB 热加载 LCP — 0.83 秒 这是一组代表性的单次测量:使用 Chromium 无头模式、1440×1000 视口;冷加载会清空并禁用缓存,热加载则启用缓存。表中为浏览器记录的 encoded bytes,沿用“传输量”这个易读称呼,但它不等于 TLS 帧和网络包层面的全部字节。因此,冷加载的改善不能归因于浏览器缓存,热加载结果才用于验证缓存效果。 这次已经实施并验证的改动包括文本压缩、内容指纹缓存,以及普通请求与 SSE/WebSocket 的代理分流。其中,压缩直接减少了冷加载传输量,缓存让热加载只需传输约 22.7 KB;代理分流通过协议与回归测试验证正确性,但没有做单变量性能对照。一个会话历史 API 原本单次传输 4.25 MB,开启压缩后降到了约 369 KB。 source map 的 gzip 与 5 分钟私有缓存也已经实施,但普通页面在未打开 DevTools 时不会请求它,所以没有计入上表。超大 JSON 的结构治理、非关键请求延迟与增量聚合、CDN 和带宽升级则是进一步优化方向,同样没有被写成已经发生的结果。 ...

2026年08月15日 · 5 min · Cassius0924

Docker + Nginx 部署个人静态博客指南

tags: [“Linux”, “Docker”, “Nginx”, “Server”, “Blog”]本文是一个使用 Docker 和 Nginx 部署个人静态博客的指南。通过本指南,您可以快速了解如何使用 Docker 和 Nginx 部署自己的静态博客网站。 前提在开始使用本指南之前,请具备以下前提: 首先你得有个服务器 服务器已经安装好Git、Vim等工具 一份静态博客源码,本文以 Astro Air Blog 为例 步骤第一步:安装 Dockersudo apt install docker 第二步:拉取 Nginx 镜像docker pull nginx 镜像名后不加版本号表示拉取最新版,若希望拉取指定版本则需在镜像名后加上tag,例如docker pull nginx:1.16。 第三步:获取 Nginx 的配置文件 先运行一个不挂载的 Nginx 容器 docker run -d --name my-nginx -p 80:80 nginx -d:使容器在后台以守护进程模式运行。 --name:为容器指定一个名称。 -p 80:80:将Docker容器的80端口映射到主机的80端口,让你可以通过浏览器访问运行在容器内的 Nginx 服务器。80端口是HTTP服务,443端口是HTTPS服务。 进入这个 Nginx 容器内部 docker exec -it my-nginx bash -i:表示以交互式模式运行容器。 -t:表示为容器分配一个伪终端。 因此-it表示使用交互式终端,允许在容器内交互式地运行命令。 ...

2023年03月24日 · 2 min · Cassius0924