¿Qué es Cloudflare? Tutorial para acelerar la velocidad de tu blog

Cómo acelerar tu blog con cloudflare

En este post te cuento como he conseguí rebajar el tiempo de carga de mi blog de manera drástica con Cloudflare ¿quieres saber cómo lo he hecho y cuáles han sido los resultados?

Pero además, se trata de una completo tutorial de Cloudflare en español con el que sabrás qué es Cloudflare y con el que paso a paso aprenderas a configurarlo y utilizarlo.

Andaba un tiempo detrás de conectar mi blog a Cloudflare para conseguir «aligerar» los tiempos de carga y la verdad es que el resultado entre el antes y el después ha sido muy bueno.

Ahora bien, antes de proseguir debes también tener en cuenta que:

  • Cloudflare no es por si mismo la solución a una web lenta
  • Es necesario llevar a cabo otras acciones como norma general
  • Debes saber bien qué es lo que estás haciendo para evitar problemas graves
  • Debes medir y analizar

En mi caso el uso de esta herramienta no es la única acción que llevo a cabo para cargar más rápido mi blog, sino que previamente optimizo imágenes con el uso de herramientas como TinyPNG, uso el plugin Wordfence para la cache y así servir más rápido las imágenes entre otras acciones.

Estas acciones las considero básicas y las puedes repasar en este post que escribía con 17 ajustes básicos para WordPress.

Qué es Cloudflare

La principal característica, y por la que me decidí a su uso para acelerar este blog, es la de ser un CDN.

Un CDN, simplificando mucho su definición, es:

Una red de servidores distribuidos por el mundo que alojan copias de tu blog y que la suministrarán a aquellas peticiones más cercanas desde uno de estos servidores.

Esa distribución geográfica de sus servidores es algo que incide directamente en reducir el tiempo que alguien al otro lado del océano tarda en cargar tu página si lo hace desde un servidor más cercano en su propio continente.

Los tiempos de suministro desde cualquier servidor en el mundo son prácticamente imperceptibles en microsegundos, ahora bien, un blog o una web requiere de muchas peticiones y envíos de datos para cargarse por completo, a mayor número de peticiones más tiempo es necesario en la suma del total de esas peticiones.

Por tanto, la diferencia entre un servidor cercano o lejano sí importa cuando al final sumamos muchas peticiones y envíos.

Cloudflare tiene 102 centros de datos repartidos por todo el mundo permitiendo ahorrar un 65% de solicitudes y un 60% de ancho de banda a tu propio servidor que tengas contratado con tu hosting.

El uso de este CDN además tiene otras fantásticas ventajas entre las que se encuentran:

  • Genera copias de tu contenido estático que sirve evitando el uso de tu servidor
  • Te mantiene seguro evitando spam y ataques DDOS así como bloqueo por IP entre otras funciones
  • Evita que alguien en su web utilice tus imágenes alojadas en tu servidor (hotlink)
  • Mantiene tu blog siempre online aunque el servidor de tu hosting se haya caído puesto que copia por entero tu web para mostrarla en esos casos
  • Informe de analíticas

Y lo mejor de todo es que lo indicado está disponible en su plan básico de forma gratuita.

Empieza por medir

Antes de empezar a usar esta herramienta te recomiendo medir los tiempos de carga de tu web para tener datos reales y poder analizar los resultados comparándolos con los que teníamos previamente.

Por supuesto una vez puesto en marcha, y sin ninguna otra optimización extra, es necesario volver a medir los tiempos para analizar la fiabilidad evitando cualquier posible distorsión.

Para medir los tiempos de carga de tu web o blog puedes usar cualquiera de los métodos que José Facchin indica en este estupendo post para hacer un test de velocidad de carga a tu web.

En mi caso he usado el test de velocidad de Pingdom que te permite conocer los tiempos de carga desde servidores relativamente cercanos y además proporciona información acerca del número de peticiones.

También te muestra cómo y cuánto tiempo tardan en ejecutarse cada una de esas peticiones. Se trata de una información muy útil para por ejemplo saber si la carga de un plugin está ralentizando más de la cuenta la carga general de tu blog.

Analiza con Pingdom los tiempos de carga de los elementos de tu blog o web

