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

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

Як впливає швидкість завантаження сайту на поведінку користувачів ? Ще в 2009 році команда Google проводила експеримент - невеликий групі користувачів штучно занизили швидкість завантаження сторінок видачі на 100-400 м . Це одразу позначилося на їхніх діях - користувачі стали вводити менше запитів , ніж зазвичай. Більш того , чим довше вони піддавалися цьому експерименту , тим рідше починали звертатися до рядку пошуку. Користувачі нетерплячі. Вони скоріше підуть із сайту , ніж стануть чекати кілька секунд , поки на сторінці прогрузити вся навігація , іконки , картинки . Чим швидше сайт , тим вище ПФ За нашими спостереженнями , низька швидкість завантаження сайту негативно впливає на ПФ і , отже , може погано впливати на позиції. Вам знайома ситуація , коли по конкурентному запиту сайт то потрапляє в ТОП - 5 , то відкочується на 10-20 позицій , і так багато разів підряд ? За вагою і рівнем оптимізації він навіть краще конкурентів , але обійти їх і стабільно закріпитися у видачі чомусь не виходить. Причиною часто є слабкі показники поведінкових факторів. У такій ситуації можна провести аудит юзабіліті , попрацювати над інтерфейсами і внутрішньою структурою , але іноді достатньо просто звернути увагу на швидкість завантаження сторінок сайту. Ми провели свій експеримент з одним сайтом з нерухомості. Скоротивши час завантаження сторінок з 6-7 до 3 секунд , ми отримали :
- Зменшення показника відмов з 44% до 40 %;
- Збільшення глибини перегляду з 3,5 до 5 сторінок на відвідувача;
- При цьому середній час на сайті не змінилося. Зниження показника відмов : Зростання глибини перегляду :

У 2010 році Google офіційно повідомив , що повільні сайти можуть ранжуватися нижче . Про вплив швидкості завантаження на позиції в Яндексі офіційних заяв немає , але є рекомендація про вибір хостингу , що забезпечує максимальну швидкість доступу до сайту . Як виміряти швидкість завантаження сайту ? Давайте з'ясуємо , як швидко завантажується ваш сайт . Але не у вас вдома або в офісі , а у всіх відвідувачів в середньому. Якщо зробити заміри швидкості одного і того ж сайту 10 разів на протязі однієї хвилини , можна отримати різні результати. Це тому , що факторів, що впливають на генерацію сторінки , дуже багато, і вони постійно змінюються . На швидкості завантаження позначаються віддаленість сервера до відвідувача , навантаження на сервер і якість його настройки , браузер користувача , код сторінки , число підвантажуваних елементів і т.д . Ви не можете вплинути на чинники з боку відвідувача , але повинні зробити все можливе, щоб ваш сервер віддавав максимально швидкий відповідь .Отже , перевіряємо швидкість завантаження . Звіт по швидкості завантаження в Google Analytics Зайдіть в Google Analytics- Поведінка- Швидкість завантаження сайту- Огляд:
Не лякайтеся , тут показана середня швидкість завантаження з різних країн , браузерів і девайсів . Зазвичай це в 2-3 рази вище , ніж на вашому комп'ютері . Швидкість завантаження з різних браузерів Перевірити швидкість завантаження з різних країн і браузерів можна на сайті Webpagetest.org . Ви отримаєте дані по швидкості при першому заході і при повторному відвідуванні , а ще детальний « водоспад » процесів , з яких складається саме завантаження вашої сторінки: На графіку видно , що , запитуючи дані щоразу з нового хоста , ми втрачаємо час на DNS Lookup . А все java - скрипти блокують паралельну завантаження решти контенту. Тут же ми бачимо повільний DNS Lookup www2.acint.net - це лічильник Sape.ru (добре , що він стоїть внизу і не блокує висновок решти контенту) . Favicon і зображення в рекламних блоках Яндекса з одного боку підвищують CTR оголошення , з іншого уповільнюють швидкість завантаження сайту . Часом невелика картинка в РСЯ може важити близько 60 кб , хоча її можна стиснути до 10 кб. Затримки із завантаженням блоків РСЯ так же трапляються , тому для швидкості сайту краще використовувати блоки без картинок , ну і не забуваємо про асинхронну завантаження коду РСЯ . Детальна таблиця з витраченим часом на кожен елемент виглядає так:
Як відбувається завантаження сторінки Щоб почати оптимізувати швидкість завантаження сайту потрібно розуміти сам процес її генерації. Що ж відбувається , коли ви набираєте адресу сайту і тиснете кнопку 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 ??- Кнопка « Почати аналіз ». Корисне відео про оптимізацію швидкості завантаження сайту :
- Клієнтська оптимізація , Іван Карєв - Оптимізація фронтенда , Олег Мохов - Верстка . Вид знизу , Марина Широчкина

Опубліковано: 28/10/14 @ 12:02
Розділ Різне

Рекомендуємо:

Інтерв'ю - Олексій Паньшін , автор блога seokemerovo.ru і директор Паньшін Групп
20 листопада - 23 березня - Зимівля в Азії. Заїзди 2014 - 2015 рр . Trip & Work
Як ми збільшили конверсію в 6 раз , додавши ім'я клієнта в форму замовлення
Аналіз топових конкурентів . Три методу швидко проаналізувати Топ- 10 з різних сторін
Як залучати цільових відвідувачів за допомогою програми BuzzBundle