Оптимізуємо швидкість завантаження сайту – покращуємо ПФ і позиції

Опубліковано: 09.04.2015 |
Автор: Олена Камська |

Як впливає швидкість завантаження сайту на поведінку користувачів? Ще в 2009 році команда Google проводила експеримент – невеликій групі користувачів штучно занизили швидкість завантаження сторінок видачі на 100-400 мс. Це відразу позначилося на їхніх діях – користувачі стали вводити менше запитів, ніж зазвичай. Більш того, чим довше вони брали участь у цьому експерименті, тим рідше починали звертатися до рядку пошуку.

 

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

Чим швидше сайт, тим вище ПФ

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

 

Вам знайома ситуація, коли по конкурентному запиту сайт то потрапляє в ТОП-5, то відкочується на 10-20 позицій, і так багато разів підряд? За вагою й рівнем оптимізації він навіть краще конкурентів, але обійти їх і стабільно закріпитися у видачі чомусь не виходить. Причиною часто є слабкі показники поведінкових факторів. У такій ситуації можна провести аудит юзабіліті, попрацювати над інтерфейсами та внутрішньою структурою, але іноді достатньо просто звернути увагу на швидкість завантаження сторінок сайту.

 

Ми провели свій експеримент з одним сайтом з нерухомості.

 

Скоротивши час завантаження сторінок з 6-7 до 3 секунд, ми отримали:

  • Зменшення показника відмов з 44% до 40%
  • Збільшення глибини перегляду з 3,5 до 5 сторінок на відвідувача
  • При цьому середній час на сайті не змінився

 

Зниження показника відмов:

optimizuyemo_shvidkist_1Зростання глибини перегляду:

optimizuyemo_shvidkist_2

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

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

Давайте з'ясуємо, як швидко завантажується ваш сайт. Але не у вас вдома або в офісі, а у всіх відвідувачів в середньому.

 

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

 

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

 

Звіт по швидкості завантаження в Google Analytics

 

Зайдіть в Google Analytics – Поведінка – Швидкість завантаження сайту – Огляд:

optimizuyemo_shvidkist_3

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

 

Швидкість завантаження з різних браузерів

 

Перевірити швидкість завантаження з різних країн і браузерів можна на сайті Webpagetest.org. Ви отримаєте дані стосовно швидкості при першому заході та при повторному відвідуванні, а ще детальний «водоспад» процесів, з яких складається саме завантаження вашої сторінки:

optimizuyemo_shvidkist_4На графіку видно, що запитуючи дані щоразу з нового хосту, ми втрачаємо час на DNS Lookup. А всі java-скрипти блокують паралельне завантаження решти контенту. Тут же ми бачимо повільний DNS Lookup www2.acint.net – це лічильник Sape.ru (добре, що він стоїть внизу й не блокує виведення решти контенту).

 

Favicon і зображення в рекламних блоках Яндексу з одного боку підвищують CTR оголошення, з іншого – уповільнюють швидкість завантаження сайту. Інколи невелика картинка в РСЯ може важити близько 60 кб, хоча її можна стиснути до 10 кб. Затримки із завантаженням блоків РСЯ так само трапляються, тому для швидкості сайту краще використовувати блоки без зображень, також не забуваємо про асинхронне завантаження коду РСЯ.

 

Детальна таблиця з витраченим часом на кожен елемент виглядає так:

5

Як відбувається завантаження сторінки

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

 

1. Від браузера йде DNS-запит. Так браузер дізнається ip адресу, за якою можна знайти ваш сайт. Потім йде TCP-запит до сервера на з'єднання й відповідь сервера, що дозволяє коннект (докладніше тут). Ми ще навіть не почали нічого завантажувати, а вже втратили 50-100 мс.

 

2. На сервері починається генерація сторінки сайту. Запускається виконання PHP, зчитуються дані з MySQL-бази. Час процесу залежить від завантаження сервера на даний момент, його налаштувань і конфігурації, а так само від якості коду сторінки. Оптимальним вважається 200 мс, але часто цей показник вищий. Згенерований код пересилається браузеру.

 

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

 

4. Браузер вимальовує сторінку з отриманих елементів і виконує java-скрипти.

5 порад щодо оптимізації швидкості завантаження сторінки

1. Використовуйте паралельні завантаження. Браузери можуть завантажувати елементи сайту в декілька потоків. Одночасне число коннектів до одного хосту зазвичай не більше 6. Тобто браузер не може одночасно завантажувати більше 6-ти об'єктів. Загальне число з'єднань з різними хостами в Chrome ver.24 – 9, для Firefox ver.18 – 11. Якщо винести зображення на окремий піддомен, у них буде можливість завантажуватися паралельно з елементами, розміщеними на інших хостах. Але не захоплюйтеся з піддоменами, на кожен новий піддомен додасться час на обробку DNS-запиту.

 

2. Розміщуйте java-скрипти в кінці коду сторінок, бо вони блокують завантаження інших елементів.

 

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

 

4. Стискайте зображення. Думаєте, ваші зображення добре стиснуті? За допомогою сервіса Сompressjpeg.com майже всі зображення можна зменшити на 60-70%, а це дуже важливо для мобільного трафіку. Для зменшення числа коннектів краще використовувати спрайти для об'єднання зображень в одне.

 

5. Спробуйте працювати з CDN. Це мережі, що зберігають окремі елементи сайту (наприклад, шрифти на fonts.gstatic.com, java-скрипти на ajax.googleapis.com, елементи Яндекса на yastatic.net і т.д). Такі мережі покликані прискорити завантаження сайту, віддаючи файли з найближчого геосервера, вони не навантажують ваш сервер і зменшують його трафік. Але доцільність використання CND потрібно перевіряти на своєму сайті, інколи виходить зворотний ефект. Наприклад, одному з наших сайтів шрифти c CDN довантажувати довше, ніж зі свого сервера.

Що ще потрібно оптимізувати?

Отримати готовий перелік рекомендацій по вашому сайту можна за допомогою інструменту PageSpeed Insights for Chrome. Встановлюється в браузер, після чого знаходимо його через меню: Додаткові інструменти – Інструменти розробника – Вкладка PageSpeed – Кнопка «Почати аналіз».

 

Оригінал статті – http://optimizatorsha.ru/master-classes/site-speed/

 

Автор: Олена Камська