Lighthouse. Руководство по оптимизации сайтов для начинающих / Хабр

Быстрые сайты любят и пользователи, и поисковики.

С первыми всё просто: если страница долго грузится, пользователь её закроет и перейдёт на другой сайт. С поисковиками похожая история: скорость загрузки влияет на ранжирование сайта в поисковой выдаче.

Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от компании Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

Давайте разберём, как с помощью Lighthouse проверить качество сайта и повысить его производительность. Мы не будем углубляться в алгоритмы работы инструмента и принципы подсчёта внутренних метрик: начинающим веб-разработчикам это и не нужно. Однако знать, как работает инструмент, и уметь использовать его в своих проектах — очень важный навык.

Как запустить Lighthouse

Запустить инструмент можно тремя способами:

С помощью Node CLI.  Для этого установите в свой проект пакет Lighthouse с помощью команды npm install -g lighthouse.

Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.

С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.

Мы разберем основы работы с Lighthouse на примере Chrome DevTools. Этого вполне достаточно, чтобы понять возможности инструмента. Для продвинутого использования можно установить npm-пакет и работать с Lighthouse через консоль. Этот способ позволяет более гибко настраивать инструмент и запускать его в автоматическом режиме.

Обзор Chrome DevTools. Решаем основные задачи веб-разработчика

Какие параметры оценивает Lighthouse

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

Performance — производительность. Анализирует скорость загрузки сайта. На эту оценку влияет время блокировки, отрисовки стилей, загрузки интерактивных элементов, шрифтов и контента.

Progressive Web App — Прогрессивные web-приложения. Проверяет, регистрирует ли сайт Service Workers, работает ли офлайн, возвращает ошибку 200.

Best Practices — лучшие практики. Проверяет безопасность сайта и использование современных стандартов веб-разработки. Оценка зависит от того, используется ли на сайте HTTPS, устаревшие API, правильная кодировка и другие параметры.

Accessibility — доступность. Проверяет, могут ли все пользователи получать доступ к контенту и эффективно перемещаться по сайту. Эта оценка зависит от понятности и воспринимаемости контента, возможности управлять интерфейсом и передвигаться по содержимому без помощи мыши.

SEO — оценивает соответствие страницы советам Google по поисковой оптимизации. Здесь проверяется использование метатегов, доступ к индексации и переобходу роботами, наличие атрибутов alt у изображений, адаптированность к мобильным экранам и другие характеристики.

Каждый параметр оценивается по 100-балльной шкале: чем выше, тем лучше. У каждой группы оценок также есть свой цвет. Зелёный выставляется при 90-100 баллах, он показывает, что с сайтом всё хорошо. Оранжевый можно получить при 50-89 баллах. То есть с сайтом всё хорошо, но можно сделать ещё лучше. Если оценка ниже 49 баллов, она становится красной. Это означает, что над производительностью стоит поработать.

Большой плюс Lighthouse в том, что проверять качество сайта можно как на десктопной, так и на мобильной версии.

Оценки при этом будут отличаться. Порой они различаются и при запуске нескольких тестов для одной версии сайта. В этом случае колебания возможны при:

• запуске A/B-тестов;

• использовании на сайте анимаций, которые отображаются рандомным образом;

• нестабильной сети;

• использовании расширений для браузера;

• запуске антивирусных программ;

• использовании устройств с разной производительностью.

Чтобы оценка была максимально приближена к реальной, рекомендуется запускать проверку в режиме инкогнито. Тестируйте сайт при стабильном интернет-соединении и отключите программы, которые могут повлиять на результаты.

Как улучшить производительность сайта с помощью Lighthouse

Lighthouse не только показывает оценку по каждому из четырёх критериев, но и даёт конкретные рекомендации: что можно улучшить.

Например, оценка производительности складывается из шести метрик:

• First Contentful Paint — измеряет время, которое понадобится браузеру для отображения первой части содержимого DOM.

• Speed Index — проверяет скорость визуального отображения контента во время загрузки страницы.

• Largest Contentful Paint — измеряет время загрузки самого большого элемента в области просмотра.

• Time to Interactive — проверяет, за какое время страница станет полностью интерактивной.

