Uso de Webflow con Cloudflare para almacenar en caché y acelerar tu proyecto de Webflow

Hay algunos problemas con Cloudflare y empezaremos por enumerarlos aquí, y luego veremos cómo solucionarlos y algunas opciones más avanzadas que probablemente deberías habilitar. Pero primero, comencemos enumerando una serie de razones por las que nos encanta Cloudflare.

• Opciones de seguridad muy mejoradas.
• Aplanamiento de CNAME, lo que significa que tu proyecto de Webflow puede ser milkmoonstudio.com y no www.milkmoonstudio.com
• Excelente almacenamiento en caché en los centros de datos y la red perimetral de Cloudflare. No estamos bromeando, tienen una red enorme. El 80% de los sitios proxy utilizan Cloudflare, es decir, el 20% de los sitios web de Internet.
• Configuración avanzada de almacenamiento en caché del navegador.
• Siempre en línea y guarda las versiones de tu sitio en Wayback Machine de Internet Archive.
• Enrutamiento inteligente Argo, que busca los nodos de red que podrían estar inactivos y optimiza el enrutamiento del tráfico de la red para aumentar la velocidad.
• Gran optimización de la velocidad mediante minificación, compresión, optimización de imágenes, etc..
• Protección contra bots.
• La CDN de Cloudflare con 310 ciudades en más de 120 países, incluida China. Solo estoy reiterando esto.
• Zaraz como alternativa a Administrador de etiquetas de Google, lo hemos probado y, aunque no es tan fácil de usar cuando estás acostumbrado a usar Tag Manager para activadores avanzados, puede hacer prácticamente lo que necesites y sí, en nuestras pruebas hubo un aumento de velocidad definitivo. Piensa en Tag Manager desde el servidor sin necesidad del servidor ni del coste que supone. Hemos añadido una breve entrada sobre cómo usar Zaraz aquí.
• Reglas de página.

Podríamos seguir y seguir, hay tantas funciones que no vamos a enumerarlas todas (hemos añadido una breve lista de las configuraciones recomendadas de Cloudflare al final de la publicación).

Entonces, si esto es tan bueno, ¿por qué tan pocos usuarios de Webflow usan Cloudflare? Bueno, aquí es donde entran los problemas. Si nos fijamos en las instrucciones de configuración de DNS para Cloudflare en Webflow, te darás cuenta de una cosa desde el principio, quieren que deshabilites el proxy de Cloudflare (nube naranja).

Esto significa que Cloudflare solo administrará tu DNS, igual que Godaddy o quien sea. No es genial, Cloudflare tiene el DNS más rápido del mercado, pero eso es todo, no podrás aprovechar ninguna de las mejoras de rendimiento.

Por lo que sabemos, el problema de «deshabilitar el proxy» tiene que ver con la renovación del certificado SSL de Webflow. Si Cloudflare envía el contenido mediante proxy, el usuario no se conecta a tu sitio de origen en Webflow y el mecanismo de renovación de SSL de Webflow deja de funcionar. Por lo tanto, es posible que las cosas vayan bien durante un mes y luego todos, y su madre, empiecen a recibir errores de SSL. Para ello, tenemos una solución rápida y sencilla a la que nos ocuparemos. De todos modos, con nuestra solución alternativa no hemos tenido ningún problema desde hace años.

Número dos, la CDN de Webflow. Webflow usa AWS para alojar su contenido, pero como puede imaginar, no van a aprovisionar una CDN para cada proyecto creado en Webflow. Por lo tanto, todos comparten un cubo. Si inspeccionas tu sitio, te darás cuenta de que todo lo que importa, desde el CSS hasta las imágenes y los vídeos, está en website-files.com o assets.wesite-files.com (hay algunos dominios que circulan por ahí) y no en tu dominio, es decir, nuestros activos no están en milkmoonstudio.com. No es realmente un problema para el uso diario, pero cuando usas Cloudflare, el contenido que Cloudflare necesita optimizar debe estar en tu dominio. Si tenemos una cuenta de Cloudflare para milkmoonstudio.com, pero todas las imágenes y archivos CSS se encuentran en una carpeta en website-files.com, Cloudflare solo puede aplicar optimizaciones y almacenamiento en caché a tus archivos HTML y nada más. Así que, una vez más, no hay optimización.

