Блог / Статті25 вересня 2018

Як перевірити швидкість завантаження сайту та зробити правильні висновки

Тема швидкості завантаження сайтів сьогодні стає все більш актуальною: повільні сторінки не лише відштовхують користувачів, але й можуть стати причиною зниження позицій у пошукових системах. Для грамотного прискорення свого сайту мало одних лише відомостей про те, швидко чи повільно він завантажується. Як зрозуміти, які саме чинники уповільнюють роботу ваших сторінок? Як з'ясувати, що можна виправити швидко і отримати значне збільшення швидкості, а які виправлення, навпаки, не варті докладених зусиль?

На час завантаження сторінки впливає безліч факторів. Здебільшого вони пов'язані або з фактичним розміром ресурсів (зображень, скриптів, стилів і т.д.) в кілобайтах, або із затримками під час передачі і обробки відповідей сервера, а також із кількістю підключень зовнішніх ресурсів. Крім цього, на швидкість завантаження дуже впливає якість інтернет-з'єднання користувача, відстань від клієнта до сервера, тому в кожному конкретному випадку для однієї сторінки вона може бути різною. Однак, існує ряд онлайн-сервісів, які не лише покажуть вам орієнтовні величини швидкості завантаження сторінки, але й дадуть зрозуміти, чому ви отримали такий результат.

Зверніть увагу! Ця стаття була написана до оновлення PageSpeed ​​Insights, що вийшло 12 листопада 2018 року, яке торкнулося механізму розрахунку оцінок. Тому частина інформації, представленої нижче, вже не актуальна. Змінився і інтерфейс сервісу: зараз він виглядає не так, як на скріншотах. Прочитати про те, що саме змінилося, ви можете за посиланням. Проте, загальні принципи аналізу результатів, описані в розділі «Як зрозуміти, що саме потрібно оптимізувати?» здебільшого лишилися актуальними.

Також ми випустили оновлену версію цієї статті, у якій детально розповіли, як користуватися новою версією інструменту. (Додано 15.11.2018)

Сервіси для перевірки швидкості завантаження

Ми в Arto Web Agency користуємося переважно двома інструментами для перевірки. Перший з них – Google PageSpeed Insights. Його інтерфейс простий і зрозумілий: рядок для введення адреси сайту, кнопка «Аналізувати», після натискання на яку ви отримаєте короткий і зручний звіт. Варто зазначити: PageSpeed ​​Insights аналізує не весь сайт, а конкретну сторінку. Якщо ви ввели адресу головної, то вона і буде перевірена.

Звіт PageSpeed ​​Insights для невеликих і не дуже відвідуваних сайтів не видає оцінки часу завантаження сторінки в секундах, а просто оцінює оптимізацію швидкості за власною шкалою від 0 до 100. Величина менше 60 означає низький рівень оптимізації (червона зона), від 60 до 79 – середній рівень (жовта зона), 80 і вище – хороший рівень (зелена зона). Інформація у звіті знаходиться на двох вкладках: настільні комп'ютери та мобільні пристрої, для кожної з яких показник розраховується окремо.

Приклад звіту PageSpeed ​​Insights

Для великих і відвідуваних інтернет-порталів у звіті з'являється окрема графа Page Speed, де можна побачити дві метрики: First Contentful Paint (FCP) показує час, після якого користувач починає бачити промальовування хоча б одного елемента сторінки, а DOM Content Loaded (DCL) – час, за який HTML-контент сторінки завантажується повністю. Ця інформація береться зі звіту про зручність користування браузером Chrome та заснована на взаємодії реальних користувачів з сайтом, тому може бути показана тільки тоді, коли даних для цього достатньо.

Приклад звіту для сайту, який є у базі Chrome User Experience Report

Нижче в такому звіті відображаються наочні діаграми, на яких видно розподіл користувачів сайту за показниками FCP і DCL. Тут можна побачити, у якого відсотка відвідувачів кожна з метрик була оцінена як «повільно» (червоний колір), «середньо» (жовтий) або «швидко» (зелений).

