如何针对图像和静态文件优化 django 应用程序答案

【问题标题】：How to Optimize django application for images and static files如何针对图像和静态文件优化 django 应用程序
【发布时间】：2021-10-23 14:50:08
【问题描述】：

我正在使用 Django(3) 构建一个网站，我们在其中实现了blogs 以在网站上发布文章。对于每篇博文，我们必须添加images 一个特征图像，另一个可能需要在帖子中使用。您可以在以下位置找到该网站：https://pythonist.org

由于图像和静态 css/js 文件，我可以在 google 控制台中看到我的网站太慢了。我正在使用以下代码在上传时压缩图像：

from imagekit.models import ProcessedImageField


class Course(models.Model):
    title = models.CharField(max_length=250, blank=False)
    slug = models.SlugField(blank=True, max_length=120)
    description = RichTextUploadingField(config_name='default')
    featured_image = ProcessedImageField(upload_to='course_images/', format='JPEG',
                                options={'quality': 80}, blank=False)

我正在使用safe 加载模板变量并利用cache、prefetch_selected 和其他基本优化调整。

但是还有其他实用的方法来加载我的图像和静态文件吗更快？

我的网站已部署在 Heroku 上。

【问题讨论】：

我可能忽略了一些逻辑，但是在 Django 文档中也给出的一般建议不是应该通过（单独的）网络服务器而不是通过 Django 提供图像吗？网络服务器也可能会自动为您压缩和缓存图像（使用正确的设置）。
您应该澄清慢速部分是关于上传（每篇博文只发生一次，所以真的不重要），还是关于加载（每次视图发生，所以每秒多次/分钟/天/年）。
我不知道您的静态文件是否是问题所在。我查看了您的网站，它有一些大图像，但没有什么疯狂的。您可以尝试将每个 img 的最大目标定为 250kb，并减少总共的图像数量，但这不会大大缩短您的加载时间。您是否检查了重复的查询？也许模板引擎在做一堆额外的 SQL 语句？检查github.com/jazzband/django-debug-toolbar 或 django Silk。每个站点的目标是 10 个（或更少）请求。如果没有什么可以帮助开始加载该网站的部分与 XHR 异步。
通常 Django 不在生产环境中提供图像/文件。通常这是通过像 apache 或 nginx 这样的网络服务器来完成的，这些可以优化为缓存图像，并以压缩方式发送数据。
@9769953 他正在使用 s3

标签： python python-3.x django optimization django-3.0

【解决方案1】：

使用 Google Chome lighthouse，我注意到 8 张独特的图片，总共 4.5 MB！它们在这里以红色突出显示，基本上您的缩略图是从其他博客文章中获取的全尺寸英雄图像。每当上传图像时，以编程方式创建缩略图。您的缩略图框的宽度为 80x80 像素。据我所知，对于大多数显示器来说，将目标尺寸加倍是好的（因为我认为是 dpi / 像素密度），如果我错了，请纠正我。

使用 imagekit 看起来很容易做到这一点。添加另一个字段以保留缩略图，博客页面将以 7 个 160x160 像素的图像和一个全尺寸图像结束。我什至会在标题上使用上限分辨率，以防万一。

from imagekit.models import ImageSpecField, ProcessedImageField
from imagekit.processors import ResizeToFit # or try ResizeToFill

class Course(models.Model):
    title = models.CharField(max_length=250, blank=False)
    slug = models.SlugField(blank=True, max_length=120)
    description = RichTextUploadingField(config_name='default')
    featured_image = ProcessedImageField(upload_to='course_images/', format='JPEG',
                                options={'quality': 80}, blank=False)
    # in your template thumbnails, use this image instead
    featured_thumbnail = ImageSpecField(source='featured_image',
                                  processors=[ResizeToFit(160, 160)],
                                  format='JPEG',
                                  options={'quality': 70})

我不认为压缩 css 和 js 文件可以提高性能，但如果 css/js 资产增加，您可以这样做。对服务器的每个请求都会增加一些获取数据的开销，而且最好只为所有静态文件使用 1-2 个服务器或 CDN，您已经这样做了。

您可以阅读关于内联折叠内容上方的 css 和 延迟加载，这样浏览器就不必等待完全加载。

您可以使用django bakery 将页面烘焙到您的网络服务器提供的静态内容中

【讨论】：