Hablemos de cómo resolver estos problemas desde la perspectiva de un diseñador de Webflow y no de un desarrollador completo.

Actualización importante

Antes de pasar a lo siguiente, este método utilizará una aplicación de Cloudflare para almacenar en caché todos tus activos en Cloudflare. La versión actual de las aplicaciones de Cloudflare está actualmente en desuso. Cloudflare ha dicho que la reemplazará una nueva experiencia de aplicación. Mientras tanto, puedes usar un Cloudflare Worker para lograr los mismos resultados y ya tenemos una publicación que detalla ese proceso aquí. Ten en cuenta que es un poco más técnico que simplemente añadir una aplicación. Hemos creado un Cloudflare Worker para optimizar tus imágenes con el modificador de imágenes de Cloudflare. Algunos podrían decir que es más sencillo y, aunque aún es avanzado, puedes encuentra la publicación completa aquí. Le diremos que es posible que tenga menos problemas si tiene problemas con Rocket Loader, estropea el orden en que se cargan los scripts, etc. De todos modos, siga esta guía para el paso de configuración de la aplicación por ahora y, a continuación, cambie al post de Image Optimization Worker para el resto. Actualizaremos esta publicación cuando la nueva experiencia de Cloudflare Apps esté lista para que puedas optar por la aplicación si quieres.

Configuración de DNS de Webflow Cloudflare

Aquí se te pedirá que sigas dos series de instrucciones: los registros 2 A y el registro CNAME que Webflow te proporciona cuando has habilitado el SSL en la pestaña de alojamiento de Webflow en la configuración de tu proyecto (las cosas han cambiado un poco desde que escribimos esto, así que ahora también hay un registro TXT, que puedes usar tal como está en Cloudflare), y la instrucción para desactivar el proxy en Cloudflare (deshabilitar el icono de la nube naranja) según las instrucciones de Webflow. Vamos a pedirte que ignores ambas cosas.

Cuando actives el SSL, recibirás instrucciones similares a las siguientes:

¡Ignora estos!

Paso 1: en lugar de usar las instrucciones de SSL, desactiva SSL en la parte inferior de la pestaña de alojamiento. Pulsa Guardar.

• Copie las nuevas direcciones del registro A y la configuración de CNAME:

Guarda la configuración que no es SSL, vuelve a activar la casilla SSL y guarda. Verás que la configuración vuelve a la configuración SSL inicial. No te preocupes, simplemente ignórala.

(Puedes dejar la configuración sin SSL, Cloudflare gestionará el certificado SSL y redirigirá todo correctamente, pero una cosa fallará: tu archivo sitemap.xml utilizará http en lugar de https, que Cloudflare seguirá redirigiendo correctamente, pero Google Search Console se quejará).

Por lo tanto, vuelve a activar SSL para que el mapa del sitio funcione, no tendrás ningún problema.

• Dirígete a Cloudflare y agrega la configuración de DNS sin SSL. Debería tener un aspecto parecido a esto:

• Asegúrese de que las entradas tengan activado el proxy, al contrario de lo que indican las instrucciones de Webflow Cloudflare.
• Ve a la pestaña de configuración de SSL/TLS en Cloudflare y activa la opción Completa:

• Ahora, queremos purgar la configuración de DNS para que la configuración de Webflow se propague de inmediato. Empieza por ir a https://1.1.1.1/purge-cache/, entonces y por si acaso:

  https://cachecheck.opendns.com/ & https://developers.google.com/speed/public-dns/cache

• En cada uno de estos sitios, introduce tu dominio simple, purga el registro A y, a continuación, el registro CNAME. Si utilizas un subdominio www, como use, usa también el dominio completo, es decir, www.milkmoonstudio.com, y purga también los registros correspondientes. Por último, purga el registro TXT.
• Tras la gran purga, vuelve a dirigirte a la pestaña de alojamiento de Webflow.

