Чому висока швидкість завантаження сторінок Інтернет-магазину дорожча діаманту в 10К?

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

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

Чому повільні сайти - це погано?

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

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

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

Справа в тому, що в 2018 всі використовують смартфони. Більше половини клієнтів на вашому сайті роблять покупки за допомогою девайсів на Android або iOS (а може бути навіть на Windows Mobile!).

У мобільного інтернету є свої особливості, через які швидкість завантаження сайту повинна бути ідеально оптимізована - так, наприклад, логічно, що мобільний інтернет повільніший, ніж зазвичай. Швидкість 3G мереж в середньому на 40% нижче швидкості вашого домашнього високошвидкісного підключення, тобто не дивно, що сайт, який відкривають за допомогою 3G, повинен бути оптимізований як тільки можливо.

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

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

Не впевнені, чи є у вас проблеми? Перевірте свій сайт з Google Pagespeed Insights - це інструмент, який показує, чи все гаразд зі швидкістю завантаження (і що потрібно виправити). Якщо отримаєте менше 80 балів - потрібно терміново щось робити. Якщо 80-90 - в принципі, все добре, але можна поліпшити ситуацію. Результат в 95-99 - це ідеальний результат, до якого більшість ніколи не наблизиться. Якщо сайт набирає трохи менше 100 балів, можна говорити про те, що такий сайт вантажиться ідеально.

Як виглядає ідеальний сайт?

Як ми вже сказали, завантаження повинно бути виключно швидким. В ідеалі сайт повинен видати 95-100 балів в Pagespeed Insights.Ось так це виглядає на прикладі демо-магазину від компанії NeoSeo:

Пам'ятайте, що ми говорили про важливість оптимізації під мобільні пристрої? Тут теж має бути 95-99 балів. Ідеал виглядає так:

Що робити, щоб поліпшити швидкість завантаження?

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

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

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

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

Як ми прискорюємо сайти?

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

Коли для роботи сайту вже не вистачає ресурсів хостингу, ми переносимо такі сайти на інші, більш швидкі хостинги. VPS / VDS хостинги на швидких SSD і на більш потужних серверах дають відмінний приріст в швидкості.

Ми слідуємо рекомендаціям від Google Pagespeed Insights для максимальної оптимізації швидкості завантаження сторінок Інтернет-магазину. Давайте по черзі:

• Зменшуємо розмір CSS файлу. Чим краще оптимізований CSS код (прогалини, коментарі) - тим швидше завантаження.
• Оптимізуємо HTML код. Видаляємо всі непотрібні символи (ті ж прогалини, коментарі, розриви рядків), зменшуємо розмір HTML файлів і прискорюємо завантаження.

• Оптимізуємо JS. Зменшення файлу JavaScript робиться так само, як HTML / CSS, але тут не тільки прибираються непотрібні символи, а й застосовується обфускація - імена змінних змінюються на більш короткі, що прискорює завантаження але ніяк не впливає на роботу.

• Прибираємо редиректи. Це дуже важливо для мобільного оптимізації - коли клієнт, який використовує смартфон, натискає на посилання на кшталт "site.com", він може відразу перейти на мобільну версію сайту без редиректів, його може перекинути відразу на мобільну версію ( "m.site.com" ), а може взагалі перекинути спочатку на"www.site.com",а потім вже на "m.site.com". Логічно, що перший варіант - найкращий і швидкий, а другий і третій - повільніше і гірше. Ми робимо тільки так, як в першому прикладі - можете зайти на demo.neoseo.com.ua з телефону і перевірити. Все дуже швидко і без редиректів (Google теж підтверджує).

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

• Використовуємо кеш браузера. Це означає, що деякі елементи сайту, на зразок зображень і CSS / JS файлів, кешування (зберігаються) в браузері користувача. Коли користувач заходить на сайт вдруге і всі наступні рази, цей пункт дуже прискорює завантаження.

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

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

• Оптимізуємо завантаження видимого контенту. Робимо так, щоб в першу чергу вантажився важливий контент (контент на першому екрані, який користувач бачить в першу чергу). Зменшуємо кількість даних, які браузер відображає у верхній частині сторінки.

Що потрібно зробити прямо зараз?

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

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