Usar Pingdom es tan fácil como introducir la URL de tu blog y seleccionar entre las diferentes opciones de servidores disponibles desde dónde queremos que mida la velocidad.

Estos eran mis resultados antes de conectar Cloudflare:

Captura de ramgon.es en pingdom antes de usar cloudflare

Como puedes apreciar el tiempo de carga alcanzaba los 4 segundos (lo recomendable es no superar los 3 segundos) y las peticiones eran 200, aún así mi blog sin implementar Cloudflare ya era más rápido que el 40% de todos los testeados.

Tutorial de Cloudflare: cómo conectar tu blog o web paso a paso

Paso 1- Agrega tu sitio web o blog

Lo primero de todo es registrarte en su web, no te llevará nada de tiempo y es bastante sencillo.

Una vez hecho el registro y el login, introduce el dominio de tu web y se iniciara un escaneo de las DNS actuales de tu dominio

Espera a que acabe y se te muestre un botón para continuar en el que deberás hacer clic.

Registra tu dominio en Cloudflare

Paso 2 –  Verifica los registros DNS

En la siguiente página se te mostrará una tabla con todas las DNS que se han encontrado para tu dominio y que en ese momento están siendo utilizadas.

En teoría deben estar todas y no tienes por qué añadir nada a las mostradas así que abajo vuelves a hacer clic a continuar aceptando las DNS.

Paso 3 – Selecciona tu plan gratuito

En la siguiente pantalla se te muestran los diferentes planes de CDN que puedes contratar, marca la opción «Free Website» y haz clic en «continue».

Selecciona el plan gratuito

A continuación te llevará a un cuarto paso del proceso, la página clave puesto que contiene los «nameservers»  de Cloudflare que deberemos utilizar para sustituir los que estemos usando con nuestro dominio.

Paso 4 – Cambia los «nameservers» de tu dominio

Como decía es un paso clave, sin el que no es posible utilizar Cloudflare, pues sólo así estaremos redirigiendo el tráfico por este CDN.

En este paso lo que haremos será tomar los «nameservers» que nos indica Cloudflare e introducirlos en nuestro hosting, para que así nuestro hosting dirija correctamente todos los datos de nuestro sitio por los servidores personalizados que nos ofrece esta herramienta.

El método para cambiar los «nameservers» puede variar dependiendo del servicio de dominio o empresa de hosting que tengas contratado. Te voy a mostrar como lo hago en mi propio hosting que tengo contratado dónde también tengo mi dominio.

Mi hosting es Host Fusión, 100% español, especializado en WordPress, te recomiendo contratarlo si estás buscando un hosting, no sólo por lo competitivos que son los precios de sus planes incluyendo el dominio de forma gratuita, sino por el trato y servicio de soporte, he metido la pata alguna vez y han sido muy rápidos y atentos en solucionarme el problema, eso lo valoro mucho.

Una vez dentro de tu proveedor de Hosting:

  1. Ir al apartado dominios y hacer clic sobre el dominio.
  2. Dirigirse a la pestaña/sección «nameservers».
  3. Marcar la opción «Usar namerservers personalizados».
  4. Pegar los «nameservers» que nos proporciona Cloudflare (los tuyos no tienen por qué ser iguales a los míos).
  5. Cambiar «nameservers»

cambiar namervers en host fusion

Una vez hechos todos los pasos vuelve a Cloudflare y haz clic en el botón de la última página mostrada confirmando que ya has cambiado los «nameservers».

En la siguiente página te darán la enhorabuena indicándote que el proceso se ha completado, eso sí, no seas impaciente, para que tenga efecto el cambio puede tardar hasta 24 horas en estar operativo.

Tutorial de Cloudflare: configuración

Son muchas las opciones de personalización, voy a indicarte las que yo he implementado a lo largo de este tutorial de Cloudflare en que te voy mostrar como configurar cada una de las funcionalidades que nos ofrece.

Overview

En la parte superior se mostrará una barra de un tono azulado que modo de menú muestra cada una de las páginas o secciones de configuración de la plataforma, por defecto se te mostrará «overview» que es una forma rápida de ver un resumen de la información más destacada de la configuración elegida para tu dominio.

Junto al nombre de tu dominio apreciarás una barra en color verde, eso significa que tu dominio está perfectamente operativo y bien configurado sin problemas.

