Saltar al contenido

Cómo configurar CloudFlare CDN y mejorar VELOCIDAD de tu web en un 40%

29 mayo, 2020
En este post te enseñaremos cómo configurar CloudFlare CDN, y con ello, mejorar la velocidad de TU PÁGINA WEB en 40% o MÁS.

En este post te enseñaremos cómo configurar CloudFlare CDN, y con ello, mejorar la velocidad de tu web en 40% O MÁS. ¡ENTRA!

 

INICIAMOS:

Bienvenidos a un nuevo post.

Hoy en día la velocidad de carga de tu web influye mucho entre si el visitante abandona tu sitio o no, y no sólo eso, influye de igual forma en el SEO.

En este guía, te enseñaremos qué es esta compañía, cómo instalar CloudFlare en tu servidor, y además, cómo configurarlo.

Separaremos la guía en diferentes secciones, síguelas paso a paso. ¿Listo? ¡Vamos!

Índice del artículo

Guía PASO a PASO para configurar CloudFlare CDN

¿Qué es CloudFlare?

CloudFlare es una empresa que reside en Estados Unidos, la cuál ofrece servicios de internet orientados a los servidores y a las redes informáticas.

Además, provee servicios de seguridad para servidores, y provee una red de entrega rápida de contenidos.

En términos simples: es una empresa que te ayudará a hacer volar tu web. ?

Cómo instalar CloudFlare

Para poder instalar CloudFlare, es necesario que ya cuentes con tu página web y servidor operando en correcto funcionamiento. Una vez que te asegures de ello, procede con los siguientes pasos:

1.- Accede al registro dentro la página oficial de CloudFlare, y rellena el formulario con tus datos.

2.- Cuando tu cuenta esté creada, deberás acceder a ella, y en el panel de control, te pedirá que añadas un sitio web. Escribe el nombre de tu dominio, incluyendo la extensión.

blank

3.- Ahora, deberás pulsar en «Scan DNS Records». CloudFlare comenzará a procesar tu web en busca de los DNS de tu web. Esto suele tardas un momento, y para hacerte corta la espera, ellos te mostrarán un video intuitivo de explicación (está en inglés).

blank

4.- Una ve el escaneo termine, CloudFlare detectará tu configuración de DNS para tu web. Si ya tienes experiencia con los DNS, sabrás qué hacer, pero si no, marca sólo la opción DNS de tipo «A» que tiene tu nombre de dominio, y la opción de «CNAME» que tiene el valor de «www».

Cuando lo marques, verás que se tornará una nube naranja con una flecha atravesada. Esto indica que el servicio DNS de CloudFlare se activará para esa sección de la web.

blank

5.- Bien, ahora, pulsa sobre «Continue». A continuación, CloudFlare te mostrará una tabla para elegir qué tipo de cuenta deseas tener para esa web que quieres agregar. Por ahora, pincha sobre la opción «Free».

blank

6.- Ahora, deberás actualizar tus Nameservers de tu servidor. Observa que a la izquierda te muestra los que tienes actualmente, y a la derecha por los que tienes que cambiar. Toma nota de ellos.

blank

7.- Bien, para cambiar los Nameservers de tu servidor, deberás de iniciar sesión en tu cuenta de Hosting, y buscar el apartado de «Configuración DNS» (en casi todos los hostings tienen esa opción).

Estando ahí, deberás cambiar los antiguos Nameservers por los de CloudFlare, tal y como se te mostró en el punto anterior.

Si no encuentras la opción en tu proveedor de Hosting, contacta a soporte con ellos pidiéndoles la ubicación.

8.- Cuando los actualices, vuelve a CloudFlare, y a continuación, da clic en «Continue».

9.- CloudFlare te redireccionará al panel de control de esa web, donde te mostrará varios apartados:

  • Status: es el estado en el que se encuentra la web. Si configuraste correctamente los nuevos Nameservers, deberás verlo en «Pending». Si por algún motivo se configuró mal, pasadas 24 hrs no se cambiará el estado de la web, y deberás hacer correcciones.
  • Security Settings: por ahora no le hagas tanto caso, pero es el nivel de seguridad habilitado para esa cuenta. Esto después lo tocaremos.
  • Subscription: el tipo de cuenta que cuenta esa web: Free, Pro, etc.

10.- Pasados unos minutos, si configuraste bien los Nameservers, CloudFlare ahora te dirá que el estado de tu web estará en «Active».

Finalizando instalación de CloudFlare

Sin embargo, deberás dejar pasar 24 hrs como mínimo para que las configuraciones se apliquen bien.

Ya que pasen 24 hrs, ¡continuamos!

11.- Listo, hasta este punto debiste de haber esperado, ¿no?

Bueno, ya debieron de propagarse las configuraciones. Has hecho lo más difícil. Ahora sí: a configurar CloudFlare CDN para nuestra web.

Cómo configurar CloudFlare CDN paso a paso

Te mostraré lo que nos ha funcionado para hacer volar webs al configurar CloudFlare CDN, así que prepárate porque esta es una súper guía. ¡Vamos allá!

Analytics

Este apartado te mostrará las estadísticas de tu web: peticiones cacheadas, ancho de banda ahorrado, visitas únicas a tu web, ataques detenidos, entre otras gráficas técnicas.

Este apartado es sólo informativo para ti.

DNS

