Крок 0: вимірюємо швидкість
Для вимірювання швидкості я використав браузер Chrome — його інспектор мережі. Що потрібно зробити:
- Відкрити сторінку.
- Затиснути Cmd+Alt+I або Ctrl+Shift+I.
- Відкриється інспектор Chrome, після чого перейдіть у вкладку «Мережа».
- Поставте галочку в рядку «Очистити кеш».
- Готово! Залишилося лише оновити сторінку.
Зверніть увагу! Вимірювати швидкість роботи сторінки потрібно лише після того, як вона розміщена на хостингу.
Далі внизу інспектора ви побачите цифри. Нас цікавлять лише дві з них — я виділив їх на скріншоті:
- Час повного промальовування сторінки.
- Обсяг завантажуваних даних.
А тепер найголовніше — прискорення варто починати з таких показників: 3,3 мегабайта і 3,5 секунди. Це дуже важливо!
Крок 1: стискаємо зображення
Обов’язковий пункт, який не можна ігнорувати. Зображення, розміщені на лендингу, можуть важити у кілька разів менше за початковий розмір. Для цього достатньо скористатися сервісом tinypng.com.
Далі потрібно знайти всі зображення, які знаходяться в папці з лендингом. Усі знайдені картинки потрібно стиснути, завантажити оптимізовані версії та замінити ними старі файли. Старі зображення необхідно повністю видалити.
Результат таких дій може бути справді ефективним: зменшення ваги сторінки на кілька сотень кілобайт або навіть на 2–3 мегабайти. Це один із найпростіших і найшвидших способів прискорення лендингу.
Крок 2: «ліниве» завантаження зображень
На лендингу завжди багато зображень. Сторінка завантажується доти, доки весь контент не буде підвантажений на пристрій користувача. Під час цього процесу сайт може підвисати, а зображення — завантажуватися із затримкою.
Якщо у верстці використовується кастомний шрифт, він може завантажуватися пізніше за важкі зображення. У результаті користувач бачить «стрибаючу» верстку або некоректні шрифти. Уникнути цього допоможе ліниве завантаження зображень.
Лінива підгрузка означає, що картинки завантажуються лише тоді, коли користувач до них доходить. Поки він знаходиться у верхній частині сторінки, нижні блоки не завантажуються.
Увімкнути ліниве завантаження можна так:
- Відкрийте файл index.html у будь-якому текстовому редакторі.
- Увімкніть режим «Пошук і заміна».
- Знайдіть <img
- Замініть <img на <img loading=”lazy”
Готово! За кілька секунд ви отримаєте такий результат:
- Вага лендингу зменшилась з 3,3 MB до 1,6 MB.
- Швидкість завантаження скоротилася з 3,5 до 1,6 секунди.
Крок 3: Cloudflare
Cloudflare — це масштабний сервіс для обслуговування доменів і прискорення доставки контенту користувачам. Простими словами, Cloudflare допоможе зробити ваш сайт значно швидшим. Достатньо підключити домен до сервісу — і швидкість завантаження лендингу зросте у кілька разів.
Підсумок: після виконання всіх кроків ми скоротили час завантаження сайту до 1,7 секунди — це чудовий результат з урахуванням початкової ваги лендингу.
Підсумки:
- Вагу лендингу зменшено з 3,3 MB до 1,6 MB — +106%.
- Швидкість завантаження скоротилася з 3,5 секунди до 0,6 секунди — +483%.
І все це — лише за кілька хвилин!
Джерело: https://cpamafia.top/articles/uskoryaem-lending-na-483-3-prostyh-shaga/