网站性能优化指南

时间：2024-12-06

编辑：tance.cc

网站性能优化指南

网站性能.png

当用户抱怨网站打开慢，或者发现网站性能评分不理想时，这篇性能优化指南可以帮你找到解决方案。让我们通过系统化的方法，全面提升网站性能。

一、Web性能指标体系

1.1 核心Web指标(Core Web Vitals)

首次内容绘制(FCP)应控制在1.8秒以内：

javascript
// 监控FCP性能new PerformanceObserver((entries) => {
    for (const entry of entries.getEntries()) {
        console.log(`FCP: ${entry.startTime}`);
        // 发送到性能监控系统
        sendToAnalytics('FCP', entry.startTime);
    }}).observe({entryTypes: ['paint']});

最大内容绘制(LCP)建议在2.5秒内完成：

javascript
new PerformanceObserver((entries) => {
    for (const entry of entries.getEntries()) {
        console.log(`LCP: ${entry.startTime}`);
        sendToAnalytics('LCP', entry.startTime);
    }}).observe({entryTypes: ['largest-contentful-paint']});

首次输入延迟(FID)应保持在100ms以下：

javascript
new PerformanceObserver((entries) => {
    for (const entry of entries.getEntries()) {
        console.log(`FID: ${entry.processingStart - entry.startTime}`);
        sendToAnalytics('FID', entry.processingStart - entry.startTime);
    }}).observe({entryTypes: ['first-input']});

1.2 RAIL性能模型

Response（响应）：

用户输入响应时间<100ms
动画帧率保持60fps
滚动和动画的流畅度

Animation（动画）：

javascript
// 优化动画性能function optimizeAnimation() {
    // 使用requestAnimationFrame
    requestAnimationFrame(() => {
        // 执行动画
        element.style.transform = `translateX(${position}px)`;
        // 继续下一帧
        if (isAnimating) {
            optimizeAnimation();
        }
    });}

Idle（空闲）：

javascript
// 利用空闲时间预加载资源requestIdleCallback(() => {
    prefetchNextPageResources();}, { timeout: 2000 });

Load（加载）：

首页内容<1秒完成加载
延迟加载非关键资源
实现渐进式加载

二、性能优化实践

2.1 服务器优化

Nginx配置优化：

nginx
# 启用Gzip压缩gzip on;gzip_types text/plain text/css application/json application/javascript;gzip_min_length 1000;gzip_comp_level 6;# 启用缓存location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";}# 启用HTTP/2listen 443 ssl http2;

PHP-FPM优化：

ini
; 调整进程数pm = dynamicpm.max_children = 50pm.start_servers = 5pm.min_spare_servers = 5pm.max_spare_servers = 35; 启用OPcacheopcache.enable=1opcache.memory_consumption=128opcache.interned_strings_buffer=8opcache.max_accelerated_files=4000

2.2 数据库优化

索引优化：

sql
-- 为常用查询字段创建索引CREATE INDEX idx_user_name ON users(username);CREATE INDEX idx_created_at ON posts(created_at);-- 使用组合索引优化多条件查询CREATE INDEX idx_user_status_created ON users(status, created_at);

查询优化：

sql
-- 优化LIKE查询SELECT * FROM posts 
WHERE title LIKE 'prefix%';  -- 可以使用索引-- 避免使用SELECT *SELECT id, title, content 
FROM posts 
WHERE user_id = 1;-- 使用EXPLAIN分析查询EXPLAIN SELECT * FROM users 
WHERE username = 'test' AND created_at > '2024-01-01';

2.3 前端性能优化

资源加载优化：

html
<!-- 关键CSS内联 --><style>  /* 首屏关键样式 */  .header { ... }  .banner { ... }</style><!-- 非关键CSS异步加载 --><link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

延迟加载实现：

javascript
// 图片懒加载const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.src = entry.target.dataset.src;
            observer.unobserve(entry.target);
        }
    });});document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

三、监控与告警

3.1 性能监控实现

javascript
// 性能数据采集function collectPerformanceData() {
    const timing = performance.getEntriesByType('navigation')[0];
    return {
        TTFB: timing.responseStart - timing.requestStart,
        domReady: timing.domContentLoadedEventEnd,
        pageLoad: timing.loadEventEnd,
        resources: performance.getEntriesByType('resource')
    };}// 发送性能数据function sendPerformanceData(data) {
    navigator.sendBeacon('/collect', JSON.stringify(data));}

3.2 告警阈值设置

建议的告警阈值：

TTFB > 500ms
页面加载 > 3秒
资源加载错误率 > 1%
CPU使用率 > 80%

四、实践建议

定期进行性能评估和优化，建议每月至少一次全面检查。

合理设置监控告警，避免误报和漏报。

记录优化效果，建立性能优化基准数据。

可以使用性能检测工具进行定期检测。

如果您在优化过程中遇到问题，欢迎在评论区交流讨论。