10 причин, чому ваш сайт повільно завантажується (і як їх виправити)

h2: 1. Неоптимізовані зображення

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

Формат зображення є ще одним важливим чинником.

Оберіть формат, який пасує до вмісту: JPEG для фотографій, PNG або SVG для плоскої графіки і логотипів, і WebP або AVIF там, де їх підтримує ваша CMS, бо вони зазвичай ще менші.

Висновки:

• Перевірте розмір файлів ваших зображень. Усе понад 1MB є справді неприйнятним.
• Використовуйте JPEG для фотографій, PNG або SVG для графіки, і WebP або AVIF там, де їх підтримує ваша CMS.
• Використовуйте waterfall тести, щоб легко переглядати розміри зображень і виправляти їх.

h2: 2. Проблеми з JavaScript

Доступність plugins JavaScript/jQuery зробила дуже зручним додавання динамічного вмісту на сайти. Проте, якщо її реалізовано неправильно, JavaScript може підкосити швидкість завантаження вашого сайту.

Потрібен час, щоб завантажити, інтерпретувати і виконати jQuery та JavaScript. Тож якщо ви використовуєте кілька викликів API для відображення даних JavaScript/jQuery, це може спричинити суттєву затримку під час завантаження сторінок.

Висновки:

• Завантажуйте скрипти асинхронно і об’єднайте інструменти за одним tag manager.
• Розгляньте щось на кшталт Segment або Google Tag Manager. Один скрипт для всіх ваших інструментів!

h2: 3. Важкі вбудовані відео та анімації

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

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

Висновки:

• Вбудовані відео і бібліотеки анімації важкі.
• Завантажуйте відеоплеєри за кліком, а не під час завантаження сторінки.
• Віддавайте перевагу CSS анімаціям перед великими бібліотеками JavaScript.

h2: 4. Надмірна кількість запитів HTTP

Велика кількість файлів JavaScript, CSS і зображень може призвести до надто багатьох запитів HTTP. Коли користувач відвідує вашу сторінку, браузер запитує кожен із цих файлів, і ті, що блокують рендеринг, затримують сторінку. HTTP/2 і HTTP/3 передають багато запитів через одне з’єднання, тож багато дрібних файлів коштують набагато менше, ніж раніше. Сьогодні найбільше важать загальна кількість байтів і файли, що блокують рендеринг.

Висновки:

• Переконайтеся, що ваш сервер підтримує HTTP/2 або HTTP/3.
• Відкладайте або прибирайте CSS і JavaScript, що блокують рендеринг, де це можливо.
• Мініфікуйте файли CSS і JavaScript, щоб зменшити кількість байтів, які мають завантажити відвідувачі.

h2: 5. Невикористання технік кешування

Увімкніть браузерне (HTTP) кешування для статичних файлів і серверне кешування сторінок для динамічних сторінок. Наша стаття про кешування PHP охоплює OPcache, object caches і page caches.

h2: 6. Неохайний код

Ще одним поширеним винуватцем повільності сайту є неохайний код. Коли ви створюєте сайт, зайві пробіли, inline стилі, порожні рядки і непотрібні коментарі можуть збільшити розмір stylesheet.

Прибравши ці зайві елементи, ви можете стиснути код, зменшити розмір файлу і покращити загальний час завантаження сторінки, а якщо ви стежите за позиціями у пошуку, то, ймовірно, побачите і зростання показників SEO. Технічною мовою цей процес називається мініфікацією. Якщо вам незручно працювати з кодом, є кілька онлайн-інструментів, які очищають і мініфікують файли stylesheet. Або ж це може зробити для вас розробник у межах процесу build.

Висновки:

• Уникайте inline CSS.
• Намагайтеся не створювати кілька CSS stylesheets там, де можна обійтися одним.
• Мініфікуйте!

h2: 7. Невикористання стиснення (gzip або Brotli)

Увімкнувши стиснення gzip, ви наказуєте серверу стискати кожну текстову відповідь (HTML, CSS, JavaScript, JSON, SVG) перед відправленням у браузер. Brotli стискає ще сильніше, і його підтримує кожен сучасний браузер. Зображення на кшталт JPEG, PNG і WebP уже стиснуті і нічого від цього не виграють.

Висновки:

• Стиснення gzip або Brotli є легким виграшем у продуктивності.
• Воно стискає кожну текстову відповідь (HTML, CSS, JavaScript) перед відправленням у браузер.

h2: 8. Забагато реклами

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

Реклама rich media, як-от pop-under, interstitial і автоматичні завантаження, може створювати сотні запитів HTTP, через що ваш сайт перестає відповідати.

Завантажуйте рекламу з невеликою затримкою, після того як відрендерено основний вміст.

h2: 9. Невикористання сервісу CDN

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

h2: 10. Ваша платформа хостингу

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

Managed hosting має це включати.

У EuroVPS ми будуємо web stack навколо вашого застосунку, хай він працює на WordPress, Magento, PrestaShop чи Drupal.

h2: Висновок

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