¡Oh, NO! - Tantos temas, a quién le importa, ignoran y publican el sitio.

• Dirígete a tu sitio activo y comprueba la configuración de SSL haciendo clic en el candado:

Bum, todo bien.

Por lo tanto, Webflow se ejecuta a través de Cloudflare, con proxy, pero no, nos olvidamos del hecho de que el contenido debe estar en tu dominio para que Cloudflare aplique mejoras de rendimiento. Por el momento, todo está llegando a través de website-files.com

Si deseas obtener más ayuda para configurar las mejoras de rendimiento, las reglas de la página, etc., mira el vídeo instructivo que aparece al principio de esta publicación para ver en detalle lo que puedes aplicar, o dirígete directamente a YouTube.

Segundo problema: haz que los recursos de la CDN de Webflow (imágenes, etc.) se ejecuten en tu nombre de dominio en Cloudflare para que puedas usar todas las ingeniosas mejoras de rendimiento de Cloudflare

Hay dos maneras de abordar esto: si sabes lo que estás haciendo, puedes escribir un Cloudflare Worker que mire la CDN de Webflow, tome el contenido, lo almacene en Cloudflare y luego lo pule y demás. Milk Moon Studio es un pequeño estudio de Webflow y, como muchos miembros de la comunidad de Webflow, nos gusta centrarnos en el diseño y elegimos Webflow por su naturaleza sin código o, al menos, con poco código, así que optaremos por la segunda opción: conseguir a alguien que lo haga por ti. Por suerte para nosotros, alguien lo hizo y luego creó una aplicación de Cloudflare, que puedes instalar en Cloudflare y usar de forma gratuita. Se llama Casete de Network Chimp. Ten en cuenta que la experiencia actual de la aplicación está en proceso de quedar obsoleta y se sustituirá por una nueva. Mientras tanto, también puedes usar nuestro Secuencia de comandos de Cloudflare Worker para lograr resultados similares. ‍

• Dirígete a la pestaña de aplicaciones de Cloudflare y busca Cassette, esta es gratuita, siempre y cuando utilices un depósito, que es lo que haremos, así que no pasa nada. Es este tío:

• Aplica los siguientes ajustes en la aplicación:

1. Crea un subdominio en tu dominio donde Cassette coloque los archivos de Website-Files.com (o cualquier cosa que Webflow esté usando para tus archivos, simplemente inspecciona la página o abre una imagen en una pestaña nueva para comprobar la URL), simplemente escríbelo aquí, Cassette te pedirá permiso para crearlo cuando apliques la configuración. Asegúrate de que el subdominio no exista ya, Cassette tiene que gestionar esta parte.
2. Indique a Cassette dónde almacena Webflow los archivos.

Eso es todo, cada vez que se cargue una página de su sitio, Cassette comprobará website-files.com y conserve esos archivos, si encuentra otros nuevos en el subdominio. La advertencia es que puede llevar un poco de tiempo, pero ahora que los archivos que carga en el navegador están en tu dominio, puedes aplicar a los archivos cualquier configuración y regla de Cloudflare que crees. (Volviendo al tema del tiempo, si después de un día o algo así ves que Cassette no almacena en caché ni optimiza algunos archivos, lo que puedes comprobar mediante el Dra. Flare Plugin de Chrome, normalmente se debe a que Webflow publica un conjunto de imágenes src con tamaños de imagen optimizados para diferentes anchos de ventana gráfica. A veces, Cassette pierde una o dos imágenes en el conjunto src. Puedes desactivar esta opción en Webflow o usar algo como las incrustaciones de redimensionamiento de imágenes de Cloudflare para solucionar este problema. Más adelante veremos más sobre este tema. Como alternativa, el método Worker script resuelve este problema, ya que el programa de trabajo que creamos busca imágenes individuales y conjuntos de imágenes src).

