Блог / Статті14 листопада 2018

Google PageSpeed Insights оновився. Як це відіб’ється на оцінках сайтів?

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 готове запропонувати вам свої послуги. Звертайтеся, ми завжди раді допомогти!

Микола Ашпін
SEO, редактор блогу
Займаюсь копірайтингом з 2014 року, SEO – з 2017. Цікавлюся сучасними тенденціями інтернет-маркетингу та пошукової оптимізації, а також можливостями інструменту Google My Business, досвідом використання якого ділюся на семінарах та конференціях. Якщо у вас є питання щодо цієї статті, будь ласка, напишіть на пошту nikolay@arto.agency.

Дізнавайтеся про важливе першими!

Навчальні матеріали, важливі новини, огляди. Ми пишемо вам тоді, коли дійсно є що сказати
КОМЕНТАРІ
КОМЕНТУВАТИ
УВІЙТИ
  • Facebook
  • Twitter
RUSFET.BIZ
16 листопада 2018, 15:26
Спасибо за статью. Тоже заметил, оценка скорости на мобильных устройствах стала в некоторых случаях намного ниже, чем была ранее. Будем наблюдать ...
ЦЕЙ САЙТ ВИКОРИСТОВУЄ COOKIES
Ми використовуємо cookies для аналізу трафіку, забезпечення функцій соціальних мереж і роботи системи коментування на сайті. Список встановлюваних cookies знаходиться на цій сторінці. Чи згодні ви на установку cookie?