Як ми скоротили час завантаження сайту до менш ніж однієї секунди
Швидкість — це не просто показник марнославства, вона впливає на позиції в пошуку та дохід. Ось детальний опис роботи над продуктивністю, яку ми проводимо для кожної збірки, у порядку пріоритетності.
Більшість повільних сайтів є такими не з якихось загадкових причин. Вони гальмують через кілька передбачуваних проблем, які накопичуються одна на одну — і вирішуються вони в цілком передбачуваному порядку. Коли клієнт звертається до нас із трисекундним часом завантаження, нам рідко потрібні якісь екзотичні трюки. Нам потрібна дисципліна.
Це той самий чекліст, який ми виконуємо для кожного проєкту з оптимізації продуктивності, приблизно в порядку пріоритетності. Кожен крок є відносно дешевим порівняно з його ефектом, і більшість сайтів починають працювати відчутно швидше вже після перших трьох кроків.
Вимірюйте перед тим, як щось змінювати
Неможливо покращити те, що ви не вимірюєте, і ви точно не зможете довести покращення без базових показників. Ми починаємо кожну роботу з польових даних, а не лише з лабораторних результатів.
- Лабораторні — Lighthouse та WebPageTest для контрольованого відтворюваного знімка.
- Польові — метрики реальних користувачів (CrUX / RUM) для розуміння того, що люди відчувають насправді.
- Бюджет — жорстке обмеження для кожного маршруту, щоб регресії виявлялися в CI, а не в продакшені.
Лабораторна оцінка в 100 балів нічого не означає, якщо ваші реальні користувачі мають телефони середнього сегмента та нестабільний інтернет. Оптимізуйте під польові умови.
Позбудьтеся ресурсів, що блокують рендеринг
Найбільша перемога на більшості сайтів — це виведення CSS та JavaScript із критичного шляху. Браузер не може відобразити сторінку, поки не завершить парсинг ресурсів, які блокують рендеринг, тому чим їх менше, тим швидше з’явиться вміст.
// відкласти все, що не є критично важливим
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
requestIdleCallback(load);
else setTimeout(load, 2000);Вбудовуйте невеликий обсяг CSS, необхідний для першого екрана, а решту завантажуйте асинхронно. Відкладайте некритичні скрипти. Мета — перше відмальовування, яке не чекає нічого, без чого не можна обійтися.
Ставтеся до зображень як до лімітованого бюджету
Зображення зазвичай є найважчим елементом на сторінці, і в них найпростіше припуститися помилок. Три правила охоплюють дев’яносто відсотків випадків:
- Використовуйте сучасні формати — AVIF або WebP — з альтернативними варіантами.
- Масштабуйте зображення відповідно до їхніх фактичних розмірів відображення; ніколи не завантажуйте hero-зображення розміром 3000px у слот 600px.
- Застосовуйте ліниве завантаження (lazy-load) для всього, що розташоване нижче першого екрана, і резервуйте місце, щоб уникнути зсуву макета.
Кешуйте на межі (edge)
Коли сторінка вже оптимізована, наступне питання — як швидко байти доходять до користувача. CDN з розумними заголовками кешування перетворює 600-мілісекундний запит до вихідного сервера на 30-мілісекундний запит з периферійного вузла (edge). Для динамічного контенту stale-while-revalidate забезпевує миттєву відповідь, оновлюючи дані у фоновому режимі.
Продуктивність — це функція. Ми виділяємо на неї бюджет так само, як і на будь-яку іншу частину збірки.
Результат
У проєкті, який надихнув на написання цієї статті, показник найбільшого відмальовування вмісту (LCP) головної сторінки покращився з 3,1 до 0,9 секунди, а органічна конверсія помітно зросла протягом місяця. Ніякої магії — лише згаданий вище чекліст, виконаний покроково.
Якщо ваш сайт здається повільним і ви не знаєте, з чого почати, зв’яжіться з нами — короткий аудит зазвичай виявляє дві-три найважливіші зміни, які дадуть найбільший ефект.