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 покажет вам отчет.
Например, если вы запускаете некоторые аудиты с включенным регулированием «Имитация быстрого 3G» и 4-кратного замедления ЦП , а затем в других случаях вы запускаете аудит с отключенным регулированием, ваши показатели показателей будут значительно ниже, если регулирование включено. Вы можете потратить много времени, пытаясь понять, почему ваша страница теперь работает настолько медленнее, хотя на самом деле единственное, что изменилось, — это ваша конфигурация.
Понимание вашего отчета
В правом верхнем углу отчета указан общий показатель производительности. 100 – это идеальный результат. Ниже общего балла указаны оценки по метрикам. Руководство по оценке Lighthouse v3 объясняет, как каждый показатель влияет на общий балл.
Наведите указатель мыши на показатель, чтобы узнать о нем больше. Нажмите «Подробнее» , чтобы прочитать документацию по этому вопросу.
Под оценками показателей вы видите скриншоты того, как страница выглядела во время загрузки.
Под скриншотами вы видите возможности улучшения производительности страницы.
Нажмите на возможность, чтобы узнать об этом больше.
Следующие шаги
Попробуйте использовать Lighthouse для аудита вашей страницы либо со страницы вашего профиля, либо с помощью Chrome DevTools. Реализуйте одну из возможностей, а затем снова проверьте свою страницу, чтобы увидеть, как изменение повлияло на ваш отчет. В идеале ваши показатели показателей должны быть немного лучше, и Lighthouse больше не должен отмечать эту возможность как нечто, над чем стоит работать.
Самостоятельный запуск Lighthouse отлично подходит для выборочной проверки проблем, но в конечном итоге вам понадобится настроить непрерывный мониторинг, чтобы обеспечить работоспособность вашего сайта. Чтобы отслеживать прогресс Lighthouse с течением времени, добавьте свой сайт в свой профиль .