如何在Django网站中压缩静态文件并解决PageSpeed性能问题

一、PageSpeed检测出的加载问题优化方案 #

1. CSS问题优化 #

• 合并CSS文件：把多个小CSS文件合并成一个，减少浏览器HTTP请求数，Django收集静态文件后可手动合并或用工具自动处理
• 内联关键CSS：将首屏渲染必需的CSS直接写在HTML头部，避免浏览器等待CSS下载完成才渲染页面
• 延迟加载非关键CSS：对弹窗、底部样式这类不影响首屏的CSS，用media="print"标记或JS动态加载，等页面渲染完成后再加载
• 清理冗余CSS：用Chrome DevTools的Coverage工具找出未使用的CSS代码，手动删除或用PurgeCSS工具自动清理

2. JS问题优化 #

• 合并压缩JS：将多个JS文件合并并压缩，同时减少请求数和文件体积
• 异步/延迟加载JS：给非首屏必需的JS标签添加async或defer属性，比如<script src="xxx.js" defer></script>，让浏览器解析DOM的同时下载JS，不阻塞页面渲染
• 移除冗余JS：用Coverage工具排查未使用的JS代码，第三方库只引入需要的模块（比如用lodash单个函数而非完整库）
• 代码拆分：用Webpack这类工具把JS拆分成多个小块，只加载当前页面所需代码，避免一次性加载所有资源

3. 图片问题优化 #

• 转换图片格式：将JPG、PNG转成WebP或AVIF格式，相同画质下体积更小，Django可通过Pillow在图片上传时自动转换
• 响应式图片：用srcset+sizes属性或<picture>标签，让浏览器根据屏幕尺寸加载适配大小的图片，示例：<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw">
• 懒加载图片：给图片添加loading="lazy"属性，或用JS实现，仅加载进入视口的图片，减少初始加载资源量
• 压缩图片体积：上传前用TinyPNG、Squoosh工具压缩，或在Django中集成Pillow，自动压缩用户上传的图片

二、Django静态文件压缩处理方法 #

1. 用django-compressor实现自动压缩 #

• 安装依赖：pip install django-compressor
• 在settings.py中配置：

  INSTALLED_APPS = [
      # 其他已安装应用
      'compressor',
  ]
  
  STATICFILES_FINDERS = [
      'django.contrib.staticfiles.finders.FileSystemFinder',
      'django.contrib.staticfiles.finders.AppDirectoriesFinder',
      'compressor.finders.CompressorFinder',
  ]
  
  COMPRESS_ENABLED = True
  # CSS压缩过滤器
  COMPRESS_CSS_FILTERS = [
      'compressor.filters.css_default.CssAbsoluteFilter',
      'compressor.filters.cssmin.rCSSMinFilter',
  ]
  # JS压缩过滤器
  COMPRESS_JS_FILTERS = [
      'compressor.filters.jsmin.JSMinFilter',
  ]
  

• 在模板中使用：

  {% load compress %}
  
  {% compress css %}
  <link rel="stylesheet" href="{% static 'css/style1.css' %}">
  <link rel="stylesheet" href="{% static 'css/style2.css' %}">
  {% endcompress %}
  
  {% compress js %}
  <script src="{% static 'js/script1.js' %}"></script>
  <script src="{% static 'js/script2.js' %}"></script>
  {% endcompress %}
  

• 部署前执行：python manage.py compress，预生成压缩后的静态文件

2. 用Webpack/Vite等构建工具处理 #

适合复杂项目，将静态文件交给专业工具处理：

• 在静态文件目录初始化npm项目，安装Webpack/Vite及相关插件（如css-loader、terser-webpack-plugin压缩JS、css-minimizer-webpack-plugin压缩CSS）
• 编写构建配置脚本，将多个CSS/JS打包为压缩后的文件
• 在Django模板中直接引用构建完成的压缩文件
• 部署时先运行构建命令，再执行python manage.py collectstatic收集静态文件

3. 部署阶段的额外优化 #

• 配置CDN：将静态文件部署到CDN，利用CDN的缓存和就近节点加速访问
• 设置浏览器缓存：在settings.py中配置STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'，生成带哈希值的文件名，配合Nginx等服务器设置长缓存时间（如365天）
• 开启Gzip/Brotli压缩：在Nginx或Apache中配置开启这两种压缩，进一步减小传输时的文件体积

内容的提问来源于stack exchange，提问作者shyam rathod