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

  1. Як перевірити швидкість свого сайту
  2. 1. PageSpeed ​​Insights
  3. 2. Pingdom Tools
  4. 3. GTmetrix
  5. Як прискорити завантаження сторінок
  6. 1. Сторінки великого розміру
  7. 2. «Важкі» зображення
  8. 3. Багато запитів від браузера
  9. 4. Перевантажений код JavaScript і CSS
  10. 5. Велика відстань між сервером і користувачем
  11. 6. Повільний хостинг
  12. Як регулярно моніторити швидкість сайту

Матеріали для скачування

Шаблон звіту з технічними показниками ефективності сайту

Навіть зараз, коли швидкість інтернету у більшості провайдерів перевищує 100 Мбіт / сек, а мобільні оператори розвивають 5G, питання про швидкість завантаження сайту залишається актуальним. Цей параметр істотно впливає на конверсію, показник відмов, відвідуваність і інші важливі для бізнесу KPI. Тому що при інших рівних умовах людина вибере той сайт, який швидше завантажується і не змушує його чекати. Про це нам говорять логіка, особистий досвід користувачів і численні дослідження на тему, які можна знайти в мережі. Ось, наприклад, вичерпна добірка кейсів з цифрами , Як компанії експериментували зі швидкістю завантаження.

Всі дослідники сходяться на думці, що оптимальний час завантаження - від 1,5 до 3 секунд. Якщо сторінка вантажиться довше, то більше половини користувачів залишають її, так і не дочекавшись дива.

У статті ми розповімо:

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

  1. Клієнти йдуть до конкурентів - їм простіше повернутися в пошуковик і вибрати наступний сайт.
  2. Затримка завантаження на 0,1 секунду зменшує конверсію на 7% (згідно дослідженню Akamai ).
  3. Знижується ймовірність, що користувачі повернуться на сайт. Google говорить , Що через негативний користувацького досвіду ймовірність повторної покупки знижується на 60%. Правда, мова про мобільні версії.
  4. швидкість завантаження впливає на ранжування сайту в пошукових системах. Якщо сайт довго завантажується, робот пошукової системи може не встигнути його повністю проіндексувати.

Окей, ми переконалися, що швидкість роботи сайту критично важлива. Тепер розберемося, як її перевірити.

Як перевірити швидкість свого сайту

Є багато онлайн-сервісів, які дозволяють перевірити швидкість завантаження сторінок - досить ввести потрібний URL. Розглянемо три найцікавіших, на наш погляд. Для прикладу будемо використовувати сайт https://shop.googlemerchandisestore.com/ .

1. PageSpeed ​​Insights

Це безкоштовний інструмент від Google. З його допомогою можна дізнатися, як швидко завантажуються сторінки на комп'ютері або мобільних пристроях. Якщо коротко, то сервіс бере ключові метрики про досвід реальних користувачів по всьому світу з Chrome User Experience Report і порівнює їх з вашими. В результаті ви бачите середню швидкість завантаження своєї сторінки і рівень оптимізації, а також частку завантажень, які проходили на повільній, середньої і високої швидкості.

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

Якщо сторінка показує не найкращі результати (як в нашому прикладі), сервіс дає конкретні поради, як її оптимізувати.

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

До речі, рекомендації PageSpeed ​​Insights можна побачити в звіті Google Analytics «Прискорення завантаження», якщо клікнути на посилання в відповідному стовпці:

До речі, рекомендації PageSpeed ​​Insights можна побачити в звіті Google Analytics «Прискорення завантаження», якщо клікнути на посилання в відповідному стовпці:

Взагалі, група звітів «Швидкість завантаження сайту" (Site Speed ​​reports) в GA - корисна штука. Якщо раніше ви не приділяли належної уваги цим звітам, рекомендуємо періодично їх переглядати, щоб відстежувати показники в динаміці і вчасно реагувати на проблеми.

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