Además, justo debajo se muestra «Status active» y a la derecha la posibilidad de accesos rápidos «Quick Actions» a dos configuraciones:

  • «Under Attack Mode»: muy útil marcar esta opción si nuestra web está sufriendo un ataque DDOS, de este modo se mostrará un mensaje de advertencia a nuestros usuarios.
  • «Development Mode»: esta opción nos permitirá deshabilitar el cacheo de nuestra web o blog para aquellas situaciones en las que estemos haciendo cambios de cualquier tipo y necesitemos verlos en tiempo real.

En el siguiente bloque se muestra un resumen de las configuraciones de tu dominio que afectan a:

  • Seguridad
  • Cacheo
  • «Zone Id»

Haciendo clic en cualquiera de ellas accederás a la sección apropiada para cambiar su configuración.

Analytics

En esta sección podrás tener acceso a todos los datos de analíticas que te proporciona Cloudflare, pudiendo elegir por analizar diferentes períodos de tiempo hasta un máximo de un mes atrás.

En un primer bloque de analíticas podrás ver:

  • «Requests»: se muestran todas las peticiones diferenciando por cacheadas y no cacheadas.
  • «Bandwith»: ancho de banda total consumido, de nuevo se diferencia entre el proveniente de peticiones que utilizan la cache y aquellas otras que no.
  • «Unique Visitors»: total de visitantes únicos recibidos, así como los picos de máximos visitantes y mínimos en el período de tiempo definido.
  • «Threats»: número total de ataques y procedencias de los mismos.
  • «Rate Limiting»: muestra las limitaciones a peticiones, en caso de que hayas configurado algún tipo de limites.

Analíticas de Cloudflare

En un segundo bloque llamado «Performance» se nos da alguna información mediante gráficas sobre el comportamiento del uso de servidores, ancho de banda ahorrado y el tipo de formatos de contenido servido.

En «Security» podemos ver datos acerca del total de ataques detenidos, el tráfico servido desde SSL o el tipo de ataques que se han parado.

Por último en el bloque «Geography» podemos visualizar de donde viene el tráfico y las fuentes de los ataques.

DNS

Como previamente ya hemos ajustado correctamente las DNS en teoría la configuración que se nos muestre deberá ser la correcta.

DNS

Ten en cuenta que aquellas DNS que se muestren con el logo de una nube naranja atravesada por una flecha son las que se servirá desde este CDN.

Crypto

En esta sección podremos ajustar el nivel de cifrado.

En mi caso tengo seleccionado el nivel «Flexible» y activo el certificado SSL compartido que te proporciona Cloudflare de forma gratuita.

Crypto

También tengo activas las opciones «Opportunistic Encryption» y «TLS 1.3».

Firewall

Aquí puedes fijar la configuración del cortafuegos que te proporciona frente a ataques.

En mi caso el nivel elegido es «high» (alto).

Firewall

También podemos indicar el tiempo que un usuario tiene acceso a nuestra web, mostrándole una indicación de confirmación de seguridad para evitar visitas maliciosas.

Y por último, también existe la posibilidad de aplicar reglas de bloque por IP o país entre otras opciones.

En mi caso no he tenido aún que hacer uso de estas opciones pero si ves tráfico sospechoso es bueno hacer uso de esta utilidad.

Speed

Podrás configurar algunos parámetros que afectaran de forma directa a la velocidad de carga.

En el bloque «Auto Minify» puedes reducir el tamaño del código de tu CMS.

Te recomiendo tener marcado minificar en los tres tipos de código:

  • Javascript
  • CSS
  • HTML

Sección Speed en Cloudflare

El resto de opciones son todas para planes de pago, salvo en el caso de «Rocket Loader» que incrementa la velocidad de carga de una página.

En mi caso tengo marcada esta opción en «Automatic»

Caching

Esta es una de las secciones de configuración más interesantes con algunas de las funciones más útiles.

Son estas cuatro funciones las que tienes que tener en cuenta:

  • «Caching Level»: establece el nivel de cacheo para tu sitio, por defecto mantenlo activado en «standard».
  • «Browser Cache Expiration»: podrás fijar el tiempo que permanecen los contenidos en cache para tus visitantes, de ese modo reducirás los tiempos de carga y el tráfico. Yo lo tengo fijado en 5 días, pero si en tu caso tiendes a hacer modificaciones cada día te recomiendo que lo ajustes a un valor de unas horas.
  • «Always Online»: los servidores siempre se caen en algún momento, la activación de esta función permite que se muestre una copia de tus páginas a tus visitantes mientras esta caído tu blog o web.
  • «Development Mode»: tal y como te comentaba antes, si están realizando cambios necesitarás activar este modo mantenimiento para verlos en tiempo real.

