Вступ до Chrome Lighthouse

Chrome Lighthouse існує вже деякий час, але що, якщо я попрошу вас пояснити, що він робить, ви можете пояснити це наочно?

Я виявив, що багато веб-розробників, включаючи початківців, не чули про цей інструмент, а ті, хто вже, ще не пробували, це не круто :(.

У цій статті я представляю вам Chrome Lighthouse, що він робить і як почати користуватися ним.

PS: Ця стаття була вперше опублікована в моєму блозі

Давайте розпочнемо :)

Згідно Вікіпедії, маяк вежа, будівля, або інші типи структури , призначеної для випромінювати світло від системи ламп і лінз , а також служити в якості допоміжного засобу для навігації для морських лоцманів на море або на внутрішніх водних шляхах.

Добре, давайте перетворимо це на технічний термін;

Маяк - це вежа, будівля або інші типи споруд, призначені для випромінювання світла від системи під панеллю «Аудити» в Інструментах розробника Chrome та слугуючи керівництвом для розробників

Має якийсь сенс? :)

Що ж, Lighthouse - це інструмент, розроблений Google, який аналізує веб-програми та веб-сторінки, збираючи сучасні показники ефективності та інформацію про найкращі практики розробників.

Подумайте про Маяк як про спідометр в машині, який перевіряє та врівноважує обмеження швидкості руху автомобілів.

В основному, Lighthouse працює з найкращими практиками розробників та показниками ефективності. Він запускає перевірки у веб-програмі та надає вам відгуки про помилки, практики нижче стандартних, поради щодо кращої роботи та способи їх виправлення.

За даними Google Developers Docs

Lighthouse - це автоматизований інструмент з відкритим кодом для підвищення якості веб-сторінок. Ви можете запустити його на будь-якій веб-сторінці, загальнодоступній або вимагає автентифікації. Він перевіряє ефективність, доступність, прогресивні веб-програми тощо. Ви можете запустити Lighthouse в Chrome DevTools, з командного рядка або як модуль Node. Ви надаєте Lighthouse URL-адресу для аудиту, вона проводить низку перевірок щодо сторінки, а потім створює звіт про те, наскільки добре це зробила сторінка. Звідти використовуйте невдалі перевірки як показники того, як покращити сторінку. Кожен аудит має довідковий документ, який пояснює, чому аудит важливий, а також як це виправити.

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

Ось демонстрація звіту про аудит Маяка для цього блогу //bolajiayodeji.com

Досить круто, правда? :)

Варто зазначити, що я не отримував таких чудових балів під час першого аудиту. Мені довелося використати свій перший звіт, щоб виправити та покращити продуктивність та якість мого додатка.

Це ідея, яка стоїть за Lighthouse, вона полягає у виявленні та виправленні загальних проблем, які впливають на продуктивність ваших веб-сайтів, доступність та досвід користувачів.

Тепер перейдемо до цікавої частини, ЯК ПОЧАТИ !!

LightHouse доступний у трьох робочих процесах

  • Інструменти розробника Chrome
  • Командний рядок (вузол)
  • Розширення Chrome

Я особисто вважаю за краще використовувати LightHouse в Dev Tools. Використання розширення не має сенсу, оскільки Dev Tool і розширення працюють в одному і тому ж браузері chrome, а наші переваги різняться, використовуйте те, що найкраще підходить саме вам.

Спочатку Lighthouse був доступний лише з розширенням Chrome, перш ніж був доданий до Chrome DevTools.

Використовувати маяк у командному рядку - це теж круто, (для вундеркіндів :))

Давайте розпочнемо!!!

[1] Запустіть Маяк у Chrome DevTools

  • Завантажте веб-браузер Google Chrome тут
Зверніть увагу, що Lighthouse можна запускати лише на робочому столі, а не на мобільному
  • Перейдіть до URL-адреси, яку потрібно перевірити в Google Chrome.
Ви можете перевірити будь-яку URL-адресу в Інтернеті.
  • Відкрийте Chrome DevTools
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Клацніть на панель Аудити

Зліва - область перегляду сторінки, яка буде перевірена, ось це мій блог :). Праворуч знаходиться панель аудиту Chrome DevTools, яка тепер працює від Lighthouse

  • Клацніть на Запустити аудит
DevTools показує список категорій аудиту. Переконайтеся, що ви залишили їх усі позначеними. Якщо ви хочете персоналізувати, яку частину вашого додатка слід перевіряти, ви можете встановити це, позначивши категорії, які ви хочете перевірити.
  • Через 60 - 90 секунд - залежно від вашої потужності в Інтернеті, Lighthouse надає вам звіт на сторінці.
Не те, що швидкість вашого Інтернету та попередньо встановлені розширення можуть вплинути на перевірку маяка. Для кращого досвіду проведіть перевірки в режимі Icognitoщоб уникнути будь-яких перешкод

[2] Запустіть Маяк у командному рядку

  • Download Google Chrome web browser here
  • Download node here, If you have it installed already, skip this step!
  • Install Lighthouse
npm install -g lighthouse # or use yarn: yarn global add lighthouse
The -g flag installs it as a global module.
  • Run your audits
lighthouse 

Sample;

lighthouse //bolajiayodeji.com/

By default, Lighthouse writes the report to an HTML file. You can control the output format by passing flags.

The report can be displayed in HTML or JSON format

Output samples:

lighthouse # saves `./_.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 `./_.report.json` and `./_.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`

Run $ lighthouse --help for CLI options

[3] Run Lighthouse with the Chrome extension

As I earlier said, The DevTools workflow is the best as it provides the same benefits as the Extension workflow, with the added bonus of no installation needed.

To use this method you need to install the extension, but If you have your reasons, here is the guide;

  • Download Google Chrome web browser here
  • Install the Lighthouse Chrome Extension from the Chrome Webstore.
  • Navigate to the page you want to audit
  • Click Lighthouse Icon.
It should be next to the Chrome address bar. If not, open Chrome’s main menu (the three dots on the upper right) and access it at the top of the menu. After clicking, the Lighthouse menu expands.
  • Click Generate report.
Lighthouse runs its audits against the opened page, then opens up a new tab with a report of the results.

Bingo! You did it

That’s pretty much it, Lighthouse is a great tool, especially for beginners.

It is a very useful tool when it comes to auditing Progressive web apps.

I actually learned so much about optimization and performance standards when I started using Lighthouse. In no time you would become an expert in building full optimized web apps with great performance, accessibility and user experience. :)

Lighthouse is not magic, it was created by humans. It is open source and contributions are welcome. Check out the repository’s issue tracker to find bugs that you can fix, or audits that you can create or improve upon. The issues tracker is also a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

Thank you for reading this, after installing and using Lighthouse, share your success stories in the comments!

Also, I just launched my blog where I write articles on web and frontend development, don’t forget to visit and share!!!