A menos que quieras añadir un nuevo sub-dominio, o alguna otra configuración DNS para que pase por CloudFlare CDN, entrarás aquí para configurarlo.

Te recomendamos:  TOP 4 compiladores online que te ayudarán con tu código

Ingresa el nombre del sub-dominio, la dirección IP de la web, y toca sobre la nube para que torne en color anaranjado, y agrégalo.

SSL

Aquí hay varias secciones a configurar. Te recomendamos que el nivel de SSL que tengas esté en «Full», para asegurar una protección completa.

Este apartado no lo tocaremos más debido a que no va con los fines de hacer rápida nuestra web.

Para poder configurar SSL con CloudFlare, tenemos un post que te detalla cómo obtener certificados SSL gratuitos.

Firewall

En este apartado encontrarás diversas configuraciones para proteger tu web de accesos no autorizados. De aquí, te recomendamos configurar lo siguiente:

  • Security Level: High.
  • Challenge Passage: 30 minutes.

Access

Esta opción protege los recursos internos al autenticarse contra proveedores de identidad que ya usas. Es un poco técnico, además, debes pagar para usarla. No la tocaremos nosotros.

Speed

Este es un apartado muy importante para optimizar la velocidad. Como te darás cuenta, dice en inglés «Velocidad».

Si estás usando un plugin WordPress para optimizar archivos JavaScript, CSS y HTML, no te recomiendo activar las casillas de «Auto Minify», ya que puedes corromper tu sitio.

Te recomendamos activar la opción de «Brotli», para activar la compresión HTTPS.

De igual forma, te recomendamos activar la opción de «Rocket Loader», para mejorar la impresión de páginas que incluyen JavaScript.

NOTA IMPORTANTE: Te recuerdo que estas son SÓLO RECOMENDACIONES, que a nosotros nos han funcionado. Antes de seguir avanzando con el post, por favor, verifica que tu web funciona correctamente.

Si es así, entonces seguimos con el post, si no, ve desactivando opciones de Velocidad a ver cuál te dio la falla.

Caching

El Caching es otro apartado fundamental para la velocidad de tu web, y es la que regula con qué frecuencia se hacen copias de tu web en distintos servidores de CloudFlare CDN, además de los navegadores de los usuarios.

Tranquilo, esto es bueno, no se almacena nada interno de tu web como bases de datos, etc.

De esta opción, te recomendamos configurar lo siguiente:

  • Cache Level: Standard.
  • Browser Cache Expiration: 4 hours.
  • Always Online: On.

Workers

Esta opción es para ejecutar JavaScript del lado de CloudFlare, no la tocaremos en este post. Además debes pagar por ello.

Page Rules

Este SÍ QUE ES OTRO APARTADO MUY IMPORTANTE para configurar CloudFlare CDN. Esta opción te permite configurar ciertos ajustes a tus webs para aplicarles algo en especial, y es justo lo que haremos.

Por defecto, tienes derecho a 3 Page Rules. Agrega una Page Rule, y aplica las siguientes configuraciones:

blank

De esta forma, ahorraremos mucho ancho de banda, mejorando también el rendimiento del servidor.

Esto puede traer ciertas desventajas, como:

Al solicitar actualizaciones cada 4 horas, todos los cambios de tu web que hagas, no se harán notar al instante. Si deseas que se hagan notar al instante, deberás hacer lo siguiente:

Accede al panel Cache, y da clic en el botón «Purge Everything» (si hiciste muchos cambios en tu web y deseas refrescar los cambios), y espera un minuto.

O da clic en «Custom Purge» (si sólo quieres ver los cambios de una determinada sección), copia la URL y pégala en el apartado.

Otra cosa importante que debo decirte, es que que al hacer estos cambios, cacheamos toda la web, incluso el wp-admin del sitio WordPress.

Esta sección, al ser de constante uso, queremos contenidos frescos, ya que si la cacheamos, incluso puede que deje de funcionar correctamente. Así que deberemos crear otra Page Rule con las siguientes configuraciones:

blank

Listo, con todo esto, ya tendremos este apartado cubierto.

Network

Aquí aplicamos ciertas configuraciones a nivel de red, de las cuales te recomiendo configurar los siguiente:

  • HTTP/2: On.
  • WebSockets: On.
  • Pseudo IPv4: Add Header.
  • IP Geolocation: On.
  • Maximum Upload Size: 100 MB.

Traffic

De este apartado, te recomiendo que compres el servicio de Argo si tu web ya tiene bastante tráfico, mejora todavía MÁS la velocidad de respuesta de tu web. Nosotros lo hemos probado y estamos satisfechos.

Scrape Shield

De esta opción te recomiendo que configures lo siguiente:

  • Email Address Obfuscation: On.

Todas las demás secciones que no se mencionaron, son cosas que no tocaremos porque no van con configuraciones importantes.

Y listo, ahora esto de configurar CloudFlare CDN ha quedado al 100%.


Antes de concluir el artículo, me gustaría decirte que nos gusta tutoriales de tecnología para toda nuestra audiencia, te invitamos a echarnos un vistazo a ver qué te gusta.

Igualmente tenemos artículos relacionados al mundo de la programación: cursos, tutoriales, ayuda, etc. Seguro hay algo que te puede gustar.

¿Pudiste configurar CloudFlare CDN? ¡Danos tu opinión en los comentarios, por favor!

Nos vemos en otro nuevo post.