Google Page Speed Insights: швидкість завантаження сайту і оптимізація

Google Page Speed Insights фото, картинка

Google Page Speed Insights – сервіс, що дозволяє оцінити фактичну продуктивність і вибрати ефективні шляхи оптимізації сайту. Може використовуватися зі смартфонів, планшетів і комп’ютера. Оцінка швидкості завантаження сторінки виробляється на основі аналізу ефективності та оперативності відтворення контенту в браузері відвідувача. Враховуються наступні дані: використовувані JS-скрипти, структура і чистота HTML+CSS, оптимізація мультимедійного контенту і т. д.

На прикладі російськомовної версії сайту компанії Apple у статті розглянемо основні показники та можливі шляхи розв’язання проблем зі швидкістю.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Аналіз сайту в PageSpeed Insights

Сайт Apple був узятий з трьох причин:

  1. Відомий бренд.
  2. Досить погана оптимізація сторінки за версією Google.
  3. Днями презентував iPhone 11.

Компанія Apple – технологічний бренд, який завжди на передовій. Але з сайтом явні проблеми, т. к. завантаження початкового вмісту доводиться чекати тривалий час – близько 4 секунд.

Аналіз виконується наступним чином:

  1. Переходимо за посиланням developers.google.com/speed/pagespeed/insights.
  2. У рядок для введення вписуємо адресу сторінки.Google Page Speed Insights фото, картинка
  3. Натискаємо на кнопку «Аналізувати».
  4. Чекаємо завершення аналізу та оновлення сторінки.

Google Page Speed Insights фото, картинка

Оцінка швидкості завантаження сайту в Google Page Speed

Виділяють дві версії аналізу – для мобільних пристроїв і комп’ютерів. Показники та рекомендації відрізняються. У мобільній версії веб-сайт компанії Apple набирає 64 бали, чого для звичайного проєкту виявиться мало. Так, з інформаційних і корпоративних ресурсів йдуть значно швидше – клієнти не готові довго чекати. У повній версії – 91 бал.

Версія для мобільних:

Google Page Speed Insights фото, картинка

Версія для комп’ютерів:

Google Page Speed Insights фото, картинка

Для оцінки швидкості передбачені різні критерії – до них повернемося нижче. Поки варто зупинитися на балах, де:

  • від 0 до 59 – низька швидкість завантаження;
  • від 60 до 79 – середня;
  • від 80 до 100 – висока.

Наявність низького показника позначається на числі відмов на сайті і чим менш відому сторінку відкриває клієнт, тим менше він готовий чекати завершення завантаження контенту. Проблеми з організацією процесу візуалізації необхідно усувати як можна швидше.

Далі йдуть підрозділи з рекомендаціями щодо усунення проблем при їх наявності.

Імітація завантаження сторінки

Google Page Speed Insights фото, картинка

У розділі представлені 6 метрик. Їх сукупність дозволяє визначити підсумкова кількість балів, що призначаються за задоволення вимог системи. Розберемо кожну детальніше:

  1. Перший пункт є тимчасовим інтервалом з моменту старту завантаження веб-сайту до появи контенту (текстового або мультимедійного).
  2. Оцінюється доступність контенту (припинення візуальних змін і можливість коректного перегляду останнього).
  3. Параметр, що оцінює готовність сторінки до взаємодії з відвідувачем (тобто працюють всі видимі елементи з мінімальним відгуком).
  4. Оцінка підвантаження основних елементів сторінки, шрифтів.
  5. Означає швидкість переходу елементів у інтерактивний стан (готовність віддачі відповіді на власні дії).
  6. Реакція завантаженої сторінки на власні дії протягом перших п’яти секунд з моменту початку її завантаження.

Оптимізатори по-різному ставляться до даного сервісу, але оцінка швидкості завантаження сторінок веб-ресурсу позначається на результатах видачі в пошукових системах. Як мінімум, побічно – на основі поведінкових факторів клієнтів, що йдуть назад в пошукову систему, не дочекавшись закінчення завантаження всіх елементів проєкту.

Оптимізація за рекомендаціями PageSpeed Insights

Даний блок представлений радами, які дозволяють збільшити швидкість завантаження. При натисканні на кожен з елементів списку, що відкриється рекомендація щодо покращення сайту.

Google Page Speed Insights фото, картинка

Так, клікнувши по елементу списку з рекомендацією до використання сучасних форматів зображень, можна виявити пропозицію про перехід на формати зображень JPEG 2000, WebP замість звичних та неефективних PNG і JPEG.

Google Page Speed Insights фото, картинка

У випадку з головною сторінкою сайту компанії Apple можна збільшити швидкість завантаження на 0,56 секунди. Також на скріншоті відзначена передбачувана економія на стисненні зображень (пункт 2).

Діагностика

У цьому блоці представлена інформація щодо продуктивності веб-ресурсу та ряд рекомендацій. Елементи списку розкриваються.

Google Page Speed Insights фото, картинка

При натисканні на перший можна побачити рекомендацію щодо настроювання показу всього тексту при завантаженні шрифтів. Дана функція реалізується на основі CSS.

Google Page Speed Insights фото, картинка

Усунувши кожну з представлених проблем, можна збільшити швидкість завантаження сторінки до відмінного значення. Зменшиться кількість відмов, що побічно позначиться на підйомі позицій у видачі пошукових систем за умови, що сам контент сайту корисний і цікавий користувачам.

Результати оптимізації

До речі, нещодавно у Роби бізнес з’явилася послуга з оптимізації сайту під вимоги Google Page Speed Insights, завдяки чому можна вивести сайт з “червоної зони” на досить пристойні показники:

Результати тесту Google Page Speed Insights
Результати тесту Google Page Speed Insights

Цікаво, а які показники у вашого сайту? Напишіть в коментарі результати тестів.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Дуже поганоПоганоНормальноДобреВідмінно (1 оцінок, середнє: 5,00 з 5)
Loading...
Like this post? Please share to your friends:
Залишити відповідь

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: