La Mejor Configuración para Cloudflare para Obtener las Mejores Puntuaciones en LCP, TBT y Métricas Web para Tu Tienda

El rendimiento web es un factor crítico para crear una experiencia de compra fluida para tus clientes. En este artículo, te mostraré cómo conseguir las mejores puntuaciones en las Métricas Web como el Mayor Pintado de Contenido (LCP) y el Tiempo Total de Bloqueo (TBT) con Cloudflare. Estas configuraciones van desde ajustes simples hasta optimizaciones avanzadas.
Antes de profundizar, tómate un momento para evaluar el rendimiento actual de tu sitio web utilizando una herramienta como Google PageSpeed Insights. Esto te ayudará a seguir las mejoras después de aplicar estos ajustes.
Por qué Importan las Métricas Web
Las Métricas Web miden aspectos clave de la experiencia del usuario. Aquí tienes un resumen rápido de las métricas más críticas en las que nos enfocaremos:

Métrica	Qué Mide	Por Qué Importa
LCP	Tiempo tomado para cargar el elemento más grande visible	Afecta la percepción de velocidad del sitio por parte de los usuarios
TBT	Tiempo bloqueado por tareas largas de JavaScript	Impacta la interactividad y la capacidad de respuesta
CLS	Cambio de diseño durante la carga de la página	Asegura estabilidad visual y usabilidad

Al optimizar la configuración de tu Cloudflare, puedes aumentar significativamente estas puntuaciones, lo que lleva a una experiencia más rápida y atractiva para tus visitantes.

Paso 1: Configura Tu Dominio en Cloudflare y Habilita el CDN

Para comenzar a optimizar el rendimiento de tu sitio web con Cloudflare, primero necesitarás asegurarte de que tu dominio esté configurado correctamente en su plataforma y que la función CDN (Red de Entrega de Contenido) esté habilitada.

Cómo Habilitar Cloudflare CDN

1. Inicia sesión en tu cuenta de Cloudflare y selecciona tu dominio.
2. Navega a la sección DNS.
3. En los Registros DNS, localiza tu registro A o CNAME.
4. Haz clic en el ícono de nube naranja junto al registro para habilitar la función de Nube Proxy. Cuando esté habilitada, el ícono se volverá de color naranja brillante, indicando que tu dominio ahora está enroutado a través de la CDN de Cloudflare.

Nota Especial para Usuarios de Selldone

Si estás utilizando Selldone, necesitarás configurar tu dominio correctamente para integrarlo con la CDN de Cloudflare. Esto asegura que la CDN externa de Selldone funcione sin problemas con tu sitio, entregando contenido en caché de manera eficiente mientras mantiene la compatibilidad con la plataforma de Selldone.
Pasos para Configurar para Selldone:

1. Configura tu dominio personalizado en el panel de control de Selldone.
2. Asegúrate de que la CDN externa apunte a Cloudflare configurando correctamente tus registros DNS.
3. Confirma que los ajustes de Cloudflare están completamente activados, incluyendo el estado de Nube Proxy. Estos pasos asegurarán que tu sitio web impulsado por Selldone aproveche al máximo las características de aumento de rendimiento de Cloudflare.

Paso 2: Función de Prueba de Velocidad de Cloudflare

Cloudflare ofrece una herramienta de Prueba de Velocidad integrada que proporciona información valiosa sobre el rendimiento de tu sitio web. Esta función mide métricas clave como el tiempo de carga, la capacidad de respuesta, y las mejoras generales de velocidad después de implementar los servicios de Cloudflare.

Paso 3: Habilitar Información de Usuario en Tiempo Real en Cloudflare

Comprender el comportamiento de tus usuarios en tiempo real es crucial para optimizar su experiencia en tu sitio web. La función Información de Usuario en Tiempo Real (RUN) de Cloudflare te permite rastrear datos en vivo sobre cómo los visitantes interactúan con tu sitio, brindando métricas procesables para mejorar el rendimiento y la usabilidad.

Paso 4: Habilita Todas las Funciones de Optimización en Cloudflare

Para maximizar el rendimiento de tu sitio web, habilita las características de optimización disponibles en Cloudflare bajo la pestaña Velocidad. Estas funciones están diseñadas para mejorar los tiempos de carga, reducir el uso de ancho de banda y mejorar la experiencia del usuario en general sin esfuerzo.
  Algunas de las funciones más importantes para acelerar el sitio requieren una licencia PRO.
Asegúrate de habilitar “Cloudflare Fonts” y “Rocket Loader”

Paso 5: Resultados Inmediatos con el Plan Gratis de Cloudflare

Aún en el Plan Gratis de Cloudflare, puedes ver mejoras significativas de rendimiento al habilitar las funciones adecuadas. Apliqué estas optimizaciones a marketplace.hanscristy.com, y los resultados fueron inmediatos. Los cambios no solo mejoraron las métricas de Métricas Web como LCP y TBT, sino que también mejoraron la experiencia general del usuario.
 

Paso 6: Cómo Afectan las Optimización de Cloudflare y Selldone al Rendimiento en la Vida Real