• Total Blocking Time — смотрит, в течение какого времени происходит блокировка страницы в ответ на действия пользователя: клики мышью или нажатия клавиш.

• Cumulative Layout Shift — проверяет визуальную стабильность: смещение макета из-за асинхронной загрузки ресурсов.

Ниже под метриками Lighthouse описывает возможности и предложения, которые помогут улучшить показатели.

Давайте разберём, как можно повысить оценки Lighthouse на конкретном примере. Для этого возьмём стандартный сайт, размещённый на бесплатном хостинге, и проверим его производительность. Тестировать будем мобильную версию, так как Google преимущественно использует мобильную версию контента для индексации и ранжирования.

Как видно на скриншоте, у сайта средние показатели производительности: 69 баллов из 100. Это неплохо, но давайте их улучшим. Для этого используем рекомендации, которые даёт Lighthouse. Каждую из них можно раскрыть и посмотреть подробнее, что предлагается изменить:

Если такого описания недостаточно и вы всё равно не понимаете, что нужно делать — нажимайте на ссылку Learn more. В открывшемся окне появится более подробная информация и руководство для разработчиков. Вся информация на английском языке, но даже если вы его не знаете, Google Переводчик поможет вам разобраться.

В нашем случае Lighthouse предлагает использовать современные форматы изображений: WebP и AVIF, так как они весят меньше, чем PNG и JPEG. Мы также можем уменьшить размер изображения с 567 Кб до 500 Кб. На первый взгляд может показаться, что это мелочи. Но если мы оптимизируем изображения на сайте, то браузерам понадобится меньше времени на их загрузку.

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

Если соблюдать хотя бы эти рекомендации, мы повысим оценку Lighthouse. Пусть не до 100 баллов, но это уже будет значительный вклад в производительность сайта.

Среди разработчиков нет единого мнения о том, когда лучше проверять производительность сайта. Кто-то этим занимается в процессе разработки, кто-то — в самом конце. Неважно, какой способ выберете вы. Главное не забывайте тестировать свой продукт и работать над его качеством.

Базовые рекомендации для повышения производительности:

• Подключайте к документу минифицированные стили и скрипты.

• Подумайте, что можно сделать с неиспользуемым кодом. Возможно, его стоит переписать или удалить.

• Оптимизируйте изображения. Используйте для этого специальные программы или пакеты npm.

• Используйте современные форматы графики, собирайте SVG в спрайты.

• По возможности уменьшайте количество подключенных ресурсов;

• Подсказывайте браузеру, какие ресурсы самые важные: включайте предзагрузку или наоборот — ленивую загрузку.

Можно ли получить 100 баллов в Lighthouse?

Максимальная оценка вполне достижима. В сети есть проект Зака Лезермана — рейтинг сайтов с максимальными баллами Lighthouse. На момент подготовки этой статьи в нем было 133 ресурса, набравших сто баллов по каждому из четырёх критериев.

Нужно ли вам добиваться таких показателей — решайте сами. Но помните: главное не сама оценка. Главное — сделать сайт достаточно быстрым, безопасным и удобным для пользователей.

Какие еще есть инструменты для проверки производительности?

Lighthouse далеко не единственный инструмент для оптимизации скорости сайтов. Есть и другие, не менее популярные сервисы. Например, WebPageTest, GTmetrix и Pingdom Tools. Или даже PageSpeed Insights, который использует для проверки алгоритмы Lighthouse, но работает только с сайтами, размещенными в Интернете. Протестировать сайты на локальном сервере с его помощью не получится.

У каждого из таких инструментов есть свои особенности. Например, GTmetrix и Pingdom Tools дают более развёрнутые результаты проверки.

Они также показывают последовательность загрузки ресурсов и учитывают во время проверки местонахождение сервера — параметр, который тоже может влиять на производительность. А в GTmertix можно не только получить результаты тестирования, но и отслеживать их в дальнейшей работе.

Если по какой-то причине вам не подходит Lighthouse, можете остановиться на любом другом инструменте. Ведь главный принцип получения высокой оценки в любом из сервисов — это хороший, качественный код. А научиться его писать вы можете на профессиональных курсах «HTML и CSS. Профессиональная вёрстка сайтов» и «HTML и CSS. Адаптивная вёрстка и автоматизация».

