Как оптимизировать django-приложение для изображений и статических файлов
Я создаю сайт с использованием Django(3), в котором мы реализовали blogs
для размещения статей на сайте. Для каждой записи в блоге нам нужно добавить images
одно тематическое изображение, а другое может быть использовано внутри статьи. Вы можете найти сайт по адресу: https://pythonist.org
В консоли google я вижу, что мой сайт работает слишком медленно из-за изображений и статических css/js файлов. Я сжимаю изображение при загрузке, используя код ниже:
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.
Используя маяк Google Chome, я заметил 8 уникальных изображений, общим размером 4,5 МБ! Они выделены здесь красным цветом, в основном ваши миниатюры - это полноразмерные изображения-герои, взятые из других постов блога. Создавайте эскизы программно, когда загружается изображение. Ваши поля для эскизов имеют ширину 80x80 px. Насколько я знаю, удвоение целевого размера подходит для большинства дисплеев (из-за dpi / плотности пикселей, я думаю), поправьте меня, если я ошибаюсь.
С помощью imagekit это легко сделать. Добавьте еще одно поле, чтобы сохранить миниатюру, и на странице блога будет 7 изображений 160x160 px и одно полноразмерное. Я бы даже использовал максимальное разрешение в заголовке, на всякий случай.
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 выше разворачиваемого контента и defer loading, таким образом браузеру не придется ждать полной загрузки.
Вы можете использовать django bakery для запекания страниц в статическое содержимое, обслуживаемое вашим веб-сервером