Déjame mostrarte cómo las optimizaciones de Cloudflare y las tecnologías dedicadas de Selldone se combinan para crear un rendimiento inigualable, incluso en escenarios de prueba desafiantes.

Entendiendo los Desafíos con las Pruebas de Rendimiento

Herramientas como Lighthouse, GTmetrix, y plataformas similares están diseñadas principalmente para páginas estáticas o sitios web que renderizan contenido del lado del servidor. Sin embargo, Selldone opera de manera diferente:

• 100% PWA: Cada aspecto de la plataforma de Selldone—su sitio web principal, panel de control, tienda, y más—está construido como una Aplicación Web Progresiva (PWA). Esto significa que todo el renderizado ocurre en el lado del cliente, ofreciendo a los usuarios una inmensa flexibilidad para diseñar paneles de control y tiendas personalizadas.
• Carga Dinámica de Dominio: Los usuarios pueden cargar Selldone en cualquier dominio sin preocuparse por implementar un backend complejo. El sistema maneja todo dinámicamente, entregado como un solo archivo JavaScript.

Este enfoque único ofrece flexibilidad y velocidad pero crea desafíos únicos cuando se prueba con herramientas diseñadas para páginas renderizadas en el servidor.

Por Qué Selldone es 10–100x Más Rápido en la Vida Real

Mientras que las páginas estáticas dependen del servidor para renderizar HTML para cada solicitud de usuario, el enfoque PWA de Selldone es fundamentalmente diferente:
Obtención de Datos Eficiente:

• En lugar de renderizar páginas completas en el servidor, Selldone envía una ligera estructura JSON que contiene los datos requeridos.
• Por ejemplo, cuando un usuario hace clic en un producto, la plataforma obtiene solo los datos necesarios (como los detalles del producto) en lugar de recargar o renderizar la página completa.

Sin Retrasos en la Renderización del Lado del Servidor:

• A diferencia de plataformas como WooCommerce, donde cada clic puede activar la renderización del lado del servidor, Selldone elimina por completo este cuello de botella. Todo se maneja del lado del cliente, reduciendo drásticamente la latencia.

Ventaja de Velocidad en Tiempo Real:

• Los usuarios experimentan transiciones de página casi instantáneas. Esta velocidad en la vida real hace que la plataforma se sienta significativamente más rápida en comparación con sitios web renderizados en el servidor, incluso si las puntuaciones de pruebas tradicionales no reflejan completamente la ventaja.

Superando el Cuello de Botella Tecnológico

Lograr altas puntuaciones en pruebas para PWAs renderizadas del lado del cliente ha sido históricamente un desafío debido a:

• Retrasos en la Ejecución de JS: La renderización del lado del cliente depende en gran medida de JavaScript, que las herramientas de prueba a menudo penalizan.
• Contenido Dinámico: A diferencia del HTML estático, la carga de contenido dinámico puede parecer más lenta en pruebas sintéticas.

Pero Selldone ha superado estas limitaciones por primera vez en internet al combinar:

• Optimización de Cloudflare (como Rocket Loader™ y Compresión Brotli) para optimizar la entrega de activos.
• Arquitectura PWA Avanzada para la obtención de datos y renderización en tiempo real.

Rendimiento del Mundo Real vs. Puntuaciones Sintéticas

Si bien las pruebas sintéticas pueden mostrar puntuaciones más bajas para plataformas renderizadas por el cliente como Selldone, el rendimiento del mundo real cuenta una historia diferente. El panel y la tienda de Selldone ofrecen una experiencia 10–100x más rápida en comparación con plataformas renderizadas en el servidor, lo que la convierte en la solución ideal para las necesidades de comercio electrónico modernas.
  Si deseas reflejar la configuración de Cloudflare que utilizamos para un rendimiento óptimo, aquí tienes una lista de las características habilitadas:

Términos de Rendimiento Web

A continuación, una explicación amigable y fácil de entender de los términos de rendimiento web en Métricas Web:

LCP (Mayor Pintado de Contenido)

LCP mide cuánto tiempo tarda en cargar la parte más grande visible de una página web (como una gran imagen o un título) y ser vista por los usuarios. Piensa en ello como el tiempo que tarda tu página en sentirse “lista” para empezar a leer o interactuar.

CLS (Cambio Acumulativo de Diseño)

CLS rastrea cuánto se mueven las cosas inesperadamente en una página web mientras se está cargando. Por ejemplo, si un botón cambia de posición justo cuando estás a punto de hacer clic en él—eso es un cambio de diseño. Un bajo puntaje de CLS significa que tu sitio se siente estable y fluido.

INP (Interacción hasta el Siguiente Pintado)

INP mide cuán rápidamente reacciona tu página web a las interacciones del usuario, como hacer clic en un botón o escribir en una barra de búsqueda. Un INP más rápido significa que tu sitio se siente receptivo y los usuarios no se sentirán frustrados esperando a que las acciones sucedan.

TBT (Tiempo Total de Bloqueo)

TBT calcula el tiempo que tu página está sin respuesta mientras se carga, como cuando un usuario intenta desplazarse o hacer clic pero no pasa nada. Un TBT más bajo significa que tu página es mejor para realizar múltiples tareas, permitiendo a los usuarios interactuar sin problemas mientras se carga.