La mejor configuración de CloudFlare para aprobar los Core Web Vitals

Optimizando Core Web Vitals con Cloudflare: Qué habilitar y qué evitar

Cloudflare ofrece una amplia gama de configuraciones que pueden impactar los Core Web Vitals, tanto positiva como negativamente. Mientras que algunos ajustes mejoran el rendimiento, otros introducen retrasos o interfieren con el renderizado de la página. ¡Desglosemos las opciones más comunes de Cloudflare y bajo qué condiciones deberías habilitarlas!

Preguntas comunes sobre la configuración de CloudFlare: A menudo reviso configuraciones de CloudFlare para clientes. Aunque podría escribir libros sobre cómo configurar un CDN como CloudFlare, la mayoría de las preguntas giran en torno a un simple '¿debería habilitar este ajuste?'. Este artículo responde esas preguntas con las consideraciones apropiadas para los ajustes más comunes de CloudFlare relacionados con los Core Web Vitals.

Gratis vs. Pro: ¿Vale la pena la actualización?

Velocidad > Optimización

Polish 

Polish optimiza las imágenes alojadas en tu dominio de CloudFlare comprimiéndolas y eliminando los metadatos de las imágenes y, opcionalmente, convirtiéndolas a imágenes WebP. 

Los tamaños de imagen más pequeños generalmente mejorarán el Largest Contentful Paint mejorando la duración de carga del recurso de imagen. Sin embargo, dado que el LCP está influenciado por múltiples factores además de la duración de carga del recurso de imágenes, ¡no esperes mejoras drásticas!

Recomendación: Habilita y elige 'Lossy Webp' para mejores resultados.

Mirage

Mirage optimiza las imágenes basándose en las condiciones de la red. Aunque esta idea es noble, la implementación es 'lenta por diseño'. Para optimizar las imágenes para todas las condiciones de la red, las imágenes en la página deben bloquearse hasta que se haya medido la velocidad de conexión de la red.  Este bloqueo de imágenes puede causar Layout Shifts e irónicamente una puntuación más baja de Largest Contentful Paint.

Recomendación: ¡Evita habilitarlo bajo ninguna circunstancia!

Speed Brain

Speed Brain utiliza la API de Speculation Rules para acelerar el Time to First Byte precargando futuras navegaciones. Aunque las Speculation Rules son extremadamente efectivas para mejorar todos los Core Web Vitals, incluido el Largest Contentful Paint, no recomiendo habilitar esta función de CloudFlare porque 'autocofigurar' las speculation rules es súper fácil y mucho más efectivo que la solución de 'talla única' de CloudFlare, ¡incluso con su integración RUM! 

Recomendación: Deshabilita y configura las speculation rules manualmente

CloudFlare Fonts

CloudFlare fonts automatiza el autoalojamiento de fuentes. Esta es una gran idea porque autoalojar recursos importantes elimina nuevas conexiones externas que son por defecto más lentas que reutilizar la conexión ya abierta a tu sitio proxy de CloudFlare.

Es más efectivo tomarse 15 minutos y configurar manualmente los archivos de fuentes autoalojados. Desafortunadamente, hay muchos sistemas CMS que no permiten esto. En ese caso, habilitar CloudFlare fonts es una opción perfectamente válida.

Recomendación: Deshabilita por defecto; habilita solo si el autoalojamiento manual no es una opción.

Early Hints

Early Hints acelera la entrega de recursos críticos (como estilos, fuentes o imágenes) insinuándolos antes de que el contenido html real se envíe al navegador. Para enviar una sugerencia de recurso a través de CloudFlare, CloudFlare preparará tu encabezado de respuesta y extraerá sugerencias de recursos de ahí. 

Si te sientes cómodo enviando sugerencias de recursos en los encabezados de respuesta html, sugiero encarecidamente habilitar esta función. Sin embargo, ten en cuenta que las sugerencias de recursos pueden estar mucho más ocultas para tu equipo de desarrollo que las sugerencias de recursos en el encabezado de la página. Si se configuran incorrectamente, pueden ralentizar las cosas en lugar de acelerarlas. Así que, úsalo con precaución.

