Optimiza el flujo web con Cloudflare: imágenes, activos y almacenamiento en caché en 2026

Webflow usa AWS y durante un tiempo usó Fastly. Si bien es adecuado, hemos descubierto que, en el caso de los proyectos grandes, especialmente los que tienen un gran volumen de imágenes, Cloudflare nos ha proporcionado importantes incrementos de velocidad, un mejor tiempo de actividad y una gran cantidad de opciones de optimización, además de trabajadores. Pero, a diferencia de otras plataformas, no fue fácil cambiar tu DNS a Cloudflare. Webflow y Cloudflare no encajaban bien a la hora de crear un proxy para tu sitio web y optimizarlo a través de Cloudflare.

En los viejos tiempos nosotros ideó un truco para usar la configuración SSL y los detalles de conexión que no son SSL junto con la aplicación de casetes para almacenar en caché y optimizar las imágenes. Finalmente, las aplicaciones se eliminaron de Cloudflare y, con un montón de prueba y error, podemos crear una nuestro propio trabajador para enviar por proxy y almacenar en caché imágenes de Webflow en Cloudflare.

Bueno, buenas noticias. Eso ha cambiado.

Webflow ha migrado a Cloudflare y durante un tiempo estuvimos en el limbo.

La buena noticia es que, debido a su traslado a Cloudflare, ahora tenemos De naranja a naranja (O2O) funciona de forma nativa. No más soluciones intrincadas, no más aplicaciones de cassette, no más subdominios complicados para sus activos. Si has leído nuestra publicación anterior sobre el almacenamiento en caché de Webflow con Cloudflare, básicamente puedes tirar la mayor parte de esa información por la borda (bueno, quédate con las partes que explican por qué querrías hacer esto en primer lugar).

Entonces, ¿cuál es la situación actual en lo que respecta al almacenamiento en caché y el uso de proxy a través de Cloudflare? Pues bien, ahora que Webflow es compatible con O2O, la nube naranja está activada en tu configuración de DNS, es totalmente compatible con Webflow y ya no tendrás que preocuparte por el SSL, etc. También significa que ahora puedes utilizar fácilmente la amplia gama de herramientas de seguridad y trabajadores que ofrece Cloudflare.

SIN EMBARGO, y esta es la gran advertencia, todos sus activos, desde imágenes hasta CSS, aún se encuentran en un dominio CDN de Webflow y, dado que no están en SU DOMINIO, aún no tiene control sobre eso, a menos que...

En esta publicación, te mostraremos cómo configurar un Cloudflare Worker que transformará tu sitio de Webflow para que prácticamente todos los activos se transfieran mediante proxy y se almacenen en caché. Estamos hablando de la optimización automática de imágenes, el uso de proxy de activos y el almacenamiento en caché perimetral, todo ello desde tu propio dominio. Suena divertido, ¿verdad? En el pasado solo nos centrábamos en las imágenes, ahora vamos un paso más allá, abordando más y haciendo que sea más fácil de usar que nunca.

Solo un recordatorio, esto es algo avanzado. Hemos hecho que el guion sea más intuitivo, pero por favor, presta atención a la configuración. Por favor, lea atentamente, habrá un vídeo en una fecha posterior. ¡Vamos a sumergirnos!

A continuación se muestra la guía de inicio rápido. Para obtener más información sobre los detalles del script, visita el MD en github aquí ya que eso entra en muchos más detalles.

Lo que estamos intentando lograr

Este es el trato. Webflow aloja todos sus activos en sus dominios de CDN (cdn.prod.website-files.com, assets.website-files.com, etc.). Esto crea algunas limitaciones:

• Sin optimización de imagen — Las imágenes se sirven tal cual, sin conversión automática a AVIF o WebP, lo haces en Webflow y no pasa nada sobre la marcha.
• Restricciones de CORS — Las solicitudes de origen cruzado a veces pueden fallar
• Sin almacenamiento en caché unificado — Sus activos están dispersos en diferentes dominios
• Dolores de cabeza en redes sociales — Las imágenes de OG no están optimizadas para compartirlas

Nuestro Cloudflare Worker intenta resolver gran parte de este problema interceptando el código HTML de tu sitio y reescribiendo todas las URL de la CDN de Webflow para que pasen por tu dominio.

