1. 渲染与资源加载优化
核心概念与目标
在网站加载性能优化中，渲染阶段的关键路径决定了用户首次看到页面的时间。通过缩短首屏渲染时间，提高用户体验和搜索引擎排名，才算真正实现了效率提升。
对阻塞资源的管理是实现快速呈现的重要手段。剔除非必要资源、尽量并行加载，以及对需要最早呈现的样式进行优先级排序，都是实现快速渲染的关键做法。
为实现可控的渲染顺序，应采用首屏优先的资源控制、按需加载与异步非阻塞脚本等策略，确保浏览器在渲染关键区域时不被次要资源拖慢。
<link rel="preload" href="styles/critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles/critical.css"></noscript>上述代码演示了通过预加载并在加载完成后应用样式的做法，从而降低首屏的阻塞时间。
<script src="scripts/main.js" defer></script>
<script src="scripts/analytics.js" async></script>defer让入口脚本在文档解析完成后再执行，async则在下载完成后就开始执行，二者均减少了阻塞渲染的时间。
实战要点与要素
在实际开发中，应优先处理首屏所需的CSS与JS，并将其他资源推迟加载或异步执行。通过将关键样式内联或放在头部，再使用延迟加载的脚本，可以显著提升初次可交互时间。
了解并持续评估渲染路径中的瓶颈点，是实现稳定提升的关键。通过盲测对比与性能分析工具，可以客观定位哪些资源在阻塞渲染，以及如何通过<门槛调整来改进。
<link rel="preload" href="styles/critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles/critical.css"></noscript>// 将入口脚本设置为 defer，让浏览器并行加载
<script src="scripts/main.js" defer></script>
<script src="scripts/analytics.js" async></script>2. 资源体积与格式优化
图片与字体的优化策略
图片往往是页面加载的最大开销，因此要实现图片体积最小化并确保质量，在格式与自适应加载上要下足功夫。
采用现代图片格式如AVIF/WebP，并结合srcset与sizes实现自适应分辨率加载，是降低带宽与加载时间的有效方法。
字体方面应考虑子集化、字体显示策略与缓存，减少字体文件对渲染的影响。
<picture>
<source srcset="images/photo.avif" type="image/avif">
<source srcset="images/photo.webp" type="image/webp">
<img src="images/photo.jpg" alt="示例图" loading="lazy">
</picture>
上例展示了动态选择最优格式的做法，同时对图片采用懒加载，进一步降低初始加载压力。
# 服务器开启对静态资源的压缩
gzip on;
gzip_types text/html text/css application/javascript image/svg+xml;
# 或在支持的环境中启用 Brotli
brotli on;
brotli_types text/html text/css application/javascript image/svg+xml;
对于字体，可在 CSS 中使用font-display: swap，并尽量使用子集化字体来减小文件体积。
<link rel="preload" href="/fonts/Inter-Subset.woff2" as="font" type="font/woff2" crossorigin>
<style> @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Subset.woff2') format('woff2'); font-display: swap; } </style>
文本与资源的压缩与缓存策略
将文本、样式与脚本进行服务器端压缩（如Brotli/gzip），并通过高效缓存策略降低重复加载成本，是提升性能的关键。
通过设置缓存控制头、版本化资源和合理的
# 资源版本化与缓存策略示例
Cache-Control: max-age=31536000, immutable
ETag: "v12345"
对静态资源使用长期缓存，并在资源更新时变更URL（如添加版本号），可以有效减少重复请求和分析成本。
3. 网络传输与服务器端加速
缓存策略与CDN的实战应用
在跨地域分发的场景中，CDN成为降低时延、提高稳定性的关键手段，同时结合边缘缓存与压缩传输可以显著提升加载速度。
设置强缓存与条件请求，并结合合理的资源域名规划，能够减少DNS查找及TLS握手开销，从而提升真实用户体验。
通过分析命中率与缓存失效成本，在合适的位置放置更新策略，确保旧资源不过度回源，同时新资源能快速投放。
http {
server {
listen 443 ssl http2;
location ~* \\.(js|css|png|jpg|svg|gif|webp|woff2)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}
}
}
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" as="script" href="https://cdn.example.com/script.js"># 通过命名服务于 TLS 会话复用与性能
# 启用 HTTP/2 以实现多路复用，减少并发连接的总时延
listen 443 ssl http2;
