¿Cómo podemos mejorar la velocidad de WordPress con Cloudflare y sus Page Rules?

En este tutorial vamos a presuponer dos cosas:

1. Sabes lo que es Cloudflare (es un CDN – content delivery network- un tanto especial que además ofrece opciones de seguridad)
2. Ya lo tienes instalado y funcionando en tu web con WordPress (Aquí tienes un tutorial sobre como hacerlo).

Aun así, te comento un par de cosas sobre cloudflare y su configuración básica.

Guía del principiante: WordPress + Cloudflare

Se trata de un servicio muy sencillo de poner en marcha.Básicamente vas a su página, metes el nombre de tu dominio, reconoce tu configuración DNS, y te dice que cambies tus Servidores de nombres en registrador del dominio por los suyos. Eliges entre las distintas configuraciones automáticas que te ofrecen y listo… En 10 minutos esta hecho… Incluso hay hostings que estan asociados a Cloudflare y directamente desde tu panel de control, puedes activar el servicio.

¿Es realmente efectivo Cloudflare? Rotundamente sí. El servicio inicial es gratuito y más que suficiente en todos los casos. Acelera tu web de manera considerable y reduce en un 95% el nivel de spam en tu blog.

Sólo tienes que tener cuidado si tienes Adsense en tu cuenta. Hay determinados parámetros que puede desconfigurar tu cuenta. Tienes que inhabilitar las siguientes características de Cloudflare para que afecte a los anuncios:

• Performance Settings > Auto Minify (Web optimization): Quitamos el JS
• Performance Settings > Rocket Loader (Web optimization) en OFF

Y no tendremos ningun problema.

Tambien deberiamos instalar el plugin de Cloudflare en nuestro WordPress. ¿Para que sirve? Básicamente para que nos lleguen las direcciones ip de nuestros visitantes y no las IPs de cloudflare (Importante para las estadisticas de visitas).

Si tenemos nuestro propio servidor VPS o dedicado, lo mejor es que instalemos el modulo de Apache mod_cloudflare, que hará el mismo trabajo pero a un nivel superior en el servidor. Lo dicho, debido a que CloudFlare actúa como un proxy, las direcciones IP de tus visitantes no aparecerán en tus logs y todos los accesos vendrán de direcciones IP de CloudFlare. Con este módulo lo solucionamos.

El último punto a tener en cuenta en nuestro servidor, es autorizar en el firewall las IP de Cloudflare (hazlo tu en el firewall o pideselo al que gestione tu servidor):

199.27.128.0/21
173.245.48.0/20
103.21.244.0/22
103.22.200.0/22
103.31.4.0/22
141.101.64.0/18
108.162.192.0/18
190.93.240.0/20
188.114.96.0/20
197.234.240.0/22
198.41.128.0/17
162.158.0.0/15

2400:cb00::/32
2606:4700::/32
2803:f800::/32
2405:b500::/32
2405:8100::/32

Cloudflare Page Rules para WordPress

¿Problemas especificos entre Cloudflare y WordPress? Sólo hay que tener la precaución de añadir una Page Rule como esta, donde le decimos al sistema que no haga cache de la zona de administración de wordpress. Sino hacemos esto, podemos ver como no podemos hacer login en nuestro blog o tener problemas en la zona de administración:

Y por fin llegamos al meollo del asunto: Con todo esto que te he contado, tu página con WordPress debería ir mucho, mucho más rápida. Puedes chequearlo con los siguientes sistemas:

• Pingdom tools
• Gmetrix
• webpagetest

Pero con el siguiente truco, todo debería ir espectacularmente mejor: Se reduce la carga del servidor, mejora el tiempo de latencia entre peticiones etc…

Como por defecto Cloudflare solo guarda en cache los contenidos estáticos como imagenes, CSS, Javascript… con esta Page Rule vamos a conseguir que guarde en cache absolutamente todo (Referencia: Edge Cache Expire TTL: Easiest way to override any existing headers):

Le estamos diciendo a Cloudflare que guarde en cache absolutamente todo, que respete los headers que hayamos configurado en nuestra aplicación (en nuestro caso los que hayamos puesto en el archivo .htaccess. Al final del artículo comentare cual es la configuración ideal para WordPress), y que el TTL sea de 30 minutos (las nuevas actualizaciones en nuestras páginas pueden tomar hasta 30 minutos en propagarse a los visitantes que ya tienen una copia de la página en caché… no es mucho tiempo, teniendo en cuenta los beneficios que conseguimos).

Llegados a este punto, solo hay que tener cuidado con una cosa: El orden de las Page Rules. Tienen prioridad las que estan más arriba, así que aseguraos que estan en este orden para que no tengais problemas al acceder a la parte administrativa de WordPress:

¿Y sí tenemos problemas para hacer login en nuestro WordPress después de todo esto? Os puede salir un mensaje como este al intentar hacer login en WordPress:

“ERROR: Las Cookies están bloqueadas o no las soporta tu navegador. Debes habilitar las cookies para usar WordPress”

En ese caso, y sí acabamos de seguir todos los pasos que he comentado, debemos añadir otra Page Rule adicional para que Cloudflare no guarde en cache la zona de acceso de la página:

que nos permitirá acceder al area de administración de WordPress sin problemas.

OPCIONAL: Para terminar, tendremos que añadir en  nuestro archivo .htaccess del servidor (en la carpeta raíz de nuestro WordPress) lo siguiente:

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

Con lo que estaremos indicando al mundo entero cuánto tiempo se tienen que quedar almacenados en Cache nuestros recursos: Imagenes, Javascript, CSS etc… y si son públicos o privados. Este tipo de parámetros son tenidos muy en cuenta por Google para mejorar la carga de páginas web. Chequead vuestra puntuación en los servicios que antes os he indicado. Seguro que vuestra puntuación a mejorado.