Как я уменьшил размер изображения в Next.js на 60%, не изменив ни одной строки кода
При проведении стандартного аудита производительности моего приложения на Next.js я обнаружил ужасные показатели LCP (Largest Contentful Paint). Причина заключалась в неоптимизированных изображениях и мета-изображениях Open Graph.
Не хотелось устанавливать тяжелую инфраструктуру обработки изображений типа Sharp только ради нескольких статических файлов. Мне нужен был быстрый способ оптимизации перед коммитом изменений. Вот точная последовательность действий, которую я использовал:
Шаг 1: Конвертация форматов в WebP
Браузеры отлично воспринимают формат WebP. У меня было несколько устаревших огромных PNG-файлов. Вместо того чтобы открывать Photoshop, я просто перетащил их в конвертер PNG → WebP. Этот инструмент работает полностью в браузере через Canvas API, поэтому нет необходимости загружать файлы на сторонние серверы.
Шаг 2: Сжатие размера файла
Некоторые мои существующие JPEG также были слишком большими. Я прогнал их через компрессор изображений. Можно одновременно перетаскивать до десяти файлов за раз, а затем получать оптимизированные версии вместе с таблицей данных о том, сколько килобайт удалось сэкономить на каждом файле.
Шаг 3: Устранение сдвигов макета с помощью точных размеров
Из-за отсутствия явного указания ширины и высоты в тегах <Image> у меня возникали проблемы с CLS (Cumulative Layout Shift). Для решения этой задачи я воспользовался инструментом пакетной обрезки изображений, который позволил мне привести все заголовочные изображения блога к размеру ровно 1200×630 пикселей, устранив тем самым сдвиги макета.
В результате этих простых шагов мой мобильный балл Lighthouse вырос с 54 до впечатляющих 94 баллов. Никаких новых пакетов npm не устанавливалось, никаких загрузок на сервера – только нативные браузерные API.