Оптимизация под Pagespeed: работа с изображениями как с наиболее частой и весомой проблемой сайтов

Значимый прорыв формирует отрасль ИИ: FirstJohn 49 минут назад Оптимизация под Pagespeed: работа с изображениями как с наиболее частой и весомой проблемой сайтов Простой 12 мин 1. 8K Блог компании FirstVDS Веб-разработка * Django * Сайт успешно протестировали на мастере, выкатили на прод, провели контрольное тестирование — вроде всё хорошо. Он работает пару месяцев — и вдруг приходит задача от SEO «увеличить скорость загрузки» или «исправить просевшее количество баллов в PageSpeed».

Причём ничего принципиально нового не добавляли, просто наполняли контентом. Для примера рассмотрим типичную ситуацию и некогда оптимизированный проект с минимумом изображений на стеке Python/Django/SCSS — на нём будем делать правки. Для начала смотрим загрузку «на глаз» — вроде нормально.

Технические детали

Но отдел SEO упорно ставит задачу и требует исправить баллы в PageSpeed, потому что его метрики влияют на ранжирование в поиске. Ок, открываем его — и видим оранжевую зону и непонятные аббревиатуры CLS, LCP и др. Сайт с рядом правок, которые PageSpeed рекомендует выполнить А всё потому, что PageSpeed ориентирован на наиболее жёсткий вариант условий открытия сайта, и он проверяется без кэша в условиях мобильного интернета (скорость варьируется в рамках от скоростного 3G до медленного 4G).

Начинаем разбираться — и выясняется, что есть общая проблема, которая почти всегда повторяется. А именно — изображения. Их неправильно готовят: не ресайзят, не соблюдают соотношение сторон, не конвертируют, заливают «как есть».

Зачастую на мобильной версии сайта вполне можно найти изображение во всю ширину десктопа, сжатое силами CSS. Выглядят одинаково, но вес — совершенно разный. И на вопрос «Почему так сделано?

Отраслевые последствия

» — ответ, как правило, — «Всё взято с макета, соответствие проверено по perfect pixel» или «с отделом дизайна согласовано, стилистика не нарушается». Получается, что риски надо было закладывать на этапе дизайна и разработки, но по факту их исправляют, когда продакшн уже горит. Поэтому дальше разберём пользу сжатий и конвертации на живом примере и покажем, как их править.

А заодно — как делать, чтобы в процессе разработки они не повторялись. Первичная оценка масштабов катастрофыОткрываем DevTools, вкладку «Сеть». Пример с небольшим количеством запросов.

В основном — картинки и скрипты Как правило, наиболее критичные проблемы — логотип, изображение в хедере, иконки интерфейса и т. Всё потому, что они находятся на первом экране и влияют на то, как быстро пользователь увидит сайт и получит первое впечатление. Открываем калькулятор и подсчитываем, какой же объем изображений у нас на сайте грузится в итоге: то, что раньше весило килобайты, теперь перевалило за мегабайты.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.