Lighthouse — это инструмент, который помогает оценить эффективность страницы и найти способы её улучшения. Вот общая схема использования Lighthouse:
- Вы указываете Lighthouse, какую страницу следует проверять.
- Lighthouse загружает эту страницу и фиксирует время, необходимое странице для достижения различных контрольных показателей производительности. Эти контрольные показатели называются метриками .
- Lighthouse предоставляет отчёт о качестве страницы. В отчёте указаны баллы по каждой метрике и список возможностей , реализация которых должна ускорить загрузку страницы.
Ваша задача — со временем улучшать свои показатели или, по крайней мере, не допускать их ухудшения. Однако напрямую работать с показателями невозможно. Вместо этого вы используете возможности, предоставляемые Lighthouse. Работа над этими возможностями, как правило, улучшает ваши показатели.
Запустите Lighthouse со страницы своего профиля
Запустите Lighthouse со страницы вашего профиля web.dev :
Укажите любой URL-адрес, и Lighthouse проведет серию аудитов, составив отчет об эффективности страницы.
Ознакомьтесь с отчетом об аудите, чтобы определить области, в которых вашу страницу можно улучшить.
Для каждого аудита вы найдете рекомендации и немедленные шаги, которые можно предпринять для улучшения своих результатов.
Запустите Lighthouse из Chrome DevTools
Chrome DevTools — это набор инструментов для веб-разработчиков, встроенных непосредственно в браузер Google Chrome. Вам не нужно ничего скачивать, чтобы получить DevTools. Если у вас Chrome, то у вас есть и DevTools.
- В Chrome перейдите на страницу, которую вы хотите проверить.
- Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
Перейдите на вкладку «Аудит» . Если эта вкладка не отображается, нажмите на значок » и выберите «Аудит» в списке. Lighthouse — это движок, на котором работает панель «Аудит» . Именно поэтому вы видите изображение маяка.
- Убедитесь, что выбран переключатель « Мобильный ». При проверке вашей страницы Lighthouse будет имитировать область просмотра и строку пользовательского агента мобильного устройства.
- Убедитесь, что флажок «Производительность» установлен. Остальные флажки можно включить или отключить в разделе «Аудит» . Если вы включите их, перед вами откроется множество возможностей для улучшения других аспектов вашей страницы.
- Убедитесь, что выбран переключатель «Имитация быстрого 3G, замедление ЦП в 4 раза» . Lighthouse фактически не снижает производительность сети или ЦП при загрузке страницы. Вместо этого он оценивает время загрузки страницы в обычных условиях, а затем оценивает, сколько времени заняла бы загрузка в быстрой сети 3G с процессором, который в 4 раза слабее вашего компьютера.
- Убедитесь, что флажок «Очистить хранилище» установлен. Эта опция заставляет Lighthouse обращаться к сети для каждого ресурса страницы, что соответствует тому, как посетители, впервые посещающие страницу, видят её.
- Нажмите «Запустить аудит» . Через 5–10 секунд Lighthouse покажет вам отчёт.
Например, если вы проводите некоторые аудиты с включенным регулированием Simulated Fast 3G и 4x CPU Slowdown , а затем проводите аудиты с отключенным регулированием, ваши показатели будут значительно ниже при включенном регулировании. Вы можете потратить много времени, пытаясь понять, почему ваша страница стала работать так медленно, хотя на самом деле единственное, что изменилось, — это ваша конфигурация.
Поймите свой отчет
В правом верхнем углу отчёта указан ваш общий балл эффективности. 100 — высший балл. Под общим баллом указаны баллы по метрикам. В руководстве по оценке Lighthouse v3 объясняется, как каждый балл по метрике влияет на общий балл.
Наведите указатель мыши на метрику, чтобы узнать о ней больше. Нажмите «Подробнее» , чтобы ознакомиться с документацией.
Под показателями показателей вы видите скриншоты того, как выглядела страница во время загрузки.
Ниже на снимках экрана вы видите возможности для улучшения производительности страницы.
Нажмите на возможность, чтобы узнать о ней больше.
Следующие шаги
Попробуйте использовать Lighthouse для аудита своей страницы — либо со страницы профиля, либо из Chrome DevTools. Реализуйте одну из возможностей, а затем снова проведите аудит страницы, чтобы увидеть, как изменение повлияло на ваш отчёт. В идеале ваши показатели должны немного улучшиться, и Lighthouse больше не должен отмечать эту возможность как требующую внимания.
Самостоятельное использование Lighthouse отлично подходит для выборочной проверки проблем, но в конечном итоге вам потребуется настроить непрерывный мониторинг, чтобы убедиться в работоспособности вашего сайта. Чтобы отслеживать прогресс в работе Lighthouse, добавьте свой сайт в свой профиль .