Google Page Speed Insights – сервіс, що дозволяє оцінити фактичну продуктивність і вибрати ефективні шляхи оптимізації сайту. Може використовуватися зі смартфонів, планшетів і комп’ютера. Оцінка швидкості завантаження сторінки виробляється на основі аналізу ефективності та оперативності відтворення контенту в браузері відвідувача. Враховуються наступні дані: використовувані JS-скрипти, структура і чистота HTML+CSS, оптимізація мультимедійного контенту і т. д.
На прикладі російськомовної версії сайту компанії Apple у статті розглянемо основні показники та можливі шляхи розв’язання проблем зі швидкістю.
Аналіз сайту в PageSpeed Insights
Сайт Apple був узятий з трьох причин:
- Відомий бренд.
- Досить погана оптимізація сторінки за версією Google.
- Днями презентував iPhone 11.
Компанія Apple – технологічний бренд, який завжди на передовій. Але з сайтом явні проблеми, т. к. завантаження початкового вмісту доводиться чекати тривалий час – близько 4 секунд.
Аналіз виконується наступним чином:
- Переходимо за посиланням developers.google.com/speed/pagespeed/insights.
- У рядок для введення вписуємо адресу сторінки.
- Натискаємо на кнопку «Аналізувати».
- Чекаємо завершення аналізу та оновлення сторінки.
Оцінка швидкості завантаження сайту в Google Page Speed
Виділяють дві версії аналізу – для мобільних пристроїв і комп’ютерів. Показники та рекомендації відрізняються. У мобільній версії веб-сайт компанії Apple набирає 64 бали, чого для звичайного проєкту виявиться мало. Так, з інформаційних і корпоративних ресурсів йдуть значно швидше – клієнти не готові довго чекати. У повній версії – 91 бал.
Версія для мобільних:
Версія для комп’ютерів:
Для оцінки швидкості передбачені різні критерії – до них повернемося нижче. Поки варто зупинитися на балах, де:
- від 0 до 59 – низька швидкість завантаження;
- від 60 до 79 – середня;
- від 80 до 100 – висока.
Наявність низького показника позначається на числі відмов на сайті і чим менш відому сторінку відкриває клієнт, тим менше він готовий чекати завершення завантаження контенту. Проблеми з організацією процесу візуалізації необхідно усувати як можна швидше.
Далі йдуть підрозділи з рекомендаціями щодо усунення проблем при їх наявності.
(◕‿◕) Ми у Telegram: Анонси нових статей та бонусні матеріали
Імітація завантаження сторінки
У розділі представлені 6 метрик. Їх сукупність дозволяє визначити підсумкова кількість балів, що призначаються за задоволення вимог системи. Розберемо кожну детальніше:
- Перший пункт є тимчасовим інтервалом з моменту старту завантаження веб-сайту до появи контенту (текстового або мультимедійного).
- Оцінюється доступність контенту (припинення візуальних змін і можливість коректного перегляду останнього).
- Параметр, що оцінює готовність сторінки до взаємодії з відвідувачем (тобто працюють всі видимі елементи з мінімальним відгуком).
- Оцінка підвантаження основних елементів сторінки, шрифтів.
- Означає швидкість переходу елементів у інтерактивний стан (готовність віддачі відповіді на власні дії).
- Реакція завантаженої сторінки на власні дії протягом перших п’яти секунд з моменту початку її завантаження.
Оптимізатори по-різному ставляться до даного сервісу, але оцінка швидкості завантаження сторінок веб-ресурсу позначається на результатах видачі в пошукових системах. Як мінімум, побічно – на основі поведінкових факторів клієнтів, що йдуть назад в пошукову систему, не дочекавшись закінчення завантаження всіх елементів проєкту.
Оптимізація за рекомендаціями PageSpeed Insights
Даний блок представлений радами, які дозволяють збільшити швидкість завантаження. При натисканні на кожен з елементів списку, що відкриється рекомендація щодо покращення сайту.
Так, клікнувши по елементу списку з рекомендацією до використання сучасних форматів зображень, можна виявити пропозицію про перехід на формати зображень JPEG 2000, WebP замість звичних та неефективних PNG і JPEG.
У випадку з головною сторінкою сайту компанії Apple можна збільшити швидкість завантаження на 0,56 секунди. Також на скріншоті відзначена передбачувана економія на стисненні зображень (пункт 2).
Діагностика
У цьому блоці представлена інформація щодо продуктивності веб-ресурсу та ряд рекомендацій. Елементи списку розкриваються.
При натисканні на перший можна побачити рекомендацію щодо настроювання показу всього тексту при завантаженні шрифтів. Дана функція реалізується на основі CSS.
Усунувши кожну з представлених проблем, можна збільшити швидкість завантаження сторінки до відмінного значення. Зменшиться кількість відмов, що побічно позначиться на підйомі позицій у видачі пошукових систем за умови, що сам контент сайту корисний і цікавий користувачам.
Результати оптимізації
До речі, нещодавно у Роби бізнес з’явилася послуга з оптимізації сайту під вимоги Google Page Speed Insights, завдяки чому можна вивести сайт з “червоної зони” на досить пристойні показники:
Цікаво, а які показники у вашого сайту? Напишіть в коментарі результати тестів.
