网站性能优化完全指南：从0到100分的加载速度提升

作者

网站性能直接影响用户体验和搜索引擎排名。Google研究表明，页面加载时间超过3秒，53%的移动用户会离开。本文将提供完整的性能优化方案。

1. 性能测量

核心指标

  • FCP (First Contentful Paint)：首次内容绘制，目标<1.8s
  • LCP (Largest Contentful Paint)：最大内容绘制，目标<2.5s
  • FID (First Input Delay)：首次输入延迟，目标<100ms
  • CLS (Cumulative Layout Shift)：累积布局偏移，目标<0.1

测量工具

# Lighthouse
lighthouse https://example.com --view

# WebPageTest
https://webpagetest.org

# Chrome DevTools
# Network tab + Performance tab

2. 前端优化

图片优化

# 使用WebP格式
Description

# 响应式图片


# 懒加载
Description

# 使用CDN
Description

CSS优化

/* 关键CSS内联 */
<style>
/* 首屏关键样式 */
</style>

/* 异步加载非关键CSS */
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

/* 避免@import */
/* 错误 */
@import url("style.css");

/* 正确 */
<link rel="stylesheet" href="style.css">

JavaScript优化

// 异步加载
<script src="app.js" async></script>
<script src="app.js" defer></script>

// 代码分割
import(/* webpackChunkName: "component" */ './Component');

// Tree Shaking
// 使用ES6模块，删除未使用代码

字体优化

/* 使用font-display */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
}

/* 预加载关键字体 */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

3. 后端优化

服务器配置

# Nginx Gzip
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript;

# 浏览器缓存
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

数据库优化

-- 添加索引
CREATE INDEX idx_user_email ON users(email);

-- 查询优化
EXPLAIN ANALYZE SELECT * FROM users WHERE email = '[email protected]';

-- 连接池配置
# 应用配置
DB_POOL_SIZE=20
DB_MAX_OVERFLOW=10

缓存策略

# Redis缓存
import redis

r = redis.Redis(host='localhost', port=6379, db=0)

# 设置缓存
r.setex('user:123', 3600, json.dumps(user_data))

# 获取缓存
user_data = json.loads(r.get('user:123'))

4. CDN配置

# Cloudflare配置
# 1. 开启CDN
# 2. 启用HTTP/2
# 3. 开启Brotli压缩
# 4. 配置页面规则

# 页面规则示例
# 缓存级别: 缓存所有内容
# 浏览器缓存TTL: 1个月
# 总是在线: 开启

5. 数据库优化

索引优化

-- 添加复合索引
CREATE INDEX idx_orders_user_date ON orders(user_id, created_at);

-- 删除未使用索引
SELECT * FROM pg_stat_user_indexes WHERE idx_scan = 0;

查询优化

-- 避免SELECT *
SELECT id, name, email FROM users;

-- 使用JOIN替代子查询
SELECT u.name, o.total
FROM users u
JOIN orders o ON u.id = o.user_id;

-- 分页优化
SELECT * FROM posts
WHERE id > 1000
ORDER BY id
LIMIT 20;

6. 代码层面优化

减少HTTP请求

# 合并CSS/JS文件
# 使用CSS Sprites
# 内联小资源（Base64）

避免重定向

# 错误
https://example.com -> http://example.com -> https://www.example.com

# 正确
https://www.example.com (直接访问)

使用HTTP/2

# Nginx配置
listen 443 ssl http2;

7. 移动端优化

响应式设计

/* 移动优先 */
.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

触摸优化

/* 触摸目标最小44x44px */
button {
    min-width: 44px;
    min-height: 44px;
}

8. 监控与持续优化

# 使用Real User Monitoring (RUM)
# Google Analytics
# Sentry错误监控
# New Relic性能监控

性能优化检查清单

  • [ ] 图片使用WebP/AVIF格式
  • [ ] 启用Gzip/Brotli压缩
  • [ ] 配置CDN
  • [ ] 添加浏览器缓存
  • [ ] 数据库添加索引
  • [ ] 启用Redis缓存
  • [ ] 代码分割和懒加载
  • [ ] 使用HTTP/2
  • [ ] 移动端优化
  • [ ] 定期性能监控

总结

网站性能优化是一个持续的过程。关键要点：

  • 测量先行：先测量，再优化
  • 前端优化效果最明显：图片、CSS、JS
  • 缓存是关键：浏览器缓存、CDN、服务端缓存
  • 数据库优化：索引、查询优化
  • 持续监控：建立性能基线，持续优化
📖 进阶优化：学习使用Service Worker实现离线缓存，使用WebAssembly提升计算性能，以及边缘计算（Edge Functions）降低延迟。

发表评论