Швидкість сторінки та SEO: завантажуйте сайт менш ніж за 2 секунди

Швидкість сторінки є і фактором SEO-ранжування, і бізнес-метрикою. Швидкі сторінки займають вищі позиції в Google. Швидкі сторінки також конвертують більше відвідувачів у клієнтів. Дослідження показують, що затримка завантаження на 1 секунду призводить до зниження конверсій на 7%. Для інтернет-магазинів повільні сторінки щодня коштують тисячі доларів втрачених продажів. Для видавців повільні сторінки означають менше переглядів і нижчий дохід від реклами. Для всіх сайтів швидкість сторінки має вирішальне значення.

Орієнтир швидкого завантаження: менш ніж 2 секунди. Сторінки, що завантажуються за 2 секунди або швидше, користувачі сприймають як швидкі. Сторінки, що завантажуються 3-5 секунд, здаються повільними. Сторінки, що завантажуються понад 5 секунд, часто покидають. Ваша мета проста: довести час завантаження до менш ніж 2 секунд, потім до менш ніж 1,5 секунди і продовжувати оптимізувати. Важливе кожне покращення на 100 мс.

Метрики завантаження сторінки

Час завантаження сторінки складається з кількох компонентів. Time to First Byte (TTFB) показує, скільки часу сервер відповідає. Largest Contentful Paint (LCP) показує, коли стає видимим основний контент. Повне завантаження настає, коли всі ресурси завершили завантаження. Ці метрики не однакові, і оптимізація кожної потребує різних тактик.

TTFB є часом відповіді вашого сервера. Якщо TTFB перевищує 600 мс, ваш сервер повільний. Типові причини: неефективний код бекенду, запити до бази даних або перевантаження сервера. Виправляйте TTFB, оптимізуючи код бекенду, переходячи на кращий хостинг, вмикаючи кешування або використовуючи мережу доставки контенту (CDN).

Навчальний курс Google з продуктивності докладно пояснює кожну метрику. LCP та інші показники Core Web Vitals розглянуто детально. Розуміння цих метрик є передумовою ефективної оптимізації швидкості сторінки.

Оптимізація зображень: найбільший вплив

Зображення зазвичай становлять 50-80% ваги сторінки. Неоптимізовані зображення є найшвидшим способом уповільнити ваш сайт. Оптимізуйте зображення, зменшуючи розмір файлу без втрати якості. Три тактики:

Стиснення: використовуйте інструменти стиснення зображень, щоб зменшити розмір файлу. Зображення JPEG стискаються у 10-40 разів. Зображення PNG стискаються у 2-5 разів. Використовуйте такі інструменти, як TinyPNG, ImageOptim, або плагіни у вашій CMS для автоматичного стиснення. Стискайте перед завантаженням на сайт.

Сучасні формати: використовуйте WebP замість JPEG чи PNG. WebP стискає на 25-35% краще за JPEG, зберігаючи якість. Браузери тепер підтримують WebP нативно. Використовуйте JPEG як запасний варіант для старіших браузерів за допомогою елемента ``.

Відкладене завантаження: завантажуйте зображення лише тоді, коли користувачі прокручують сторінку поблизу них. Використовуйте нативний HTML-атрибут `loading="lazy"` для зображень нижче першого екрана. Це відкладає завантаження зображень, які користувачі, можливо, ніколи не побачать, і суттєво пришвидшує початкове завантаження сторінки.

Посібник Google з оптимізації містить конкретні техніки оптимізації зображень. Одна лише правильна оптимізація зображень часто скорочує час завантаження сторінки на 30-50%.

Оптимізація CSS і JavaScript

CSS і JavaScript, що блокують відображення, уповільнюють завантаження сторінки. Ресурси, що блокують відображення, не дають браузеру відобразити сторінку, доки їх не завантажено й не оброблено. Відкладайте некритичні CSS і JavaScript, щоб спершу відображався критичний контент.

Мінімізуйте та відкладайте JavaScript: великі файли JavaScript блокують відображення. Розділіть свій JavaScript на менші частини та відкладіть завантаження некритичних скриптів. Використовуйте `