Після появи Lighthouse у нашому житті зросла кількість критеріїв ефективності, які безпосередньо впливають на такі теми, як UX і SEO. Оцінки, зроблені шляхом перегляду кількох точок на сторінці в старих налаштуваннях Google Pagespeed, були вдосконалені за допомогою методів, розроблених інженерами Google протягом багатьох років. У цій статті ми спробуємо дослідити, як розраховується бал Lighthouse.
Станом на 2024 рік критерії продуктивності для Lighthouse версії 10 такі:
- Перше фарбування вмісту - 10%
- Індекс швидкості - 10%
- Найбільше малювання вмісту - 25%
- Загальний час блокування - 30%
- Сукупний зсув макета - 25%
Найзначнішим нововведенням у порівнянні з попередньою версією Lighthouse 5 є додавання CLS (Cumulative Layout Shift). Цей показник, який станом на червень 2024 року був оголошений важливим критерієм ефективності для SEO, може стати дуже критичним у найближчі роки.
Lighthouse також підготував інструмент, який заздалегідь показує вам, якого результату ви можете досягти, ввівши цілі швидкості сторінки. Ви можете отримати доступ до Інструмент підрахунку балів Lighthouse тут.
Якщо ви запитуєте, на яких числових діапазонах базується кодування кольорів, ви можете перевірити діапазони нижче. Зелений колір у цих оцінках означає, що ви досягли успіху:
- 0-49 (погано): червоний
- 50-90 (потребує доопрацювання): помаранчевий
- 90+ (добре): зелений
Оцінки різняться для сайтів для мобільних пристроїв і настільних комп’ютерів, але якщо мобільний трафік перевищує 75%, оцінки проводяться на основі рейтингу для мобільних пристроїв.
Ви можете зустріти різні результати в кожному тесті Lighthouse. Деякі причини цього включають оголошення та типи оголошень на сторінці, A/B-тестування на сайті, миттєві зміни в інтернет-трафіку, а також миттєві ситуації, які можуть виникнути на сервері.
Найпростіший спосіб виконати тест Lighthouse — це використовувати браузер Chrome. Увійдіть у меню «Перевірити», натисніть вкладку «Маяк», а потім натисніть кнопку «Створити звіт». Розрахунок, який займе близько 8-10 секунд, виконується з урахуванням різних пристроїв і швидкості Інтернету.
джерело: https://web.dev/performance-scoring/
