У цій статті наша команда ділиться досвідом впровадження аудиту для виявлення проблем з допомогою PageSpeed Insights, розкриває ключові кроки як підвищити швидкість завантаження сайту на прикладі кейсу роботи з онлайн магазином лайтбоксів та вітрин з США.
На початку нашої співпраці з онлайн магазином Novodek, ми отримали технічне завдання з мінорними правками цього сайту на CMS WordPress та змінами для покращення PageSpeed показників.
Для збільшення швидкості завантаження цього онлайн магазину, ми визначили конкретні кроки та стратегію процесу оптимізації:
- Аудит та виявлення проблем у дизайні/коді.
- Оптимізація зображень.
- Покращення Largest Contentful Paint (LCP).
- Взаємодія з Cumulative Layout Shift (CLS) та Total Blocking Time (TBT).
- Оптимізація черги завантаження JS та CSS файлів.
- Візуальний чекап та збереження важливих елементів дизайну після оптимізації.
У результаті роботи можна очікувати введення у зелену зону показника для десктопа (90+) та ближче до верхньої межі жовтої зони показника (70+) для мобільних пристроїв.
На момент початку нашої роботи обидва показники, декстоп та мобайл, знаходилися у червоній зоні.
У звіті від PageSpeed Insights можна побачити багато рекомендацій для покращення того чи іншого показника, які в підсумку формують загальний показник PageSpeed. Деякі з них не важкі у реалізації, але забирають багато часу через те, що їх потрібно реалізовувати для кожного шаблону сторінки окремо, а не для всього сайту глобально.
Деякі з них не можна реалізувати (наприклад “Зменште код JavaScript, який не використовуєте”), адже це вплине на функціонал і зовнішній вигляд сайту, що суперечить нашому технічному завданню.
Пройдемося по кожному з кроків процесу оптимізації швидкості сайту, які ми реалізували, детальніше:
Аудит та виявлення проблем у дизайні/коді
Розробка та запуск Novodek відбувався не нашою командою, тому для початку ми дослідили як реалізований онлайн магазин, протестували той чи інший функціонал, щоб не «поламати» його при наступних кроках. Радимо проводити ретельний аналіз всіх елементів сайту для ідентифікації факторів, що впливають на швидкість і які можна оптимізувати без впливу на зовнішній вигляд сайту.
Оптимізація зображень
У першу чергу, потрібно виводити зображення у правильному розмірі. Ми побачили, що на сайті зображення завантажувались в оригінальних розмірах. Це перше, через що сильно знижувався показник PageSpeed.
- Важливість: великі розміри зображень можуть значно уповільнювати завантаження сторінки і вимагає більше часу на передачу даних, тому це критична операція для покращення швидкості.
- Вирішення проблеми:
✓ Використовувати інструменти оптимізації зображень.
✓ Вибір оптимального формату зображення (наприклад, WebP для веб-сайтів), який забезпечує високу якість при меншому об’ємі.
✓ Конвертувати зображення у формат WebP, реалізувати на backend частині сайту, щоб процес відбувався на сервері.
- Метою є зменшення розміру зображень без значущого впливу на їхню якість, забезпечуючи оптимальний баланс між швидкістю завантаження та візуальною привабливістю.
Покращення Largest Contentful Paint (LCP)
Для подальшого підвищення показників PageSpeed Insights, необхідно перейти до оптимізації показника LCP (Largest Contentful Paint).
LCP (Largest Contentful Paint) — це час, коли більшість контенту на видимій частині екрану вже доступна для перегляду. Хорошим показником вважається 2.5 секунди. Він має значущий вплив на загальний рейтинг швидкості завантаження сторінок. Цей показник залежить від швидкості завантаження найбільшого медіафайлу, що миттєво відображається користувачеві при завантаженні сторінки.
Зазвичай це об’єкти, такі як банери чи головні зображення товарів. Для їх оптимізації, слід відключити “lazyload” для цих об’єктів та реалізувати “preload”, надаючи їм пріоритет у черзі завантаження.
- Lazyload: зазвичай, lazyload відкладає завантаження зображень до того моменту, коли вони стають видимими для користувача. Однак це може затримувати відображення найбільшого контенту, впливаючи на LCP.
- Preload: відключення lazyload і використання preload дозволяє надати пріоритет найбільшим медіафайлам у черзі завантаження, забезпечуючи швидке їхнє відображення.
Крім того, важливо враховувати вплив прелоадера, оскільки його наявність може блокувати відображення основного контенту сторінки та негативно впливати на LCP та FCP. Ми рекомендували розглянути можливість видалення прелоадера, або переробити його логіку.
- Вирішення проблеми:
✓ Внесення змін у код сайту для відключення lazyload для найбільших медіафайлів.
✓ Додавання в код сайту елементів preload для найбільших елементів, забезпечуючи їхнє пріоритетне завантаження.
✓ Переробка логіки прелоадера для мінімізації його впливу на LCP та FCP показники.
Взаємодія з Cumulative Layout Shift (CLS) та Total Blocking Time (TBT)
Видалення прелоадера повпливає на зміни у показнику CLS (Cumulative Layout Shift — Сукупний зсув макета).
Цей показник вказує на те, як довго елементи керування змінюють свою позицію або розмір під час завантаження сторінки, таких як підвантаження зображень, шрифтів та ініціалізація слайдерів.
Показник перебуває в нормі, коли зміни у розмірах елементів перекриваються дією прелоадера. Однак видалення прелоадера для покращення показника LCP може призвести до миттєвого погіршення показника CLS. Такий компроміс вимагає уважного аналізу та оптимізації для збалансування обох факторів.
Оптимізація черги завантаження JS та CSS файлів
Також важливо налагодити порядок завантаження js та CSS файлів. Ефективний підхід полягає у підключенні файлів, які безпосередньо впливають на відображення елементів на першому екрані, на початку сторінки. Інші файли можна підключати після завантаження основного контенту. Цей покращить показник Total Blocking Time (TBT) та First Contentful Paint (FCP).
Зменшення обсягу файлів допомагає зменшити час завантаження сторінки, зокрема на мобільних пристроях з обмеженим обсягом даних.
Ці показники також може покращити налаштування кешування ресурсів. Це може бути реалізовано або на рівні CMS, або на рівні сервера. Локальне кешування допомагає зменшити час завантаження ресурсів при повторних відвідуваннях сторінки, покращуючи загальну швидкість сайту.
За допомогою сайту-сервісу “webspeedtest cloudinary” ми отримали інформацію про те, як вийти за рамки простого стиснення зображень. Сайт аналізує розміри зображень, формат, якість коду та дотичні фактори, що можуть значно підвищити швидкість завантаження сторінки.
Візуальний чекап та збереження важливих елементів дизайну після оптимізації
Важливо враховувати, що впровадження всіх вищезазначених оптимізацій може суттєво вплинути на зовнішній вигляд сайту. Тому потрібен додатковий час для адаптації та візуальної корекції сайту. Збереження важливих елементів дизайну після оптимізації є критичним для задоволення користувацького досвіду.
Ми оптимізували онлайн магазин Novodek, зберігаючи всі ключові елементи дизайну та брендового стилю. Стабільність брендових елементів підтримує сприйняття бренду та його розпізнаваність.
Висновки
Щоб реалізувати вищезгадані оптимізації нам знадобилося 30 годин. У результаті, ми отримали покращення показників швидкості завантаження, як і передбачалося у технічному завданні.
Особливо вражаючі результати отримані для мобільних пристроїв. Якщо в початковому плані ми сподівалися підняти показники до рівня, ближчого до жовтої зони з рейтингом 70, то фактично нам вдалося досягти рівня 90 в питанні швидкості завантаження сайту на мобільних пристроях.
Отже, оптимізація PageSpeed не лише виконала поставлені завдання, але й відкрила нові можливості для покращення загальної продуктивності та забезпечила високий рівень задоволення користувачів онлайн-магазину Novodek.
Дані з Google Search Console надані клієнтом. Діаграма показує скільки було сторінок з низькою шкидкістю/скільки залишилось на дату після проведених робіт.
Помітили вашу “больову точку” у цій статті? Бажаєте покращити користувацький досвід, збільшити конверсії та підвищити швидкість завантаження сайту?
Напишіть нам і ми підберемо та реалізуємо індивідуальні рішення для оптимізації показників PageSpeed Insights вашого онлайн магазину.
