Как оптимизировать 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 МБ! Они выделены здесь красным цветом, в основном ваши миниатюры - это полноразмерные изображения-герои, взятые из других постов блога. Blog Thumbnails Создавайте эскизы программно, когда загружается изображение. Ваши поля для эскизов имеют ширину 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 для запекания страниц в статическое содержимое, обслуживаемое вашим веб-сервером

Вернуться на верх