Использование Google Lighthouse для аудита веб-приложений

Spread the love

В этой статье я хотел бы рассказать, пожалуй о лучшем на сегодняшний день инструменте аудита веб приложений Google Lighthouse. Позволяющий не только оценивать веб приложения по множеству параметрам, но так же дающим рекомендации о том как исправить найденные проблемы и улучшить производительность.

Что такое Google Lighthouse?

Google Lighthouse – это инструмент аудита с открытым исходным кодом, который помогает разработчикам повысить производительность и доступность своих веб-проектов. Любой желающий может использовать его бесплатно, чтобы увидеть, как его веб-сайт соответствует высоким стандартам Google в веб разработке.

Как использовать Google Lighthouse

Самый простой способ начать работу – установить расширение Google Lighthouse для Chrome.

Далее перейдите на определенную страницу в вашем браузере и нажмите кнопку «Generate Report» в расширении Lighthouse.

Lighthouse расскажет вам, насколько ваш веб-сайт соответствует стандартам Google. В отчете будут объяснены сильные и слабые стороны вашего сайта, а также предложены способы повысить его оценку.

Кроме того, вы можете запустить Lighthouse с помощью Node CLI. Для этого требуется Node 6 или новее, и его можно установить с помощью следующей команды:

npm install -g lighthouse

После установки запустите Lighthouse с помощью следующей команды и замените yourwebsite. com реальным веб-сайтом, который вы хотите протестировать.

lighthouse https://yourwebsite.com/

Google Lighthouse: краткий обзор

Аудит веб-страницы с Lighthouse очень прост, если вы знакомы с Chrome DevTools. Перейдите на страницу с Chrome, откройте DevTools (Ctrl + Shift + I или ⌥ + ⌘ + i в зависимости от вашей системы), а затем перейдите в раздел Audits (Аудиты).

Перед запуском аудита с помощью кнопки «Run audit», вы можете настроить уровень аудита в соответствии с вашими интересами (Производительность (Performance), SEO, Доступность (Accessibility) и т. д.).

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

Когда Lighthouse завершит оценку вашей страницы, вы получите аудиторский отчет, который начинается с нескольких баллов (столько баллов, сколько категорий выбрано при настройке аудита).

Показатель эффективности (Performance Score) рассчитывается на основе результатов теста скорости, сравнивая скорость вашего сайта с другими. Получение 100 баллов означает, что протестированная веб-страница работает быстрее, чем 98% или более веб-страниц. Оценка 50 означает, что страница работает быстрее, чем 75% Интернета (источник).

Когда вместо оценки отображается знак вопроса, это значит что некоторые запущенные тесты не были проведены должным образом и помечены как «Ошибка!».

После scores overview вы найдете результаты по 6 метрикам:

First ContentFul Paint: измеряет время за которое, первый текст/ изображение отобразилось на экране.
First Meaningful Paint: измеряет время за которое, отобразился основной контент страницы.
Speed Index: показывает, насколько быстро содержимое страницы отображается визуально.
First CPU Idle: измеряет время, когда основной поток страницы стал ожидать обработку ввода в первый раз.
Time to Interactive: показывает время, когда страница стала полностью интерактивной.
Estimated Input Latency: является оценкой того, как долго ваше приложение реагирует на ввод пользователя в миллисекундах в течение самого загруженного 5-секундного окна загрузки страницы. Если ваша задержка превышает 50 мс, пользователи могут воспринимать ваше приложение как тормозящее.

Так же в отчете вы найдете пошаговые изображения загрузки страницы. Это особенно полезно, чтобы убедиться, что страница загружена как ожидалось. Например, во время нашего теста мы получили отчет с расхождениями. Мы смогли подтвердить, что что-то пошло не так, благодаря этому диафильму:

После обзора производительности вам будут показаны лучшие практики для каждой категории. Большинство советов являются техническими и не очень подробно изложены в самом отчете, но вы возможно найдете полезную информацию по ссылкам «Learn more».

