Як використовувати Google Lighthouse для тестування продуктивності веб-сайту – TechCult
Різне / / November 07, 2023
Коли справа доходить до підвищення рейтингу вашого веб-сайту в результатах пошукової системи, швидкість веб-сайту є фактором, який не можна ігнорувати. Це не тільки приносить задоволення користувачам, але й сприяє підвищенню видимості. Зрештою, ніхто не хоче клацати сторінку й вічно чекати, поки вона завантажиться. Ви бачите, наприклад, TechCult, наші блоги завантажуються досить швидко, чи не так? Хах, жарти вбік. Якщо ви хвилюєтеся, що ваш веб-сайт не може отримати рейтинг через низьку швидкість, Google Lighthouse тут, щоб допомогти вам. У сьогоднішній статті ми покажемо вам, як використовувати Google Lighthouse для тестування продуктивності.
![Як використовувати Google Lighthouse для тестування продуктивності веб-сайту](/f/7f811fe66422ab98c5e958550414c475.png)
Що таке Google Lighthouse і як його використовувати для тестування продуктивності?
Існує прислів’я, що перше враження – останнє. З огляду на це, часто веб-сайт, який швидко завантажується, має перевагу з точки зору кращої взаємодії з користувачем, що в кінцевому підсумку може призвести до збільшення коефіцієнтів конверсії. Навіть такі пошукові системи, як Google, ставлять веб-сайти, які швидше завантажуються, вище в результатах пошуку.
Google Lighthouse – це автоматизований інструмент із відкритим кодом, який допомагає розробникам і власникам веб-сайтів оцінювати та покращувати якість веб-сторінок. У ньому є перевірки продуктивності, доступності, найкращих практик і оптимізації пошукових систем як для мобільних пристроїв, так і для комп’ютерів. На основі детальних звітів і рекомендацій користувачі можуть оптимізувати роботу сайту для кращого залучення користувачів. Lighthouse можна запустити на будь-якій веб-сторінці, загальнодоступній чи приватній. Давайте подивимося, як це працює і як ви можете ним користуватися.
Спосіб 1: Безпосереднє додавання та запуск Lighthouse
Lighthouse також доступний для користувачів у формі розширення Google, яке ви можете завантажити, щоб запускати аудит у веб-переглядачі Chrome. Виконайте наведені нижче дії.
1. Відвідайте Сторінка веб-магазину Chrome для розширення Lighthouse у будь-якому веб-браузері.
2. Натисніть на Додати в Chrome.
![Натисніть Додати до Chrome для Google Lighthouse](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Виберіть Додати розширення підтвердити.
4. Після додавання запустіть веб-сайт у браузері, який ви хочете проаналізувати.
5. Натисніть на Значок розширення (головоломка). поруч із адресним рядком і виберіть Маяк.
6. Натисніть на Створити звіт.
![Натисніть Створити звіт. | тестування продуктивності маяка](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
Це воно! За кілька секунд Lighthouse створить детальний звіт із аналізом веб-сайту, для якого ви провели тест.
Спосіб 2. Використовуйте PageSpeed Insights
Google PageSpeed Insights також є a інструмент тестування веб-продуктивності який використовує Lighthouse як механізм аналізу. Таким чином, ви можете використовувати його для створення звітів для свого веб-сайту. Виконайте наступні дії:
1. Відвідайте PageSpeed Insights веб-сайт.
2. Введіть URL-адресу веб-сайту в текстове поле та натисніть Аналізуйте.
![Введіть URL-адресу веб-сайту в текстове поле та натисніть «Аналізувати».](/f/e87dd332ed467e60b1004f5137ae3baf.png)
Після завершення тестування ви отримаєте звіт про взаємодію з користувачем Chrome із результатами реальних користувачів.
![Результати PageSpped Insights | тестування продуктивності маяка](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
Розділ «Діагностика проблем продуктивності» представляє оцінку Lighthouse. Ви можете перевірити результати як для мобільних пристроїв, так і для комп’ютерів.
![Результати Lighthouse – діагностика проблем із продуктивністю](/f/552b36918980db18d172f623f38b0736.png)
Спосіб 3. Запустіть Lighthouse в DevTools
Lighthouse має свою панель в Google Chrome DevTools, яку ви також можете використовувати для тестування продуктивності, якщо ваш веб-сайт працює на локальному сервері або також для сайтів, які потребують входу. Ось як це зробити:
1. Відвідайте веб-сайт, який ви хочете перевірити.
2. Клацніть правою кнопкою миші будь-де на сторінці та виберіть Оглянути з меню.
![Клацніть правою кнопкою миші будь-де на сторінці та виберіть у меню Перевірити. | тестування продуктивності маяка](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Натисніть на >> значок (Більше вкладок) і виберіть Маяк з контекстного меню.
![Клацніть на (Більше вкладок) і виберіть Маяк у контекстному меню.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Натисніть на Проаналізуйте завантаження сторінки у верхньому правому куті та зачекайте, поки результати будуть готові.
Примітка: Виберіть пристрій належним чином і зберегти всі Категорії включено.
![Натисніть кнопку «Аналізувати завантаження сторінки» у верхньому правому куті та зачекайте, поки результати будуть готові.](/f/dc4311b7879bba6b28382f2e71577273.png)
Ви також можете змінити режим. Lighthouse в DevTools надає три режими тестування:
- Навігація: Відображає загальні результати, включаючи продуктивність, доступність і SEO.
![Результати навігації Lighthouse в DevTools | тестування продуктивності маяка](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Проміжок часу: Показує результати на основі того, скільки часу потрібно для завантаження сторінки та взаємодії з користувачем. Вам потрібно буде взаємодіяти зі сторінкою під час виконання тесту.
![Інструменти розробника Lightshouse Score](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Знімок: Обчислює оцінку для поточної сторінки
![Оцінка Snapshot Lighthouse DevTools | тестування продуктивності маяка](/f/446b17f9aee799792bf815ed24c365da.png)
Читайте також:31 найкращий інструмент для веб-збирання
Спосіб 4. Використовуйте модуль Lighthouse із командним рядком
Lighthouse також доступний як модуль Node, який можна інтегрувати у ваші системи безперервної інтеграції та використовувати як командний рядок або програмно. Все, що для цього потрібно, це версія вузла. Якщо у вас є Node.js інстальовано на ПК, виконайте наведені нижче дії.
1. Увійдіть на свій сервер і виконайте таку команду, щоб установити глобальний модуль Lighthouse на пристрої:
npm install -g lighthouse
2. Після встановлення виконайте таку команду, щоб виконати тест Lighthouse:
lighthouse -- view
Ви можете переглянути всі доступні параметри за допомогою наступної команди.
lighthouse --help
Як Lighthouse обчислює бали
Google Lighthouse об’єднує та оцінює різні аспекти показників ефективності веб-сайту, як-от продуктивність, доступність, найкращі методи, SEO та PWA. Після успішного аудиту створюється звіт, який містить бали для кожного аспекту, а також рекомендації щодо необхідних покращень для покращення продуктивності та взаємодії з користувачем вашого веб-сайту. Веб-сайти зазвичай оцінюються за шкалою від 0 до 100.
Продуктивність
Lighthouse аналізує швидкість завантаження веб-сторінки. Оцінка ефективності розраховується з урахуванням таких показників:
- Перше малювання вмісту (FCP): Як швидко на екрані з'являється перший елемент із вмісту
- Найбільший малюнок вмісту (LCP): Вимірює час, потрібний для того, щоб найбільший елемент вмісту став видимим
- Сукупний зсув макета (CLS): Вимірює кількість неочікуваних зсувів макета, які відбуваються під час завантаження сторінки, щоб оцінити візуальну стабільність сторінки. Низький CLS означає, що веб-сайт працює стабільно.
- Загальний час блокування: Вимірює час, протягом якого основний потік заблокований і не реагує на введення користувача.
- Індекс швидкості: Вказує, як швидко весь вміст сторінки буде повністю видимим
Ці показники вимірюють швидкість завантаження веб-сайту та візуальну стабільність. На цей звіт впливає кілька факторів, як-от розмір і кількість зображень, кількість використовуваних плагінів і ефективність коду веб-сайту.
![Оцінка ефективності Lighthouse | тестування продуктивності маяка](/f/8ca1f8c0e79108464f972ed6055d6551.png)
Lighthouse обчислює оцінку, взявши середнє зважене значення показників. Звичайно, вимірювання з вищою вагою мають більший вплив на ваш загальний показник ефективності. Оцінки показників не відображаються у звіті, а обчислюються за лаштунками. Ви можете натиснути опцію «Переглянути калькулятор», щоб отримати доступ до детального розрахунку факторів, що впливають на ваш веб-сайт.
![Lighthouse Scoring Calculator для продуктивності](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Доступність
Це оцінка, орієнтована на користувача, яка вимірює, наскільки легко користувачам з обмеженими можливостями отримати доступ до вашого веб-сайту. На нього впливають такі фактори, як наявність альтернативного тексту на зображеннях, використання атрибутів ARIA та доступність клавіатури вашого веб-сайту. Кожна перевірка доступності або пройшла, або не пройшла. Сторінка не отримує бали за часткове проходження аудиту доступності, на відміну від аудиту ефективності.
- Альтернативний текст для зображень: Усі зображення на сторінці повинні мати відповідний описовий альтернативний текст, оскільки це необхідно користувачам із вадами зору, які покладаються на програми зчитування з екрана для інтерпретації зображень.
- Семантичний HTML: Правильне використання семантичних елементів HTML, таких як заголовок, заголовки, списки тощо, допомагає програмам зчитування екрана та іншим допоміжним програмним забезпеченням зрозуміти структуру сторінки
- Колірний контраст: Колірний контраст між текстом і його фоном має відповідати стандартам, встановленим Правилами доступності веб-вмісту. Достатній колірний контраст гарантує, що текст буде читабельним для людей з поганим зором або дальтонізмом.
![Оцінка доступності Google Lighthouse | тестування продуктивності маяка](/f/b18358eef570d804cf28319111b5bc33.png)
Читайте також: Як створити веб-сайт за допомогою ChatGPT
Кращі практики
Lighthouse вимірює, наскільки добре ваш веб-сайт відповідає найкращим практикам веб-розробки та стандартам кодування, і надає на основі цього оцінку. Він перевіряє використання сучасних функцій JavaScript і безпечних з’єднань (HTTPS) і залежить від факторів такі як використання мінімізації та стиснення, наявність заголовків безпеки та використання robots.txt файли. Деякі з поширених аудитів у рамках нього включають:
- Уникайте великих бібліотек JavaScript
- Уникайте невикористаного CSS
- Увімкнути стиснення тексту
- Усуньте ресурси, які блокують рендеринг
- Використовуйте кешування браузера
- Обслуговуйте статичні ресурси за допомогою ефективної політики кешу
![Рейтинг найкращих практик Lighthouse](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO вимірює, наскільки добре веб-сайт оптимізований для пошукових систем. На нього впливають такі фактори, як наявність метаописів і тегів заголовків, використання відповідних ключових слів і структура вмісту вашого веб-сайту. Оцінка розраховується шляхом усереднення балів за наступні перевірки:
- Назва документа
- опис
- Заголовки
- Зображення
- Посилання
- Метаопис
- robots.txt
![SEO Google Lighthouse Score | тестування продуктивності маяка](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Читайте також: 27 найкращих безкоштовних послуг хостингу веб-сайтів
Як інтерпретувати результати
Lighthouse перетворює кожне необроблене значення метрики в оцінку метрики від 0 до 100. Чим вище оцінка, тим краще. Оцінки показників пофарбовані відповідно до цих діапазонів:
- Від 0 до 49 (червоний трикутник): погано
- Від 50 до 89 (помаранчевий квадрат): потребує вдосконалення
- Від 90 до 100 (зелене коло): добре
Під час виконання тестів на одному веб-сайті зазвичай спостерігаються коливання загальних балів. Цю мінливість можна пояснити кількома факторами.
- Кожен аналіз дає уявлення лише про ефективність завантаження однієї сторінки. Оскільки немає однакових завантажень двох сторінок, час завантаження, природно, може відрізнятися.
- На швидкість сторінки може впливати наявність динамічного вмісту, наприклад реклами або елементів, що часто змінюються, розширень браузера, які змінюють мережеві запити, і фонової активності на ПК.
- Оцінки, отримані в різних середовищах, таких як PageSpeed Insights і на вашому локальному комп’ютері, можуть бути непрямими для порівняння через відмінності в апаратному забезпеченні та умовах мережі.
Як покращити свій бал Lighthouse
Lighthouse надає як лабораторні дані (модельовані тести), так і польові дані (реальні дані користувача) для оцінки продуктивності веб-сторінки. Польові дані дають зрозуміти, як фактичні користувачі відчувають сайт, а лабораторні дані корисні для тестування змін і вдосконалень.
![Веб-дизайн](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Почніть із зосередження на рекомендаціях у сфері ефективності. Веб-сайт із швидшим завантаженням покращить взаємодію з користувачем і може підвищити ваш рейтинг SEO. Коли ваш показник ефективності покращиться, ви можете почати зосереджуватися на рекомендаціях в інших областях. Оскільки доступність і пошукова оптимізація є важливими компонентами загальної якості вашого веб-сайту, варто докласти зусиль і для покращення цих напрямків.
Читайте також: Zyro проти Wix: який конструктор веб-сайтів вибрати?
Бонусні поради для початківців
Якщо ви щойно розробили та запустили свій веб-сайт, ось ще кілька вказівок, які ви можете зберегти:
- Нехай вас не засмучують численні пропозиції звіту Lighthouse. Почніть з найважливіших порад і рухайтеся вниз по списку.
- Звіт Lighthouse можна використовувати для відстеження вашого розвитку з часом. Ваші рейтинги Lighthouse повинні покращитися, коли ви виконаєте рекомендації.
- Не забудьте перевірити свій веб-сайт на багатьох пристроях і в багатьох браузерах. Оскільки звіт Lighthouse базується на одному тесті, дуже важливо протестувати свій веб-сайт на кількох пристроях і в кількох браузерах, щоб переконатися, що він добре працює для всіх користувачів.
Сподіваємось, наш посібник допоміг вам зрозуміти, як користуватися Google Lighthouse для тестування продуктивності вашого веб-сайту і тим самим покращуючи його. Якщо у вас є якісь запитання чи пропозиції до нас, повідомте нас у розділі коментарів. Слідкуйте за оновленнями TechCult, щоб отримати більше таких інформативних блогів.
Генрі — досвідчений технічний письменник із пристрастю робити складні технологічні теми доступними для звичайних читачів. Маючи понад десятирічний досвід роботи в індустрії технологій, Генрі став надійним джерелом інформації для своїх читачів.