Una vez que esté configurado, obtendrá:

• Conversión automática de formatos — AVIF para navegadores modernos, WebP para otros, o lo que prefieras
• Optimización de la calidad — Compresión configurable (utilizamos el 85% por defecto, se ve muy bien)
• Almacenamiento en caché perimetral — Todos los activos se almacenan en caché en los más de 300 centros de datos globales de Cloudflare (recuerda que no hay ningún cebado de caché)
• Entrega sin cors — Todo lo servido desde tu dominio
• Optimización de redes sociales — Imágenes de OG y Twitter convertidas a JPEG por motivos de compatibilidad (recuerda que Cloudflare se puede convertir a avif pero no se convierte de nuevo)

Y esta es la mejor parte. Una vez que todo esté en funcionamiento, también puedes añadir otras funciones de Cloudflare. Reglas de página, reglas de almacenamiento en caché, WAF, protección contra bots, etc. Ahora es tu zona, vuélvete loco.

Pero no se trata solo de imágenes.

El trabajador también utiliza proxies y almacena en caché todos tus archivos CSS, JavaScript y fuentes a través de tu dominio (o lo intenta). Tus Woff2, tus TTF, tus paquetes de JS minificados: todo se extrae de la CDN de Webflow, se almacena en caché en la periferia de Cloudflare y se distribuye desde tu dominio con los encabezados de caché adecuados. ¿Imágenes AVIF? Ya están optimizadas, por lo que el trabajador omite la transformación y las utiliza como proxy directamente. Los favicons también reciben el tratamiento completo de la imagen. Básicamente, si Webflow lo distribuye desde su CDN, lo cogemos y lo hacemos tuyo.

Por lo tanto, hemos mejorado el juego. A continuación encontrarás instrucciones de alto nivel. El vídeo solo muestra cómo funciona, pero cuando tenga tiempo grabaré una guía completa. Por ahora puedes seguir la guía escrita.

Parte 1: Configurar tu dominio con Cloudflare y Webflow

Hay dos maneras de conectar su dominio administrado por Cloudflare a Webflow:

1. Configuración estándar — Cloudflare solo gestiona el DNS, Webflow lo sirve todo (proxy desactivado)
2. Configuración de O2O — El tráfico pasa primero por tu zona de Cloudflare y luego por Webflow (proxy activado)

Queremos O2O porque es lo que nos permite usar Workers, las reglas de almacenamiento en caché, WAF y todos los demás beneficios de Cloudflare. Pero vamos a hablar de ambos para que sepas la diferencia.

Prerrequisitos

Tu sitio de Webflow debe estar en la infraestructura de Cloudflare. Los sitios creados después del 21 de abril de 2025 ya están ahí. En el caso de los sitios más antiguos, comprueba la configuración de tu espacio de trabajo → Actualizaciones de dominio para comprobar si necesitas migrar primero.

Configuración de DNS estándar (sin O2O)

Si solo quieres que Cloudflare administre tu DNS sin usar proxy (esto es lo que te indican las instrucciones predeterminadas de Webflow):

Para tu dominio raíz (@):

• Tipo: UN
• Nombre: @
• Valor: 198,202,2211,1
• Estado del proxy: Solo DNS (nube gris)

Para www:

• Tipo: CNAME
• Nombre: www
• Objetivo: cdn.webflow.com
• Estado del proxy: Solo DNS (nube gris)

Esto funciona bien, pero no obtienes ninguna función de Cloudflare más allá del DNS. El tráfico va directamente a Webflow.

Configuración de O2O (lo que queremos)

Para habilitar Orang-to-Orange y usar realmente las funciones de Cloudflare, necesitas registros CNAME enviados por proxy:

Para tu dominio raíz (@):

• Tipo: CNAME
• Nombre: @
• Objetivo: cdn.webflow.com
• Estado del proxy: Proxied (nube naranja activada)

Para www:

• Tipo: CNAME
• Nombre: www
• Objetivo: cdn.webflow.com
• Estado del proxy: Proxied (nube naranja activada)

Importante: Elimine cualquier registro A existente que apunte a 198,202,2211,1. No puedes tener ambas cosas. En el caso de O2O, se trata de registros CNAME con el proxy activado.

Si tienes otros subdominios (como blog.yourdomain.com), añada también un CNAME proxy para cada uno.