Recomendación: Habilita solo si estás enviando correctamente los encabezados de sugerencia de recursos.

Rocket Loader™

Rocket Loader 'difiere' todos los JavaScripts en una página web reteniéndolos temporalmente y luego inyectándolos en la página nuevamente unos momentos después.  Este es un truco desagradable (o genial, dependiendo de tu punto de vista) que necesita muchas comprobaciones y trucos para asegurar que funcione correctamente en todos los navegadores. Además, este truco oculta los scripts del escáner de precarga, un mecanismo diseñado para acelerar la carga de recursos críticos.

Por las razones anteriores, obviamente, no soy fanático de habilitar ciegamente Rocket Loader. Los scripts deberían programarse en función de su importancia. Los scripts críticos necesitan cargarse y ejecutarse temprano, mientras que los scripts no esenciales pueden esperar hasta que el navegador esté inactivo.

Rocket Loader de CloudFlare hace eso. Retiene los scripts y en un cierto punto en el tiempo los inyecta sin consideración a su importancia. Rocket Loader solo prioriza otros recursos como el elemento LCP, fuentes y estilos sobre los scripts. Si tu CMS no permite diferir scripts o un tiempo de script más detallado, Rocket Loader podría ser tu mejor opción.

Recomendación: Deshabilita y programa los scripts manualmente. Solo habilita si no tienes otra forma de diferir o controlar la ejecución de scripts.

Automatic Platform Optimization para WordPress

APO de CloudFlare almacena en caché páginas enteras en sus servidores de borde, una técnica conocida como full-page edge caching. Cuando se implementa correctamente, mejorará el Time to First Byte (y posteriormente el LCP y FCP) para cierto tipo de visitante! 

Sin embargo, hay un inconveniente. El full-page edge caching a menudo necesita ser omitido automáticamente. Por ejemplo, cuando un usuario inicia sesión o agrega artículos a su carrito, APO se deshabilita automáticamente ya que el contenido de la página se vuelve personalizado. En ese punto, servir una página genérica en caché ya no es una opción. Porque APO necesita funcionar para todos los tipos de sitios web, la caché se omitirá mucho más de lo necesario para tu sitio. Es por eso que la configuración manual de caché casi siempre será más efectiva que el APO de CloudFlare

Recomendación: Habilita APO, o mejor aún, configura tus propias reglas de full-page edge caching para un mejor control sobre cuándo se omite el almacenamiento en caché.

HTTP/2 & HTTP/2 to Origin & Priorización Mejorada de HTTP/2

Habilitar HTTP/2, HTTP/2 to Origin & Priorización Mejorada de HTTP/2 es una decisión obvia.  HTTP/2 es una gran mejora sobre el protocolo HTTP/1.1 más antiguo. HTTP/2 hace muchas cosas, pero lo más importante es que se deshace del antiguo efecto escalera permitiendo que se envíen múltiples archivos a través de la misma conexión en paralelo. ¡HTTP/2 ha existido durante 10 años y es ampliamente compatible con navegadores y servidores!

Recomendación: habilitar

HTTP/3 (con QUIC)

HTTP/3 con QUIC es incluso más rápido que HTTP/2  debido a las mejoras en la configuración de la conexión y la latencia. Básicamente, HTTP/3 permite que se envíen múltiples flujos de forma independiente incluso si uno se retrasa. QUIC combina los apretones de manos de transporte y cifrado, lo que reduce el tiempo de conexión. ¡Esto resulta en tiempos de TTFB hasta un 10% más rápidos!

Recomendación: habilitar

Reanudación de Conexión 0-RTT

La Reanudación de Conexión 0-RTT acelera las conexiones seguras omitiendo el apretón de manos inicial cuando un usuario vuelve a visitar un sitio. Utiliza claves de cifrado almacenadas previamente, permitiendo que los datos se envíen inmediatamente, reduciendo la latencia y mejorando los tiempos de carga de la página. 

