Меню Закрити

Аналіз продуктивності веб-сайту за допомогою Lighthouse

Graphics Provided by www.vecteezy.com

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

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

Існує багато причин, чому вам потрібно виміряти продуктивність, але одна з найважливіших — вплив на SEO. Детальніше про це, а також про те, як розглядати певні метрики, читайте в цій статті.

Запуск Lighthouse з Chrome DevTools

Аудит ефективності можна запускати вручну за допомогою  розширення DevTools браузера  Chrome . Просто запустіть розширення з веб-сторінки, яку ви хочете перевірити, і виберіть на панелі пункт “Audits” (“аудит”).

Серед різноманітних аудитів можна вибрати “performance” (“продуктивність”). Можна також імітувати тип пристрою та тротлінг мережі. Деякі відомості про тротлінг можна знайти в проекті Lighthouse Github repo.

Натисніть кнопку Run audits (виконати аудит). Після завершення аудиту Lighthouse надає звіт у розширенні користувацького інтерфейсу.

Цей звіт є загальним оглядом важливих показників, можливостей і загальною оцінкою ефективності. Ескізи ілюструють життєвий цикл завантаження сторінки. Що це означає? Google надає безліч документів, що описують кожен із показників та методи їхнього оцінювання, а також загальний показник ефективності.

У верхній лівій частині панелі Chrome DevTools є піктограма завантаження, яку можна використовувати для завантаження звіту у форматі JSON. Після цього можна створити звіт PDF за допомогою засобу перегляду звітів Lighthouse Report Viewer.

Через велику кількість факторів, що впливають на життєвий цикл завантаження сторінки, важливо порівняти результати за групами. Узявши, наприклад, середнє значення з 5 запусків, ми отримаємо точніше уявлення.

Запуск Lighthouse програмним шляхом

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

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

Використання “Foo” для запуску Lighthouse та порівняння результатів упродовж певного часу

В інженерному середовищі, де багато розробників регулярно впроваджують зміни додатків, може бути важливо відстежувати ефективність веб-сайту з плином часу, щоб пов’язати набори змін зі зниженням чи покращенням продуктивності. Іншим прикладом можуть бути команди, які мають ініціативи для підвищення продуктивності для SEO-рейтингу або інших причин. У таких ситуаціях дуже важливо контролювати ефективність веб-сайту протягом декількох днів, тижнів, місяців тощо.

Ви можете додати URL-адреси для відстеження на www.foo.software і спостерігати за змінами продуктивності. Foo також надсилає сповіщення електронною поштою, Slack або PagerDuty, коли продуктивність опустилася нижче за граничне значення, визначене користувачем, коли вона повернулася до нормального стану й коли покращилася Усе це ідентифікується автоматично!

Найкраще те, що ви можете  створити обліковий запис безкоштовно! Після реєстрації та входу в систему натисніть посилання “Pages” (сторінки) у верхній частині навігації. Тут можна додавати URL-адреси для моніторингу. Foo зберігає результати та відображає графік часової шкали, що забезпечує візуалізацію важливих показників. Ви можете перемикати дні, тижні, місяці й деталізувати докладні звіти.

Висновок

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

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

0

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: