php 静态资源加载慢

最新推荐文章于 2025-08-12 21:54:14 发布

原创最新推荐文章于 2025-08-12 21:54:14 发布 · 363 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#php

PHP语言经典程序100题专栏收录该内容

331 篇文章

订阅专栏

一、静态资源加载慢的常见原因

资源体积大（图片未压缩、JS/CSS未压缩/合并）
资源数量多（过多HTTP请求）
服务器带宽/性能瓶颈
未用CDN，地理距离远，网络延迟高
未开启浏览器缓存
未开启Gzip/Brotli压缩
HTTP/1.1队头阻塞，未用HTTP/2/3
DNS解析慢
阻塞型JS/CSS影响渲染
未做懒加载/异步加载

二、优化方案与配置

1. 使用CDN加速

原理：CDN在全国/全球多地部署节点，用户就近访问，极大降低延迟。
做法：将图片、JS、CSS、字体、视频等静态资源上传到CDN，前端引用CDN地址。

Nginx反向代理CDN示例：

location /static/ {
    proxy_pass https://your-cdn.com/static/;
}

2. 资源压缩与合并

图片压缩：用WebP、JPEG压缩，TinyPNG、ImageMagick等工具
JS/CSS压缩：Webpack、Gulp、UglifyJS、cssnano等
合并文件：减少HTTP请求数

Webpack配置示例：

module.exports = {
  optimization: {
    minimize: true,
  },
  // entry/output等略
};

3. 开启Gzip/Brotli压缩

Nginx配置Gzip：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1k;

Brotli：更高压缩比，需Nginx 1.15+或用第三方模块

4. 浏览器缓存优化

设置Cache-Control/Expires/Etag，让浏览器复用已下载资源

Nginx配置示例：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff|woff2|ttf|svg)$ {
    expires 30d;
    add_header Cache-Control "public";
}

5. HTTP/2/HTTP/3协议

优势：多路复用、头部压缩、服务器推送，极大提升加载速度
Nginx开启HTTP/2：

server {
    listen 443 ssl http2;
    # ssl配置略
}

6. 图片/视频懒加载

原理：首屏只加载可见图片，其他图片滚动到视口时再加载
做法：前端用loading="lazy"或JS库（如lazysizes）

HTML示例：

<img src="image.jpg" loading="lazy" alt="图片">

7. 异步/延迟加载JS、CSS

JS：用async或defer属性
CSS：非关键CSS用media属性或JS动态加载

示例：

<script src="app.js" defer></script>
<link rel="stylesheet" href="print.css" media="print">

8. DNS预解析/预连接

减少DNS解析和TCP握手时间

HTML头部加：

<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="//cdn.example.com">

9. 减少阻塞渲染的资源

关键CSS内联，非关键CSS异步加载
JS放在body底部或用defer

10. 资源分域名/并发加载

原理：浏览器对同一域名的并发连接有限，分域名可提升并发加载数
注意：HTTP/2后一般不再推荐分域名

三、性能监控与排查

Lighthouse/Pagespeed Insights：检测页面性能瓶颈
Chrome DevTools：分析网络请求、资源加载时间
CDN/服务器日志：监控带宽、命中率、响应时间

四、实际案例优化流程

图片/视频全部用CDN+WebP格式+懒加载
JS/CSS用Webpack打包压缩合并，开启Gzip
Nginx配置长缓存，开启HTTP/2
前端用async/defer加载JS，内联关键CSS
监控Lighthouse分数，持续优化

五、总结

静态资源加载慢，首选CDN+压缩+缓存+协议升级+懒加载
前后端、运维、CDN多方协作，持续优化
监控和压测不可少