Ускорение сайта для Google Pagespeed

После добавления в индекс поисковых систем я обнаружил что сайт с новых устройств загружается медленно. Решил проверить его в инструменте от Google, PageSpeed Insights и увидел что основная проблема заключается в том что у меня картинки не оптимизированные.

Я нашел проект next-export-optimize-images который позволяет ужимать картинки до нужных размеров.

После установки плагина я выполнил несколько шагов, чтобы добиться максимального прироста производительности. Делюсь ими пошагово — пусть и у вас сайт станет зелёным в PageSpeed Insights.

Почему именно next-export-optimize-images

Next.js — шикарный фреймворк, но у его статической сборки (next export) есть один давно обсуждаемый минус — отсутствие on‑the‑fly‑оптимизации изображений. В результате тяжёлые картинки попадают в финальный билд без сжатия и резко снижают LCP/Speed Index. next-export-optimize-images решает эту проблему, выполняя оптимизацию на этапе сборки и сохраняя все плюсы next/image.

Ключевые возможности

• Оптимизация изображений «на лету» во время билда
• Поддержка всех опций компонента next/image
• Конвертация форматов — например, PNG → WebP
• Автоматическая загрузка внешних (remote) картинок локально
• Использует sharp, поэтому работает быстро
• Кэширование результатов, чтобы не пережимать одинаковые файлы
• TypeScript‑friendly и уже совместим с App Router

Шаг 1. Устанавливаем пакет

npm i -D next-export-optimize-images

Пакет ставим как devDependency, потому что он нужен только на этапе билда.

Шаг 2. Оборачиваем next.config

💡 Если пишете конфиг на ESM, используйте next.config.mjs:

import withExportImages from 'next-export-optimize-images'
 
export default withExportImages({
  output: 'export',
})

Шаг 3. Правим скрипт сборки

// package.json
{
-  "build": "next build",
+  "build": "next build && next-export-optimize-images"
}

Теперь после next build автоматически запускается оптимизатор и генерирует уже «похудевшие» картинки.

Шаг 4. Импортируем правильный Image

Заменяем стандартный next/image на пакет‑обёртку:

import Image from 'next-export-optimize-images/image'
 
<Image src="/images/img.png" width={1920} height={1280} alt="Пример" />

Можно даже импортировать файлы напрямую:

import cat from './cat.png'
<Image src={cat} alt="Котик" />

Нужна «старшая» версия для pages‑роутера? Используйте:

import Image from 'next-export-optimize-images/legacy/image'

Результат

После внедрения плагина вес большинства моих картинок сократился в 3‑4 раза, а оценка в Google PageSpeed для мобильных устройств поднялась с 73 → 98 баллов. Вот финальный скриншот:

Если вы хоститесь на GitLab Pages или любом другом статическом хостинге и используете next export, — next-export-optimize-images буквально спасает ситуацию. Плагин прост в подключении, а выигрыш в скорости колоссальный — и для пользователей, и для SEO.

Я для своего MDX рендера сделал компонент который тоже оптимизирует картинки, т.е. я не вставляю картику как image из разметки markdown а вставляю свой кастомынй тег

<Img src="/images/blog/pagespeed-problem-solved.png" alt="PageSpeed progkit.dev после оптимизации" w={650} h={350} />
 

И картинка оптимизированна в самой статье тоже.

Статья относиться к проекту

ProgKit.dev - Кухня программиста

ProgKit.dev сайт моего проекта, здесь я размещаю всю актуальную информацию о проектах которыми я занимаюсь