Как улучшить производительность сайта (оптимизация изображений)
После того как я внёс некоторые изменения в дизайн этого блога, я решил проверить его в PageSpeed Insight (довольно очевидное решение для разработчика). К своему удивлению, результаты оказались очень далеки от того, что я ожидал.
Когда я что-то исправляю, я подхожу к этому с идеей «первого контакта». Что это значит — в первую очередь оптимизировать первый визит. Нет смысла сначала оптимизировать всё для постоянных посетителей, потому что если сайт ужасен для тех, кто заходит только один раз, он будет ужасен и для тех, кто заходит много раз. Так что давайте разберёмся.
Определение проблемы
Как видно из результатов, PageSpeed Insight утверждает, что я могу уменьшить общий размер изображений на 1171 КиБ. С чем я в данный момент не согласен, так как это предполагает, что я использую jpeg со 100% качеством (на самом деле — 70%, но сравнение я буду делать на основе оптимизированных и неоптимизированных jpeg), но всё же предполагаю, что смогу добиться уменьшения на 500 КиБ (буду оптимистом и понадеюсь на 700 КиБ).
Итак, сначала мне нужно понять, в чём тут мои проблемы, а поскольку речь идёт об изображении, скорее всего, это будет:
- Формат
- Разрешение
- Ленивая загрузка
Формат изображения
Итак, первое, что я здесь сделаю — это изменю формат. PageSpeed рекомендует WebP и AVIF. Я не был бы собой, если бы не сделал сравнение и на этом этапе.
Проверка поддержки
Давайте на этом этапе проверим поддержку обоих форматов, и для этого я воспользуюсь сайтом Can I Use, и здесь я вижу, что большинство нужных мне платформ поддерживаются. IE11 не поддерживает ни тот, ни другой, но для меня это ничего не значит, поскольку у меня нет никакого намерения поддерживать что-то, что уже снято с поддержки. Так что реальные различия сводятся к следующему: браузер KaiOS, Opera Mini и QQ Browser. Так что на этом этапе нет никаких очевидных причин выбирать один формат вместо другого (да — более широкая поддержка на данном этапе для меня не означает «лучше»).
Смена формата
Теперь я хочу проверить разницу в размере файлов для тех 5 изображений, которые есть на сайте, исходя только из формата.
Чтобы конвертировать изображения в WebP, я выполняю 3 команды (одна меняет формат, оставляя качество прежним, а ещё две меняют формат и снижают качество (сжатие))
mogrify -format webp -quality 100 *.jpg
mogrify -format webp -quality 90 *.jpg
mogrify -format webp -quality 70 *.jpg
Размер файла фиксировался отдельно после каждой команды. После этого были выполнены следующие три команды:
mogrify -format avif -quality 100 *.jpg
mogrify -format avif -quality 900 *.jpg
mogrify -format avif -quality 70 *.jpg
И после получения вывода результаты снова были записаны.
Сравнение результатов
Итак, вот таблица результатов, которые я получил (все размеры файлов указаны в КиБ).
| Исходное изображение | Исходный размер | Размер WebP | WebP 90% | WebP 70% | Размер AVIF | AVIF 90% | AVIF 70% |
|---|---|---|---|---|---|---|---|
| Изображение 1 (качество 100%) | 297 | 385 | 44 | 28 | 291 | 50 | 26 |
| Изображение 2 (качество 100%) | 894 | 1331 | 232 | 82 | 770 | 335 | 114 |
| Изображение 3 (качество 100%) | 740 | 1228 | 127 | 59 | 546 | 187 | 69 |
| Изображение 4 (качество 100%) | 1228 | 1740 | 420 | 208 | 991 | 513 | 280 |
| Изображение 5 (качество 100%) | 2457 | 4270 | 547 | 125 | 2048 | 807 | 204 |
| Изображение 1 (качество 70%) | 82 | 227 | 47 | 28 | 197 | 54 | 27 |
| Изображение 2 (качество 70%) | 228 | 833 | 190 | 81 | 619 | 205 | 110 |
| Изображение 3 (качество 70%) | 159 | 513 | 113 | 58 | 343 | 123 | 70 |
| Изображение 4 (качество 70%) | 411 | 1433 | 395 | 205 | 925 | 383 | 259 |
| Изображение 5 (качество 70%) | 390 | 2836 | 377 | 132 | 1433 | 358 | 183 |
И результаты весьма интересны:
- Я был удивлён, что при конвертации изображений в WebP размер файла увеличивался — в какой-то момент даже на 627% (Изображение 2 при качестве 70%), или, если брать округлённо — лишние 2,3 МиБ!
- Прямая конвертация в WebP не даёт никакой выгоды (на самом деле она скорее вредна)
- Прямая конвертация в AVIF даёт выгоду только по сравнению с несжатыми файлами JPEG и WebP (поэтому для автоматизированных задач я бы этого избегал, ведь многие изображения в интернете уже оптимизированы, так что это только навредит)
- Снижение качества на 10% даёт огромный выигрыш для WebP и AVIF по сравнению с JPEG
- WebP, даже будучи более старым форматом, показывает лучшую производительность по сравнению с AVIF
- PageSpeed Insight «ошибался» — размер уменьшился на 768 КиБ (да, это число можно увеличить до 850 КиБ или даже 950 КиБ, но стоит ли оно того?)