Знакомство с Lighthouse

Как мы видели в предыдущем разделе, Core Web Vitals фокусируются на аспектах пользовательского опыта через производительность загрузки (Largest Contentful Paint), интерактивность (First Input Delay) и визуальную стабильность (Cumulative Layout Shift).

В этом уроке мы сосредоточимся на том, как измерить Core Web Vitals с помощью симулированной среды под названием Lighthouse.

Примечание: В этом уроке мы будем использовать Chrome Dev Tools. Однако существует множество способов запуска Lighthouse.

Lighthouse работает, проводя серию проверок на предоставленном URL. На основе этих проверок он генерирует отчет о том, насколько хорошо страница показала себя. Если есть области, требующие улучшения, отчет предоставит рекомендации по их оптимизации.

Давайте рассмотрим два примера отчета Lighthouse, чтобы увидеть разницу между сайтом с хорошими показателями Core Web Vitals и сайтом без них.

Оптимизированный пример

Чтобы увидеть пример работы Lighthouse, мы воспользуемся нашей главной страницей.

• Откройте Chrome.
• В режиме инкогнито перейдите по адресу https://nextjs.org.
• Откройте DevTools и нажмите на вкладку Lighthouse.
• Нажмите Generate Report.

Это запустит отчет, который должен занять менее 60 секунд.

Примечание: Важно запускать отчеты в режиме инкогнито, так как сторонние плагины могут повлиять на результаты.

Кроме того, блокировщики рекламы могут препятствовать загрузке скриптов, что приведет к неполной проверке. Рекомендуется использовать чистый профиль для измерения производительности.

Вот пример отчета:

Неоптимизированный пример

Для целей этого руководства мы создали приложение без каких-либо оптимизаций.

Настройка проекта

Это базовое неоптимизированное приложение, которое позволяет посетителям делать две вещи: искать страну для получения информации о ее населении и нажимать на кнопку для чтения всплывающего модального окна. Это приложение имитирует реальность работы с большими приложениями, где использование сторонних библиотек неизбежно.

Загрузка стартового кода

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

Запуск production-сборки

Для получения точных отчетов от Lighthouse ваше приложение всегда должно тестироваться в production-сборке. Чтобы запустить production-сборку, перейдите в директорию проекта:

cd nextjs-lighthouse

Соберите ваше приложение, выполнив next build, и запустите сервер в режиме production, выполнив next start.

npm run build && npm run start

Давайте запустим отчет Lighthouse с помощью Chrome DevTools. После завершения отчета начнем оптимизировать сайт и улучшать показатели.

Дополнительные материалы

• Google Chrome: Lighthouse Scoring Calculator