No vamos a entrar en todas las mejoras de rendimiento y reglas de página que puedes crear en Cloudflare, hazte loco. Una cosa que diremos es que si decides crear reglas que almacenen tu sitio en caché en gran medida, crea una regla de página para tu archivo sitemap.xml que omita la caché por completo, de modo que si, por ejemplo, creas una nueva entrada de blog, la última versión del mapa del sitio siempre estará ahí para Google y no un archivo de mapa del sitio desactualizado de hace 3 semanas si tienes una configuración de almacenamiento en caché pesada. Querrás que la regla de la página del mapa del sitio esté por encima de las demás reglas de la página, con un almacenamiento en caché pesado a medida que las reglas vayan cayendo en cascada. Lo mismo se aplica si has habilitado una fuente RSS, evita la caché en la URL de la fuente. El almacenamiento en caché completo solo se realizará si configuras Page Rules en Cloudflare, aplicas las optimizaciones de las reglas y seleccionas Almacenar todo en caché.

Como hemos dicho, la aplicación Cassette tardará un tiempo en almacenar en caché todo lo que hay en tu nuevo subdominio y es posible que se pierda algún archivo aquí o allá. Pensamos que podrías acelerar el proceso y volver a cargar todas las páginas varias veces si lo deseas (hemos actualizado esta publicación al final de la página para ayudarte a garantizar que las imágenes perdidas se almacenan en caché en Cloudflare). Vamos a esperar unos días y realizar una prueba de Lighthouse para comprobar la velocidad del sitio.

Vale, 2 segundos después... hemos construido una máquina del tiempo, hemos esperado 3 días, hemos realizado una prueba de Lighthouse, hemos regresado a tiempo y, a continuación, hemos subido los resultados de la prueba:

Se ve muy bien, por qué el 98 por ciento, bueno, creemos que es bastante bueno, pero sí, lo miramos y hay un error de imagen de tamaño incorrecto en Lighthouse que nos da pereza corregir solo para mostrar los resultados. Consola de búsqueda de Google te va a encantar.

Si tiene alguna pregunta, envíela en los comentarios. Para obtener más instrucciones, consulta estas publicaciones, y si usas Tag Manager y quieres intentar acelerar un poco más las cosas, podrías tener un mira este post.

Actualización: se corrige el problema de que Cassette no podía crear el subdominio requerido

Si te encuentras con el error mencionado anteriormente en el que Cassette dice que no puede crear el subdominio, configuras Cassette, simplemente sigue estos pasos o mira el vídeo instructivo.

‍ Sin embargo, este problema ya no aparece, por lo que solo lo dejamos aquí como referencia.

1. Cuando aparezca el error, simplemente ignórelo y cree el subdominio manualmente.
2. Cassette sigue añadiendo al trabajador. No verás al trabajador y es posible que ni siquiera veas la aplicación Cassette instalada.
3. Dirígete a DNS y agrega el CNAME para el subdominio que tenías en la configuración del cassette.
4. En nuestro caso, el CNAME es un activo.
5. El valor del CNAME es el nombre de dominio de la CDN de Webflow que aparece arriba donde Webflow aloja su contenido.
6. En nuestro caso, el valor es assets-global.website-files.com
7. Asegúrate de usar solo el nombre de dominio simple.
8. El problema del cassette ahora debería estar resuelto aunque no puedas ver la aplicación. Consulta el vídeo para obtener una guía visual.

Actualización: obligar a Cloudflare a almacenar en caché las imágenes perdidas

Una última actualización. Durante el uso Dra. Flare y al revisar algunos de los sitios en detalle, nos hemos dado cuenta de que, a veces, las imágenes no se almacenan en caché en Cloudflare y siguen yendo a la CDN externa de Webflow. Tras inspeccionar el código, nos dimos cuenta de que esto se debía a que Webflow generaba imágenes adaptables para su conjunto src. En este caso, las imágenes de algunos puntos de interrupción se almacenaban en caché y otras iban a la CDN de Webflow. Si ves que esto ocurre y quieres evitarlo, puedes desactivar la generación de imágenes adaptables para identificar al culpable.

Todo lo que tienes que hacer es:

1. Seleccione la imagen en el lienzo de Webflow
2. Tipo Comando + Turno + O (en Mac) o Controlar + Turno + O (en Windows)
3. Abrir Panel de ajustes > Ajustes de imagen
4. Desmarca la Imagen responsiva casilla de verificación