Configuración de SSL/TLS

Dirígete a SSL/TLS en tu panel de control de Cloudflare y configura el modo de cifrado en Completo (estricto).

Agregar el dominio en Webflow

En Webflow:

1. Vaya a Configuración del proyecto → Alojamiento → Producción
2. Añade tu dominio (root y www)
3. Publica tu sitio

Acerca de esa advertencia de «actualización necesaria»

Esta es la cosa. Una vez que la nube naranja esté encendida, Webflow ya no podrá ver sus registros de DNS. Así que se va a quejar o podría quejarse. Verás «Actualización necesaria» o «Actualización pendiente» en tu configuración de publicación.

Ignóralo.

Este es el comportamiento esperado. La verificación de Webflow no se puede ver a través del proxy. Si tu sitio se carga correctamente, todo está bien. Puedes seguir publicando con normalidad. He tenido la advertencia por ahí y, en algunos casos, desaparece.

Paso 5: Verifica que funciona

Visita tu sitio. Si se carga, eres perfecto. También puedes:

• Utilice Laboratorios SSL para probar tu certificado SSL
• Utilice whatsmydns.net para confirmar que tu dominio se resuelve en direcciones IP de Cloudflare
• Compruebe los encabezados de respuesta para cf-ray (indica que Cloudflare está en la cadena)

Bien, el O2O está arreglado. Ahora pasemos a la parte divertida.

Parte 2: Habilitar las funciones requeridas de Cloudflare

Antes de implementar el Worker, necesitamos habilitar algunas cosas en Cloudflare y asegurarnos de que estén activas las suscripciones correctas.

Habilitar transformaciones de imágenes

Esta es la salsa mágica que permite a Cloudflare convertir y optimizar tus imágenes sobre la marcha.

1. Ir a Panel de control de Cloudflare → Tu zona
2. Navega hasta Imágenes → Transformaciones
3. Haga clic Habilitar transformaciones de imágenes

Sin esto, el /cdn-cgi/imagen/ Las URL no funcionarán y tus imágenes solo tendrán un error 404. No es lo ideal.

Costos: El nivel gratuito te da 5000 transformaciones al mes. Se paga 9$ al mes por 50 000 transformaciones y, a continuación, 0,50$ por cada 1000. Para la mayoría de los sitios de Webflow, el nivel gratuito es suficiente para empezar.

Agregar orígenes permitidos

Sigue en Imágenes → Transformaciones, haga clic en Fuentes y añada estos orígenes:

Origen:
‍

• ‍cdn.prod.website-files.com
• assets.website-files.com
• assets-global.website-files.comG
• ‍uploads-ssl.webflow.com
• cdn.webflow.com
• ‍www.yourdomain.com ¡Crítico!

Esto último es crucial y es fácil pasarlo por alto. Las URL transformadas hacen referencia a tu propio dominio como fuente (porque estamos accediendo a través de un proxy) /img-original/), por lo que Cloudflare necesita permiso para obtener información de sí misma. Meta, lo sabemos.

Habilitar a los trabajadores

Necesitarás que los trabajadores estén activados en tu zona.

1. Ir a Trabajadores y páginas en el panel de control de Cloudflare
2. Si no has usado Workers anteriormente, se te pedirá que configures un subdominio

Costos: El nivel gratuito te permite recibir 100 000 solicitudes por día. Eso es mucho. Si necesitas más, pagas 5 dólares al mes por 10 millones de solicitudes.

Parte 3: Creando al trabajador

Ahora para el trabajador real. Aquí es donde ocurre la magia.

Paso 1: Crear un nuevo trabajador

1. Ir a Trabajadores y páginas
2. Haga clic Crear aplicación → Crear trabajador
3. Ponle un nombre (algo así como optimizador de flujo web o caché del sitio)
4. Verás una plantilla de hola mundo: borra todo eso

Paso 2: Pegue el código de trabajador

Tenemos un script Worker completo que se encarga de todo. Se trata de unas 600 líneas de JavaScript que:

• Intercepta las respuestas HTML de Webflow
• Reescribe todas las URL de las imágenes para usar el redimensionamiento de imágenes de Cloudflare
• Proxige imágenes AVIF directamente (ya son óptimas)
• Proxies y almacena en caché CSS, JS y fuentes
• Maneja imágenes de OG/Twitter para compartir en redes sociales
• Añade los encabezados CORS adecuados
• Almacena en caché todo lo que está en el borde