Припустимо, ваша цільова аудиторія знаходиться в Німеччині. Якщо ви подивіться на звіт вище, то побачите, що одна з важливих сторінок вашого сайту в цій країні вантажиться дуже повільно (19,24 сек.), При цьому у неї 140 переглядів. Щоб пришвидшити роботу, потрібно оптимізувати сторінку. Якщо ж в цьому регіоні або у цього провайдера швидкість інтернет-з'єднання занадто мала для вашого сайту, можна створити альтернативні сторінки, адаптовані для низької пропускної здатності.

2. Pingdom Tools

Це один з найбільш інформативних і популярних сервісів для перевірки швидкості. У нього є безкоштовна і платна десктоп-версії, а також мобільний додаток з 14-денним trial.

У безкоштовної версії можна провести швидкий аналіз і побачити продуктивність, час завантаження, розмір вашої сторінки, а також можливі проблеми, які уповільнюють її роботу. Кожну проблему можна «розгорнути», клікнувши по стрілці навпроти, і почитати подробиці.

Крім того, в безкоштовної версії Pingdom Tools ви можете:

  • Відстежувати історію продуктивності сайту після змін. Знаходити помилки 404 і 500, щоб вчасно їх усувати.
  • Переглядати розмір вмісту сторінки за типом контенту і домену, а також кількість запитів браузера.
  • Тестувати завантаження сайту з різним місцезнаходженням.
  • Ділитися результатами аналізу з колегами.

3. GTmetrix

За функціоналом цей сервіс дуже схожий на Pingdom Tools, хіба що надає інформацію в більш зручному і організованому вигляді. Безкоштовна версія показує браузер і локацію сервера, використовуваного для тестування, продуктивність сторінки (PageSpeed ​​і YSlow), час завантаження, кількість запитів і загальний розмір сторінки. З огляду на, що сервіс зберігає історію перевірок, цих метрик буде досить, щоб аналізувати швидкість завантаження вашого сайту в динаміці.

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

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

Після перевірки сайту ви можете прикинути, скільки заробите, якщо прискорите завантаження. Наприклад, за допомогою калькулятора від Google або Sharpe Digital .

Як прискорити завантаження сторінок

Можна виділити 5 основних причин, які уповільнюють роботу сайту. Розберемося, що робити з кожною з них.

1. Сторінки великого розміру

Щоб скоротити обсяг даних, переданих в браузер користувача, використовуйте стиснення GZIP. Це дозволить зменшити розмір веб-файлів на 70% без погіршення їх якості. Перевірити наявність певної цей метод стиснення для вашого сайту, можна за допомогою сервісу GiftOfSpeed або GTmetrix .

2. «Важкі» зображення

Зображення великого розміру і дозволу значно гальмують завантаження сторінки. Щоб цього уникнути, використовуйте JPEG картинки замість PNG - вони важать в 5 разів менше, не уступаючи при цьому в якості. Зменшити розмір зображення ви можете за допомогою будь-якого онлайн-оптимізатора: Optimizilla , Compressor , Imagify , TinyPNG і т.д. Або, наприклад, можна прогнати картинку через Photoshop і зберегти її в спеціальному форматі, призначеному для веб-сайтів. Головне - не перестаратися і знайти золоту середину між якістю і розміром файлу.

3. Багато запитів від браузера

Чим вище кількість елементів на сторінці, тим більше запитів до сервера відправляє браузер, і тим повільніше відбувається завантаження. Щоб розірвати це порочне коло і скоротити число запитів, ви можете:

  • Видалити зайві зображення, JS-файли, коди сторонніх сервісів.
  • Об'єднати декілька невеликих елементів (іконки, кнопки) в один CSS-спрайт за допомогою CSS Sprites generator , CssSpritegen , Spritebox або будь-якого іншого генератора.
  • Використовувати кешування. Кожен раз, коли людина заходить на сайт, його браузер завантажує всі веб-файли з сервера. Якщо включити кешування, браузер збереже дані на комп'ютер користувача і при повторних візитах буде завантажувати їх вже звідти. Ви можете підібрати собі кеш-плагін для прискорення роботи сайту в залежності від того, яка у вас CMS. Наприклад, для WordPress підійдуть WP Super Cache , W3 Total Cache , Hyper Cache .

