Швидкість вашого сайту має пряме відношення до коефіцієнту конверсії та враження від користувацького інтерфейсу. Сучасні відвідувачі сайтів не звикли чекати, поки сайт довго завантажується, і вони йдуть або назад в пошукову систему, або на сайт до конкурента.
Чим довше завантажується ваш сайт, тим більше ймовірність втратити відвідувача. Максимально допустимий час завантаження сторінки зараз становить всього 2 секунди. Якщо ви не вкладаєтесь в цей час, ви втратите майже половину своїх потенційних користувачів.
Отже, час завантаження сайту має дуже великий вплив на вашу прибуток, особливо якщо у вас інтернет-магазин. Дана стаття покликана висвітлити процес тестування швидкості вашого сайту за допомогою безкоштовних онлайн-інструментів, а також показати, як поступати з результатами такого тесту. Ці підказки допоможуть зробити ваш сайт більш швидким.
Отже, давайте почнемо!
Дуже добре, що в мережі Інтернет можна знайти багато інструментів для перевірки швидкості сайту. Всі вони не тільки покажуть час завантаження сайту, але й дадуть більш-менш адекватні рекомендації щодо його поліпшення. У даній статті ми зробимо короткий огляд 3-х найбільш популярних (і безкоштовних) інструментів для цієї мети.
Ви можете використовувати для перевірки всі розглянуті інструменти, адже це займе всього кілька хвилин. І в цьому випадку у вас будуть більш детальні звіти.
Google PageSpeed Insights
Один з найпопулярніших інструментів – це Google PageSpeed Insights. Він дозволяє тестувати швидкість сайту не тільки для настільних комп’ютерів, але й для мобільних пристроїв. У результатах тесту ви побачите рекомендації, застосування яких дозволить вам поліпшити оцінку швидкості завантаження сайту. Повністю оптимізований сайт отримує максимальну оцінку – 100 зі 100.
GTmetrix
Інший корисний інструмент – це GTmetrix. Він дозволяє отримати різний перспективний аналіз швидкості вашого сайту, а також дає досить слушні пропозиції щодо поліпшення оцінки вашого сайту.
Pingdom Website Speed Test
Це також один з найвідоміших інструментів для тесту швидкості сайту. Pingdom оцінює продуктивність вашого сайту і порівнює його з деякими іншими перевіреними веб-сайтами. Унікальність цього інструменту полягає в тому, що ви можете вибрати локацію, з якої проводити тест. Це дозволяє дізнатися, як швидкість вашого сайту різниться в різних точках світу.
Кожен з перерахованих вище інструментів тестування швидкості робить тест по-своєму. Ймовірно, що показники вашого сайту будуть різнитися в аналізі, але ви отримаєте вичерпну відповідь, а також ділові пропозиції щодо поліпшення.
Не забувайте про магічні 2-ві секунди. Хоча, в ідеалі, ваш сайт повинен завантажуватися швидше. В іншому випадку ви ризикуєте втратити деяких своїх відвідувачів.
Якщо зробити градацію важливості пропозицій з усіх 3-х інструментів, тоді це будуть наступні пункти: мінімізація коду, оптимізація зображень і використання кешування в браузері. Давайте коротко розглянемо рішення для цих та деяких інших пропозицій.
Якщо ви використовуєте для свого сайту CMS (Content Management System – Систему керування вмістом), наприклад, WordPress або Magento, тоді ви можете використовувати вже готові плагіни та модулі, які розраховані на поліпшення швидкості сайту.
ВАЖЛИВО: підходьте до вибору цих додатків усвідомлено, а не з метою накопичити їх побільше.
Якщо у вас статичний сайт, тоді, швидше за все, вам потрібно буде робити оптимізацію вручну.
Оптимізація зображень
Одним з найбільш поширених пропозицій, які дають інструменти перевірки швидкості, є оптимізація картинок на вашому сайті. Зазвичай це означає, що ви показуєте картинки на сторінці з динамічно розрахованим розміром. Також картинки не повинні мати дуже велику вагу. Наприклад, якщо зробити фото на телефон і завантажити на сайт, вага такого фото буде становити 2,5-3,5 Мб. Таке фото буде дуже довго вантажитись. Бажано такі фото оптимізувати і «стискати». Під оптимізацією розуміється зменшення дозволу картинки і видалення непотрібних даних.
Налаштування кешування статичного контенту
Кешування не тільки зберігає статичні версії сторінок вашого сайту в браузері. При правильному налаштуванні воно також мінімізує HTML, картинки, CSS і JavaScript. Щоб включити кешування в браузері, вам потрібно буде відредагувати файл .htaccess.
Використання CDN
CDN або мережа доставки контенту зберігає ваші статичні файли (картинки, скрипти, CSS-стилі), щоб віддавати їх відвідувачам сайту з географічно найближчого до них сервера. CDN – ще одне прекрасне рішення, яке дозволить значно збільшити швидкість завантаження контенту і, відповідно, всього сайту.
Найбільш популярні рішення: Amazon CloudFront, Cloudflare, Google CDN.
Використання ледачого завантаження (Lazy Load)
Ця функція призначена для прискорення завантаження сайту, за допомогою якої на сторінці завантажуються елементи тільки в фокусі. Коли ви прокручуєте сторінку вниз, інші елементи будуть завантажуватися тільки в міру необхідності, що призводить до зменшення смуги пропускання і прискорення роботи сайту.
В основному, дана функція реалізується за допомогою JavaScript. Ми підготували приклад готового рішення по реалізації Lazy-load картинок на своєму сайті.
Оптимізація коду
В одній з минулих статей ми робили огляд корисних інструментів, за допомогою яких ви зможете оптимізувати код сторінки, CSS-стилів і JavaScript.
Намагайтеся не «засмічувати» свій сайт поганим кодом, або нагромадженням непотрібних стилів та інструкцій.
Є два способи командувати жінкою, але ніхто їх не знає Френк МакКінні Кін Хаббард
Найгірше, що в інформаційній війні завжди програє той, хто говорить правду, адже він обмежений правдою,…
Якщо тобі колись захочеться знайти таку людину, яка зможе здолати будь-яку, навіть найважчу біду і…
Уявіть, що ви відкрили піцерію у Києві. Ваша піца настільки смачна, що її хочуть замовити…
Уявіть, що ваш веб-сайт — це велика бібліотека, а ваш сервер — це головний бібліотекар.…
Уявіть, що ваш офіс захищений надійною охоронною системою: у вас є міцні двері, сигналізація та…