La advertencia aquí es que Webflow ya no genera imágenes adaptables, por lo que puedes usar el cambio de tamaño de imágenes de Cloudflare para hacerlo sobre la marcha, o crear una versión de escritorio y móvil de los activos de una página si Cloudflare y Cassette no almacenan las imágenes en caché y quieres una muy pequeña en dispositivos móviles y crees que la versión que no responde es demasiado grande o tiene un mal rendimiento Google PageSpeed. No te preocupes por el cambio de tamaño de las imágenes de Cloudflare si estás satisfecho con lo que te ofrecen Cassette, Page Rules y optimizaciones como Polish.

Cómo usar el redimensionamiento de imágenes de Cloudflare

Para que esto funcione, debes habilitar el cambio de tamaño de la imagen en la pestaña de velocidad de Cloudflare. Ten en cuenta que se pueden aplicar costos adicionales. En función de lo que estés haciendo, puedes activar o desactivar el cambio de tamaño de las imágenes desde Origin. Si está activado, podrás cambiar el tamaño de las imágenes y aplicar funciones como la conversión a WebP y Avif directamente desde la CDN de Webflow y subir la URL sin tener que ejecutarla primero en Cloudflare mediante Cassette.

Para cambiar el tamaño de la imagen, puedes escribir un trabajo (más difícil) o simplemente usar una imagen incrustada en Webflow con el elemento HTML Embed. Seguirás viendo las imágenes del diseñador en el elemento embebido, que permite un montón de opciones de formato y optimización en cada imagen. La estructura de URL que tienes que usar tiene un aspecto parecido al siguiente

‍

<!-- fs-richtext-ignore --><OPTIONS>https://<ZONE>/cdn-cgi/image//<SOURCE-IMAGE>

Más información sobre eso y las opciones aquí y aquí para dar formato a imágenes adaptables.

Una imagen adaptable muy aproximada para nuestra imagen de héroe podría tener un aspecto parecido al siguiente si cambiamos el tamaño desde Origin y utilizamos nuestra URL de carga de Webflow desde el Asset Manager:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow Asset Manager URL" src="https://codepen.io/milkmoonstudio/embed/XWBopPm?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Vea el bolígrafo <a href="https://codepen.io/milkmoonstudio/pen/XWBopPm">
</a><a href="https://codepen.io/milkmoonstudio">Ejemplo de redimensionamiento de imágenes de Cloudflare: URL de Webflow Asset Manager de Jakes van Eeden (@milkmoonstudio)</a>
en <a href="https://codepen.io">CodePen</a>.
</iframe>

O así si uso nuestra URL de Webflow CDN:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow CDN " src="https://codepen.io/milkmoonstudio/embed/OJwrpMd?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Vea el bolígrafo <a href="https://codepen.io/milkmoonstudio/pen/OJwrpMd">
</a><a href="https://codepen.io/milkmoonstudio">Ejemplo de redimensionamiento de imágenes de Cloudflare: Webflow CDN de Jakes van Eeden (@milkmoonstudio)</a>
en <a href="https://codepen.io">CodePen</a>.
</iframe>

O así si utilizamos la CDN a través del subdominio que Cassette creó:

‍ <iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Cassette CDN on Assets" src="https://codepen.io/milkmoonstudio/embed/eYjbvvB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Vea el bolígrafo <a href="https://codepen.io/milkmoonstudio/pen/eYjbvvB">
</a><a href="https://codepen.io/milkmoonstudio">Ejemplo de redimensionamiento de imágenes de Cloudflare: CDN de casetes sobre activos de Jakes van Eeden (@milkmoonstudio)</a>
en <a href="https://codepen.io">CodePen</a>.
</iframe>

La eficacia de este último a la hora de crear archivos Avif dependerá de las reglas de la página, como la configuración de almacenamiento en caché y el orden de las reglas. Por lo tanto, si lo has guardado todo en caché y lo has perfeccionado en ese subdominio, es posible que ya se haya creado una imagen WebP y es probable que no utilice Avif, pero puedes experimentar.

