Наилучшая конфигурация для Cloudflare для достижения высоких оценок в LCP, TBT и Web Vital для вашего магазина

Производительность веб-сайта является критически важным фактором в создании бесшовного шопинга для ваших клиентов. В этой статье я покажу вам, как добиться высоких оценок в Web Vitals, таких как Largest Contentful Paint [LCP] и Total Blocking Time [TBT], с помощью Cloudflare. Эти конфигурации варьируются от простых настроек до продвинутых оптимизаций.
Прежде чем углубиться, уделите время для оценки текущей производительности вашего сайта с помощью инструмента, такого как Google PageSpeed Insights. Это поможет вам отслеживать улучшения после применения этих настроек.
Почему важны Web Vitals
Web Vitals измеряют ключевые аспекты пользовательского опыта. Вот краткий обзор самых критических метрик, на которых мы сосредоточимся:

Метрика	Что она измеряет	Почему это важно
LCP	Время загрузки самого большого видимого элемента	Влияет на восприятие скорости сайта пользователями
TBT	Время блокировки из-за долгих задач JavaScript	Влияет на интерактивность и отзывчивость
CLS	Сдвиг макета во время загрузки страницы	Обеспечивает визуальную стабильность и удобство

Оптимизируя настройки Cloudflare, вы можете значительно увеличить эти оценки, что приведет к более быстрому и увлекательному опыту для ваших посетителей.

Шаг 1: Настройка вашего домена в Cloudflare и активация CDN

Для начала оптимизации производительности вашего сайта с помощью Cloudflare вам необходимо убедиться, что ваш домен правильно настроен на их платформе и что функция CDN (Content Delivery Network) включена.

Как включить CDN Cloudflare

1. Войдите в свой аккаунт Cloudflare и выберите свой домен.
2. Перейдите в раздел DNS.
3. В записях DNS найдите A или CNAME запись вашего домена.
4. Щелкните на оранжевый значок облака рядом с записью, чтобы включить функцию Proxy Cloud. Когда включено, значок станет ярко-оранжевым, сигнализируя о том, что ваш домен теперь маршрутизируется через CDN Cloudflare.

Специальная заметка для пользователей Selldone

Если вы используете Selldone, вам нужно правильно настроить свой домен для интеграции с CDN Cloudflare. Это гарантирует, что внешний CDN Selldone работал без проблем с вашим сайтом, эффективно доставляя кэшированный контент, при этом поддерживая совместимость с платформой Selldone.
Шаги для конфигурации Selldone:

1. Настройте свой собственный домен в панели управления Selldone.
2. Убедитесь, что внешний CDN направлен на Cloudflare путем правильной настройки ваших записей DNS.
3. Подтвердите, что настройки Cloudflare полностью активированы, включая статус Proxy Cloud. Эти шаги обеспечат полное использование возможностей повышения производительности Cloudflare вашим сайтом на базе Selldone.

Шаг 2: Используйте функцию Speed Test от Cloudflare

Cloudflare предлагает встроенный инструмент Speed Test, предоставляющий ценную информацию о производительности вашего сайта. Эта функция измеряет ключевые метрики, такие как время загрузки, отзывчивость и общие улучшения скорости после внедрения услуг Cloudflare.

Шаг 3: Включите актуальные данные о поведении пользователей в Cloudflare

Понимание поведения ваших пользователей в режиме реального времени имеет решающее значение для оптимизации их опыта на вашем сайте. Функция Real-Time User Insights (RUN) от Cloudflare позволяет вам отслеживать актуальные данные о том, как посетители взаимодействуют с вашим сайтом, предоставляя действенные метрики для повышения производительности и удобства использования.

Шаг 4: Включите все функции оптимизации в Cloudflare

Чтобы максимизировать производительность вашего сайта, включите функции оптимизации, доступные в Cloudflare в разделе Speed. Эти функции предназначены для улучшения времени загрузки, сокращения использования полосы пропускания и улучшения общего пользовательского опыта без больших усилий.
  Некоторые из самых важных функций для ускорения сайта требуют лицензии PRO.
Убедитесь, что вы включили “Cloudflare Fonts” и “Rocket Loader”

Шаг 5: Мгновенные результаты с бесплатным планом Cloudflare

Даже на бесплатном плане Cloudflare вы можете увидеть значительные улучшения производительности, включив правильные функции. Я применил эти оптимизации к marketplace.hanscristy.com, и результаты были мгновенными. Изменения не только улучшили метрики Web Vitals, такие как LCP и TBT, но и повысили общий пользовательский опыт.
 

Шаг 6: Как оптимизации Cloudflare и Selldone влияют на реальную производительность

Позвольте мне рассказать вам, как оптимизации Cloudflare и выделенные технологии Selldone объединяются, чтобы создать непревзойденную производительность, даже в сложных тестовых сценариях.