Recomendación: habilitar

Automatic Signed Exchanges (SXGs)

Los Signed Exchanges (SXG) permiten a Google Search precargar tu contenido preservando la privacidad del usuario. Eso significa que los resultados mostrados en Google Search pueden precargar algunos recursos clave (como HTML, JavaScript, CSS, imágenes o fuentes) de una manera que preserva la privacidad. ¡Automatic Signed Exchanges mejorará tu Largest Contentful Paint y Time to First Byte!

Recomendación: habilitar

Scrape Shield

Scrape Shield protege el contenido de tu sitio web. Aunque esto pueda parecer una buena idea, estoy fervientemente en contra de habilitar cualquier opción de Scrape Shield. Scrape Shield funciona inyectando JavaScript en tu página para decodificar el contenido previamente ofuscado. Este intercambio en velocidad versus ocultar contenido no tiene sentido para mí. Los spammers reales no son engañados mientras que los usuarios reales obtienen scripts extra que ralentizan la página.

Recomendación: deshabilitar Email Address Obfuscation y deshabilitar Hotlink Protection

Caché > Configuración

Purge Cache

Purgar la caché invalidará todos los archivos almacenados en caché por CloudFlare, incluyendo hojas de estilo, JavaScript, imágenes e incluso cachés de página completa. Y aunque purgar caché técnicamente no es una configuración, debo advertir sobre borrar la caché. ¡Borrar la caché hará que tu sitio sea más lento hasta que la caché se haya reconstruido!

Recomendación: evita purgar toda la caché si es posible. ¡Solo purga los archivos afectados!

Caching Level

El nivel de caché determina cómo maneja CloudFlare las cadenas de consulta (ya sé: '¡lo que hay en un nombre!'). Querrás echar un buen vistazo a esta configuración. 

La opción 'más rápida' es 'ignore query string'. Esto sirve el mismo recurso independientemente de la cadena de consulta. Esta es solo una buena opción si estás 100% seguro de que las cadenas de consulta no se usan en tu sitio. En ese caso, las cadenas de consulta agregadas por otros se ignoran.

'Standard' sirve un archivo en caché diferente para cada cadena de consulta diferente. ¡Esta es la configuración predeterminada para CloudFlare pero en combinación con full page edge caching y parámetros de seguimiento como los parámetros utm, esta configuración puede causar desajustes de caché y una tasa de aciertos de caché más baja!

Recomendación: Ignore query string siempre que sea posible o standard, evita la opción 'No query string' si es posible.

Browser Cache TTL

El TTL de caché del navegador le dice al navegador cuánto tiempo puede almacenar en caché recursos estáticos. Los recursos en caché se pueden servir directamente desde el navegador y están disponibles mucho más rápido que los recursos de red remotos. Eso significa que un TTL de caché del navegador corto invalidaría la caché del navegador frecuentemente, reduciendo la tasa de aciertos de caché. Así que, a menos que tus archivos estáticos cambien frecuentemente, establece esta configuración al máximo. 

Recomendación: establecer en 1 año si es posible

Development Mode

El modo de desarrollo omitirá todo el almacenamiento en caché de CloudFlare mientras esté habilitado. Puede ser tentador para ti habilitar el modo de desarrollo mientras desarrollas. Por favor, no habilites el modo de desarrollo, también deshabilita el almacenamiento en caché para todos los demás visitantes. En su lugar, configura un dominio de desarrollo donde puedas desarrollar o exclúyete del almacenamiento en caché de CloudFlare configurando reglas de caché.

Recomendación: ¡no habilitar!

Caché > Tiered Cache

Tiered cache reduce el número de solicitudes a tu servidor de origen y aumenta la tasa de aciertos de caché instruyendo a CloudFlare a buscar archivos no almacenados en caché en sus propios servidores primero. Esto reduce la carga en tu servidor back-end aún más y libera recursos extra.

Recomendación: habilitar topología de caché inteligente