在互联网时代，用户对网站加载速度的容忍度越来越低。研究表明，页面加载时间每延迟1秒，转化率可能下降7%，而加载时间超过3秒的网站，超过一半的访问者会选择离开。无论是电商网站、博客还是企业官网，速度优化不仅是提升用户体验的关键，更是搜索引擎排名的重要影响因素。Google和百度等主流搜索引擎已明确将页面速度纳入排名算法。因此，掌握一套系统化的速度优化方案，是每个技术从业者和网站运营者的必修课。
前端资源压缩与合并
前端资源（HTML、CSS、JavaScript）的体积直接影响页面首次加载时间。通过压缩和合并，可以显著减少HTTP请求数量和传输数据量。
压缩是指移除代码中的空格、注释和换行符，同时缩短变量名（针对JavaScript）。对于CSS和JavaScript，推荐使用工具如UglifyJS、Terser或cssnano。在构建流程中集成这些工具，例如使用Webpack的terser-webpack-plugin插件：
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
terserOptions: {
compress: { drop_console: true }, // 移除console语句
},
})],
},
};合并则是将多个CSS文件或JavaScript文件合并成一个，减少浏览器并发请求数。但需注意，合并并非越多越好——过大的单个文件会阻塞渲染。最佳实践是：将关键CSS（首屏样式）内联到HTML中，非关键CSS异步加载；将JavaScript按需分割，使用import()动态导入。
此外，启用Gzip或Brotli压缩是成本最低的优化之一。在Nginx中配置Brotli压缩：
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;压缩后，文本资源体积通常可减少60%-80%，效果立竿见影。
图片与多媒体资源优化
图片往往是页面中体积最大的资源。未经优化的图片会严重拖慢加载速度，尤其是移动端网络环境较差时。
选择合适的图片格式至关重要。对于照片类图片，使用WebP格式（支持有损和无损压缩）通常比JPEG小25%-35%。对于图标、Logo等简单图形，SVG是更好的选择，它体积小且可无限缩放。对于需要透明背景的复杂图片，考虑使用AVIF格式，其压缩率比WebP更高。
响应式图片是另一个关键实践。使用<picture>元素或srcset属性，让浏览器根据屏幕宽度加载合适尺寸的图片：
<img src="small.jpg"
srcset="medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="示例图片">懒加载可以延迟加载视口外的图片，直到用户滚动到它们附近。现代浏览器原生支持loading="lazy"属性：
<img src="image.jpg" loading="lazy" alt="懒加载图片">对于更精细的控制，可使用Intersection Observer API实现自定义懒加载。此外，使用CDN（内容分发网络）分发图片资源，能利用边缘节点缩短用户与服务器之间的物理距离，大幅降低延迟。
缓存策略与服务器优化
合理的缓存策略能让重复访问的用户几乎瞬间加载页面。这需要从前端到后端进行系统性配置。
浏览器缓存通过设置HTTP头实现。对于静态资源（CSS、JS、图片），可以设置较长的Cache-Control max-age值，例如一年：
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public, immutable";
}对于HTML页面，设置较短的缓存时间（如5分钟），或使用ETag进行条件验证。Service Worker则提供了更强大的缓存控制能力，可以拦截网络请求，实现离线访问和缓存优先策略。
服务器端优化同样不可忽视。启用HTTP/2或HTTP/3协议，支持多路复用，减少连接开销。在Nginx中启用HTTP/2：
server {
listen 443 ssl http2;
server_name example.com;
# 其他配置...
}数据库查询优化也是后端速度优化的重要环节。确保常用查询有合适的索引，避免N+1查询问题。对于高并发场景，使用Redis或Memcached缓存数据库查询结果，减少磁盘I/O。同时，考虑使用PHP-FPM的OPcache（针对PHP应用）或JIT编译（针对Node.js），提升代码执行效率。
渲染性能与关键路径优化
即使资源加载很快，如果浏览器渲染路径受阻，用户依然会感到“白屏”。优化关键渲染路径，能确保首屏内容尽快呈现。
减少关键资源数量是关键。关键资源是指阻塞渲染的CSS和JavaScript。将CSS分为“关键CSS”（首屏样式）和“非关键CSS”，关键CSS内联在HTML的<head>中，非关键CSS使用media="print"或rel="preload"异步加载：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>JavaScript的加载策略同样重要。使用defer或async属性避免阻塞DOM解析。defer保证脚本按顺序在DOM解析完成后执行，async则下载完成后立即执行（不保证顺序）。对于非关键脚本，优先使用defer。
避免渲染抖动。频繁的DOM操作和强制回流（如读取offsetHeight后立即修改样式）会严重拖慢渲染性能。使用requestAnimationFrame来批量处理样式变更，或使用虚拟DOM库（如React、Vue）自动优化更新。
使用性能监控工具持续跟踪。Lighthouse、WebPageTest和Chrome DevTools的Performance面板，能帮助你定位具体瓶颈。重点关注首次内容绘制（FCP）、最大内容绘制（LCP）和累积布局偏移（CLS）这三个核心Web指标。
总结
网站速度优化是一个持续迭代的过程，没有一劳永逸的解决方案。本文从前端资源压缩、图片优化、缓存策略和渲染性能四个维度，提供了可落地的实践方案。建议你从测量当前性能开始，使用Lighthouse生成报告，然后根据得分最低的指标优先优化。记住，80%的性能提升往往来自20%的关键改动，例如启用压缩、使用CDN和优化图片。保持监控，定期检查，让速度优化成为开发流程的一部分。最终，用户会用更低的跳出率和更高的满意度回报你的努力。 作者：大佬虾 | 专注实用技术教程
评论框