4. Перевантажений код JavaScript і CSS

Якщо код JavaScript і CSS занадто довгий, містить багато зайвих елементів (прогалини, коментарі і т.п.), то сторінка може завантажуватися з затримками. Щоб оптимізувати код, ви можете:

  • Скоротити назву функцій і почистити код за допомогою спеціальних сервісів, наприклад: JavaScript / CSS / HTML Compressor , CSS Compressor , JSCompress .
  • Додайте CSS-файли на самому початку сторінки - так вона буде відображатися поступово, по компонентах.
  • Винесіть JS-файли в кінець сторінки. Завдяки цьому браузер буде спочатку завантажувати контент сторінки, а й вже потім скрипти.

5. Велика відстань між сервером і користувачем

Чим далі від комп'ютера знаходиться сервер вашого хостинг-провайдера, тим повільніше завантажується сайт. «Скоротити» це відстань допоможуть мережі доставки контенту CDN: Amazon CloudFront , Incapsula , Akamai та інші. Коли людина заходить на сайт, CDN завантажує веб-файли зі свого сервера, що знаходиться найближче до користувача. Ця схема чудово ілюструє принцип роботи CDN-мереж:

Ця схема чудово ілюструє принцип роботи CDN-мереж:

6. Повільний хостинг

Якщо ви спробували всі описані вище поради, а швидкість сайту залишає бажати кращого, перевірте час відповіді сервера. Наприклад, це можна зробити в звіті Google Analytics «Швидкість завантаження сайту» → «Огляд»:

Наприклад, це можна зробити в звіті Google Analytics «Швидкість завантаження сайту» → «Огляд»:

На скріншоті ми бачимо, що середній час відповіді сервера 0,8 секунд. Це не дуже добре, тому що в ідеалі воно не повинно перевищувати 0,2 секунди. Якщо у вас цей показник набагато більше, можливо, варто задуматися про зміну хостинг-провайдера.

Як регулярно моніторити швидкість сайту

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

Якщо ви збираєте дані в Google BigQuery за допомогою OWOX BI Pipeline і хочете відстежувати основні технічні показники сайту, заповніть форму - і ми надішлемо вам шаблон дашборда, який можна скопіювати, а також гайд, як його налаштувати.

Отримати шаблон дашборда

В результаті у вас вийде зручний звіт, який складається з 5 сторінок. На першій сторінці ви зможете переглядати всі важливі показники:

  1. Кількість користувачів.
  2. Кількість сеансів.
  3. Кількість переглядів сторінок.
  4. Помилки JavaScript.
  5. Помилки 404.
  6. Середній час завантаження сторінок.
  7. Середній час з'єднання з сервером.

На другому аркуші можна дізнатися детальну інформацію по помилках JavaScript:

  • Загальна кількість помилок за обраний період.
  • Кількість помилок на сторінку.
  • Кількість сесій з помилками.
  • Скільки відсотків користувачів зіткнулися з помилками.
  • На яких сторінках і типах сторінок відбуваються помилки (для відстеження типів сторінок, необхідно впровадити pageType на сайті, а також створити для користувача змінну рівня хіта hits.page.pageType ).
  • В якому браузері і його версіях відбуваються помилки.

На третій сторінці представлена ​​докладна інформація про помилки 404:

  • Загальна кількість помилок.
  • Кількість помилок на сторінку.
  • Кількість сесій з помилками.
  • Кількість користувачів, у яких виникли помилки.
  • А також реферали, після яких виникли помилки.

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

На четвертій сторінці інформація по десктопу:

На п'ятій сторінці дані по планшетів і мобільних пристроїв:

На п'ятій сторінці дані по планшетів і мобільних пристроїв:

Тепер ви знаєте, як змусити свій сайт «літати» :) Якщо у вас залишилися питання або ви знаєте інші способи зменшити час завантаження сторінок, пишіть їх в коментарях.

використані інструменти