Продуктивність веб-сайтів є критично важливим фактором у створенні безшовного покупницького досвіду для ваших клієнтів. У цій статті я покажу вам, як досягти високих балів у Web Vitals, таких як найбільше видиме наповнення (LCP) та загальний час блокування (TBT) за допомогою Cloudflare. Ці налаштування варіюються від простих коригувань до просунутих оптимізацій.
Lighthouse Best Practice for Ecommerce Websites
Перед тим, як зануритися у цю тему, витратьте кілька хвилин, щоб оцінити поточну продуктивність вашого веб-сайту за допомогою інструмента, наприклад, Google PageSpeed Insights. Це допоможе вам відстежити покращення після застосування цих налаштувань. Чому важливі Web Vitals Web Vitals вимірюють ключові аспекти користувацького досвіду. Ось короткий огляд найважливіших метрик, на яких ми зосередимося:
Метрика
Що вимірює
Чому це важливо
LCP
Час завантаження найбільшого видимого елемента
Впливає на сприйняття швидкості сайту користувачами
TBT
Час, заблокований тривалими завданнями JavaScript
Впливає на інтерактивність та чуйність
CLS
Зміна макета під час завантаження сторінки
Гарантує візуальну стабільність та зручність використання
Оптимізуючи налаштування Cloudflare, ви можете значно покращити ці показники, що призведе до швидшого та привабливішого досвіду для ваших відвідувачів.
Score of the Website Before Optimization
Крок 1: Налаштуйте ваш домен на Cloudflare та увімкніть CDN
Щоб почати оптимізувати продуктивність вашого веб-сайту за допомогою Cloudflare, спочатку потрібно впевнитися, що ваш домен налаштовано належним чином на їхній платформі, і функцію CDN (мережа доставки контенту) увімкнено.
Як увімкнути CDN Cloudflare
Увійдіть до свого облікового запису Cloudflare і виберіть свій домен.
Перейдіть до розділу DNS.
У записях DNS знайдіть A або CNAME запис вашого домену.
Натисніть на помаранчеву хмаринку поруч із записом, щоб увімкнути функцію Proxy Cloud. Коли це буде увімкнено, значок стане яскраво помаранчевим, що сигналізує про те, що ваш домен тепер маршрутизується через CDN Cloudflare.
DNS & CDN Config For a Shop Domain
Особлива примітка для користувачів Selldone
Якщо ви користуєтеся Selldone, вам потрібно правильно налаштувати свій домен для інтеграції з CDN Cloudflare. Це забезпечить безперебійну роботу зовнішнього CDN Selldone з вашим сайтом, ефективно доставляючи кешований контент, одночасно підтримуючи сумісність з платформою Selldone. Кроки для налаштування для Selldone:
Налаштуйте свій персональний домен у панелі керування Selldone.
Переконайтеся, що зовнішній CDN вказує на Cloudflare, правильно налаштувавши свої записи DNS.
Підтвердіть, що налаштування Cloudflare повністю активовані, включаючи статус Proxy Cloud. Ці кроки забезпечать повне використання функцій, що підвищують продуктивність, для вашого веб-сайту, створеного за допомогою Selldone.
Крок 2: Функція тестування швидкості Cloudflare
Cloudflare пропонує вбудований інструмент Speed Test, який надає цінну інформацію про продуктивність вашого веб-сайту. Ця функція вимірює ключові показники, такі як час завантаження, чуйність та загальне покращення швидкості після впровадження послуг Cloudflare.
Test Page Speed by Cloudflare
Крок 3: Увімкнення досліджень користувачів у реальному часі в Cloudflare
Розуміння поведінки ваших користувачів у реальному часі є вирішальним для оптимізації їх досвіду на вашому веб-сайті. Функція Real-Time User Insights (RUN) Cloudflare дозволяє відстежувати живі дані про те, як відвідувачі взаємодіють з вашим сайтом, надаючи корисні метрики для покращення продуктивності та зручності використання.
Enable RUM in Cloudflare - It will add a js inline your website
Крок 4: Увімкніть усі функції оптимізації в Cloudflare
Щоб максимізувати продуктивність вашого веб-сайту, увімкніть функції оптимізації, доступні в Cloudflare в розділі Швидкість. Ці функції покликані покращити час завантаження, зменшити використання пропускної здатності та з легкістю покращити загальний користувацький досвід.
Enable Optimization Options in Cloudflare
Деякі з найважливіших функцій для прискорення сайту потребують ліцензії PRO. Переконайтеся, що увімкнені “Шрифти Cloudflare” та “Rocket Loader”
Cloudflare Fonts
Крок 5: Негайні результати з безкоштовним планом Cloudflare
Навіть із безкоштовним планом Cloudflare ви можете побачити значні покращення продуктивності, увімкнувши правильні функції. Я застосував ці оптимізації до marketplace.hanscristy.com, і результати були миттєвими. Зміни не лише покращили метрики Web Vitals, такі як LCP та TBT, але й підвищили загальний користувацький досвід.
Improvement in LPC / TBT / FCP of a Shop Built by Selldone
Крок 6: Як оптимізації Cloudflare та Selldone впливають на реальну продуктивність
Дозвольте мені провести вас через те, як оптимізації Cloudflare та присвячені технології Selldone поєднуються для створення неперевершеної продуктивності, навіть у складних сценаріях тестування.
Розуміння труднощів з тестуванням продуктивності
Інструменти, такі як Lighthouse, GTmetrix та подібні платформи, в основному призначені для статичних сторінок або веб-сайтів, які рендерять контент на стороні сервера. Однак Selldone працює інакше:
100% PWA: Кожен аспект платформи Selldone—його основний веб-сайт, панель керування, вітрина тощо—побудовано як прогресивний веб-додаток (PWA). Це означає, що все рендеринг відбувається на клієнтській стороні, надаючи користувачам величезну гнучкість у дизайні кастомізованих панелей керування та вітрин.
Динамічна завантаженость домену: Користувачі можуть завантажити Selldone на будь-який домен, не турбуючись про складний бекенд. Система обробляє все динамічно, доставляючи як єдиний файл JavaScript.
Цей унікальний підхід забезпечує гнучкість і швидкість, але створює особливі виклики під час тестування за допомогою інструментів, розроблених для серверного рендерингу.
Чому Selldone є у 10–100 разів швидшим у реальному житті
Поки статичні сторінки покладаються на сервер для рендерингу HTML для кожного запиту користувача, підхід Selldone PWA принципово інший: Ефективне отримання даних:
Замість того, щоб рендерити цілі сторінки на сервері, Selldone надсилає легку структуру JSON, що містить необхідні дані.
Наприклад, коли користувач натискає на продукт, платформа отримує лише необхідні дані (такі як деталі продукту), а не перезавантажує або рендерить всю сторінку.
Відсутність затримок при рендерингу на стороні сервера:
На відміну від платформ, таких як WooCommerce, де кожен клік може спонукати до рендерингу на стороні сервера, Selldone зовсім усуває це вузьке місце. Все обробляється на клієнтській стороні, що різко зменшує затримку.
Перевага швидкості в реальному часі:
Користувачі відчувають майже миттєві переходи між сторінками. Ця швидкість у реальному житті робить платформу значно швидшою порівняно з веб-сайтами, що рендеряться на сервері, навіть якщо традиційні бали тестування не відображають цю перевагу повністю.
Ламання технологічного вузького місця
Досягнення високих балів тестування для PWA, рендерених на стороні клієнта, історично було викликом через:
Затримки виконання JS: Рендеринг на стороні клієнта значною мірою залежить від JavaScript, за що інструменти тестування часто карають.
Динамічний контент: На відміну від статичного HTML, завантаження динамічного контенту може виглядати повільніше в синтетичних тестах.
Але Selldone вперше на інтернеті подолав ці обмеження, поєднуючи:
Оптимізації Cloudflare (такі як Rocket Loader™ і Brotli Compression) для оптимізації доставки ресурсів.
Сучасна архітектура PWA для отримання даних і рендерингу в реальному часі.
Продуктивність у реальному світі проти синтетичних балів
У той час як синтетичні тести можуть показувати нижчі бали для платформ, що рендеряться на клієнті, таких як Selldone, продуктивність у реальному світі розповідає іншу історію. Панель керування та вітрина Selldone пропонують досвід у 10–100 разів швидший порівняно з платформами, що рендеряться на сервері, що робить його ідеальним рішенням для сучасних потреб електронної комерції.
Selldone.com PWA - Single Page Application progress over time
Якщо ви хочете будь-яке з налаштувань Cloudflare, які ми використовуємо для оптимальної продуктивності, ось список увімкнених функцій:
Selldone.com Cloudflare Optimize Speed Config
Selldone Blog Post Page Score - 100 in Mobile and PC
Терміни продуктивності веб
Ось просте та зрозуміле пояснення термінів продуктивності вебу в Web Vitals:
LCP (Найбільше видиме наповнення)
LCP вимірює, як довго потрібно, щоб найбільша видима частина веб-сторінки (така як велике зображення або заголовок) завантажилася та була видимою для користувачів. Уявіть, що це час, який потрібен вашій сторінці, щоб відчути себе “готовою” для початку читання чи взаємодії.
CLS (Кумулятивний зміщення макета)
CLS відстежує, як багато елементів несподівано рухаються на веб-сторінці під час її завантаження. Наприклад, якщо кнопка зміщує позицію в той момент, коли ви збираєтеся на неї натиснути—це зміщення макета. Низький бал CLS означає, що ваш сайт відчувається стабільно та плавно.
INP (Інтеракція до наступного малюнка)
INP вимірює, як швидко ваша веб-сторінка реагує на взаємодії користувачів, наприклад, при натисканні кнопки або введенні у рядок пошуку. Швидший INP означає, що ваш сайт відчувається чуйно і користувачі не будуть відчувати розчарування, чекаючи на виконання дій.
TBT (Загальний час блокування)
TBT розраховує час, коли ваша сторінка не відповідає під час завантаження, наприклад, коли користувач намагається прокрутити або натиснути, але нічого не відбувається. Нижчий TBT означає, що ваша сторінка краще справляється з багатозадачністю, дозволяючи користувачам взаємодіяти гладко під час завантаження.
Add Comment