Perdón por el terrible formato anterior y por simplificar mucho las cosas. Lo más importante a la hora de cambiar el tamaño es que la estructura de las URL de la imagen incrustada comience con el dominio que tienes en Cloudflare, seguido de /cdn-cgi/image/, tus opciones de formato y optimización/y, por último, la URL de la imagen. Haz una pequeña prueba y recuerda que esto no es necesario si estás satisfecho con lo que Cassette, la opción en polaco, etc. hacen por ti.

Hemos agregado algunas configuraciones y reglas recomendadas de Cloudflare a continuación. Ten en cuenta que esto depende en gran medida de tu sitio y debe probarse.

Para ver más publicaciones sobre Cloudflare, consulta:

• Potencie su proyecto de flujo web con Cloudflare: una inmersión profunda en nuestro script de optimización de imágenes
• Aumente el rendimiento de su sitio web con el administrador de etiquetas Zaraz de Cloudflare: una guía paso a paso para implementar Zaraz y agregar Google Analytics 4 en Webflow

Recomendaciones de Cloudflare

Velocidad > Optimización

Polaco: Activado

Mejora el tiempo de carga de las imágenes optimizando las imágenes alojadas en el dominio y, si tienes WebP marcado, puedes convertir formatos de imagen como PNG y JPG a WebP si se ahorra en términos de tamaño de imagen y Cloudflare detecta la compatibilidad con WebP en el navegador del cliente.

Configuración recomendada: Sin pérdidas con WebP marcado, a menos que haya una caída en la calidad, en cuyo caso debería ser Sin pérdidas con WebP marcado. Marque siempre WebP y, si tiene planes superiores con AVIF, puede utilizar esta opción para ahorrar más.

Minificación automática: Activada

Reduce el tamaño del archivo del código fuente de tu sitio web.

Configuración recomendada: Siempre activados JavaScript, CSS y HTML.

Brotli: En

Cloudflare aplica la compresión Brotli para ayudar a acelerar los tiempos de carga de las páginas para tus visitantes. Cloudflare seleccionará la compresión Brotli como el método de codificación de contenido preferido si el cliente admite varios métodos de compresión. Si el cliente no indica que se admite la compresión Brotli, se aplicará la compresión gzip.

Configuración recomendada: Siempre encendida.

Primeros consejos: Activado

El edge de Cloudflare almacenará en caché y enviará 103 respuestas a las primeras sugerencias con encabezados de enlace desde tus páginas HTML. Los Early Hints permiten a los navegadores precargar los recursos enlazados antes de recibir una respuesta final de 200 «OK» u otra respuesta final del origen.

Configuración recomendada: Siempre encendida.

Priorización mejorada de HTTP/2: activada

Optimiza el orden de entrega de los recursos. Con HTTP/2, de forma predeterminada, Cloudflare seguirá el orden solicitado por el navegador. Este orden varía de un navegador a otro, lo que provoca una diferencia significativa en el rendimiento. Con la priorización mejorada de HTTP/2 habilitada, los recursos se entregarán en el orden óptimo para que la experiencia sea más rápida en todos los navegadores.

Configuración recomendada: Siempre encendida.

TCP Turbo: Activado

Reduzca la latencia y aumente el rendimiento con optimizaciones de TCP personalizadas.

Configuración recomendada: Debe estar activado de forma predeterminada, puede estar desactivado en cuentas antiguas.

Mirage: Activado

Mirage adapta la carga de imágenes según la conexión de red y el tipo de dispositivo. Los dispositivos con pantallas pequeñas reciben imágenes más pequeñas y las conexiones más lentas reciben imágenes de menor resolución. Sustituye las imágenes por imágenes de marcador de posición de baja resolución que tienen las mismas dimensiones que las originales (incluidas las imágenes de terceros). Una vez que la página se ha renderizado por completo, las imágenes de resolución completa se cargan de forma diferida (dando prioridad a las imágenes en la ventana gráfica del navegador). Este proceso permite que las páginas se rendericen rápidamente y minimiza el flujo del navegador. Combina varias solicitudes de imágenes de red individuales en una sola solicitud. Es necesario que las imágenes admitan la carga progresiva, pero esta configuración es ideal en mercados con dispositivos de gama baja y velocidades de conexión móvil lentas.

