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

Опубликованно 22.12.2018 03:14

Швидкість завантаження сторінок відіграє важливу роль для комерційних сайтів: чим довше вони завантажуються, тим вище ймовірність, що потенційний клієнт піде, так і не дочекавшись потрібної інформації. Дослідження таких гігантів, як Amazon чи Walmart, показують, що прискорення сайту навіть на 0,1 секунди суттєво впливає на конверсію і продажу.

Залежність конверсії від швидкості завантаження сторінок. Джерело — дослідження Walmart. Зверніть увагу на різке зменшення показника конверсії, коли час завантаження сторінки збільшується більш ніж на 1 секунду

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

Що зі швидкістю завантаження інтернет-магазинів України?

За допомогою Google PageSpeed Insights API ми Arto Web Agency перевірили 23246 головних сторінок інтернет-магазинів України. Перевірка проводилася на API версії 4, оскільки дослідження проходило до оновлення PageSpeed Insights 12 листопада 2018 року.

В ході дослідження ми отримали дані по 10 основних правил, дотримання яких допомагає збільшити швидкість завантаження: Avoid Landing Page Redirects — уникайте перенаправлень з цільової сторінки; Enable GZip Compression — увімкніть стиснення GZip; Leverage Browser Caching — використовувати кешування браузера; Improve Resource Main Server Response Time — зменшіть час відповіді сервера; Minify CSS — мінімізуйте розмір CSS-файлів; Minify HTML — мінімізуйте розмір HTML-коду; Minify JavaScript — мінімізуйте розмір ресурсів JavaScript; Minimize Render Blocking Resources — мінімізуйте кількість ресурсів, які блокують малювання; Optimize Images — оптимізуйте зображення; Prioritize Visible Content — віддавайте пріоритет завантаження видимого контенту (на першому екрані сторінки).

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

На діаграмах нижче представлені усереднені значення Impact інтернет-магазинів України на комп'ютерах і мобільних пристроях.

 

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

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

Як перевірити швидкість завантаження свого сайту? Інструкції і поради

Перевіряти оптимізацію швидкості завантаження можна за допомогою Google PageSpeed Insights, GTMetrix, WebPageTest та інших сервісів. Але ми хочемо зосередити увагу на більш важливому — як самостійно зробити правильні висновки з такої перевірки та прийняти адекватні рішення?

Припустимо, ви перевірили сайт за допомогою Google PageSpeed Insights. Важливо відзначити, що цей сервіс (як і багато інших) перевіряє тільки ту сторінку, яку ви вказали. Зазвичай всі запускають перевірку головною і забуває, що є ще каталог, сторінка товару, контакти і т. д. Це не означає, що потрібно буде вручну перевіряти всі сторінки сайту. Потрібно вибрати з кожної категорії сторінок одного "представника" та проаналізувати його. Якщо ви отримали оцінку 85 і вище, то, швидше за все, оптимізація не знадобиться.

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

Розгорніть кожну рекомендацію і перегляньте економію трафіку в кілобайтах.

Секція "Оптимізація" зі звіту PageSpeed Insights. Рекомендація "Використовувати сучасні формати зображень" розгорнута, видно приблизна економія трафіку

Не потрібно прагнути до виконання абсолютно всіх порад: якщо стиск певних малюнків зменшить сторінку всього на 2 Кб, то немає сенсу це робити. Суттєвою буде економія трафіку приблизно від 50 Кб.

Для популярних сайтів в секції "Дані спостережень" PageSpeed Insights додатково показує час першої відтворення контенту і першої затримки введення. Ці дані були отримані в результаті збору статистики взаємодії реальних користувачів з сайтом.

Приклад звіту PageSpeed Insights в секції "Дані спостережень"

Важливо зіставити їх з оцінкою за 100-бальною шкалою. Вони не повинні сильно відрізнятися. Якщо ви бачите, що у більш ніж 70% користувачів ваша сторінка вантажиться швидко, але за 100-бальною шкалою сайт тримає тверду жовту зону (75 — 90), то проведення оптимізації може бути недоцільним.

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

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

Категория: Финансы