На початку квітня Google знову посилив вимоги до мобільних версій сайтів — тепер вашому SEO-експерту доведеться підняти планку, щоб досягти бажаних високих результатів у Google PageSpeed Insights.
Якщо ви не знаєте, що являє собою цей сервіс від Google і чому він важливий, читайте далі. У цій статті ми розповімо про те, які маркетингові методи та рядки в коді можуть негативно позначитися на репутації вашого інтернет-проєкту в очах Google, і що можна зробити, щоб виправити ситуацію. Також ми проведемо цікавий експеримент, перевіривши популярні онлайн-чати та їхній вплив на швидкість завантаження сайтів, оскільки такі онлайн-помічники тепер практично скрізь. Оберіть для себе найменш ресурсомісткий варіант.
Що таке Google PageSpeed Insights (і чому всі його бояться)
PageSpeed Insights (GPSI) — це сервіс Google для оцінювання швидкості завантаження вебсторінок. Він оцінює вебсайти за шкалою від 0 до 100 і пропонує рекомендації щодо покращення в тих сферах, де є проблеми.
Ось для чого слугує кожен із показників:
- First Contentful Paint (перше відображення контенту) – це проміжок часу між початком завантаження сторінки та моментом появи першого зображення або текстового блоку.
- Speed Index (індекс швидкості завантаження) – показує, наскільки швидко контент сторінки стає видимим.
- Largest Contentful Paint (відображення найбільшого контенту) – час, за який відображається найбільший елемент на першому екрані: зображення або блок тексту.
- Total Blocking Time (загальний час блокування) – скільки часу після першого відображення сторінка не реагує на дії користувача через виконання скриптів.
- Cumulative Layout Shift (сукупне зміщення макета) – наскільки сильно елементи сторінки зсуваються під час завантаження.
Розробники сайтів ставляться до GPSI по-різному (можна перевірити проєкт десять разів і отримати різні результати, що відрізняються на ± 15 балів). Але Google це не надто турбує — швидкість сайту за даними цього сервісу впливає на позиції в пошуковій видачі, тому для більшості власників вебпроєктів і SEO-фахівців ця оцінка стає однією з найважливіших.
Що впливає на швидкість у PageSpeed Insights
Загальний розмір скриптів JavaScript
Навіть якщо десктопна версія вашого сайту працює чудово, для мобільної версії діють зовсім інші правила: 1 секунда очікування роботи скриптів на ПК може перетворитися на 5 на мобільному пристрої. Найсумніше те, що з’ясувати, який саме скрипт уповільнює завантаження сторінки, буває досить складно.
Різні інструменти аналітики поведінки користувачів на сайті, які SEO-фахівці та маркетологи дуже люблять, тягнуть за собою безліч скриптів, що збільшує вагу сторінки та знижує загальний бал сайту в GPSI (переводить його в жовту або червону зону).
Вбудовування відео YouTube через <iframe>
Навіть якщо відео не відтворюється автоматично під час завантаження сторінки, воно все одно збільшує її вагу. Якщо на сторінці кілька таких відео, ви можете одразу зменшити загальний показник швидкості завантаження на 30-40 балів.
Плагіни та анімовані елементи
Багато плагінів здатні значно обтяжити роботу вебсторінки та погіршити її показники в GPSI. Прикладом є слайдери, які так обожнюють вебдизайнери. Якщо на сторінці їх більше двох, то потрапляння в жовту зону майже неминуче. Ситуація погіршується, якщо згідно з дизайнерською концепцією кожен із 20 товарів на сторінці каталогу має свій слайдер із трьома зображеннями, які перемикаються під час наведення курсора. Якщо один такий слайдер завантажується, скажімо, 0,3 секунди, то час завантаження всієї сторінки каталогу можна сміливо збільшувати у 20 разів.
Використання Google Tag Manager
Google Tag Manager – це інструмент Google для керування JavaScript- і HTML-тегами, які використовуються для відстеження та аналізу на вебсайтах. Наприклад, це можуть бути зворотні дзвінки, метрики, чати та інші інструменти, які так люблять маркетологи. Він може об’єднувати велику кількість сторонніх скриптів, і що їх більше, то нижчий ваш рейтинг у GPSI. Тому варто ретельно подумати, перш ніж встановлювати одразу 10 таких “трекерів” на одному проєкті.
Онлайн-чати
Вони поводяться по-різному, але всі вони тією чи іншою мірою уповільнюють швидкість завантаження сторінки, оскільки завантажують власні скрипти, а також зображення та смайли. Одне з можливих рішень – спочатку завантажити сторінку, а потім, після її повного завантаження, завантажити скрипт чату (хоча й тут можуть бути проблеми).
Як збільшити швидкість завантаження сайту та потрапити в “зелену зону”
Використовуйте CDN
Це може допомогти зменшити час завантаження для користувачів, які перебувають далеко від вашого сервера, хоча ця технологія не є універсальним рішенням.
Застосовуйте AMP
Дехто вважає, що Google особливо наголосив на швидкості завантаження, щоб просувати свій проєкт Accelerated Mobile Pages (AMP) (де дозволена лише реклама від Google). Однак це припущення не підтверджене 🙂
Стискайте зображення
Це базове правило для контент-менеджерів, яке, на жаль, багато хто ігнорує. Стиснення зображень без втрати якості зменшує їхній розмір. Для цього можна використовувати сервіси TinyPNG або Optimizilla.
Використовуйте зображення у форматі WebP
Це сучасний формат, розроблений Google, який важить менше, ніж PNG і JPEG. Конвертувати зображення в цей формат можна за допомогою сервісу Online-Convert.
Застосувати модуль ngx_pagespeed
Цей модуль від Google дає змогу не дбати про ручне стиснення зображень і їх конвертацію в потрібний формат. Він пришвидшує роботу сайту та зменшує час завантаження сторінок, автоматично застосовуючи новітні методи оптимізації вебпродуктивності до сторінок і пов’язаних із ними ресурсів (CSS, JavaScript, зображень), не вимагаючи змін у наявному контенті чи робочому процесі.
Крім оптимізації зображень, модуль може переписувати HTML, відкладати завантаження JavaScript і зображень, подовжувати термін життя кешу та багато іншого. Зважте: проєкт PageSpeed закрито в березні 2023 року, у квітні 2025 року його репозиторій переведено в архів, і модуль більше не оновлюється.
Використовуйте кешування в заголовках статичних ресурсів
Такі заголовки для зображень, скриптів і стилів вказують браузеру, що ці ресурси не змінюватимуться протягом певного періоду часу, і їх не потрібно завантажувати щоразу.
Досягли “зеленої зони” – чи час веселитися?!
Якось представник Google Джон Мюллер зауважив, що зосередженість на технічних аспектах (як-от висока швидкість завантаження) не гарантує вам високих позицій у результатах пошуку. Важливо розглядати сайт загалом: контент також має бути покращений, щоб бути актуальним і корисним для користувачів. Серед інших порад від досвідчених SEO-фахівців можна назвати покращення зручності використання, уникання спливних вікон і нав’язливої реклами, а також інтеграцію голосового пошуку.
Що раніше ви виявите проблему, то легше буде її розв’язати. Кваліфіковані розробники перевіряють роботу проєктів у Google PageSpeed Insights не на етапі представлення остаточного коду, а в процесі розробки, коли простіше знайти та виправити проблему. Якщо ж займатися цим після завершення роботи над проєктом, коли команда вже ним не займається, це може влетіти вам у копієчку.