Configuración recomendada: Siempre encendida.

Rocket Loader: Activado

Además de la optimización de imágenes, Rocket puede proporcionar las mayores ganancias de velocidad, pero el sitio debe probarse con Rocket Loader activado. Rocket Loader mejora los tiempos de pintura de las páginas que incluyen Javascript. Los visitantes tendrán una mejor experiencia al ver que el contenido se carga más rápido y la velocidad también es un factor en algunos rankings de búsqueda. Rocket Loader mejora los tiempos de pintura al cargar asincrónicamente tus Javascripts, incluidos los de terceros, para que no bloqueen la representación del contenido de tus páginas. Pueden surgir problemas si se requieren scripts antes, por lo que es necesario probar el sitio. Si hay problemas con Rocket Loader, se pueden usar reglas de página o agregar data-cfasync="falso» a un script para excluir el script de Rocket Loader: <!-- fs-richtext-ignore --><guion data-cfasync="falso» src=» /javascript.js «></script>

Configuración recomendada: Siempre activo, a menos que cause problemas en el sitio. Intenta excluir los scripts problemáticos con: data-cfasync="falso» o reglas de página.

Intercambios firmados automáticos (SXG): activados

Mejora el rendimiento de tu sitio web haciendo que los recursos almacenables en caché estén disponibles en los intercambios firmados de Google.

Configuración recomendada: Siempre encendida.

URL de captura previa: Activada

Activado si tienes una empresa.

Almacenamiento en caché > Configuración

Nivel de almacenamiento en caché: ignorar la cadena de consulta

Determina la cantidad de contenido estático de tu sitio web que deseas que Cloudflare almacene en caché. Ignorar la cadena de consulta ofrece los mismos recursos independientemente de la cadena de consulta. La mejor opción para evitar que el sitio cree diferentes recursos de caché para todas las cadenas de consulta que se puedan agregar.‍

Configuración recomendada: Ignore la cadena de consulta.

Es importante tener en cuenta que Cloudflare no almacena automáticamente en caché el contenido HTML. Solo se puede hacer creando reglas de página. Las reglas de página ofrecen una capacidad de personalización y opciones increíbles, pero podemos hacer recomendaciones al respecto, ya que los administradores del sitio deberían determinar el TTL de la caché del navegador y el TTL de la caché de borde. Por ejemplo, una página acerca de una página estática puede tener tiempos de caché muy largos tanto en el navegador como en Edge, pero un feed de blog sería más corto, según la frecuencia con la que se publiquen nuevas entradas, y tendrá que superar otras reglas comodín a medida que el conjunto de reglas vaya cayendo en cascada.

TTL de caché del navegador: no más de un día.

Determina el tiempo durante el que Cloudflare indica al navegador de un visitante que almacene en caché los archivos. Los periodos cortos, como un día, están bien de forma predeterminada, con reglas de almacenamiento en caché más estrictas establecidas en Page Rules que anularán esta opción. Las reglas de la página deben configurarse según la frecuencia de actualización, tal como se mencionó anteriormente, y agruparse en conjuntos, ya que los comodines lo facilitan. Cuidado con el TTL del navegador, el TTL de la caché perimetral se puede borrar purgando la caché en Cloudflare, pero el TTL de la caché del navegador significa que el contenido de la página permanecerá en el navegador del usuario durante ese período y no se podrá borrar una vez guardado en caché.

Configuración recomendada: Un día para estar seguro y luego personalizarlo en Page Rules.

Crawler Hints: Activado

Cloudflare notificará a los motores de búsqueda cuando haya cambios en el sitio.

Siempre en línea: Activado

Si Origin Serves deja de funcionar, Cloudflare mantendrá el sitio activo con copias de la Wayback Machine. Cloudflare determina la frecuencia de actualización en la Wayback Machine.

Almacenamiento en caché > Caché por niveles

Argo: Activado

Argo es un servicio que utiliza rutas optimizadas en toda la red de Cloudflare para ofrecer respuestas a los usuarios de forma más rápida, fiable y segura. Se aplican costos de uso.

