Як довго люди можуть чекати на завантаження?
Іноді 4 секунд достатньо, щоб людина не дочекалася завантаження сайту – і цей час постійно зменшується. Дослідження Google показують, що скоро бренди матимуть всього 2,4 секунди для привернення уваги.
Спробуйте оцінити свій сайт: чи достатньо швидко завантажується головна сторінка, інтерактивні елементи, галерея. Подумайте, скільки часу ви готові зачекати. Ваші клієнти чекатимуть вдвічі менше. Такі реалії боротьби за увагу користувачів в мережі, тож покращення швидкодії сайту = більше продажів.
Сам термін “швидкодія” – це про час, який займає коректне відтворення всіх елементів. Невчасне відтворення відео та слайдерів не лише “крадуть” час, а й створюють відчуття, що сайт несправний. Перевірити швидкість завантаження сайту можна безкоштовними сервісами: Google PageSpeed Insights, gtmetrix.com та ін.
Якщо розглядати питання з технічного боку – швидкодія сайту важлива для індексації та ранжування сторінок в Google. Затримка у видачі контенту знижує конверсії та суттєво впливає на лояльність клієнтів. Як це можливо виправити й отримати найкращий показник швидкості завантаження? Розповідаємо про наші методи далі.
І перш ніж почнемо, кілька слів про хостинг – іноді саме від його вдосконалення залежатиме швидкість завантаження. У роботі над підтримкою сайтів ми звертаємо на це увагу та допомагаємо підібрати новий хостинг чи пропонуємо свій, щоб заповнити цю прогалину. Якщо ж швидкодія сервера хостингу в порядку, переходимо до конкретних дій.
Як ми оптимізуємо швидкість завантаження
Крок 1. Оптимізація візуальних елементів. Часто проблема повільного завантаження сайту в надто великих зображеннях. Знаємо, може здаватися, що це дуже простий крок, але саме такими найчастіше і нехтують.
Усі зображення (фото, іконки, логотипи) ми оптимізовуємо, а також перевіряємо технічну коректність шаблонів сторінки. Так сайт зможе використовувати саме той розмір, який потрібен для кожного блоку, незалежно від початкової величини. Також з сервера краще видалити всі графічні файли, які вже не актуальні та не будуть використані в роботі.
Надалі цей час можна заощадити, встановивши додатковий плагін – він буде оптимізовувати зображення відразу при додаванні на сайт. Такий плагін уже входить у преміум-модулі наших пакетів підтримки. Детальніше про пакети і що вони включають можна переглянути за посиланням: Sitegist support.
Крок 2. Кешування сайту. Дозвіл на кешування сайту означає, що запит на сервер від користувача прийде лише під час першого відвідування. Файли кешу зберігають код, потрібний для завантаження сторінки, типові зображення, тож вдруге браузер просто візьме дані звідти. Це, своєю чергою, зменшує навантаження на сервер і покращує швидкодію.
Крок 3. Виправлення помилок на сайті – переважно 303 та 404, щоб уникнути непотрібних переадресацій. На цьому етапі тестуємо сайт та виправляємо наявні помилки.
Крок 4. Стиснення CSS та JS файлів. Файли JavaScript і CSS також сповільнюють завантаження сторінок, тож оптимізація їхнього розміру – ще одна важлива складова швидкодії сайту. Інколи трапляються помилки в коді – їх, звісно ж, виправляємо. Ще одне зручне рішення – встановити плагін, який дозволить виключити на сторінці неактивний код (наприклад, елемента, який є лише на одній зі сторінок), щоб браузер не витрачав зайвий час на його завантаження.
Крок 5. Видалення непотрібних плагінів з сайту. Досвід роботи з багатьма WordPress-сайтами показує, що автоматизація – це, звісно, добре, але велика кількість доданих плагінів дорівнює поганій швидкодії. Це не означає, що для виправлення ситуації потрібно видалити все – кожен плагін ми перевіряємо та за потреби змінюємо “найважчі” чи ті, які не використовуються.
Часто функції, які на сайті виконує плагін, можна замінити кодом, що значно полегшить його роботу. Візьмемо для прикладу слайдер – типовий і дуже поширений елемент на сайтах, який додає щоразу 1-2 секунди до тривалості завантаження. Часто його додають в шаблон домашньої сторінки у блок з товаром, відгуками чи статтями блогу. Як пришвидшити завантаження та зберегти цей елемент на сайті? Наша команда пропонує в цьому випадку замінити плагін за допомогою коду.
Крок 6. Налаштування пріоритетного завантаження. Тут хочемо нагадати, що файли можуть бути прив’язані до першого екрану сторінки, другого і т.д. Ми налаштовуємо завантаження так, щоб вони спрацьовували почергово – залежно від того, яка частину першою побачить користувач.
Кожен з цих кроків має свої нюанси та ефективність на конкретному сайті. Часто рішення може бути досить індивідуальним і потребувати оптимізації коду, шрифтів чи інших найрізноманітніших елементів. Ми ж хотіли поділитися зрозумілою інструкцією.
Якщо після пройдених кроків проблема зі швидкістю все ще залишається або ви хочете просто заощадити свій час – радо допоможемо на персональній консультації. Для цього напишіть нам на пошту чи заповніть заявку на сайті!