Порівняно недавно для сайтів, які фігурують у Chrome User Experience Report, з'явилася додаткова функція: за командою «origin:», набраною перед адресою, або за посиланням у звіті ви зможете перейти до усереднених даних про швидкість завантаження всіх сторінок ресурсу. Посилання можна побачити, якщо ви ввели адресу сторінки, для якої недостатньо статистичних даних про завантаження, за умови, що такі дані є для інших сторінок сайту.

Приклад звіту з посиланням на усереднені дані для сайту

Інша важлива складова звіту PageSpeed ​​Insights – поради щодо оптимізації, які знаходяться внизу. Саме тут ви можете побачити, що варто зробити, щоб прискорити сторінку. Всього в «арсеналі» цього інструменту є 10 правил, за кожним з яких, якщо необхідно, видаються рекомендації.

Рекомендації PageSpeed ​​Insights щодо поліпшення сторінки

У PageSpeed ​​Insights є ще один важливий показник, який, на жаль, не відображається у звичайній веб-версії сервісу. Це так званий Impact – число, що показує, наскільки сильно певне правило впливає на швидкість завантаження в порівнянні з іншими. За його величиною можна зрозуміти, які чинники найбільш сильно уповільнюють сторінку. Побачити цей показник можна, скориставшись APIs Explorer. Щоб запустити аналіз, заповніть поле «URL» (решту можна залишити порожніми) і натисніть Execute. Зробіть пошук за фразою «ruleImpact» у тексті звіту, щоб швидко знайти цей параметр для кожного з 10 правил.

Фрагмент звіту PageSpeed ​​Insights API Explorer з показником Impact для правила «Оптимізувати зображення»

До речі, саме з використанням PageSpeed Insights API ми провели дослідження українських інтернет-магазинів на предмет оптимізації швидкості завантаження. Ознайомитися з його результатами ви можете за посиланням.

Другий інструмент, який ми використовуємо для перевірки, – це GTmetrix. Він має дещо складніший інтерфейс звіту, розрахований на технічних фахівців. На відміну від PageSpeed ​​Insights, цей сервіс показує оцінку часу завантаження сторінки. Однак, не варто повністю довіряти цьому показнику: сервери GTmetrix знаходяться в Канаді, тому відображена швидкість завантаження часто буде істотно відрізнятися від реальної для українських користувачів.

Приклад звіту GTmetrix

GTmetrix також аналізує за одну перевірку лише одну сторінку – ту, адреса якої ви ввели. Функції, подібної до команди «origin:», у цьому інструменті немає. Звіт GTmetrix складається з декількох вкладок:

  • дані PageSpeed ​​Insights API (одразу у вигляді рекомендацій, а також з оцінками виконання правил за 100-бальною шкалою, виведеними з того ж параметра Impact);
  • дані сервісу YSlow, розробленого компанією Yahoo! – також з оцінками різних правил, які багато в чому перегукуються з першої вкладкою;
  • візуалізація часу завантаження різних ресурсів сторінки;
  • відображення ключових метрик завантаження на часовій шкалі (для зареєстрованих користувачів);
  • створення відеозапису завантаження сторінки (для зареєстрованих);
  • історичні дані про швидкість завантаження (якщо наявні).

Як зрозуміти, що саме потрібно оптимізувати?

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

  • У PageSpeed ​​Insights розгорніть кожну пораду і подивіться, який обсяг трафіку ймовірно заощадить її виконання. Суттєвою можна вважати економію приблизно від 30 КБ. Так, якщо стискання зображень зменшить загальну вагу сторінки на 200 КБ, а мініфікація CSS-стилів – лише на 2 КБ, то можна спокійно зосередитися на першому пункті; другий не вчинить помітного впливу на швидкість. Якщо копнути глибше, то може виявитися, що стиснення одного зображення дасть 100 КБ економії, а іншого – 1 КБ; тут також очевидно, що перше принесе відчутний ефект, а друге – ні.
  • Використовуючи APIs Explorer, порівняйте показники Impact для різних правил. Так ви у найбільш спрощеній формі побачите, що, наприклад, найсильніший ефект на завантаження вашої сторінки надають підключені ресурси у голові документа. Можна комбінувати цей спосіб із першим: PageSpeed ​​Insights покаже вам, які саме файли гальмують завантаження, і ви зможете прийняти рішення про те, які з них можна завантажувати асинхронно.

