Топ-5 помилок розробника, які сповільнюють ваш сайт

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

Швидкість завантаження сторінки, хіба то так важливо?

Усі навколо тільки й говорять про те, що клієнти не люблять чекати і йдуть до першого ліпшого конкурента, як тільки ваш сайт завантажується трішки довше, ніж вони того очікували. Чи резонно це? Безумовно, так!

Саме швидкість завантаження сайту впливає на 3 кита, на яких стоїть ваш сайт і приносить вам гроші: видимість сайту, конверсії та юзабіліті.

• Видимість сайту. Насправді, при ранжуванні вашого веб-сайту Google враховує і час його завантаження. Чим він менше – тим легше вашим потенційним клієнтам вас знайти.  
• Конверсії. Повільні сайти можна з легкістю охрестити кілерами конверсій  – вони розчаровують ваших користувачів, які ще зовсім нещодавно були зацікавлені у вашому сайті. 
• Юзабіліті. Ви ж прагнете задовольнити усіх своїх існуючих та потенційних клієнтів, правда? У цьому випадку схема проста – зробіть свій сайт якомога швидшим та зручнішим, щоб користувач залишався на ньому якомога довше.

Час страхітливих цифр настав – просто погляньте на декілька результатів дослідження, проведеного HubSpot у 2020-му: 

• Якщо Yahoo зменшить час завантаження сторінки на 0,4 секунди, трафік може зрости на 9%.
• Сповільнення сторінки всього лише на 1 секунду може коштувати Amazon 1,6 мільярда доларів щорічно.
• Затримка пошуку в Bing на 2 секунди призведе до втрати доходу на відвідувача на 4,3%, зменшення кліків на 3,75% та зниження запитів на 1,8%. 

Здається, коментарі тут зайві…

Чому ви втрачаєте своїх клієнтів?

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

Забагато HTTP-запитів

Кожного разу, коли браузеру потрібно отримати файл, сторінку чи зображення з веб-сервера, робляться запити HTTP. Зазвичай браузер обмежує кількість одночасних запитів до 4–8. 

Дослідження, проведене Yahoo, стверджує, що 80% часу завантаження вашої програми залежить саме від запитів HTTP, тож їх зменшення, ясна річ, призведе до швидшого завантаження сторінки. Тут усе просто. 

Як же зменшити кількість запитів HTTP?

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

• Застосуйте метод Lazy Loading. Зображення на сторінці краще завантажувати не всі одночасно, а використовуючи відкладене завантаження, так зване Lazy Loading. На сьогодні існує чимало плагінів, здатних просто і швидко оптимізувати завантаження зображень, той самий Lazy Load, наприклад. Тут варто звернути увагу на наступний момент – використовуйте тамбнейли (заглушки), які тримають форму сайту до того моменту, поки не завантажаться справжні зображення.

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

• Забезпечте підтримку HTTP/2 на вашому сервері. Для завантаження веб-сайту за допомогою HTTP/2 здійснюється лише одне підключення від браузера до сервера і одночасно дозволяється кілька запитів. Це набагато ефективніше, ніж створювати нове з’єднання для кожного ресурсу. 

Відсутність CDN

Якщо користувач вашого сайту фізично перебуває далеко від сервера – це безпосередньо впливає на HTTP-запити, і час завантаження сайту збільшується в рази. Для таких випадків і потрібна CDN (географічно розподілена мережа доставки контенту). Так користувач зможе швидко отримувати ресурси, необхідні для веб-сторінки, із сервера, який розташований до нього найближче. 

Не забудьте також правильно налаштувати CDN для кешування контенту з правильними значеннями TTL (Time To Live) для її ефективного використання.  

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

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

Завеликі розміри файлів та розмір сторінки

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

Рішення є. Просто зменшіть розміри файлів за рахунок стиснення (наприклад, за допомогою програми Gzip) – час завантаження сторінки скоротиться в рази, а пропускна здатність, навпаки, збільшиться. Cловом, одні лишень плюси. 

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

Завантаження усіх ресурсів водночас

Якщо завантажувати усі ваші файли CSS та JS одночасно, це сповільнить завантаження сторінки в рази, адже вона буде рендеритись доти, допоки всі ці ресурси не будуть завантажені.

За можливості намагайтеся завантажувати менш важливі скрипти і стилі перед тегом, що закриває, </body>. Але при цьому перевіряйте, чи все в порядку зі скриптами.

Забагато редиректів

Здебільшого ми використовуємо редиректи для обробки переміщених або видалених сторінок, щоб уникнути так званих “битих” (непрацюючих) посилань. Однак що більше редиректів, то більше запитів HTTP. Google радить власникам сайтів вимикати переадресації, щоб оптимізувати час завантаження (особливо це актуально для Mobile First сайтів).  

Щоб перевірити усі редиректи своєї програми, ви можете використовувати різноманітні інструменти, наприклад CheckURLs. Так ви зможете виявити непотрібні вам редиректи.

Взагалі існує два типи редиректів: 

• редиректи з боку сервера – швидкі й кешовані
• редиректи з боку клієнта – повільні й некешовані

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

Висновок

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

Насолоджуйтесь максимальною швидкістю свого сайту з новими тарифами Turbo NVMe Хостингу від Hostpro та діліться своїми враженнями. Кваліфіковані спеціалісти техпідтримки допоможуть вирішити усі ваші технічні запитання. Зв’язатися з нами ви можете будь-яким зручним для вас способом – через онлайн-чат на сайті, тікет в білінг-системі, Telegram, месенджер Facebook, пошту [email protected] та за телефоном +38 (067) 823-83-81.