Tutorial Cloudflare para Wordpress: optimización, aceleración y uso de reglas gratis

Publicado el 02 julio 2017 por Eduardo Javier Perez Cenepo @NeytorTec
No hace mucho tiempo pude ver un tutorial sobre Cloudflare que ademas de ser un buen producto, puedo decir que es un buen servicio gratuito (tiene opción de pago con más ventajas) que ayuda a proteger nuestros sitios webs, y además, actúa como un CDN que optimiza procesos y reduce la carga del servidor.

Cloudflare para Wordpress: optimización, aceleración y uso de reglas gratis


Se ha hablado mucho de este producto a punto que se establecen muchas ventajas :
  • CDN: Distribuye el contenido web por diferentes nodos, haciendo que los tiempos de respuestas desciendan desde el país que te visitan. Además, reduce el consumo de ancho de banda.
  • FIREWALL: Es capaz de bloquear intentos de ataques, bots, spam y otras formas de perjudicar tu servidor o web. Muy útil para ataques DDoS.
  • GRATIS: Permite el uso del CDN y reglas básicas de la aplicación sin coste alguno. La versión de pago tiene opciones más avanzadas y más ventajas, pero algo es algo.
  • INSTALACIÓN: Solamente necesitas cambiar las DNS de tu dominio y activar el plugin desde Wordpress. Si no te convence, cambias las DNS y se acabó Cloudflare.

Como recomendación, mucha gente usa solamente sus DNS y lo emplea como CDN ya que, a veces, al configurar la seguridad puede dar falsos positivos o detectar a users normales como bots o ataques.
Una buena forma de aprovecharlo con wordpress es haciendo uso de las 3 reglas gratis que permite la opción free. Por ello, vamos a trabajar:
PREVIO
0) Asumo que tienes una cuenta en Cloudflare y ya has cambiado las DNS para que trabajen con la aplicación. Si esto no es así, busca en el foro algunos de los tutoriales que más betas han escrito y que te resultarán de utilidad. En este caso en particular, no voy a emplear las reglas de seguridad.
CONFIGURACIÓN GENERAL
1) En el panel principal, repasamos la configuración de Cloudflare. En Settings overview, mantendremos la seguridad desactivada. Always Online y IP Geolocation déjalos en ON.Lo demás, por defecto.
2) Hacemos click en la pestaña de Performance settings. Estos valores son orientativos pero los explico: minifico el CSS y el HTML, dejando el JS porque a veces me ha dado problemas con determinados scripts. En cuanto, a la expiración TTL de la caché puedes reducir el tiempo si estás actualizando a menudo. Si lo haces cada 3 o 4 días, aumenta los valores. Como detalle, el Rocket Loader lo dejo por defecto en ON, pero suelo hacer pruebas con pagespeed insights ya que en ocasiones resulta más lento.
3) Volvemos haciendo click en "Websites"en el menú de arriba, y ahora volvemos a desplegar la pestaña, pero haciendo click en "Page Rules".

CREANDO REGLAS EN CLOUDFLARE PARA WORDPRESS


4) Para aumentar la velocidad del sitio web, vamos a crear 1 regla que permita cachear absolutamente todo, y esto incluye una gran lista de archivos: páginas, imágenes, css, js, swf,... Enlace a la lista de extensiones: https://support.cloudflare.com/entri...tatic-content-
5) En URL pattern, escribimos nuestra URL: *misitioweb.com/* (Los asteriscos incluyen subdominios como el www, y el resto de permalinks que tenga la web. Si pones blog.misitioweb.com/* no funcionará).
6) Parámetros Regla 1: el más importante es el "Custom Caching", en el que seleccionaremos "Cache Everything". Todo lo demás, puedes ir probando. He marcado con flechas azules lo que puedes ir variando hasta encontrar tu configuración más idónea ya que no todos los sitios son iguales (theme usado, versión wp, hosting, plugins,...). Por ejemplo, si no quieres NADA de seguridad, déjalo el apartado correspondiente en OFF.
7) Configurado lo que nos interesa, ahora vamos a realizar un ajuste básico y es que si cacheamos todo, el principal inconveniente que podemos encontrar es que no podamos acceder al dashboard, o lo que es peor, que nuestros usuarios no puedan registrarse o hacer login. Para ello, creamos una segunda regla que afecte a la carpeta wp-admin. En URL pattern escribiremos: *misitioweb.com/wp-admin*
8) El objetivo es que no se le aplique la primera regla para que pueda pasar el filtro. En la imagen, queda expuesto lo importante en amarillo, lo que debes dejar off en rojo y lo que puedes variar con una flecha. Por último, la tercera regla y última que permite Cloudflare free será la misma que la segunda pero con wp-login, quedando así: *misitioweb.com/wp-login*
9) Ahora que ya está todo, vuelve a Cloudflare Settings ---> Settings overview ---> Y click en "Purgue Cache". Limpiaremos la caché actual y se aplicarán los nuevos cambios. 
NOTAS IMPORTANTES QUE DEBES SABER
Esto es compatible con cualquier sistema de caché que ya tenga wordpress (WP Super Cache, Quick Cache, W3TC,...).Si estás utilizando W3TC, prueba a instalar el plugin de Cloudflare y desactivar el que viene en el menú interno.
Si trabajas con tu servidor dedicado, no olvides de darle acceso desde iptables o el CSF a las IP's de Cloudflare: https://es.cloudflare.com/ips.
Por último, recuerda que el uso de Cloudflare no te asegura una buena puntuación en el pagespeed o el Yslow. La prioridad siempre está en lo ligero que tengas wordpress (cuida al máximo tu .htaccess), el diseño y el código de tu theme y el servidor dónde se aloje (hardware del server, software del server,ubicación y red, entre otros).
Bueno este artículo esta también en forobeta, es muy interesante para los webmaster que desean agilizar en cuanto a velocidad de sus sitios web, así como también para la optimización web, espero que les sea de mucha utilidad.