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

• 53% відвідувачів мобільних сайтів йдуть, якщо завантаження йде довше 3 секунд (згідно з дослідженням DoubleClick);
• збільшення часу завантаження з 1 до 7 секунд підвищує ймовірність відмови відвідувачів на 113% (згідно з дослідженням think with Google);
• зростання числа елементів сторінки (текст, картинки, заголовки) з 400 до 6000 збільшує показник відмов на 95%.

Залежність числа відмов від швидкості завантаження

Швидкість 3G / 4G-інтернету часто нестабільний, а якщо «гальмує» ще й сайт, більше половини людей відразу його закривають. Користувачі комп'ютерів і ноутбуків теж не раді довгої завантаженні.

На що і як впливає швидкість завантаження?

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

До того ж Яндекс і Google поступово знижують позиції повільних сайтів в загальній і мобільного видачі.

Технічні етапи завантаження сторінки

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

Як виміряти швидкість завантаження?

• Test My Site від Google. Цей сервіс перевіряє швидкість завантаження мобільної версії сайту.
  

Test My Site показує час повного завантаження і передбачає, який відсоток відвідувачів ми втрачаємо через затримку

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

Ми швидше, ніж 77% сайтів - ура!

Рекомендацій досить багато. Деякі корисні, інші спірні

WebPageTest. Сервіс для тих, хто любить розбиратися в настройках. Тут можна вибрати пристрій або браузер для тесту і прив'язати їх до місця розташування. Подивіться, як швидко вантажиться сайт в браузері Chrome в Індії або на Samsung Galaxy S7 в Далласі.

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

Результати перевірки в різних сервісах можуть відрізнятися. Це нормально. «Проженете» сайт через все, порівняйте підсумкові значення і виведіть середнє.

Як збільшити швидкість завантаження?

Зменшити розмір сторінок

Чим легше сторінка, тим швидше завантажується. Щоб зменшити вагу сайту, зверніться до свого хостинг-провайдеру. Він повинен буде включити стиск даних протоколу HTTP за технологією zip або gzip.

Розмір даних можна зменшити на 64% і більше - це прискорить завантаження

Зменшити вагу зображень

Найпростіше зробити це в сервісах TinyJPG або Compressor. Якщо користуєтеся «Фотошопом», виберіть опцію «Зберегти для Web» (Ctrl + Shift + Alt + S) і встановіть якість 50-80%. Вага картинок у високій роздільній здатності часто зменшується в кілька разів. В окремих випадках - в 10 разів і більше.

TinyJPG зменшує вагу зображень на 40-70% і навіть більше. У безкоштовної версії можна завантажувати тільки картинки до 5 Мб

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

Прибрати все зайве

На сайті неминуче накопичується сміття, який треба час від часу чистити:

• шматки коду від сторонніх ресурсів, сервісів, доповнень;
• дубльовані скрипти;
• непотрібні плагіни, віджети і форми всередині CMS.

До речі, оцінити цінність вже встановлених на Wordpress плагінів можна за допомогою ще одного плагіна - Plugin Performance Profiler. Знайдіть даремні і видаліть.

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

Складні слайдери, анімація - все це багато важить, а іноді криво завантажується. Більшу частину таких елементів можна видалити без збитку для змісту.

Вони прибирають з коду зайві символи і прискорюють його завантаження.

Використовувати кешування даних

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

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

Використовувати CDN - сервіси доставки контенту

Вміст сайту кешируєтся всередині мережі CDN - кінцева швидкість завантаження зростає

Ось кілька відомих CDN:

Перейти на виділений сервер

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

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

А є компроміс - VDS (виділений віртуальний сервер). Суть VDS та ж: ви розміщуєте на ньому свій сайт без «сусідів». На одному фізичному сервері розташовується декілька віртуальних. Вони працюють трохи повільніше фізичного, але обійдуться дешевше.

Проблема в тому, що віртуальні виділені сервери (як і фізичні) потрібно налаштовувати і адмініструвати. Це складно, треба залучати фахівця.

VDS часто надають хостинг-провайдери. Ми використовуємо виділені сервери компанії Firstvds.

Використовувати AMP - прискорені мобільні сторінки

У таких сторінок дуже висока швидкість завантаження - зазвичай не більше 2-3 секунд. Але є і мінуси: урізана функціональність, бляклий зовнішній вигляд. AMP погано підходить для e-commerce. В основному цю технологію використовують блоги, новинні портали та інформаційні сайти.

• в WordPress створювати AMP можна в кілька кліків через спеціальний плагін;
• в Joomla - через плагін wbAMP.

Прискорені сторінки часто потрапляють в «карусель» видачі Google. Ви отримуєте більше трафіку

На сторінки AMP приходить багато відвідувачів з Google. В Яндексі вони ранжуються гірше.

додаткові рекомендації

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

Приклад симпатичного прогрес-бару. Ще трохи і сторінка завантажиться

Що в підсумку?

1. Чим вище швидкість завантаження сайту, тим краще для поведінкових факторів і просування в пошуку. Ідеально, якщо сайт завантажується за 1-2 секунди.
2. Щоб прискорити сайт, потрібно прибрати все зайве і сфокусуватися на простоті. Використовуйте менше важких графічних елементів. Оптимізуйте все, що можна (вага зображень і сторінки, код CSS).
3. Швидкість потрібно вимірювати регулярно. Якщо вона почне падати, ви це вчасно помітите і зможете знайти причину.

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