Швидкість завантаження сайту
Швидкість завантаження сайту — один із ключових факторів, який допомагає збільшити кількість конверсій та залучити трафік. Weblium постійно вдосконалює швидкість візуалізації вебсайтів, щоб забезпечити вам найкращий користувацький досвід. Однак існують деякі зовнішні фактори, які можуть вплинути на час, потрібний для завантаження вашого сайту.
кеш браузера;
підключення до Інтернету (наприклад, сайт може завантажуватися повільніше в 3G, ніж із Wi-Fi);
пристрій, на якому ви переглядаєте сайт (наприклад, старі телефони завантажують сайт повільніше, ніж нові);
власні коди — віджети, аналітика, CSS (додаються як через налаштування сайту, так і за допомогою блоку вбудованого коду в редакторі);
відео та важкі зображення (переважно ті, що розміщено на домашній сторінці та вгорі сторінки, адже тоді вони завантажуються під час відкриття сайту);
застарілі блоки;
важкі шрифти;
браузерні розширення.
Ви можете оцінити ефективність свого сайту за допомогою різноманітних сервісів перевірок швидкості сторінки. Найпопулярнішими інструментами є Google PageSpeed Insights, YSlow та GTmetrix.
Якщо отриманий вами результат є незадовільним, перегляньте кроки нижче.
Очистіть кеш браузера.
Одним з поширених факторів, які можуть вплинути на швидкість вашого сайту, є кеш браузеру та файли cookie. Очистка кешу та файлів cookie видаляє всі накопичені дані, які можуть уповільнюювати роботу вашого сайту або спричиняти несправності.
Підказка: для більш точної перевірки реальної швидкості завантаження сайту рекомендуємо це робити у режимі Incognito.
Перевірте підключення до Інтернету.
Спробуйте відкрити сайт за допомогою різних інтернет-мереж — наприклад, з дому, роботи, Wi-Fi, мобільного Інтернету тощо. Пам'ятайте, що певні провайдери можуть мати обмеження на швидкість інтернету, що впливає на швидкість завантаження сайту.
Примітка: вищенаведені два пункти стосуються фактичної швидкості завантаження сайту. На результати Google PageSpeed Insights та подібних їй інструментів практично не впливають.
Оптимізуйте шапку сайту та блок під нею.
Для тесту PageSpeed Insights (та інших схожих інструментів), а саме для показників мобільної версії сайту дуже важливо, щоб видимий контент, який відображається при відкритті сайту (шапка та перший блок під нею), завантажувалися якнайшвидше — саме перші блоки завантажуються у першу чергу. Тому ці блоки бажано зробити "легкими", тобто з якомога найменшим вмістом контенту (особливо без зображень значного розміру з великою вагою). Якщо другий блок (після шапки та першого блоку) теж частково є видимим після відкриття сайту — скажімо, якщо перший блок є невисоким — тоді цей другий блок також бажано оптимізувати, щоб у ньому не було багато зображень, особливо важких. Або ж активувати перемикач розтягування першого блоку на усю висоту екрану.
У разі, якщо швидкість завантаження десктопної (комп’ютерної) версії сайту вас влаштовує, а швидкість мобільної — ні, то щоб не редагувати блок для десктопу, ви можете створити два ідентичні блоки: один для десктопної версії, а інший для мобільної версії, зробити блок для мобільної версії з меншою кількістю зображень або із зображенням з меншою вагою, а потім кожен із блоків приховати від відображення там, де він не потрібен.
Удоскональте власний код та код сторонніх сервісів.
Майте на увазі, що власний HTML, CSS, JS код може зменшити оцінку продуктивності вашого сайту, тому спробуйте обмежити його використання. Ви можете підвищити швидкість сторінки, оптимізувавши свій код (шляхом використання лаконічніших та технічно оптимальніших функцій і CSS-правил, видалення пробілів та інших непотрібних символів тощо).
Важливо: оскільки вищенаведені сервіси по перевірці швидкості сайтів не мають доступу до всього коду конструктору, вони можуть помилково визначати той чи інший код нашого редактору як непотрібний (хоча насправді він є важливим) і, відповідно, хибно відображати це у результатах як помилку, що також негативно вплине на кінцевий бал.
Оптимізуйте мультимедійні файли.
Weblium автоматично оптимізує зображення, які ви додаєте на сайт. Тим не менш, враховуйте кількість зображень, які ви додаєте на сторінку, оскільки на завантаження кожного з них потрібен час.
Примітка: ми автоматично оптимізовуємо растрові зображення (jpeg, png), проте векторні (svg) — ні. Вони завантажуються до медігалереї в оригінальному розмірі.
Якщо ви бажаєте покращити швидкість завантаження сайту, функція оптимізації для фонового зображення має бути увімкнена:
Відео з Youtube / Vimeo можуть суттєво впливати на швидкість сайту. Ми не заперечуємо використанню відеофайлів, але радимо враховувати їхню кількість.
Підказка: якщо ви помітили повільне завантаження відео, додане через YouTube, можна спробувати завантажити його через Vimeo і навпаки.
Для покращення фактичної швидкості завантаження сайту можна вимкнути опцію автовідтворення відео, котре додане як елемент:
Оновіть блоки.
Для підвищення продуктивності блоків ми випускаємо їхні нові версії, які миттєво стають доступними на вашому сайті. Здебільшого оптимізація блоків відбувається автоматично, але зрідка, щоб скористатися цими оновленнями, необхідно натиснути кнопку Оновити у правому верхньому куті блоку:
Обмежте використання важких шрифтів.
Ми рекомендуємо зменшити кількість шрифтів на сайті до двох, щоб підтримувати дизайн узгодженим, а сторінки — легшими. Шрифти сайту завантажуються під час його відкриття і їхня велика кількість може уповільнити відкриття сайту.
Пам'ятайте, що користувацькі шрифти, які ви завантажили до редактору, можуть відчутно уповільнити швидкість завантаження вашого сайту. Ми не відмовляємо вас їх використовувати, але радимо враховувати їхню кількість на сайті.
Для зменшення фактичної швидкості завантаження сайту, а також для покращення результатів перевірки вищезазначених сервісів, ви можете вимкнути опцію передзавантаження шрифтів у їхніх налаштуваннях. Для цього вам потрібно відкрити Стилі сайту, далі у вкладці Шрифти натиснути на кнопку Налаштування та перевести перемикач Пререндер у вимкнене положення:
Як вона працює:
Якщо ця опція вимкнена, то показник буде кращим, але у разі повільної роботи інтернет-з’єднання може бути візуально помітна заміна стандартних шрифтів браузеру на ті, що у вас обрані.
Якщо вона увімкнена, то браузер буде чекати їх завантаження і не відобразить шрифти, доки вони не будуть повністю завантажені.
Ця особливість дозволяє обрати між візуальною якістю для пристроїв з повільним інтернетом та кращими показниками PageSpeed Insights чи їй подібних сервісів.
Перш ніж почати, майте на увазі, що на швидкість сайту можуть впливати:
кеш браузера;
підключення до Інтернету (наприклад, сайт може завантажуватися повільніше в 3G, ніж із Wi-Fi);
пристрій, на якому ви переглядаєте сайт (наприклад, старі телефони завантажують сайт повільніше, ніж нові);
власні коди — віджети, аналітика, CSS (додаються як через налаштування сайту, так і за допомогою блоку вбудованого коду в редакторі);
відео та важкі зображення (переважно ті, що розміщено на домашній сторінці та вгорі сторінки, адже тоді вони завантажуються під час відкриття сайту);
застарілі блоки;
важкі шрифти;
браузерні розширення.
Ви можете оцінити ефективність свого сайту за допомогою різноманітних сервісів перевірок швидкості сторінки. Найпопулярнішими інструментами є Google PageSpeed Insights, YSlow та GTmetrix.
Якщо отриманий вами результат є незадовільним, перегляньте кроки нижче.
Вирішення проблем із швидкістю завантаження сайту
Очистіть кеш браузера.
Одним з поширених факторів, які можуть вплинути на швидкість вашого сайту, є кеш браузеру та файли cookie. Очистка кешу та файлів cookie видаляє всі накопичені дані, які можуть уповільнюювати роботу вашого сайту або спричиняти несправності.
Підказка: для більш точної перевірки реальної швидкості завантаження сайту рекомендуємо це робити у режимі Incognito.
Перевірте підключення до Інтернету.
Спробуйте відкрити сайт за допомогою різних інтернет-мереж — наприклад, з дому, роботи, Wi-Fi, мобільного Інтернету тощо. Пам'ятайте, що певні провайдери можуть мати обмеження на швидкість інтернету, що впливає на швидкість завантаження сайту.
Примітка: вищенаведені два пункти стосуються фактичної швидкості завантаження сайту. На результати Google PageSpeed Insights та подібних їй інструментів практично не впливають.
Оптимізуйте шапку сайту та блок під нею.
Для тесту PageSpeed Insights (та інших схожих інструментів), а саме для показників мобільної версії сайту дуже важливо, щоб видимий контент, який відображається при відкритті сайту (шапка та перший блок під нею), завантажувалися якнайшвидше — саме перші блоки завантажуються у першу чергу. Тому ці блоки бажано зробити "легкими", тобто з якомога найменшим вмістом контенту (особливо без зображень значного розміру з великою вагою). Якщо другий блок (після шапки та першого блоку) теж частково є видимим після відкриття сайту — скажімо, якщо перший блок є невисоким — тоді цей другий блок також бажано оптимізувати, щоб у ньому не було багато зображень, особливо важких. Або ж активувати перемикач розтягування першого блоку на усю висоту екрану.
У разі, якщо швидкість завантаження десктопної (комп’ютерної) версії сайту вас влаштовує, а швидкість мобільної — ні, то щоб не редагувати блок для десктопу, ви можете створити два ідентичні блоки: один для десктопної версії, а інший для мобільної версії, зробити блок для мобільної версії з меншою кількістю зображень або із зображенням з меншою вагою, а потім кожен із блоків приховати від відображення там, де він не потрібен.
Удоскональте власний код та код сторонніх сервісів.
Майте на увазі, що власний HTML, CSS, JS код може зменшити оцінку продуктивності вашого сайту, тому спробуйте обмежити його використання. Ви можете підвищити швидкість сторінки, оптимізувавши свій код (шляхом використання лаконічніших та технічно оптимальніших функцій і CSS-правил, видалення пробілів та інших непотрібних символів тощо).
Важливо: оскільки вищенаведені сервіси по перевірці швидкості сайтів не мають доступу до всього коду конструктору, вони можуть помилково визначати той чи інший код нашого редактору як непотрібний (хоча насправді він є важливим) і, відповідно, хибно відображати це у результатах як помилку, що також негативно вплине на кінцевий бал.
Оптимізуйте мультимедійні файли.
Weblium автоматично оптимізує зображення, які ви додаєте на сайт. Тим не менш, враховуйте кількість зображень, які ви додаєте на сторінку, оскільки на завантаження кожного з них потрібен час.
Примітка: ми автоматично оптимізовуємо растрові зображення (jpeg, png), проте векторні (svg) — ні. Вони завантажуються до медігалереї в оригінальному розмірі.
Якщо ви бажаєте покращити швидкість завантаження сайту, функція оптимізації для фонового зображення має бути увімкнена:
Відео з Youtube / Vimeo можуть суттєво впливати на швидкість сайту. Ми не заперечуємо використанню відеофайлів, але радимо враховувати їхню кількість.
Підказка: якщо ви помітили повільне завантаження відео, додане через YouTube, можна спробувати завантажити його через Vimeo і навпаки.
Для покращення фактичної швидкості завантаження сайту можна вимкнути опцію автовідтворення відео, котре додане як елемент:
Оновіть блоки.
Для підвищення продуктивності блоків ми випускаємо їхні нові версії, які миттєво стають доступними на вашому сайті. Здебільшого оптимізація блоків відбувається автоматично, але зрідка, щоб скористатися цими оновленнями, необхідно натиснути кнопку Оновити у правому верхньому куті блоку:
Обмежте використання важких шрифтів.
Ми рекомендуємо зменшити кількість шрифтів на сайті до двох, щоб підтримувати дизайн узгодженим, а сторінки — легшими. Шрифти сайту завантажуються під час його відкриття і їхня велика кількість може уповільнити відкриття сайту.
Пам'ятайте, що користувацькі шрифти, які ви завантажили до редактору, можуть відчутно уповільнити швидкість завантаження вашого сайту. Ми не відмовляємо вас їх використовувати, але радимо враховувати їхню кількість на сайті.
Для зменшення фактичної швидкості завантаження сайту, а також для покращення результатів перевірки вищезазначених сервісів, ви можете вимкнути опцію передзавантаження шрифтів у їхніх налаштуваннях. Для цього вам потрібно відкрити Стилі сайту, далі у вкладці Шрифти натиснути на кнопку Налаштування та перевести перемикач Пререндер у вимкнене положення:
Як вона працює:
Якщо ця опція вимкнена, то показник буде кращим, але у разі повільної роботи інтернет-з’єднання може бути візуально помітна заміна стандартних шрифтів браузеру на ті, що у вас обрані.
Якщо вона увімкнена, то браузер буде чекати їх завантаження і не відобразить шрифти, доки вони не будуть повністю завантажені.
Ця особливість дозволяє обрати між візуальною якістю для пристроїв з повільним інтернетом та кращими показниками PageSpeed Insights чи їй подібних сервісів.
Оновлено: 22/03/2024
Дякуємо!