Технології розвиваються стрімко: інтернет сьогодні помітно відрізняється від того, що був лише декілька років тому. Але що залишається незмінним, то це значення швидкості завантаження сайту для його ефективності. Компанія Google теж не стоїть на місці: нещодавно вони серйозно змінили свій інструмент PageSpeed Insights. Багатьох вебмайстрів та власників бізнесу це спантеличило: що робити тепер? Наскільки змінився підхід до прискорення?
Раніше ми вже публікували дві статті, присвячені цьому популярному інструменту перевірки швидкості веб-сторінок:
- перша з них розповідає про роботу зі старою версією PageSpeed Insights і грамотний аналіз отриманих результатів. З того часу інструмент сильно змінився, але принципи інтерпретації результатів, які він пропонує, багато в чому залишилися такими, які раніше;
- у другій статті, що була випущена невдовзі після оновлення, ми зробили огляд змін, які торкнулися інтерфейсу і механізмів роботи сервісу.
Тепер, коли минуло вже достатньо часу, і загальна картина дещо прояснилася, настав час розібратися: як аналізувати сайт в актуальній версії інструменту? До яких рекомендацій потрібно обов'язково прислухатися, що можна проігнорувати і як не зробити гірше у прагненні покращити свій веб-ресурс?
Особливості нового інтерфейсу PageSpeed Insights
Дуже детальний аналіз звіту нової версії та його відмінностей від старої ми вже робили у попередній публікації, тому тут лише коротко перерахуємо, що він нам пропонує. Якщо ви вже добре знайомі з інтерфейсом, то можете пропустити цей текст і відразу перейти до наступного розділу.
- Оцінка швидкості завантаження. На перший погляд – така сама, як раніше, від 0 до 100, але насправді змінилося практично все:
- діапазони шкали, що відповідають «хорошим» і «поганим» оцінкам (наприклад, оцінка «добре» тепер починається з 90, а не з 80 балів);
- механізм підрахунку підсумкового значення (тепер він заснований на метриках Lighthouse);
- фактичні числа практично для всіх сайтів.
- Дані спостережень, або Field Data, вони ж – відомості зі Звіту про зручність користування Chrome (CrUX).
- Як і раніше, доступна лише для сайтів, які є в базі CrUX.
- Як і раніше, можна подивитися усереднені показники швидкості по всіх сторінках ресурсу (origin).
- Дані тестів, або Lab Data. 6 метрик швидкості, яких раніше не було в PageSpeed Insights.
- Виражені у секундах.
- Показуються абсолютно для всіх сайтів.
- Отримані в результаті емуляції інструментом Lighthouse.
- Саме ці метрики (і лише вони) є основою для розрахунку підсумкової оцінки сайту за 100-балльною шкалою (пункт 1).
- Аудити продуктивності Lighthouse (всього 22 штуки). Замінили собою 10 правил старого інтерфейсу. Розбиті на 3 секції:
- «Можливості» – аудити рекомендаційного характеру («виправте це, і сайт імовірно завантажиться на n секунд швидше»);
- «Діагностика» – констатації фактів («на сайті виявлено ...; можливо, це його уповільнює»);
- «Виконані перевірки» – за цими пунктами проблем на сайті не виявлено.
Декілька зауважень
- Ще раз нагадаємо, що оцінка за стобальною шкалою, яка виводиться вгорі звіту, стосується лише тієї сторінки, адресу якої ви ввели у рядок інструменту, і не дає уявлень про продуктивність всього сайту. Щоб оцінити свій сайт більш глобально, вам варто перевірити декілька типових сторінок, наприклад, в інтернет-магазині – головну, сторінку категорії, картку товару, сторінку контактів, інформацію про доставку та ін.
- Оцінки в новій версії не такі стабільні, як у старій, принаймні поки що. Кілька перевірок тієї самої сторінки найчастіше дають різні результати: за нашими спостереженнями, розкид досягає 5-7 пунктів, а можливо й більше. Тому, щоб уникнути похибок і отримати більш точне уявлення про оптимізацію, краще перевіряти кожну сторінку хоча б 2-3 рази. Врахуйте, що дані звіту кешуються на 30 секунд, тому між перевірками має пройти принаймні півхвилини.
Що можна дізнатися з секції “Дані спостережень”?
Якщо ваш сайт відвідує досить багато користувачів Google Chrome, то у цьому розділі ви побачите наочні діаграми. Зеленим, жовтим і червоним на них показані відсотки від загального числа користувачів, у яких зазначена метрика оцінена як «швидко», «середньо» або «повільно» відповідно. Число над графіком показує середнє значення метрики по всіх відвідувачах; воно також забарвлене у відповідний колір.
- Метрика FCP (First Contentful Paint, Перша візуалізація вмісту) відображає момент, коли користувач бачить хоча б один змістовний елемент сторінки. Цей показник важливий тим, що відвідувач у цей момент зазначає: сайт дійсно завантажується, працює. Людина з меншою ймовірністю залишить ресурс, якщо це число знаходиться в межах норми.
- First Input Delay (FID, Перша затримка введення) показує час між першою взаємодією користувача зі сторінкою (наприклад, натисканням на кнопку) і відповіддю сайту на нього. Цей параметр описує інтерактивність ресурсу: якщо його значення занадто велике, то відвідувачі будуть відчувати, що сайт «гальмує», працює з затримкою.
Дані, які ви бачите в цьому розділі, дуже цінні тим, що вони відображають швидкість сайту у вашої реальної аудиторії. Так, наприклад, за умов 3G-з'єднання ваші сторінки можуть працювати трохи повільно, але якщо більшість користувачів відвідує сайт з комп'ютера або використовує Wi-Fi на мобільних пристроях, то вони можуть і не помітити ніяких проблем.
Таким чином, якщо за «Даними спостережень» ви бачите відмінні оцінки, а за 100-бальною шкалою потрапляєте до «жовтої» зони, то, швидше за все, намагатися «дотягнути» оцінку до «зеленої» зони немає сенсу.
Як аналізувати метрики з секції “Дані тестів”?
Що показує кожен з параметрів, перерахованих в цьому розділі, ми вже розбирали тут. Тепер спробуємо з'ясувати, як можна застосувати їх на практиці.
Приклад розділу «Дані тестів»
У першу чергу варто зрозуміти: в новій версії PageSpeed Insights змінилися акценти при аналізі сайтів. Раніше на оцінку впливав переважно час відтворення сторінки: швидко чи повільно з'являється контент на екрані користувача. Звідси виникали ситуації, коли можна було домогтися високих і навіть максимальних оцінок, перенісши більшість скриптів до самого низу сторінки. Контент відображається швидко, старий PageSpeed Insights не бачить ніяких проблем, для користувача на перший погляд теж все добре, доки він не почне натискати на кнопки або інші інтерактивні елементи: скрипти, що відповідають за їхню працездатність, завантажуються за такого сценарію після всього іншого вмісту. Цей факт зазначений і в офіційній довідці PageSpeed Insights.
Деякі сайти оптимізують видимість контенту на шкоду інтерактивності. Це може створювати користувацький досвід, що розчаровує. Сайт здається повністю завантаженим, але, коли користувач намагається взаємодіяти з ним, нічого не відбувається.
Тепер оцінки інструменту враховують не лише власне швидкість завантаження, але й показники інтерактивності сторінки, її готовності відповідати на запити користувача. Саме за інтерактивність відповідають такі метрики, як Перший простій ЦП (First CPU Idle) і Час до повної взаємодії (Time to Interactive). Згідно таблиці від авторів інструменту, перша з них має вагу 2 при підрахунку, тоді як друга – вагу 5, що є максимумом, тобто вона робить найбільший внесок у підсумкову оцінку.
Щоб зрозуміти, як та чи інша метрика впливає на загальну продуктивність вашого сайту, ви можете скористатися калькулятором. Збережіть копію таблиці на свій Google Диск: після цього ви зможете замінювати наведені в таблиці значення на ті, що отримали під час перевірки власного сайту, і редагувати їх. Зверніть увагу, що числа потрібно вводити у мілісекундах. Таким шляхом можна легко зрозуміти, як вплине на підсумкову оцінку, наприклад, зменшення показника First Meaningful Paint на 0,5 секунди.
Зразок скопійованого калькулятора. Рамкою виділені значення, які можна редагувати; справа від них – розрахована підсумкова оцінка за 100-бальною шкалою
Коли ви зрозуміли, які з метрик мають найбільший внесок в уповільнення сторінок, можна вивчити їх більш детально. Пройдемося по кожному з показників, щоб усвідомити, про що можуть свідчити їхні високі значення та як їх можна зменшити.
- Час завантаження першого вмісту (First Contentful Paint). «Червоні» цифри у цій графі часто говорять про те, що на сторінці є ресурси, які гальмують рендеринг. Поліпшити цей показник можна, оптимізувавши доставку файлів JavaScript і CSS. Крім того, тут може допомогти включення кешування ресурсів і стиснення у форматі GZip.
- Перше значне відображення (First Meaningful Paint). Проблеми з цим показником зазвичай свідчать про недостатню оптимізацію завантаження контенту на першому екрані (above-the-fold content). Налаштувавши Critical Rendering Path, тобто встановивши правильну послідовність завантаження необхідних ресурсів, ви, швидше за все, поліпшите цю метрику.
- Індекс швидкості (Speed Index). На це число впливає, переважно, той самий Critical Rendering Path, що і в попередньому пункті, а також оптимізація розміру ресурсів: стиснення зображень, мініфікація HTML, JS і CSS.
- Перший простій ЦП (First CPU Idle). Фактори, що впливають на цей показник, схожі з попереднім пунктом: оптимізація послідовності завантаження файлів та їх розміру. Однак, тут важливий вже не час відтворення контенту, а готовність сторінки відповідати на дії користувача, тому внесок оптимізації тих чи інших ресурсів може відрізнятися.
- Час до повної взаємодії (Time to Interactive). Цей показник залежить від цілого комплексу чинників, але найважливішу роль для нього відіграє оптимізація JavaScript, оскільки саме працездатність скриптів дуже важлива для готовності сторінки до взаємодії з користувачем.
- Приблизна затримка введення (Estimated Input Latency). Хоча цей параметр не враховується при розрахунку загальної оцінки сайту, його також варто оптимізувати. На нього впливає оптимізація рендерингу сторінки шляхом правильної організації CSS-файлів і розвантаження головного потоку. Детальніше прочитати про це можна в інструкції від Google.
Таким чином, ви зможете приблизно зрозуміти, які саме аспекти вашого сайту потребують поліпшення. Щоб отримати докладніші відомості, наприклад, які файли уповільнюють сторінку та який обсяг трафіку імовірно дозволить заощадити їх оптимізація, перейдіть в наступний розділ.
Поради з секцій “Можливості” і “Діагностика”: чи потрібно до них прислухатися?
Принцип організації цих секцій у цілому залишився схожим на старий розділ з рекомендаціями: кожну з порад можна розгорнути та переглянути більш докладні відомості. Основна різниця з попереднім інтерфейсом полягає в тому, що для правил з розділу «Можливості» тепер видно в першу чергу потенційну економію за часом завантаження, що оцінена у секундах. Червоні цифри та шкала означають зауваження, на які варто звернути увагу перш за все, тоді як жовтий колір – менш суттєві поради.
Важливо зазначити: дані, представлені у цих розділах, не мають прямого впливу на підрахунок оцінки швидкості сайту за 100-бальною шкалою. Виконання вказаних порад з оптимізації поліпшить ваш сайт лише гіпотетично, а оцінки економії у секундах або кілобайтах розраховані приблизно. Тому не варто сліпо виконувати ці рекомендації, а тим більше не варто орієнтуватися лише на них, ігноруючи дані секцій, розташованих вище.
Розглянемо приклад звіту вище. На скріншоті видно, що у сайту «відмінна» загальна оцінка швидкості; всі метрики з розділу «Імітація завантаження сторінки» мають хороші або середні значення. Водночас перша порада, яку ми бачимо в секції «Можливості» – використовувати сучасні формати зображень – показує можливу економію в 10,8 секунди. Погляньмо ще раз на показники швидкості завантаження: за 4,7 секунди сторінка вже повністю готова до взаємодії, тобто «прискорити» її на 10,8 секунди ніяк не вийде. Це число явно перебільшене і пов'язане, скоріш за все, з великою кількістю зображень на сторінці, які, проте, завантажуються досить швидко.
Таким чином, до рекомендацій аудитів варто прислухатися, проте з певною часткою скепсису. Вони однозначно допомагають зрозуміти, що саме потрібно зробити з вашим сайтом для прискорення, але під час їхнього аналізу завжди варто звірятися з «Даними тестів» і «Даними спостережень» (якщо вони є), щоб не зробити зайвої роботи, яка виявиться у підсумку практично марною.
Підводимо підсумок: як же аналізувати сайт?
- Перевірте типові сторінки, кожну по кілька разів, і перегляньте глобальні оцінки продуктивності. Якщо все у «зеленій зоні», то, скоріш за все, не варто турбуватися.
- Перегляньте «Дані спостережень», якщо вони доступні, порівняйте інформацію із загальною оцінкою. Якщо у переважної більшості користувачів сайт завантажується швидко, то все в порядку.
- Проаналізуйте метрики з «Даних тестів». Якщо не всі вони «зелені», спробуйте зрозуміти, яка є найбільш «проблемною».
- Перегляньте поради «Можливостей» і «Діагностики», але не панікуйте, якщо щось відображається червоним: можливо, вони не зовсім вірні. Звіряйтеся з іншими даними.
- Спробуйте розібратися, який обсяг роботи потрібно виконати: наприклад, лише стиснути зображення, або ж оптимізувати розміщення на сторінці скриптів, стилів, форматування коду. У другому випадку, швидше за все, знадобиться участь розробників.
Якщо ви зрозуміли, що ваш сайт необхідно прискорити, і без допомоги фахівців не обійтися, то веб-агентство ARTO готове запропонувати вам свої послуги. Звертайтеся, ми завжди раді допомогти!