Порівняння показників Impact в PageSpeed ​​Insights API Explorer. У наведеному прикладі добре видно, що найбільший внесок в оптимізацію завантаження сторінки зробить впровадження правила "Eliminate render-blocking JavaScript and CSS in above-the-fold content" – усунути скрипти і файли стилів, які блокують рендеринг першого екрану сторінки

  • Якщо на вашому сайті встановлені скрипти Google Analytics, то ви, швидше за все, побачите «проблему» в розділі «Використовуйте кешування браузера»: PageSpeed ​​Insights включить їх в оцінку як ресурси, що не кешуються. Насправді, розробники не рекомендують кешувати ці скрипти, тому цей пункт можна проігнорувати. Однак, якщо вже вам не дає спокою ця проблема, то для сайтів на Wordpress існує спеціальний плагін, який збереже скрипт Google Analytics на вашому сервері і дозволить поміщати його у кеш користувачам сайту. Цей плагін потім щодня перевіряє, чи не змінився скрипт на сервері Analytics і, якщо це сталося, то завантажує його, перезаписує локально, видає нову версію користувачам і «просить» браузер помістити в кеш уже свіжий скрипт.
  • Якщо проблема відображається у графі «Не використовуйте переадресацію з цільової сторінки», то перевірте, чи правильно ви ввели адресу сайту: наприклад, чи вказали www, якщо адреса дійсно починається з www. Іноді, втім, рекомендації в цьому розділі бувають справедливі (наприклад, якщо сайт відразу перенаправляє користувача на будь-яку мовну версію), але це трапляється нечасто.
  • Деякі поради сервісів з оптимізації впровадити буде простіше, інші – складніше. Враховуйте, що такі маніпуляції, як, наприклад, включення компресії GZip, кешування і, особливо, зменшення серверної затримки, вимагають доступу до сервера, на якому розташований сайт. Часто такий функціонал відсутній, наприклад, на централізованих платформах для створення інтернет-магазинів.
  • Не потрібно прагнути до виконання всіх рекомендацій PageSpeed ​​Insights або GTmetrix. Якщо стиснення того чи іншого малюнка, мініфікація таблиці стилів або JS-файлу принесе його зменшення лише на 1-2 КБ, то це зазвичай не варте уваги. Орієнтуйтеся на загальну величину сторінки близько 1 МБ (чим менше, тим краще) – сервіси вважають цей показник прийнятним. Для затримки сервера нормою вважається величина 0,2 секунди і менше; якщо у вашого сайту цей показник лише незначно вищий (наприклад, 0,23 секунди), то його оптимізація, швидше за все, не дасть сильного ефекту.

Висновки

Таким чином, щоб адекватно оцінити швидкість сайту і масштаб робіт, який потрібно виконати для прискорення, потрібно враховувати:

  • загальний показник оптимізації швидкості завантаження – якщо він у «зеленій» зоні, то, можливо, прискорення і не потрібне; якщо ж у «червоній», то виправлення критично важливі;
  • внесок (Impact) окремих правил у цей показник;
  • приблизну економію завантаження (у кілобайтах трафіку або секундах часу), яку принесе оптимізація кожного правила;
  • кількість файлів, над якими потрібно попрацювати для оптимізації того чи іншого параметра (наприклад, число зображень для стиснення або скриптів/стилів для перенесення);
  • необхідність залучення технічних фахівців до роботи;
  • можливі перешкоди для оптимізації (відсутність доступу до сервера та ін.).

Якщо ви зрозуміли, що ваш сайт необхідно прискорити, і без допомоги фахівців не обійтися, то веб-агентство ARTO готове запропонувати вам свої послуги. Звертайтеся, ми завжди раді допомогти!

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

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

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