Últimamente el servicio de CDN de CloudFlare ha estado anunciando montones de mejoras, pero donde llamó poderosamente mi atención fue con APO, abreviatura del inglés Automatic Platform Optimization, o en español, optimización automática de la plataforma, que inicialmente solo está disponible para WordPress.
Pero empecemos por el principio…
Índice de contenidos
¿Qué es APO para WordPress de CloudFlare?
Según su propio anuncio, APO son una serie de optimizaciones específicas para WordPress, que entregan todas tus páginas y entradas WordPress como HTML estático desde los servidores de la CDN de CloudFlare.
Y dirás ¡si esto ya lo hacía con CloudFlare sin APO!, pero no, porque sin APO la CDN entregaba recursos estáticos como CSS, HTML, JavaScript e imágenes, pero no todo el HTML de tus páginas y entradas, ni tampoco fuentes y otros recursos externos.
Sería algo así:
Con APO la CDN de CloudFlare reduce aún más carga de tu servidor, haciendo copias en la caché de sus CDN de todo tu contenido susceptible de cachear por CloudFlare, incluso recursos externos.
El objetivo final es entregar un HTML totalmente estático a tus visitantes a partir de tu contenido dinámico, para que tus páginas no tengan que esperar respuestas de tu servidor a cada petición/visita, acelerando enormemente los tiempos de espera de carga de tu web.
Una vez activada la optimización automática de la plataforma (APO) el tipo de respuesta sería de este otro modo:
Donde todos los recursos de tu web dinámica se sirven como HTML estático desde los servidores de alta velocidad de la CDN de CloudFlare.
¿Cómo se activa APO en WordPress?
Lo mejor de todo es que es muy fácil activar la optimización automática de la plataforma WordPress de CloudFlare.
El primer paso es instalar el plugin oficial de CloudFlare (gratuito) en tu WordPress, si aún no lo habías hecho.
Una vez activado pásate por su página de configuración en Ajustes -> Cloudflare de tu WordPress.
Si aún no tenías una cuenta en CloudFlare es el momento de crearla (Create your free account), y si ya la tenías de acceder (Sign in here). Cuando tengas la cuenta creada es momento de añadir el token de la API de CloudFlare para conectar tu WordPress con CloudFlare.
Nota: Llegado a este punto, si aún no habías activado la CDN de CloudFlare para tu web, quizás deberías leer la siguiente guía antes de seguir, y luego continuar a partir de aquí.
Acelera WordPress sirviendo tu contenido desde CloudFlare CDN
Visto todo lo anterior, es momento de conectarnos …
En la pantalla anterior tienes un enlace a la página de ajustes del escritorio de CloudFlare donde encontrar la clave API (Get your API Key from here), que te llevará a esta página:
Simplemente tienes que hacer clic en el botón de «Crear token», lo que te llevará a esta otra pantalla:
Donde debes pulsar el botón de «Usar plantilla» de WordPress ¡fácil de adivinar eh!
Hecho esto nos lleva a la siguiente pantalla, donde no tenemos que tocar nada, solo continuar al resumen.
Que nos mostrará las propiedades del token que se va a crear.
Pulsas en «Crear token» y ya has terminado. En la siguiente pantalla te mostrará el token que debes copiar, y pegar en la pantalla de configuración de CloudFlare en WordPress que nos pedía al principio del proceso.
Una vez activado y conectado nuestro WordPress con CloudFlare con el token, podríamos simplemente aprovechar las ventajas de la CDN «normal», pero vamos a por APO, que para eso estamos aquí ¿no?
Pues en la pantalla de ajustes de CloudFlare en nuestro WordPress verás un botón para adquirir (Purchase) la Automatic Platform Optimization (APO), así que solo queda pulsar este botón.
Que te llevará a tu cuenta de CloudFlare para iniciar el proceso de pago del servicio APO, que tiene dos posibles precios:
- Gratuito si ya tenías una cuenta Enterprise de CloudFlare.
- 5 $ al mes si tenías una cuenta Free de CloudFlare.
Una vez abonado el importe, ya verás en tu cuenta de CloudFlare el servicio de optimización automática de la plataforma, disponible para activar en la sección llamada Speed, que es lo que debes hacer.
Hecho esto, también deberías verlo activo el servicio en los ajustes de CloudFlare en tu WordPress.
¿Cómo sé que he activado APO correctamente?
Aunque más abajo veremos resultados de rendimiento, puedes comprobar fácilmente si ya está activo usando la consola para desarrolladores del navegador.
En una nueva ventana de incógnito de tu navegador, carga tu web y abre la consola con un clic derecho + inspeccionar elemento en tu navegador y, en la sección Network, tras una recarga de la página, haz clic en tu dominio. En las cabeceras (Headers), si ves los siguientes valores es que ya está activo.
cf-cache-statuscon el valor «HIT» indica que la página se está sirviendo o no desde la CDN de CloudFlare. Si, por el contrario, el valorcf-cache-statusmuestra «DYNAMIC» tras varias recargas, es posible que haya un problema de configuración o de cookies.cf-edge-cacheindica el tipo de caché que se está sirviendo. Aquí hay dos posibles valores que te puedes encontrar – «no-cache» y «cache, platform=wordpress» Cuando APO está bien configurado con el plugin este valor será «no-cache» para las páginas que no deberían estar en caché y «cache, platform=wordpress» para las páginas que sí están en caché.
¿Se puede activar APO sin el plugin de CloudFlare?
Pues sí, en realidad no es necesario, puedes activar la optimización automática de la plataforma sin necesidad de instalar el plugin en tu WordPress, haciéndolo desde tu cuenta de CloudFlare, pero debes tener en cuenta que APO tiene configuraciones distintas con y sin plugin.
APO de Cloudflare con el plugin para WordPress
Con el plugin activo y configurado, APO tiene estas características:
- HTML en caché con un TTL de 30 días.
- Invalidación de caché los 30 segundos después de publicar o actualizar una entrada/página.
- Se omite HTML en caché para los usuarios conectados.
- Se omite HTML en caché para páginas con cookies que no deben estar en caché, como páginas de WooCommerce, sitios de membresía, foros, etc.
- Se omite la petición al servidor de origen si una página se puede servir desde la CDN de CloudFlare, lo que reduce carga en tu servidor.
APO de Cloudflare sin el plugin para WordPress
Por el contrario, si no instalas el plugin de Cloudflare para WordPress las características son estas otras:
- HTML en caché con un TTL de 30 días.
- Invalidación de caché los 30 minutos después de publicar o actualizar una entrada/página(en vez de 30 segundos).
- Se omite HTML en caché para páginas con cookies que no deben estar en caché, como páginas de WooCommerce, sitios de membresía, foros, etc.
- Sigue siendo necesaria una petición al servidor de origen (el tuyo) para obtener la lógica de invalidación de caché correcta.
Así que queda claro que hay varias ventajas en usar el plugin ¿no crees?
¿Se nota? ¿Merece la pena APO de CloudFlare?
Los resultados de activar la optimización automática de la plataforma (APO) de CloudFlare van a variar mucho dependiendo del tipo de web y su contenido, así como de su optimización previa.
Donde más notarás sus ventajas será en webs que no requieran de muchas cookies que no se puedan almacenar en caché, como portafolios, webs corporativas, blogs, etc., porque es donde APO puede cachear todo el contenido estático y servir tu web completamente como HTML estático.
Ahora bien, si tu web es una tienda online, un sitio de membresía, una academia online, o incluso un foro, al requerir estos sitios de montones de cookies que no se pueden almacenar en caché para que funcionen adecuadamente (productos en el carrito, datos de pago, suscripciones, etc.), aquí puedes aprovechar menos las optimizaciones de APO, porque – inteligentemente – no hace caché estática de este tipo de páginas que necesiten cookies de sesión, sino básicamente tu sitio no funcionaría como debe.
Según los datos facilitados por CloudFlare y Kinsta, se pueden obtener unas mejoras de velocidad entre un 70% hasta incluso un 300%.
También, notarás mucho más las mejoras cuanto menos optimizada estuviese antes tu web, lógicamente, pues si no tenías siguiera activa la CDN, o no la tenías bien configurada, las mejoras serán brutales, pero si ya tenías trabajo adelantado los cambios, como es natural, serán menores, pues hay menos cosas que optimizar.
En todo caso, para no hablar por boca de otros, yo mismo he hecho la prueba aquí mismo, en Ayuda WordPress, y antes de activar APO de CloudFlare, los resultados que obtenía en GTMetrix eran estos:
Estamos partiendo de un sitio alojado en SiteGround, con los 3 niveles de caché activos en el servidor (estática, dinámica, memcached), que sirve WebP, utiliza el tema WordPress actualmente más optimizado que hay, y tiene prácticamente todas las optimizaciones de las que hablo aquí mismo, con algunas salvedades:
- Por las prisas en publicar no suelo optimizar mucho las imágenes antes de subirlas. Las optimizo algo, pero no todo lo que debiera.
- Tengo 28 plugins activos, por diversos motivos.
Pues bien, tras activar APO de CloudFlare los resultados fueron estos otros…
¿Donde se nota más la diferencia?
Pues, como puedes ver en los datos de los análisis de carga, las mayores diferencias son:
- DOM interactive – De 0,9 seg. a 209 ms.
- DOM loaded – De 1 seg. a 0,5 seg.
- Onload – De 1,4 seg. a 0,7 seg.
- TTFB – De 236 ms a 123 ms.
Y esto desde Londres, el servidor más cercano a la ubicación del servidor de origen y la mayoría del tráfico del blog, porque haciendo los tests desde otras ubicaciones las mejoras han sido mucho mayores, enormes.
¿Con APO deja de ser importante el hosting?
Es muy muy buena pregunta, porque si estamos hablando de que APO será quien entregue todo nuestro contenido optimizado como HTML estático ¿qué más da el hosting que tengamos si todo el contenido ya lo sirven las CDN de CloudFlare?
Pero la respuesta es que el hosting sigue siendo importante, por varios motivos:
- Si tu sitio sirve mucho contenido dinámico con cookies que no se pueden almacenar en caché (eCommerce, academias online, foros, etc.) todo el contenido que no se puede cachear lo tiene que servir tu hosting, y cuánto más optimizado esté para WordPress mejor.
- En webs solo para usuarios conectados APO no puede optimizar nada, así que ahí las prestaciones de tu hosting son las que marcan la diferencia.
- APO no optimiza nada en la administración de tu WordPress, y aquí de nuevo un buen hosting marcará diferencias a la hora de la gestión de tu web.
- Hay optimizaciones que no ofrece APO, ni siquiera CloudFlare en su versión gratuita ni en algunos planes de pago, que puedes realizar si tu hosting te ofrece este tipo de prestaciones. Me refiero a carga diferida, optimización automática de imágenes, conversión a WebP, precarga de DNS externas, etc.
Conclusiones ¿las hay?
Bueno, pues como siempre yo te puedo dar mi opinión tras probar el servicio APO de CloudFlare para WordPress, tanto en este blog como en otros sitios de clientes.
- En la mayoría de webs y blogs reduce mucho los tiempos de carga y entrega páginas muy rápidas en HTML estático.
- Es especialmente eficaz para sitios que sirven contenido a distintos países, prácticamente igualando los tiempos de carga desde los cientos de servidores de CloudFlare, cuando sin APO había diferencias apreciables.
- En tiendas online con WordPress y WooCommerce mejora mucho los tiempos de carga de todas las páginas que se pueden almacenar en caché, lo que combinado con un buen hosting para las páginas de carrito y pago hace que también sea muy efectivo. Y no, APO de CloudFlare no rompe tu tienda online, gracias a que no cachea las páginas con cookies no cacheables de este tipo de webs.
- En sitios de membresía prácticamente no merece la pena, salvo para la página de aterrizaje y alguna de venta, pero casi te merece más la pena un buen hosting y optimizarlas manualmente y ahorrarte los 5 $ mensuales de APO, pues en todo el sitio accesible para los miembros APO no optimiza nada.
Resumiendo, por generalizar, los 5 $ mensuales del servicio me parecen un regalo, pudiendo resultar incluso en un ahorro, pues es tanto lo que optimizas activando y configurando bien la CDN de CloudFlare y APO que puedes cambiar a un plan más económico de tu empresa de hosting.
Así que, sí, APO de CloudFlare es un servicio de optimización para WordPress absolutamente recomendable. Te animo a probarlo, aunque solo sea un mes, y luego nos lo cuentas en los comentarios.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Buenas tardes Fernando.
Para activar el plugin APO es necesario desactivar los plugins de caché como Wp-cocket, los dos son comaptibles?
No hace falta, pueden convivir, son estrategias diferentes
Hola, Fernando. Muchas gracias por este análisis tan útil.
Gracias Fernando… Hace un tiempo, tras leer un post en este blog, creé una versión estática de mi Sitio mediante un plugin, y dejé de utilizar Cloudflare, pues me dijiste que su versión gratuita no cachea html… Pero comienzas este post diciendo que últimamente el servicio de CDN de CloudFlare ha estado anunciando montones de mejoras… ¿por casualidad, es posible ahora utilizar la versión gratuita de CloudFlare para cachear un sitio estático?
Gracias de nuevo…
Sí cachea HTML la versión gratis, si APO, pero no todo.
Y sobre mejoras, ha introducido muchas, como HTTP/3, Brotli, Onion routing, caché persistente, un montón.
Gracias Fernando… Dices que la versión gratuita de ClouFlare sí cachea html… No sé a qué te refieres con «si APO». Y añades: «pero no todo». Como decía, mi sitio es hmtl. ¿Lo cachea, pero no todo?
Gracias de nuevo…
Bueno… Logré comprender la primera frase: «Sí cachea HTML la versión gratis». Y he probado… Pero me he encontrado con que en móvil (no en PC) muchas imágenes se muestran rotas (no se muestran). Por lo que de momento seguiré prescindiendo de CloudFlare…
Una pregunta más. Yo tengo configurado cloudflare únicamente par dns y no para cdn (nube gris); para activar apo debo actuar cdn (nube naranja?
Gracias.
Tienen que estar en naranja las nubecitas de tu dominio, sino no estás aprovechando al completo la CDN
hola. pagué el plugin y configuré paso a paso el token pero en las cabeceras header aún sigue saliendo la caché dinámica y no HIT . probé el código curl desde la terminal y da que el token está activo . no se que puede estar funcionando mal
Asegúrate de haber activado la optimización en CloudFlare
muchas gracias por responder. lo que me está pasando es que cada vez que entro a la cuenta cloudflare está deshabilitado . lo habilito , lo vuelvo actualizar o salgo y entro y está otra vez desactivado . desde el wordpress si funciona todo correcto .
Eso es más raro, contacta con soporte de CloudFlare, no es normal
Hola Fernando, ¿cuál sería tu recomendación para utilizarlo en un sitio de noticias (medio de comunicación digital)?
Depende más de otros factores que del contenido. Prueba un mes y si te merece la pena sigue, sino sigues como antes
Hola Fernando oye el servicio de APO funciona con una cuenta gratuita de Clouflare? he estado pensando en pasarme a cloudflare premium, pero quería saber si puedo hacer esta configuración ahorita que tengo un plan gratuito o me espero a que tenga clouflare premium para hacerla?
Me confundí en el nombre de los planes jaja, lo que quiero decir simplemente es que si APO también se incluye en Cloudflare Pro de forma gratuita o solo en Enterprise?
Se puede activar con las cuentas gratuitas o sino está incluido en las de pago
Hola:
Gracias por el aporte, es un buen tutorial. Tengo una duda, y es que no sé cuántos «tokens de API» debo crear, pues en mi caso, mi proyecto web tiene varios subdominios, cada uno con instalaciones wordpress independientes.
Digamos que quiero que se borre la caché independientemente por subdominios cuando realice cambios. Me imagino que si solo tengo un tokens de API, cuando se borre la caché, se borrará para todo el proyecto y eso, en caso, no sería bueno. No lo tengo claro.
Espero que me pueda orientar mejor
Saludos y gracias
Pues no lo he probado Manuel, dale tú y cuéntanos.
Gracias, así lo haré. Tengo una duda, ya que todo esto de APO es un poco nuevo para mí. La Web de Cloudflare, si activas APO, también te da la opción de activar «Caché por tipo de dispositivo» ¿Qué es eso realmente pues no lo entiendo?
Saludos
No, no hay caché por dispositivo
Sí, eso viene si activas APO desde la web de Cloudflare, no en el plugin, te da esa opción al activarlo, que no se que es.
Buenas tardes, Fernando.
Recién publicaste este post probé el servicio, y en ese momento pague 5 dólares mensuales. Luego o desactivé porque con APO instalado la redirección http a https no funcionaba y no conseguí que funcionara.
Hoy, como 5 meses después, al intentar nuevamente activar el servicio veo que el plan mensual de 5 dólares ya no está, y el que le sigue es de 20 dólares mensuales.
¿Qué pasó con ese plan de 5 dólares mensuales? ¿El plan free ahora es lo mismo que el plan de 5 dólares que había al inicio? ¿Sabes algo al respecto?
He quedado perdido.
Gracias.
No veo el precio porque si le das a comprar no sale hasta pagar pero no es subir a la Pro, puedes tener la versión gratis de Cloudflare y añadir el servicio APO aparte. Pero claro, si te cobran 25$ por APO y con la Pro lo tienes y vale 20$ pues está claro que interesa la Pro
Es que ese lo extraño. Yo tengo una cuenta free, y ya no aparece la posibilidad de comprar APO por 5 dólares al mes, y sólo me ofrece la posibilidad de comprar los otros planes que inician con 20 dólares mensuales.
En todo caso, he podido activar APO con la versión free y funciona correctamente, así que sumo que ya es gratuita.
Saludos
Yo acabo de probar en una cuenta gratis y para añadir APO me pide la tarjeta de crédito. Ya me contarás tu secreto 😀
Al parecer hay un error de Cloudflare en la facturación, pues buscando en los pagos que realicé en su momento, la suscripción de USD5 sigue «Endable» a pesar de haber cancelado la suscripción hace varios meses.
Ahora me permitió activar nuevamente APO y aún no se ha reanudado la facturación. Veremos cuándo se enteran.
Saludos
Entendí que al apuntar mis DNS hacia Cloudflare y haber instalado este plugin, Cloudflare servía una versión estática de las páginas de mi Sitio… pero dices en un «Destripando Webs» que este plugin es compatible con plugins de caché como Total Caché… ¿Si Cloudflare sirve una versión estática de las páginas de mi Sitio, qué aporta otro plugin de caché instalado en mi Sitio?
Son distintas cachés, la caché de APO es caché COMPLETA de página, CloudFlare solo cachea algunas partes, y otros plugins solo la caché de objetos (la de WP, la mayoría)
Yo del tema caché simplemente entiendo el concepto básico… pero veo que hay diferentes cachés (de página, de disco, de objetos, dinámica, y sabe Dios qué más) que se me escapan… Y aunque pones COMPLETA en mayúsculas, entiendo que APO no lo cubre todo… ¿Añadiendo el plugin «Caché Enable» a este plugin de APO podría ser suficiente? ¿Son compatibles?
Thanke
Cache Enabler hace lo mismo que APO, caché de estáticos. Para optimizar consultas necesitas también una caché de recursos dinámicos, como Memcached
Hola muchas gracias por el pedazo de contenido que creaste, es muy entretenido y de gran ayuda, te quiero preguntar algo:
En esta imagen https://ayudawp.com/wp-content/uploads/2020/10/resultado-optimizaciones-apo-cloudflare.jpg.webp dices que los visitantes ven el sitio en 1.3 seg, pero según esa imagen la aparición del contenido se da recién a los 3 segundos?
Osea yo estoy asumiendo que cuando recién se aparece el contenido, es el tiempo que el usuario le tomara en ver todo o estaré equivocado?
Gracias
Hola Fernando, muchísimas gracias por toda esta información tan útil. Quería preguntarte si has hecho pruebas de compatibilidad WEBP con la APO de Wordpress. Es decir, ¿el HTML estático que sirve CF acepta el Vary header y se genera «at the edge» para poder servir formatos de imágenes de manera condicional? Muchas gracias!
En el caso de Wordpress + Woocommerce entiendo por la explicación que no cachea carrito y check out, pero…
¿Qué hay de los productos antes de iniciar un proceso de compra? esa url del producto antes de darle al botón «agregar al carrito» o en nuestro caso «reservar»
¿Se aplica la optimización APO a los productos?