Caching

Page Rules

Con las reglas de página podrás aplicar configuraciones específicas a aquellas páginas que desees.

Algunos ejemplos de reglas que puede aplicar:

  • Nivel de Cache
  • Ofuscación de email
  • Siempre Online

Para esta interesante función en el plan gratuito sólo dispondremos de la opción de aplicar estas reglas a tres páginas.

Network

En esta sección podrás configurar algunos parámetros de conexiones con la red de tu blog.

Tengo activadas las siguientes opciones:

  • «IPv6 Compatibility»
  • «WebSockets»

  • «IP Geolocation»

Traffic

Podrás controlar y manejar tu tráfico así como revisar los eventos detectados por el cortafuegos.

En esta sección no es necesaria configuración.

Customize

Se trata de una sección orientada a planes de pago en la que por ejemplo se puede personalizar los mensajes que se muestran a los visitantes.

Apps

Dentro de esta sección tendrás opción de vincular tu cuenta con otros servicios.

Scrape Shield

Por último, esta sección también resulta interesante por la protección que nos ofrece para evitar el robo de nuestro contenido mediante técnicas de «scrapping».

Scrape Shield

Las tres opciones disponibles te las recomiendo tenerlas siempre activadas:

  • «Email Address Obfuscation»: evitas que tu dirección de email sea leído y tomado por cualquier bot para ser incluido en cualquier base de datos con el fin de recibir spam.
  • «Server-side Excludes»: oculta determinados contenidos a visitantes sospechosos.

  • «Hotlink Protection»: esta protección evita que imágenes alojadas en tu blog se muestren sin tu consentimiento en otros sitios desde tu propio servidor. De este modo evitas el uso del ancho de banda de tu servidor de estas malas prácticas causadas principalmente en el plagio de contenidos.

Una última apreciación más de configuración, una vez ya estés trayendo tráfico a tu web a través de Cloudflare debes tener en cuenta que todas las visitas te llegarán desde IP´s del propio servicio, no las reales, por tanto perderías toda la analítica.

Para evitarlo es tan sencillo como configurar y usar, o bien el plugin wordPress de Cloudflare, o bien el propio apartado que otro plugin como W3 Total Cache incluye.

Ambas opciones permiten resolver  no sólo el problema de las IP sino además incluyen la posibilidad de visualizar y gestionar las opciones de este CDN sin salir de nuestro panel de administración de WordPress.

Los resultados tras optimizar mi blog con Cloudflare

Y tras todo el tutorial de Cloudflare llega la hora de la verdad, la de comprobar cómo ha afectado su uso a la velocidad de carga de mi blog.

Para ello vuelvo a usar Pingdom y estos son los resultados obtenidos:

Tiempos de carga de ramgon.es usando cloudflare

Como puedes apreciar la diferencia es significativa, el tiempo de carga se ha reducido a más de la mitad, bajando incluso de los 2 segundos, pero además hay una reducción importante en las peticiones.

Con estos datos y según los registros de Pingdom mi blog es más rápida que el 73%.

Conclusiones

En definitiva, se trata de una excelente herramienta tal y como has podido comprobar principalmente por tres razones:

  • Es gratis
  • Facilidad de uso
  • La enorme cantidad de beneficios que aporta

Sin duda es una forma muy directa de obtener una mejora sustancial en la rápidez de carga de tu blog.

Pero ten también en cuenta otros factores como los servidores del hosting que tengas contratado, el theme o los propios tipos de contenidos que tengas alojados entre otros.

Junto a otras acciones, Cloudflare te puede hacer reducir tu tasa de rebote y e incluso afectar a un mejor posicionamiento por parte de Google.

¿Y tú estás utilizando ya esta herramienta? 

Si no lo estás usando aún, ahora que sabes qué es Cloudflare ¿te he convencido?