Понимание проблем с тестами производительности

Инструменты, такие как Lighthouse, GTmetrix и аналогичные платформы, в основном предназначены для статических страниц или веб-сайтов, которые рендерят контент на стороне сервера. Однако Selldone работает иначе:

• 100% PWA: Каждый аспект платформы Selldone — ее основной сайт, панель управления, интернет-магазин и другое — построен как Прогрессивное веб-приложение (PWA). Это означает, что все рендеринг происходит на стороне клиента, предлагая пользователям огромную гибкость в создании кастомизированных панелей управления и интернет-магазинов.
• Динамическая загрузка домена: Пользователи могут загружать Selldone на любом домене, не беспокоясь о реализации сложного бэкенда. Система обрабатывает все динамически, доставляя все в виде одного JavaScript-файла.

Этот уникальный подход предлагает гибкость и скорость, но создает уникальные проблемы при тестировании с помощью инструментов, созданных для серверного рендеринга страниц.

Почему Selldone в 10–100 раз быстрее в реальной жизни

В то время как статические страницы полагаются на сервер для рендеринга HTML для каждого запроса пользователя, PWA-метод Selldone принципиально отличается:
Эффективный сбор данных:

• Вместо рендеринга целых страниц на сервере, Selldone отправляет легкую JSON-структуру, содержащую необходимые данные.
• Например, когда пользователь щелкает на продукт, платформа запрашивает только необходимые данные (например, детали продукта), вместо перезагрузки или рендеринга всей страницы.

Нет задержек при рендеринге на стороне сервера:

• В отличие от платформ, таких как WooCommerce, где каждый клик может запускать серверный рендеринг, Selldone полностью устраняет эту узкую горловину. Все обрабатывается на стороне клиента, что значительно снижает задержку.

Преимущество скорости в реальном времени:

• Пользователи испытывают почти мгновенные переходы между страницами. Эта скорость в реальной жизни делает платформу значительно быстрее по сравнению с сайтами, рендерящими на сервере, даже если традиционные тестовые оценки не полностью отражают это преимущество.

Преодоление технологического узкого места

Достижение высоких тестовых оценок для PWA, рендерящих на стороне клиента, исторически было проблемой из-за:

• Задержки выполнения JS: Рендеринг на стороне клиента сильно зависит от JavaScript, который инструменты тестирования часто штрафуют.
• Динамический контент: В отличие от статического HTML, загрузка динамического контента может показаться более медленной в синтетических тестах.

Но Selldone преодолел эти ограничения в первый раз в мире, объединив:

• Оптимизации Cloudflare (такие как Rocket Loader™ и сжатие Brotli), чтобы оптимизировать доставку ресурсов.
• Совершенная архитектура PWA для реального времени получение данных и рендеринг.

Реальная производительность против синтетических оценок

Хотя синтетические тесты могут показывать более низкие оценки для платформ, рендерящих на клиенте, таких как Selldone, реальная производительность рассказывает другую историю. Панели управления и интернет-магазины Selldone предлагают опыт в 10–100 раз быстрее по сравнению с платформами, рендерящими на сервере, что делает его идеальным решением для современных потребностей в электронной коммерции.
  Если вы хотите воспроизвести настройки Cloudflare, которые мы используем для оптимальной производительности, вот список включенных функций:

Условия производительности веба

Вот дружелюбное и легко понимаемое объяснение условий производительности веба в Web Vitals:

LCP (Largest Contentful Paint)

LCP измеряет, сколько времени требуется для загрузки самой большой видимой части веб-страницы (например, большого изображения или заголовка) и ее появления на экране у пользователей. Рассматривайте это как время, необходимое для того, чтобы ваша страница почувствовала себя “готовой” для начала чтения или взаимодействия с ней.

CLS (Cumulative Layout Shift)

CLS отслеживает, насколько сильно элементы перемещаются неожиданно на веб-странице во время ее загрузки. Например, если кнопка меняет позицию в тот момент, когда вы собираетесь на нее нажать — это сдвиг макета. Низкий балл CLS означает, что ваш сайт ощущается стабильным и плавным.

INP (Interaction to Next Paint)

INP измеряет, насколько быстро ваша веб-страница реагирует на взаимодействия пользователей, такие как нажатие кнопки или ввод в строке поиска. Более быстрый INP означает, что ваш сайт ощущается отзывчивым и пользователи не испытают негативных эмоций, ожидая выполнения действий.

TBT (Total Blocking Time)

TBT вычисляет время, когда ваша страница не реагирует во время загрузки, например, когда пользователь пытается прокрутить или нажать, но ничего не происходит. Более низкий TBT означает, что ваша страница лучше справляется с многозадачностью, позволяя пользователям легко взаимодействовать, пока она загружается.