12 листопада Google без гучних анонсів і прелюдій випустив оновлення PageSpeed Insights – інструменту для оцінки швидкості завантаження сайтів. Все б нічого, але це – перша масштабна зміна сервісу з січня 2018 року, коли до нього були включені дані Chrome User Experience Report.
Оновлення кардинально змінює сам підхід до аналізу сторінок: тепер загальна оцінка швидкості грунтується на даних Lighthouse, метрики часу завантаження у секундах відображаються для будь-якого сайту, а у звіті з'явилося безліч нових параметрів і рекомендацій. Втім, про все по порядку.
Уже зараз можна спостерігати, що оцінки продуктивності багатьох сайтів істотно змінилися, особливо для мобільних пристроїв. Змінилася навіть сама шкала: «низька», «середня» і «добра» оптимізація тепер займають інші числові діапазони. Чого чекати від цього оновлення? Чи варто панікувати від того, що ваш сайт тепер оцінюється гірше?
Як було раніше: інтерфейс PageSpeed Insights до оновлення
До виходу оновлення звіт інструменту виглядав так:
У цій статті ми вже розбиралися, як ним користуватися та яку інформацію можна з нього отримати, тому тут лише коротко перерахуємо секції, з яких складався старий інтерфейс:
- оцінка швидкості завантаження від 0 до 100;
- дані Звіту про зручність користування Chrome, доступні лише для достатньо відвідуваних сайтів, з двома метриками швидкості (First Contentful Paint і DOM Content Loaded) та їх статистичним розподілом;
- коротка інформація про завантаження сторінки: обсяг переданих даних і число звернень до сервера;
- список правил PageSpeed Insights (усього існувало 10 правил), які не дотримано на цій сторінці, з пропозиціями щодо оптимізації;
- список дотриманих правил, за якими можливості для прискорення практично відсутні.
Як стало тепер: оновлений інтерфейс PageSpeed Insights
Після оновлення сервіс набув такого вигляду:
Як бачимо, структура звіту змінилася і містить наступні секції.
1. Оцінка швидкості завантаження
На перший погляд, система залишилася такою, як була: три кольори, три діапазони. Однак, зміни торкнулися шкали. Порівняємо старі та нові оцінки у вигляді таблиці:
|
Колір діапазону |
Стара характеристика |
Старий діапазон |
Нова характеристика |
Новий діапазон |
|
Зелений |
Good (Добре) |
80 – 100 |
Fast (Висока швидкість) |
90 – 100 |
|
Жовтий |
Medium (Середньо) |
60 – 79 |
Average (Середня швидкість) |
50 – 89 |
|
Червоний |
Low (Низько) |
0 – 59 |
Slow (Низька швидкість) |
0 – 49 |
Таким чином, навіть самі назви показників говорять про зміну підходу: акцент робиться не на рівень оптимізації, як раніше, а саме на швидкість. Про це ще поговоримо нижче. Забігаючи наперед, варто сказати: нова оцінка не дорівнює старій, оскільки виводиться на підставі інших параметрів.
2. Дані спостережень (англ. Field Data)
Це, по суті, все та сама інформація з Chrome User Experience Report. Побачити її можна, як і раніше, лише для тих сайтів, за якими достатньо статистичних даних. Метрика FCP (First Contentful Paint) залишилася, а ось на зміну DOM Content Loaded (DCL) прийшов параметр First Input Delay (FID). Ця метрика показує час, який проходить між першим взаємодією користувача з сайтом (натисканням на посилання, кнопку і т.д.) і моментом, коли сайт відповідає на це дію. Ймовірно, у Google вирішили, що цей параметр є більш показовим, якщо мова йде про статистику роботи реальних користувачів з веб-ресурсом.
Окрім цього, внизу секції можна побачити кнопку «Show Origin Summary». Це – новий і більш зручний спосіб подивитися усереднені дані по сайту в цілому, не набираючи перед адресою сайту спеціальну команду. Детальніше про те, як ця функція працювала раніше, можна прочитати тут.
3. Імітація завантаження сторінки (англ. Lab Data)
Тут містяться метрики швидкості, отримані інструментом Lighthouse шляхом емуляції завантаження сторінки в умовах 3G-мережі. Головна відмінність від старого інтерфейсу – всі метрики виражаються у секундах, тобто для будь-яких сайтів тепер видно інформацію про час завантаження, чого не було раніше. Варто, однак, пам'ятати: це лише емуляція, і у реальних користувачів ці показники можуть відрізнятися як у більшу, так і в меншу сторону.
Всього в цій секції 6 показників:
- Час завантаження першого контенту (First Contentful Paint). Це та сама метрика, що доступна в секції Field Data, тільки тепер – отримана в «лабораторних» умовах. Показує час від початку завантаження до моменту, коли на екрані з'явиться хоча б один елемент сторінки;
- Час завантаження достатньої частини контенту (First Meaningful Paint). Показує час від початку завантаження до моменту появи основного вмісту сторінки: відтворення першого екрану, який бачить користувач (above-the-fold-контенту) і завантаження веб-шрифтів;
- Індекс швидкості завантаження (Speed Index). Показує, наскільки швидко контент сторінки стає доступний для перегляду. Визначається шляхом покадрового порівняння як момент, коли сторінка перестає змінюватися візуально;
- Час закінчення роботи ЦП (First CPU Idle). Це період часу до моменту, коли основний потік сторінки звільняється настільки, що вона може реагувати на дії користувача. Мається на увазі, що більшість елементів сторінки (але не всі) вже інтерактивні, і сторінка відповідає на дії користувача за прийнятний час;
- Час завантаження для взаємодії (Time to Interactive). Показує час, за який сторінка повністю завантажується і готова до взаємодії з користувачем: зареєстровані обробники подій для більшості видимих елементів, час відповіді на дії користувача становить не більше 50 мілісекунд;
- Приблизний час затримки при введенні (Estimated Input Latency). Показує усереднений час реакції сторінки на дії користувача в найбільш зайняті 5 секунд під час завантаження. Якщо ця величина перевищує 50 мілісекунд, то користувачі можуть відчувати, що ваш сайт гальмує.
Ці метрики не нові і з'явилися в арсеналі Lighthouse вже досить давно. Разом вони дозволяють комплексно оцінити продуктивність сторінки: не лише те, наскільки швидко вона завантажується, але і здатність відповідати на взаємодії та швидкість таких відповідей.
Важливо зазначити: сумарна оцінка за шкалою від 0 до 100, яка з'являється в першій секції, розраховується саме на підставі цих шести метрик (якщо бути точніше, то лише п'яти з них – Estimated Input Latency не враховується). При цьому показники мають різну вагу, яку можна подивитися тут: Time to Interactive – найважливіший, First Meaningful Paint – найменш суттєвий. Розрахунок відбувається наступним чином:
- значення кожної метрики в секундах порівнюється з аналогічними показниками сайтів з бази HTTP Archive;
- часовий показник переводиться у 100-бальну шкалу на основі логарифмічного розподілу (чим вищий відсоток сайтів, у яких ця метрика гірша, тим більшою буде оцінка);
- 5 отриманих оцінок усереднюються з урахуванням ваги кожної метрики, що формує підсумкову оцінку сторінки.
4. Оптимізація (Opportunities), Діагностика (Diagnostics) та Успішні аудити (Passed audits)
Три нижні секції звіту відповідають старій секції з рекомендаціями, однак на зміну колишнім 10 правилам прийшли 22 аудити продуктивності Lighthouse – показники, знову ж таки, не нові, але вони перейшли у PageSpeed Insights лише зараз. Жоден з показників у цьому розділі не враховується під час розрахунку підсумкової оцінки; вони мають лише характер порад: що конкретно можна виправити на вашій сторінці, щоб поліпшити її продуктивність. Виглядають ці секції так:
У розділі “Оптимізація” виводяться поради, для яких розраховується приблизна оцінка економії часу завантаження в секундах. Для порівняння, раніше економія відображалася лише в кілобайтах трафіку, і для перегляду потрібно було розгортати кожну пораду. Цю інформацію так само можна подивитися і зараз. Багато рекомендацій у цій секції пов'язані з малюнками, а також з усуненням файлів, які блокують рендеринг:
- налаштуйте відповідний розмір зображень;
- відкладіть завантаження прихованих зображень;
- використовуйте сучасні формати зображень;
- відкладіть завантаження невикористаного контенту CSS;
- усуньте ресурси, які блокують відображення і т.д.
Інші рекомендації, ефективність яких важче оцінити в секундах, потрапляють до секції “Діагностика”. Розгорнувши кожну з них, ви також можете отримати більш докладні відомості: наприклад, потенційну економію трафіку, яку принесе кешування тих чи інших файлів або використання відкладеного завантаження для певних скриптів.
Усі аудити, які Lighthouse вважає успішно виконаними для даної сторінки (тобто, можливостей для прискорення за ними практично немає) потрапляють до секції “Успішні аудити”.
Що це все означає?
В першу чергу – те, що Google вирішив змістити акценти в PageSpeed Insights. Раніше йшлося про абстрактну «оптимізацію», яка хоч і показувала, наскільки швидко або повільно працює ваша сторінка, але не давала уявлення про реальну швидкість; тепер же можна подивитися конкретні величини, виражені в одиницях часу, і побачити, що, наприклад, після стиснення малюнків сторінка стала завантажуватися на 2 секунди швидше. Будемо сподіватися, що це стане важливим кроком у бік реального прискорення інтернету замість гонитви за абстрактними показниками, якою часто захоплюються власники сайтів.
Ще одна можлива причина оновлення – прагнення не відставати від розвитку інших сервісів компанії. Так, нещодавно Google випустив посібник з lazy loading: якщо дотримуватися рекомендацій, наведених у ньому, то пошукова система повинна «бачити» контент, що завантажується відкладено. У PageSpeed Insights з'явився відповідний аудит: «Відкладіть завантаження прихованих зображень», де рекомендується застосувати принцип «ледачого завантаження».
Варто звернути увагу і на те, що оновлення розширює саме поняття «швидкість сайту»: на оцінці позначається не лише час, за який ми можемо побачити сторінку та її елементи, а й готовність цих елементів до роботи, їх здатність реагувати на наші дії. У Lighthouse це непогано описується словом Performance (Продуктивність).
Однак, у роботі оновленого інструменту поки що ясно не все. Можна помітити, що для багатьох сайтів оцінки швидкості на мобільних пристроях стали нижчими, навіть з урахуванням зміненої шкали: ресурси, які раніше отримували тверді «середні» оцінки (жовта зона), тепер характеризуються як «повільні» (червона). У той самий час, оцінки для настільних комп'ютерів помінялися не так суттєво і місцями навіть покращилися.
У перші дні після оновлення навантаження на інструмент може зрости, адже бажаючих подивитися зміни побільшає. Тому, якщо ви не можете перевірити свій сайт, просто почекайте якийсь час.
Не варто піддаватися паніці, якщо ви бачите, що оцінка швидкості вашого сайту значно впала: швидше за все, це викликано змінами алгоритму і ніяк не пов'язано з самим сайтом. Не слід вчиняти необачних дій, особливо якщо не впевнені в їх правильності і не володієте потрібними технічними знаннями: так ви ризикуєте не поліпшити роботу сторінок, а навпаки, завдати їм шкоди. Краще, знову ж таки, почекати: можливо, механізми перевірки PageSpeed Insights будуть ще доопрацьовуватися найближчим часом, якщо будуть виявлені які-небудь помилки.
Якщо ви зрозуміли, що ваш сайт необхідно прискорити, і без допомоги фахівців не обійтися, то веб-агентство ARTO готове запропонувати вам свої послуги. Звертайтеся, ми завжди раді допомогти!