Pegue el script completo de Worker (puede obtenerlo en nuestro GitHub o en la página aquí).

Paso 3: Guardar e implementar

Golpear Guardar e implementar. The Worker ya está en vivo, pero aún no está haciendo nada porque no le hemos dicho adónde correr.

Parte 4: Variables de entorno

El Worker usa variables de entorno para que pueda configurarlo sin editar el código. Dirígete a tu trabajador → Ajustes → Variables.

Variable requerida

Variable: DOMINIO

Valor: Tu dominio (sin https://), por lo que en nuestro caso www.milkmoonstudio.com

Esto le dice al trabajador qué dominio debe usar en las URL reescritas. Si no está presente, el código comprobará el dominio actual y lo utilizará como alternativa.

Variables opcionales (con valores predeterminados razonables, todas las variables tienen alternativas predeterminadas)

Variable: FORMATO_IMAGEN

Valor: auto», webp», o avif

‍

Variable: IMAGE_QUALITY

Valor: 85 (Calidad 1-100, 85 es un buen equilibrio)

‍

Variable: FORMATO OG_IMAGE_

Valor: jpeg (Formato para compartir imágenes en redes sociales

‍

Variable: OG_IMAGE_QUALITY

Valor: 80 (Calidad para imágenes OG)

‍

Variable: EDGE_CACHE_TTL

Valor: 3153600 (Duración de la caché perimetral (en segundos) (predeterminado: 1 año)

‍

Variable: BROWSER_CACHE_TTL

Valor: 60480 (Duración de la caché del navegador en segundos (predeterminado: 1 semana)

‍

Variable: CATCH_ALL_EXTERNAL

Valor: false (Procesa también imágenes de CDN que no sean de Webflow (una función muy experimental que requiere transformaciones de imagen para usar cualquier dominio)

‍

Recomendaciones:

• Mantener FORMATO_IMAGEN tan auto — sirve AVIF a los navegadores que lo admiten, WebP a otros
• CALIDAD DE IMAGEN a 85 se ve muy bien para la mayoría de las imágenes. Baje a 70-75 si realmente está intentando reducir los bytes
• Mantener FORMATO OG_IMAGE_ tan jpeg — algunas plataformas sociales aún no manejan AVIF/WebP para las vistas previas

Parte 5: Configuración de la ruta del trabajador

He aquí una parte crítica que hace tropezar a la gente. The Worker necesita funcionar con tu dominio personalizado, no el *.workers.dev subdominio. La API de caché no funciona en trabajadores.dev, lo que significa que no hay almacenamiento en caché, lo que anula todo el argumento.

Añadir la ruta

1. En tu Worker, ve a Disparadores → Rutas
2. Haga clic Añadir ruta
3. Configurar:
   • Recorrido: *tudominio.com/*
   • Zona: Selecciona tu zona
4. Haga clic Añadir ruta

El * al principio atrapa a ambos www.yourdomain.com y tudominio.com. El /* al final atrapa todos los caminos.

Si solo usas www, puedes ser más específico: www.tudominio.com/*

Parte 6: Cómo funciona todo

Bien, hablemos de lo que realmente sucede bajo el capó. Esta parte es para los curiosos (y para cuando inevitablemente algo sale mal y necesitas depurarlo).

El flujo de solicitudes

Cuando alguien visita tu sitio:

1. La solicitud llega a Cloudflare — Tu zona primero (O2O)
2. Trabajador intercepta — Comprueba si se trata de una solicitud HTML
3. Obtiene datos de Webflow — Obtiene el HTML (almacenado en caché en el borde)
4. Transforma las URL — Reescribe todas las URL de CDN de Webflow
5. Devuelve HTML transformado — El navegador recibe la página modificada

Cuando el navegador solicita una imagen:

1. Solicitar visitas /cdn-cgi/image/format =automático, calidad=85/ https://yourdomain.com/img-original/...
2. Redimensionamiento de imágenes de Cloudflare — Analiza la URL de transformación
3. Obtiene la fuente — Obtiene el original de su /img-original/ punto final
4. Proxies de trabajadores — /img-original/ obtiene de Webflow CDN
5. Transforma — Convierte a AVIF/WebP, aplica calidad
6. Caches — Tanto el original como el transformado se almacenan en caché en el borde
7. Devoluciones — Imagen optimizada servida al navegador

Estructura de URL

Analicemos el aspecto de una URL transformada:

Original (en Webflow):

https://cdn.prod.website-files.com/63565c108c96756a59b92502/image.jpg

Transformado (en tu HTML):

https://yourdomain.com/cdn-cgi/image/format=auto,quality=85/https://yourdomain.com/img-original/https%3A%2F%2Fcdn.prod.website-files.com%2F63565c108c96756a59b92502%2Fimage.jpg

Desglosando eso:

• https://yourdomain.com/cdn-cgi/image/ — Punto final de redimensionamiento de imágenes de Cloudflare
• formato=automático, calidad=85/ — Los parámetros de transformación
• https://yourdomain.com/img-original/ — Nuestro punto final de proxy
• https://%3A%2F%2Fcdn.prod... — La URL de la imagen original codificada en URL

Lo que se transforma frente a lo que se convierte en proxy

• ‍PNG, JPG, WebP, GIF: Optimizado mediante el redimensionamiento de imágenes de Cloudflare/cdn-cgi/imagen/ → /img-original/
• ‍SVG: Desinfectado (se eliminaron los scripts), se conservó el formato/cdn-cgi/imagen/ → /img-original/
• ‍AVIF: Solo con proxy (ya es óptimo)/img-cache/CSS, JSProxiado y en caché/caché de activos/
• ‍Fuentes: (woff, woff2, ttf, otf, eot) Proxy y en caché/asset-cache/ (muy experimental)
• ‍Iconos de favoritos: Optimizado como imágenes/cdn-cgi/imagen/ → /img-original/
• ‍Imágenes de OG/Twitter: Convertido a JPEG/cdn-cgi/imagen/ → /img-original/

Parte 7: Probar la configuración

Es hora de asegurarse de que todo funciona correctamente.

Controles básicos

1. Ver fuente de la página

• Visita tu sitio
• Haga clic con el botón derecho → Ver fuente de página
• Búsqueda de /cdn-cgi/imagen/ — debería aparecer en las URL de las imágenes
• Búsqueda de /caché de activos/ — debería aparecer en las URL de CSS y JS

Si ves esto, el Worker está ejecutando y transformando tu HTML.

2. Compruebe la pestaña Red

• Abra DevTools (F12 o Cmd+Opción+I)
• Ve a la pestaña Red
• Recarga tu página
• Filtrar por «Img»
• Comprueba que las URL de las imágenes provienen de tu dominio, no de la CDN de Webflow

3. Verifique los encabezados de la caché Haga clic en una imagen de la pestaña Red y compruebe los encabezados de respuesta:

• X-Cache: HIT = Servido desde la memoria caché de Cloudflare (¡bueno!)
• X-Cache: MISS = Primera solicitud, ahora en caché (también está bien)
• Tipo de contenido: image/avif o imagen/webp = La conversión de formato funciona

4. Prueba el uso compartido en redes sociales

• Usa el depurador de contenido compartido de Facebook
• Usa el validador de tarjetas de Twitter
• Comprueba que las imágenes de OG se cargan sin errores

Uso de la extensión DRFlare

La forma más fácil de probar tu configuración es usar la extensión DRFlare para Chrome. Ejecútala desde DevTools y actualiza la página. Verás estadísticas detalladas y podrás colocar el cursor sobre las imágenes para analizarlas in situ. Ha sido privado, pero devuelto a la vida como DrFlare Reloaded, consíguelo aquí.
‍

Recuerde actualizar el navegador una vez que tenga Dr. Flare abierto.

Parte 8: Solución de problemas

Las cosas van mal. A continuación, te explicamos cómo solucionar los problemas más comunes.

Devolución de imágenes 404

Síntomas: Las imágenes no se cargan, hay errores 404 en la consola.

Lista de verificación:

• ✅ ¿Las transformaciones de imágenes están habilitadas en Cloudflare?
• ✅ ¿Tu dominio se agregó a Allowed Origins?
• ✅ ¿La ruta del trabajador está activa y es correcta?
• ✅ DOMINIO variable de entorno configurada correctamente?

Revisa los registros de los trabajadores: Panel de control de Cloudflare → Trabajadores → Tu trabajador → Registros

Los activos aún se cargan desde Webflow CDN

Síntomas: Las URL de CSS/JS no se han transformado.

Lista de verificación:

• ✅ Trabajador desplegado en una ruta de dominio personalizada (no *.workers.dev)?
• ✅ ¿El patrón de ruta es correcto? (p. ej., *tudominio.com/*)
• Borrar la caché del navegador y volver a cargar (Ctrl/Cmd + Shift + R)

Ver el código fuente de la página: si las URL no se transforman, el Worker no se está ejecutando en esa ruta.

OG Images no funciona en las redes sociales

Síntomas: Las vistas previas de redes sociales muestran imágenes rotas.

Comprobar:

• Usa los validadores de Facebook/Twitter para ver el error real
• Verificar FORMATO OG_IMAGE_ está configurado en jpeg
• Comprueba que la metaetiqueta de la fuente de la página se haya transformado

Webflow muestra la «actualización necesaria» para el dominio

¡Esto es lo que se espera! Cuando el proxy de Cloudflare está habilitado, Webflow no puede ver tus registros de DNS. Si tu sitio se carga correctamente, ignora esta advertencia.

Error de apretón de manos 525

Por lo general, esto significa que hay algún problema con la configuración de SSL:

• Compruebe que el modo SSL/TLS esté configurado en Completo (estricto) en Cloudflare
• Asegúrese de no tener configuraciones de SSL conflictivas

Parte 9: Costos

Hablemos de dinero. ¿Cuánto te va a costar esto?

Trabajadores de Cloudflare

• Nivel gratuito: 100 000 solicitudes/día
• Pagado: 5 USD al mes para 10 millones de solicitudes

Transformaciones de imágenes

• Nivel gratuito: 5000 transformaciones/mes
• Pagado: 9 USD al mes por 50 000 transformaciones y, a continuación, 0,50 USD por cada 1000

Para un sitio de flujo web típico

La estrategia de almacenamiento en caché minimiza los costos de manera significativa:

• HTML en caché en el borde → menos solicitudes de origen
• Imágenes originales almacenadas en caché → la transformación solo ocurre una vez por imagen
• Imágenes transformadas almacenadas en caché → servidas desde el borde en visitas repetidas
• 1 año de TTL → las imágenes permanecen en caché hasta que las purgues
• Recuerde que las reglas de caché y página permiten una estrategia de caché más compleja. Por ejemplo, las páginas de blog se pueden almacenar en caché menos agresivamente que una página de inicio, porque las publicaciones se actualizan con más frecuencia, mientras que las páginas estáticas a menudo se pueden almacenar en caché casi indefinidamente.

Borrar la memoria caché

Una vez que hayas configurado tu estrategia de almacenamiento en caché, recuerda que es posible que los cambios no se reflejen de inmediato. Si configuras la caché perimetral para una semana para una página o un activo, la versión almacenada en caché solo se descartará en el borde una vez que haya pasado esa semana.

Para borrar la caché en el panel de control de Cloudflare, ve a Almacenamiento en caché → Configuración y usa la purga personalizada (para ser más específicos sobre lo que borras) o la purga todo (que vacía toda la caché).

Una vez hecho esto, recuerda borrar la memoria caché del navegador o probar con la navegación privada o el modo incógnito.

Custom ofrece las siguientes opciones. Esto permite realizar purgas selectivas.

Purgar la caché con un Webhook en el panel de configuración de Webflow

También es posible realizar una purga al pulsar publicar en Webflow añadiendo un Webhook a la configuración de Webeflow.

Webflow → Webhook de purga de caché de Cloudflare

Este es el resumen rápido:

El flujo

1. Webflow dispara un webhook cuando publicas tu sitio
2. Algo recibe ese webhook y llama a la API de Cloudflare para purgar la caché

El problema: Cloudflare no tiene un punto final directo de «recepción de webhooks», por lo que necesitas un intermediario (Cloudflare Worker, Zapier, Make o una función sencilla sin servidor).

Pasos de configuración

1. En Webflow

• Ir a Configuración del sitio → Integraciones → Webhooks
• Añade un webhook con el tipo de disparador: Publicación del sitio
• Apunte a la URL de su intermediario (Worker, Zapier, etc.)

2. En Cloudflare

• Coge tu ID de zona (desde la página de resumen de tu dominio)
• Crea un Símbolo de API con Depuración de Zone.Cache permiso

3. The Middleman (ejemplo de Cloudflare Worker)

Tu trabajador recibe el webhook de Webflow y llega al punto final de purga de Cloudflare:

PUBLICACIÓN https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache

Con cuerpo: {"purge_everything»: cierto}

Documentos

• Webhooks de Webflow: https://developers.webflow.com/data/docs/working-with-webhooks
• API de purga de caché de Cloudflare: https://developers.cloudflare.com/api/resources/cache/methods/purge/‍
  ‍

Parte 10: Limitaciones

Nada es perfecto. Esto es lo que debes saber:

Limitaciones conocidas

• ‍La reserva de caché no está disponible: Webflow usa el proxy O2O, que evita la reserva de caché. Los activos solo se almacenan en caché en el borde.
• ‍JSON-LD no se ha transformado: Las URL de datos estructurados no se modifican. Los motores de búsqueda manejan bien las URL originales.‍
• Transformación basada en expresiones regulares: Varias pasadas sobre HTML. Aceptable para páginas típicas (<200 KB).

Qué no funciona

• URL de datos (datos: imagen/...): En línea, nada que usar como proxy
• URL de blobs (mancha:...): Generado por el navegador, no se puede usar como proxy
• URL relativas: ya están en tu dominio
• Activos de CDN que no son de Webflow: a menos que catch_all_external=Verdadero

Contenido dinámico

El trabajador solo transforma HTML en la respuesta inicial. Es posible que las imágenes agregadas mediante JavaScript después de cargar la página no se transformen a menos que también estén en el HTML inicial. Si estás renderizando mucho en el lado del cliente, ten esto en cuenta.

Instrucciones de reversión

Si algo sale terriblemente mal (probablemente no, pero por si acaso):

Desactivación rápida (Keep Worker)

1. Ir a Trabajador → Disparadores → Rutas
2. Eliminar la ruta
3. El sitio sirve inmediatamente directamente desde Webflow
4. Activa el modo de desarrollador para omitir la memoria caché

Eliminación completa

1. Eliminar la ruta del trabajador
2. Eliminar el propio trabajador
3. (Opcional) Desactivar las transformaciones de imágenes
4. (Opcional) Eliminar los orígenes permitidos

Tu sitio volverá al alojamiento estándar de Webflow con el proxy O2O aún activo. Seguirás teniendo las demás funciones de Cloudflare, como WAF y la protección contra bots.

Finalizando

Y eso es todo. Ahora tienes un sitio Webflow con el máximo rendimiento que funciona a través de Cloudflare, con optimización de imágenes, almacenamiento en caché de activos y todas las ventajas que puedas desear.

¿La mejor parte? Una vez que esté en ejecución, puedes agregar funciones adicionales de Cloudflare. Configura las reglas de página para un comportamiento de almacenamiento en caché específico. Agregue reglas de WAF por motivos de seguridad. Configure la protección contra bots. Usa la sala de espera si esperas picos de tráfico. Ahora es tu zona. Tendrás que jugar un poco para aprovecharlo al máximo.

Gran parte de la optimización proviene de jugar con el almacenamiento en caché y las reglas de la página, etc.

Llevamos un tiempo ejecutando esta configuración en producción y las mejoras de rendimiento parecen sólidas. Tiempos de carga más rápidos, mejores Core Web Vitals, archivos de imagen más pequeños y clientes más satisfechos.

Si tienes problemas o preguntas, envíanos un mensaje. Siempre estamos encantados de charlar sobre la optimización del rendimiento de Webflow (es algo que nos gusta). Intentaremos comunicarnos contigo lo antes posible.

Recuerda consultar la sección de procedimientos de nuestro blog para ver más tutoriales. Tenemos artículos sobre todo tipo de temas, desde la configuración del administrador de etiquetas hasta el tamaño dinámico de las fuentes.

Hasta la próxima, sigue construyendo. ✌️

Estas pruebas se realizaron en el momento de la publicación, por lo que toda la basura habitual que estoy probando en nuestro sitio en un momento dado debería estar funcionando.

‍