5; прості прийоми для зменшення часу завантаження веб-сторінки

Одрі радить вам ознайомитися з цим посібником щодо технічного SEO.

5 порад щодо скорочення часу завантаження вашого сайту

Оптимізуйте зображення
Використовуйте кешування
Увімкнути стиснення
Оптимізуйте файли CSS
Розмістіть сценарії нижче ватерлінії

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

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

Що є вирішальним фактором, коли мова йде про швидкість завантаження ?

Розмір файлу має важливе значення. Браузеру потрібно багато часу, щоб завантажити елементи веб-сторінки: HTML-код, таблиці стилів, сценарії та зображення. Час завантаження збільшується із збільшенням обсягу даних.

Як провести технічний SEO-аудит ?

Завантажте цей безкоштовний посібник та визначте ефективну технічну стратегію SEO для оптимізації роботи вашого сайту.

Оскільки очікування користувачів Інтернету стають все вищими, веб-сторінки, як правило, набирають вагу. Кожна нова функція приховує сценарій або таблицю стилів, яка обтяжує веб-сайт.

Як оцінити швидкість веб-сайту ?

Кілька інструментів дозволяють надійно аналізувати швидкість веб-сайту. Найпопулярнішими є Google PageSpeed Insights, Website Grader та DareBoost. Ці служби аналізують ефективність сайту та виявляють його слабкі місця.

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

Як прискорити завантаження вашого веб-сайту ?

Деякі останні CMS, такі як HubSpot, мають вбудовані функції прискорення, але такі системи, як WordPress, вимагають, щоб ви бруднили руки.

Ось основні рефлекси, які кожному веб-майстру слід розглянути:

1 - Оптимізуйте зображення

Зображення особливо потребують пропускної здатності. Щоб оптимізувати їх, почніть із зміни їх розміру.

Багато веб-майстрів просто встановлюють розмір зображення в деклараціях CSS, вимагаючи від браузера завантаження оригінального зображення. Таким чином, якщо зображення розміром 1000 х 1000 пікселів відображається у форматі 100 х 100 пікселів, браузер змушений завантажувати зображення у десять разів важче, ніж потрібно.

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

Інший спосіб оптимізації зображень - стиснути їх. Кілька безкоштовних інструментів, таких як tinypng.com, дозволяють зменшити розмір файлу, зберігаючи прийнятну якість, для рівня стиснення від 25 до 80%. Якщо ви використовуєте систему оптимізації вмісту HubSpot (COS), зображення буде стиснуто автоматично для покращення швидкості та продуктивності вашого веб-сайту.

2 - використовувати кешування

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

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

3 - Активуйте стиснення

Увімкнення стиснення еквівалентно архівуванню веб-сайту в папці .zip. Ця функція дозволяє значно зменшити розмір веб-сторінки, а отже, прискорити її завантаження.

Ступінь стиснення файлів HTML і CSS може досягати від 50 до 70%, набагато менше даних для завантаження для відвідувача. Стиснення потрібно налаштувати на сервері, і тому воно залежить від вашого хоста.

4 - Оптимізуйте файли CSS

Декларації CSS завантажуються до відображення сторінки. Чим довше вони завантажують, тим довше очікують відвідувачі. Отже, оптимізація файлів CSS забезпечує швидший доступ до ваших сторінок.

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

Як діяти далі? Спочатку перевірте, чи має ваша система управління вмістом функцію оптимізації CSS і чи ввімкнено її. За замовчуванням HubSpot оптимізує файли CSS, а Wordpress - ні.

Якщо ваша система управління вмістом не пропонує цієї опції, ви можете обрати безкоштовний Інтернет-сервіс, такий як csscompressor.com. Просто скопіюйте та вставте декларації CSS в інструмент, а потім натисніть «Стиснути», щоб отримати оптимізовану таблицю стилів.

5 - Розмістіть сценарії нижче ватерлінії

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

Інший спосіб контролю завантаження сценарію - це прикріплення атрибутів defer або async до файлів .js, вбудованих у ваш веб-сайт.

Кожен із цих тегів має своє використання, яке важливо відрізняти.

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

Щоб використовувати ці атрибути, просто додайте їх до тегів наступним чином:

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

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

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

Оригінальна публікація 26 липня 2017 р., Оновлена 27 липня 2020 р