16 comments

  1. Buenisimo el post, Ramgon.
    Mi pregunta sería: ¿Esta configuración causa algún efecto en la publicidad mediante Adsense que tengo en mi blog?
    Espero tu pronta respuesta y ayuda.

    Un abrazo.

  2. viajeradicta dice:

    Hola RaMGoN! Muchísimas gracias por tu publicación, me sirvió muchísimo.

    Tengo una pregunta y espero que me puedas ayudar. ¿Sabes cómo evitar que lleguen las IP’s del propio servicio? Yo tengo el plugin de Cloudflare.

    Gracias!!

  3. Rodolfo dice:

    Hola RamGon, buenísimo tu post, una consulta, yo tengo contratado el hosting en Hostgator con el plan más económico llamado Hatchling, al ser limitado en algunas características, no sé si afecta a trabajarlo con Cloudflare, además tengo el theme llamado Schema que no se si es compatible. Al final respecto a los factores a tener en cuenta, dices a los propios tipos de contenidos que tengas alojados entre otros, no entiendo esa parte, que quieres decir?, un saludo!

    • RaMGoN dice:

      Hola Rodolfo, sí, me refiero a que si por ejemplo tienes alojadas muchas fotos de gran tamaño y no las has optimizado, o tienes vídeos integrados en un servidor externo que va lento, etc. En todos esos caso ya partes de una situación más complicada, a lo que voy, que un CDN no es la solución única para acelerar una web sino que es un complemento a toda una optimización a nivel WPO previa.

      • Rodolfo dice:

        Ah ok, yo en mi caso tengo todo ya optimizado, le hice la minificación entre otros ajustes, mi web tiene una puntuación en PageSpeed Insights de 83 Escritorio y 78 Móvil, pero necesito saber si se puede mejorar más la velocidad con Cloudflare?, a pesar de que todavía me muestra algunas faltas que no dependen de mi, sino de la publicidad y sitios web externos. Un saludo y gracias por tu respuesta!

  4. Juan Luis dice:

    Hola Ramgon. Leí en otro artículo que es aconsejable usar Cloudflare para protección en contra de ataques, y, además, añadir un CDN puro. Tengo la versión gratis de Cloudflare. ¿Me aconsejarías, además, instalar un CDN puro, como KeyCDN? Gracias

  5. jorge dice:

    Oye amigo recientemente puse mi pagina en cloud flare, pero no he visto cambios en mi contador de visitas y visualizaciones del plugin «Count Per Day».

    Si veo la analítica de cloudflare y me dice que estoy recibiendo más de 100 visitas diarias pero no lo veo reflejado en mi plugin en el backoffice de wordpress «Count Per Day»

    Eso es así y nunca las veré reflejadas en mi wordpress o que es lo que tengo que hacer.

    Además he notado en pagespeed que la velocidad de carga de mi pagina ha bajado considerablemente.

    Tengo cuatro días de haber adscrito mi web en cloudflare y 1 día de que se ha activado. Esperaría que en el transcurso de los días mejore.

    • RaMGoN dice:

      Hola Jorge, en principio no tiene nada que ver Cloudflare con el número de visitas que te muestra ese plugin.

      No conozco ese plugin ni lo que hace, por lo que no te puedo contar sobre él, pero creo que se puede más bien tratar de un fallo del plugin que otra cosa. Por ponerte un ejemplo, a mi Jetpack me da estadísticas y todo mi tráfico pasa por Cloudflare, por lo general suelen coincidir con las de Google Analytics.

      Si has notado ya una bajada en el tiempo de carga objetivo conseguido, ¡enhorabuena!

  6. Henry Matos dice:

    Brother disculpa, al cambiar los Nameservers, no es como si estuviese cambiando mi hosting?, es decir debo cambiar de hosting o solo es complementario con el hosting. me quedo esa duda en Godaddy si cambio eso, es como si estuviese cambiando de hosting, gracias

    • RaMGoN dice:

      Hola Henry, para nada debes cambiar de hosting, sólo tendrás que modificar los nameservers en tu hosting. Es un proceso este que puede variar dependiendo de cada hosting por lo que te recomiendo que lo consultes con ellos antes de ponerte a cambiar nada si tienes dudas de cómo hacerlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio esta protegido por reCAPTCHA y laPolítica de privacidady losTérminos del servicio de Googlese aplican.