Configuración recomendada: Encendido.

Almacenamiento en caché > Caché por niveles

Caché por niveles: complicada

Aumenta la vida útil de la caché almacenando automáticamente todos los archivos que se pueden almacenar en caché en los depósitos de almacenamiento de objetos persistentes de Cloudflare.

Cuando se produce un error en la memoria caché, Cloudflare comprobará primero estos depósitos de almacenamiento antes de ir a tu lugar de origen. Los costos de uso también se aplican en este caso y funciona en conjunto con Argo, por lo que solo debería activarse si Argo está activado.

Configuración recomendada: Activado si está en Enterprise, puede ser difícil de eliminar por completo en los planes inferiores. Enterprise puede borrar la caché por completo.

Red

HTTP/2: Activado

Acelera tu sitio web con HTTP/2

Configuración recomendada: Encendido.

HTTP/3 (con QUIC): activado

Acelera las solicitudes HTTP mediante QUIC, que proporciona mejoras de cifrado y rendimiento en comparación con TCP y TLS.

Configuración recomendada: Encendido.

Reanudación de la conexión 0-RTT: activada

Mejora el rendimiento para los clientes que se han conectado previamente a su sitio web. La reanudación de la conexión 0-RTT permite enviar la primera solicitud del cliente antes de que la conexión TLS o QUIC esté completamente establecida.

Configuración recomendada: Encendido.

gRPC: Activado

Permita las conexiones de gRPC a su servidor de origen.

Configuración recomendada: Encendido. Si no es necesario, no afectará a nada de ninguna manera.

WebSockets: Activado

Permita las conexiones de WebSockets a su servidor de origen. Los WebSockets son conexiones abiertas que se mantienen entre el cliente y el servidor de origen. Dentro de una conexión WebSockets, el cliente y el origen pueden pasar datos de un lado a otro sin tener que restablecer las sesiones

Configuración recomendada: Encendido.

Enrutamiento de cebolla

Onion Routing permite enrutar el tráfico de los usuarios legítimos de la red Tor a través de los servicios onion de Cloudflare en lugar de a los nodos de salida.

Configuración recomendada: Sí, mejora la velocidad de los usuarios de Tor.

Ejemplo de orden de reglas de página

Las reglas de página deben tener lo siguiente: el TTL de Edge Cache y el TTL de la caché del navegador determinan durante cuánto tiempo se almacena el contenido en Cloudflare Edge y en el navegador del usuario. Estas dos deben determinarse en función de la frecuencia con la que se actualiza el contenido de una página. Digamos que la mayor parte del sitio nunca cambia realmente, pero el blog se actualiza con frecuencia. La página del feed del blog debería entonces tener un TTL de Edge y de navegador más corto y el resto puede tener una regla comodín general con cachés de TTL de Edge y de navegador más largas. Las reglas de página se mueven en cascada. Por lo tanto, si la regla genérica del sitio en el que el contenido no cambia suele tener un comodín como este www.milkmoonstudio.com/, y una vida útil de caché prolongada, debería cumplir con las reglas con una vida útil de caché más corta, en mi caso www.milkmoonstudio.com/blog/. El blog es entonces la primera regla y el resto del sitio la siguiente regla del conjunto. El comodín de la segunda regla también almacena en caché el blog, pero porque hay otra regla que afecta a las páginas del blog y se encuentra por encima de www.milkmoonstudio.com/ regla de página, la anula.

Ejemplo de regla de página

• polaco: Lossy
• Minificación automática: HTML, CSS y JS
• Rocket Loader: Activado
• Mirage: Activado
• Nivel de caché: almacena todo en caché (también para almacenar en caché el contenido HTML).
• Reescrituras automáticas de HTTPS: activadas
• Cifrado oportunista: activado
• TTL de la caché del navegador: 1 día (digamos que es para un feed de blog en el que a menudo hay contenido nuevo, sería más largo para las páginas estáticas)
• Edge Cache TTL: 1 día (digamos que es para un feed de blog en el que a menudo hay contenido nuevo, sería más largo para las páginas estáticas)

‍