Что делает Lighthouse отличным инструментом аудита, так это количество автоматических контролей: около ста. Lighthouse также выделяет некоторые «Дополнительные элементы для проверки вручную» (Additional items to manually check), которые будут полезным напоминаниями (например, в категории специальных возможностей «Страница имеет логический порядок вкладок» (The page has a logical tab order)).

Обратите внимание, что некоторые рекомендации дублируются в нескольких категориях, например, элемент управления, относящийся к смешанному контенту, присутствует в категории «Progressive Web App», а также в «Best Practices».

С большой властью приходит большая ответственность

Lighthouse, безусловно, является отличным инструментом, который может легко создавать как метрики производительности, так и обеспечить контроль качества, поскольку он доступен непосредственно в Chrome. Это основное преимущество также может быть вашим злейшим врагом! Выполняя тест производительности с вашего настольного компьютера, вы полагаетесь на множество параметров из вашей локальной среды, и иногда может быть трудно получить достаточно стабильные результаты:

• Интернет-соединение: вы уверены, что у вас нет фонового приложения, потребляющего некоторую интернет трафик? Если вы предоставляете ваш интернет кому еще, уверены ли вы, что никто не будет влияет на ваши тесты? Предлагает ли ваш интернет-провайдер стабильное соединение?
• CPU: вы уверены, что использование вашего процессора другими программами не влияет на ваш текущий тест?
• Расширения Chrome (Chrome extensions): как отмечает Aymen Loukil, они могут сильно повлиять на ваши результаты. Будьте особенно осторожны с расширениями, связанными с блокировкой рекламы!
• Пользовательские настройки: вы уверены, что ваш тест Lighouse начинается с чистого состояния? Как насчет ваших файлов cookie, состояния вашего локального хранилища, открытых сокетов (вы можете проверить на chrome://net-internals/#sockets) и т. д.
• Версия Lighthouse: возможно, Lighthouse обновлялся со времени вашего последнего отчета. Вы проверили журнал изменений? Помните, что расширение автоматически обновляется по умолчанию, и версия, доступная через DevTools, будет обновляться при обновлении Chrome.

На первые два пункта может влиять Lighthouse в режиме “Simulate throttling for performance audits (faster)” (Имитация регулирования для аудита производительности ). Вместо того, чтобы полагаться на Chrome DevTools для формирования трафика, Lighthouse теперь использует новый механизм внутреннего аудита: Lantern. Он направлен на снижение зависимости показателей производительности без потери излишней точности. Подход очень интересный. Для более подробной информации доступны общественный обзор, а также подробный анализ. Посмотрим в будущем, насколько этот способ надежный!

При использование Lighthouse, имейте в виду влияние вашей локального окружения. Что бы уменьшить это влияние мы для каждого теста создаем новый чистый профиль пользователя Chrome и открываем новый экземпляр Chrome. Каждый из наших тестовых проектов использует одинаковую инфраструктуру и условия сети.

Так для проверки влияние на производительности тестов локального окружения, мы провели небольшой эксперимент.

Мы провели 3 теста с помощью Lighthouse на Apache.org из нашего офиса (оптоволоконная связь – среднее значение ping для Apache.org составляет 40 мс). Вот средние значения результатов:

Те же тесты, но при интернет соединение с добавлением задержки в 500 мс (с помощью команды tc Unix):

Мы получаем изменение Performance Score на 21%, в то время как Speed Index более чем удвоился во втором тесте. Мы получили эти результаты, используя режим Lantern (эмулированное регулирование Lighthouse), который на самом деле направлен на уменьшение изменчивости локальной сети.

Надеемся, что ваша задержка в сети не сильно будет влиять на ваши тесты. Но имейте в виду, что задержка является лишь одним из множества переменных параметров в вашей локальной среде!

При использовании Lighthouse, если вы хотите сравнить несколько отчетов, помните о нестабильности вашего контекста и связанной с этим предвзятости!

Примечание: Если вы используете Lighthouse с регулируемым соединение (throttled connection), имейте в виду, что вы используете возможность формирования трафика Chrome DevTools. Задержка будет вводится на уровне HTTP, как результат Chrome DevTools не добавляет задержки во время TCP-соединения и SSL-handshakes.

Была ли вам полезна эта статья?

Spread the love

Что такое Google Lighthouse и как им пользоваться?

Как владелец веб-сайта, максимальная оптимизация вашего сайта для поисковых систем (SEO), доступность и производительность имеют первостепенное значение. Однако для максимально эффективной борьбы с этими факторами крайне важно использовать правильные инструменты и методы. Одним из самых инновационных решений, которое вы можете использовать в настоящее время, является Google Lighthouse.

В этом посте мы познакомим вас с Google Lighthouse и принципами его работы. Затем мы объясним, как вы можете использовать его для улучшения своего сайта.

Давайте прыгать!

Подпишитесь на наш канал Youtube

• 1 Что такое Google Lighthouse?
  • 1.1 Как Lighthouse проверяет страницы
• 2 Как использовать Google Маяк
  • 2.1 Как запустить Google Lighthouse с помощью Chrome DevTools
  • 2. 2 Как использовать Google Lighthouse с web.dev
  • 2.3 Как использовать Google Lighthouse с расширением Chrome
  • 2,4 Как использовать Google Lighthouse через узел
• 3 Заключение

Что такое Google Lighthouse?

Google Lighthouse — это бесплатный инструмент с открытым исходным кодом, который может помочь вам улучшить скорость, производительность и общее удобство вашего веб-сайта. Создание отчетов Lighthouse упрощает повышение качества ваших веб-страниц.

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

• Chrome DevTools
• Расширение Chrome
• Узловой модуль
• Веб-интерфейс пользователя (UI)

После того, как вы отправите URL-адрес автоматизированному инструменту, он выполнит аудит нескольких страниц и создаст отчет с подробным описанием работы страницы. Затем вы можете использовать предложения из результатов, чтобы улучшить свой сайт.

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

Как Lighthouse проверяет страницы

В центре внимания аудитов Lighthouse находятся основные веб-показатели Google. Если вы не знакомы, это основные показатели, которые Google использует для измерения скорости веб-страниц и общего пользовательского опыта (UX). Они включают в себя наибольшую содержательную отрисовку (LCP), первую задержку ввода (FID) и кумулятивный сдвиг макета (CLS).

Другими словами, использование Lighthouse поможет вам увидеть свой веб-сайт так же, как это делает Google. Вы можете использовать полезную информацию, которую он предоставляет, для оптимизации ваших страниц для лучшего ранжирования в поисковых системах.

Отчеты Маяка состоят из пяти категорий:

• Производительность
• Доступность
• SEO
• Лучшие практики
• Прогрессивное веб-приложение

Он также использует систему подсчета очков от 1 до 100 и тестирует сайты на смоделированное соединение 3G. Однако со временем оценки могут меняться, поскольку Google часто обновляет критерии ранжирования. Поэтому вы, вероятно, захотите быть в курсе любых обновлений Lighthouse.

Более того, хотя Lighthouse несколько похож на PageSpeed ​​Insights, это не то же самое. Lighthouse предлагает более целостную картину, чем просто производительность страницы (как это делает PageSpeed ​​Insights).

Как использовать Google Lighthouse

Как мы уже упоминали, вы можете использовать несколько рабочих процессов для Lighthouse. Если вы не хотите устанавливать расширение или запускать команды, вы можете использовать web.dev или DevTools. Ниже мы рассмотрим пошаговые инструкции для каждого варианта.

Как запустить Google Lighthouse с помощью Chrome DevTools

Чтобы начать работу, вам сначала нужно загрузить Google Chrome (если вы еще этого не сделали). После установки вы можете открыть новую вкладку браузера в Chrome и перейти на веб-страницу, которую хотите проверить.

Затем щелкните правой кнопкой мыши страницу и выберите Проверить. Вы также можете нажать на три вертикальные точки в правом верхнем углу браузера, а затем перейти к Дополнительные инструменты

Откроется панель DevTools справа или вверху страницы. На панели инструментов (1) нажмите Маяк :

Обратите внимание: если вы не видите опцию «Маяк» на панели инструментов, вам может потребоваться щелкнуть две стрелки в конце. Когда откроется инструмент Lighthouse, убедитесь, что выбраны все пять категорий, затем (2) выберите Создать отчет .

Как только Lighthouse закончит проверку, вы увидите экран результатов. Этот отчет будет выглядеть примерно так:

Вы найдете баллы и разделы для каждой категории. Вы можете узнать больше о каждом, нажав на баллы в верхней части страницы.

Хорошей считается оценка от 50 до 89. Отличной считается оценка от 90 до 100. Цель состоит в том, чтобы набрать от 90 до 100 баллов по каждой категории.

Как использовать Google Lighthouse с web.dev

Другой быстрый и простой способ аудита веб-страницы с помощью Lighthouse — использование web.dev. Перейдите на эту страницу и введите URL-адрес страницы, которую вы хотите проверить:

Затем нажмите кнопку Run Audit . Через минуту-две Lighthouse закончит анализ сайта и выведет вас на отчет. Здесь вы можете узнать больше о своем балле и возможностях улучшения в каждой категории:

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

Как использовать Google Lighthouse с расширением Chrome

Кроме того, вы можете загрузить и установить расширение Chrome для Lighthouse. Это может быть хорошим выбором, если вы планируете часто использовать Lighthouse.

Опять же, вам нужно установить браузер Chrome. Затем вы можете перейти в интернет-магазин Chome и установить расширение Lighthouse:

После установки надстройки перезапустите браузер. Теперь вы должны увидеть символ маяка в конце адресной строки. Посетите веб-страницу, которую вы хотите проверить, нажмите на символ маяка, затем выберите Создать отчет :

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

Как использовать Google Lighthouse через Node

Если вам нужна гибкость конфигурации Lighthouse, вы также можете использовать модуль Node. Это более продвинутое решение, но оно обеспечивает больший контроль.

Во-первых, вам необходимо установить версию Node с долгосрочной поддержкой:

Далее вы можете запустить командную строку для установки Lighthouse:

 npm установить -g маяк
# или используйте пряжу:
# пряжа глобальная добавить маяк 

Наконец, вы можете выполнить аудит с помощью следующей команды:

 маяк  

Конечно, вы захотите заменить веб-адресом веб-страницы, которую вы пытаетесь проверить. Вы можете обратиться к GitHub, чтобы узнать больше об исходном коде.

Заключение

Регулярный аудит вашего веб-сайта WordPress необходим для обеспечения хорошего опыта как для посетителей, так и для поисковых систем. Благодаря таким инструментам, как Google Lighthouse, вы можете быстро оценить производительность, SEO и доступность своего сайта, выполнив несколько простых шагов.

Как мы уже говорили в этом посте, Lighthouse — это бесплатный автоматизированный инструмент для получения ценной информации о производительности ваших веб-страниц и общем опыте. Вы можете использовать его, установив расширение для Chrome или используя DevTools прямо в браузере. Затем вы можете использовать отчеты, чтобы узнать, как улучшить свой сайт.

У вас есть вопросы об использовании Google Lighthouse? Дайте нам знать в комментариях ниже!

Избранное изображение через Cienpies Design/shutterstock.com

Что это такое и как им пользоваться?

Возможно, вы здесь, потому что вы страстный поклонник показателей производительности. Или, может быть, вы не знаете, что такое Маяк, и боитесь спросить.

Любой из них — отличный вариант. Добро пожаловать!

Вместе мы надеемся превратить ваши усилия по повышению производительности от «сделать все цифры зелеными» к некоторым четким и значимым действиям.

Примечание. Эта статья была обновлена ​​в январе 2022 г. для представления версий 8 и 9..

Специалист по технической оптимизации и Google Data Studio Рэйчел Андерсон присоединилась ко мне в этом веселом приключении по демистификации документации для разработчиков.

Мы ответим:

• Что такое Маяк?
• Чем Lighthouse отличается от Core Web Vitals?
• Почему Lighthouse не соответствует отчетам Search Console/Crux?
• Как рассчитывается показатель производительности?
• Почему мой результат каждый раз разный?
• Объяснение показателей производительности Lighthouse
• Как проверить производительность с помощью Lighthouse

Что такое Google Lighthouse?

Производительность — это измерение того, насколько быстро браузер может собрать веб-страницу.

Lighthouse использует веб-браузер Chromium для создания страниц и запускает тесты на страницах по мере их создания. Инструмент с открытым исходным кодом (это означает, что он поддерживается сообществом и может использоваться бесплатно).

Каждый аудит относится к одной из пяти категорий:

1. Производительность.
2. Доступность.
3. Лучшие практики.
4. SEO.
5. Прогрессивное веб-приложение.

Для целей этой статьи мы будем использовать название Lighthouse для обозначения серии тестов, выполняемых общим репозиторием Github, независимо от метода выполнения.

Версия 9 в настоящее время размещена на Github, и ее крупномасштабное развертывание планируется вместе со стабильной версией Chrome 98 в феврале 2022 года.

Google Lighthouse и Web Core Vitals

5 мая 2020 года проект Chromium объявил о наборе из трех показателей, с помощью которых поддерживаемый Google браузер с открытым исходным кодом будет измерять производительность.

Показатели, известные как Web Vitals, являются частью инициативы Google, разработанной для предоставления унифицированных рекомендаций по сигналам качества.

Целью этих показателей является измерение веб-производительности с учетом интересов пользователей.

В течение двух недель была выпущена Lighthouse v6 с модифицированной версией Web Core Vitals, лежащей в основе обновления.

В июле 2020 года унифицированные показатели Lighthouse v6 были приняты во всех продуктах Google с выпуском Chrome 84.

Панель аудита Chrome DevTools была переименована в Lighthouse. Данные Pagespeed и Google Search Console также ссылаются на эти унифицированные показатели.

Это изменение фокуса ставит новые, более совершенные цели.

Чем Google Lighthouse отличается от Core Web Vitals?

Три показателя, представленные Core Web Vital, являются частью оценки производительности Lighthouse.

Крупнейшая отрисовка контента, общее время блокировки и совокупное смещение макета составляют 70% взвешенной оценки производительности Lighthouse.

Оценки, которые вы увидите для CWV в Lighthouse, являются результатом эмулированных тестов.

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

Почему Lighthouse не соответствует отчетам Search Console/Crux Reports?

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

Данные о производительности маяка не учитывают все эти факторы.

Вместо этого инструмент эмулирует устройство среднего класса и дросселирует ЦП, чтобы имитировать обычного пользователя.

Лабораторные тесты собираются в контролируемой среде с предопределенными настройками устройства и сети.

Лабораторные данные помогают устранять проблемы с производительностью.

Это не означает, что опыт на вашем локальном компьютере в контролируемой среде представляет собой опыт реальных людей в дикой природе.

Хорошая новость: вам не нужно выбирать между Lighthouse и Core Web Vitals. Они предназначены для того, чтобы быть частью одного и того же рабочего процесса.

Всегда начинайте с полевых данных из отчета об опыте использования Chrome, чтобы выявить проблемы, влияющие на реальное использование.

Затем используйте расширенные возможности тестирования Lighthouse, чтобы определить код, вызывающий проблему.

Если вы работаете над предварительным запуском сайта или проверяете изменения в закрытой среде, Lighthouse станет вашим новым лучшим другом #webperf.

Как рассчитываются показатели производительности Google Lighthouse?

В версиях 8 и 9 оценка производительности Lighthouse состоит из семи метрик, каждая из которых составляет процент от общей оценки производительности.

Почему мой результат каждый раз разный?

Ваша оценка может меняться при каждом тестировании.

Расширения браузера, подключение к Интернету, A/B-тесты или даже реклама, отображаемая при загрузке конкретной страницы, оказывает влияние.

Если вам интересно узнать больше, ознакомьтесь с документацией по вариативности тестирования производительности.

Объяснение показателей производительности Google Lighthouse

Крупнейшая отрисовка содержимого (LCP)

• Что она представляет : восприятие пользователем процесса загрузки.
• Оценка производительности маяка 9 баллов0170 : 25%
• Что он измеряет : Точка на временной шкале загрузки страницы, когда самое большое изображение или текстовый блок страницы виден в области просмотра.
• Как измеряется : Lighthouse извлекает данные LCP из инструмента отслеживания Chrome.
• Является ли самая крупная содержательная отрисовка важным веб-ядром? Да!
• Оценка LCP
• Цель : Достичь LCP менее чем за 2,5 секунды.

 install -g lighthouse 

 маяк