Автор: Боладжи Айодеджи
Перевод: сумасшедший технический ботаник
оригинал:Woohoo.бесплатный код camp.org/news/intro's…
Копирование без разрешения строго запрещено
Chrome Lighthouse существует уже некоторое время, но если я попрошу вас объяснить, что он делает, не могли бы вы объяснить это?
Я считаю, что многие веб-разработчики, в том числе начинающие, не слышали об этом инструменте, а те, кто его не пробовал, вообще не круты 😒.
В этой статье я познакомлю вас с тем, что делает Chrome Lighthouse и как его использовать.
Приступаем 😄
Согласно Википедии,lighthouseэто башня, здание или другой тип конструкции, излучающий свет с системой ламп и линз в качестве навигационного средства для судов на море или внутренних водных путях..
Хорошо, давайте превратим это в технический термин;
Маяк — это башня, здание или другой тип конструкции, излучающий свет из системы на панели аудита в Chrome DevTools и служащий ориентиром для разработчиков.
Имеет ли это смысл? 😄
Что ж, Lighthouse — это инструмент, разработанный Google для анализа веб-приложений и веб-страниц, сбора современных показателей производительности и предоставления информации о передовом опыте разработчиков.
Думайте о Lighthouse как о спидометре в автомобиле, который проверяет и уравновешивает ограничение скорости автомобиля.
В целом Lighthouse используется с лучшими практиками разработки и показателями производительности. Он выполняет проверки веб-приложений и дает вам отзывы об ошибках, некачественных методах, советы по повышению производительности и способы их исправления.
Согласно описанию в Google Developers Docs
Lighthouse — это инструмент автоматизации с открытым исходным кодом для улучшения качества веб-страниц. Вы можете запустить его на любой веб-странице. Он позволяет проводить аудит производительности, доступности, прогрессивных веб-приложений и многого другого.
Вы можете запустить Lighthouse из командной строки в Chrome DevTools или как модуль Node.js. Когда вы предоставляете Lighthouse URL-адрес для аудита, он запускает серию проверок этой страницы, а затем создает отчет о том, насколько хорошо страница работает. Этот отчет можно использовать как индикатор того, как улучшить страницу. Результатом каждого аудита является справочный документ, объясняющий, почему эти аудиты важны и как их решать.
Это почти все о Lighthouse, который проверяет URL-адреса вашего веб-приложения и создает отчет на основе веб-стандартов и лучших практик разработчиков, который сообщает вам, насколько плохо ваше веб-приложение. Каждый раздел отчета также сопровождается документацией о том, какие части вашего приложения были проверены, почему вам следует улучшить конкретную часть вашего приложения и как это исправить.
Вот этот блогbolajiayodeji.comДемонстрация отчета об аудите Lighthouse
Слева: мой блог 😄 Справа: аудиторский отчет Lighthouse
Круто, правда? 😉
Следует отметить, что в моем первом аудите я не получил таких хороших результатов. Поэтому я использую первый отчет, чтобы исправить и улучшить производительность и качество моей собственной программы.
Для этого и предназначен Lighthouse: он выявляет и устраняет распространенные проблемы, влияющие на производительность, доступность и удобство работы вашего веб-сайта.
Теперь давайте перейдем к веселой части,Как начать пользоваться!!
LightHouse имеет три рабочих процесса
- Инструменты разработчика Chrome
- Командная строка (Node.js)
- Расширение Chrome
Я лично предпочитаю использовать LightHouse в Dev Tools. Нет смысла использовать расширение, потому что инструменты разработчика и расширение работают в одном и том же браузере Chrome, у нас разные настройки, и вы можете выбрать наиболее удобный для вас метод.
Первоначально Lighthouse был только расширением Chrome, пока не был добавлен в Chrome DevTools.
Также круто использовать маяк в командной строке (для гиков 😉)
Давайте начнем! ! !
[1] Запуск Lighthouse в Chrome DevTools
- Загрузите веб-браузер Google Chromeздесь
Примечание. Lighthouse можно запустить только на рабочем столе.
- Перейдите по URL-адресу, который вы хотите просмотреть, в Google Chrome.
Вы можете проверить любой URL-адрес в Интернете.
- Откройте Chrome DevTools
Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS).
- нажмитеAuditsпанель
Слева страница, которая будет рассмотрена, это мой блог 😄. Справа Chrome DevToolsПанель аудита, теперь питается от Lighthouse
- нажмитеRun audits
DevTools отображает список категорий аудита. Убедитесь, что все они выбраны. Если вы хотите персонализировать раздел для просмотра, вы можете сделать это, отметив категории для просмотра.
- Через 60–90 секунд — в зависимости от скорости вашего интернета — Lighthouse предоставит вам отчет о странице.
Не только скорость интернета и предустановленные расширения могут повлиять на аудит маяка. Для лучшего опыта, пожалуйста, посетитеРежим икогнитопересмотрите, чтобы избежать всех отвлекающих факторов
[2] Запустить маяк из командной строки
- скачатьБраузер Гугл Хром
- скачатьNode.js, если он уже установлен, пропустите этот шаг!
- Установить Маяк
npm install -g lighthouse
# or use yarn:
yarn global add lighthouse
С опцией «g »для установки его в виде глобального модуля.
- Беги аудита
lighthouse <url>
Например:
lighthouse https://bolajiayodeji.com/
Lighthouse по умолчанию создает файлы отчетов в формате HTML. Вы можете контролировать формат вывода, добавляя параметры управления.
Отчет может бытьHTMLилиJSONотображение формата.
Пример вывода:
lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json`
запустив$ lighthouse --helpдля просмотра параметров CLI
[3] Запустите Lighthouse с расширением Chrome
Как я уже говорил, рабочий процесс DevTools является лучшим, потому что он имеет то же преимущество, что и рабочий процесс расширения: установка не требуется.
To use this method you need to install the extension, but If you have your reasons, here is the guide; Чтобы использовать этот метод, вам нужно установить расширение, если у вас есть для этого причина. Это согласно руководству:
- скачатьБраузер Гугл Хром
- Установить из Интернет-магазина ChromeРасширение Маяк для Chrome.
- Перейдите на страницу для просмотра
- нажмитеЗначок маяка.
Он должен быть рядом с адресной строкой Chrome. Если нет, откройте главное меню Chrome (три точки в правом верхнем углу) и войдите в него в верхней части меню. Нажмите, чтобы развернуть меню Маяк.
- нажмитеGenerate report.
Lighthouse запускает аудит на открытой странице, затем открывает новую вкладку с отчетом о результатах.
Бинго! Ты сделал это~
Вот и все, Lighthouse — отличный инструмент, особенно для новичков.
Это очень полезный инструмент при просмотре прогрессивных веб-приложений.
Когда я начал использовать Lighthouse, я действительно многое узнал об оптимизации и критериях производительности. Вскоре вы сможете стать экспертом в создании веб-приложений с высокой производительностью, доступностью и удобством для пользователей. :)
*Маяк не волшебный, его создали люди. Это открытый исходный код, и ваш вклад приветствуется. Вы можете найти ошибки, которые можно исправить, или создать и улучшить процесс обзора, заглянув в трекер ошибок на github. Трекер проблем также является отличным местом для обсуждения показателей аудита, новых идей аудита или всего, что связано с Lighthouse. *😄