CloudFlare CDN Tutorial: Configuración paso a paso para WordPress
CloudFlare CDN Tutorial es más que una guía, te mostraré todo el proceso de forma minuciosa para que no te queden dudas de nada y al mismo tiempo minimizar el riesgo de incidencias que puedan surgir.
Como ya sabes, CloudFlare en un CDN (Red de distribución de contenidos) de proxy inverso. Sirve entre otras cosas como firewall y acelera la carga de los contenidos estáticos de tu sitio web para que se sirvan lo más rápido posible a lo ancho del planeta con sus + de 200 servidores disponibles a nivel mundial.
En este tutorial vamos a conseguir que tus contenidos estáticos se carguen más rápidos desde cualquier punto del globo, reducir el consumo del ancho de banda y la carga de CPU de tu hosting actual.
Si quieres aprovechar la caché completa de CloudFlare, puedes contratar APO (Automatic Platform Optimization) que optimiza de forma muy fina WordPress, para que todas tus contenidos estáticos se sirvan desde la nube de CloudFlare acelerando los tiempos de carga al máximo. Tiene un coste mensual, como todo servicio pago, pero como siempre hay una excepción a la regla... Pues existe una alternativa gratuita de APO.
Después de que termines de configurar CloudFlare y esté funcionando correctamente, échale un vistazo al siguiente tutorial para aprovechar al máximo toda la caché de CloudFlare.
¿Quieres aprovechar la caché completa de CloudFlare gratis?
Si contratas un plan de hosting de Webempresa lo tienes fácil.
¡descuentos increíbles en todos los planes!
¡CloudFlare esta integrado dentro de WePanel!
Y la configuración es súper sencilla.
¡Tu WordPress cargará a la velocidad de la luz!
Crear una cuenta gratuita de CloudFlare
Primero debes acceder a desde aquí CloudFlare y en el menú de la parte superior hacer clic en el botón Me interesa para pasar al formulario de registro.
- 1Aquí debes colocar una dirección de correo electrónico válida.
- 2También debes ingresar una contraseña fuerte.
- 3Por último debes hacer clic en el botón Crear cuenta.
- 1Este paso es importante y es donde debes agregar tu dominio sin las www.
- 2Hacer clic en el botón Agregar sitio.
- 1En los planes disponibles debes elegir Free o Gratis $0.
- 2Hacer clic en el botón Continuar.
En este paso CloudFlare está escaneando tu sitio para importar de forma automática todos los registros DNS que tengas configurados en tu hosting actual, no suele demorar demasiado. ¡Ten paciencia!
Una vez finalizado el escaneo verás una pantalla como la siguiente con todos los registros importados desde tu alojamiento web, aquí debes hacer unos ajustes como se ven en la siguiente imagen.
- 1El registro A debes ponerlo con la nube naranja (redirigido por proxy).
- 2El registro CNAME también debes ponerlo con la nube naranja (redirigido por proxy).
- 3El resto de registros debes ponerlos todos con la nube gris (solo DNS) y hacer clic en el botón Continuar.
Configurar CloudFlare de forma segura nunca fue tan fácil. Mega tutorial 2021...
Cambiar los DNS actuales por los de CloudFlare
Ahora toca el turno de cambiar los DNS (Servidor de Nombres de Dominio) como se muestra en la siguiente captura, CloudFlare te indica que elimines los DNS actuales y coloques es su lugar los suyos.
- 1Aquí se muestran tus DNS actuales.
- 2Este es el DNS 1 de CloudFlare haz clic para copiarlo a tu bloc de notas.
- 3Este es el DNS 2 de CloudFlare haz clic para copiarlo a tu bloc de notas.
- 4Una vez que hayas cambiado los DNS en tu registrador de dominio, debes clic en Listo, verifique los servidores de nombre y recibirás un correo cuando este activo CloudFlare para tu sitio.
Cloudflare es un servicio de proxy inverso, por eso cuando apuntas tu dominio a los DNS de Cloudflare, este último apunta tu dominio a tu hosting actual. Es por eso que no hay tiempos de inactividad (downtime) cuando cambias los servidores de nombres, esto quiere decir que tu web siempre estará online en el proceso de propagación.
En mi caso particular yo tengo el dominio miguelcarrerasdutra.com en el mismo servidor donde tengo la web que es Webempresa hacer el cambio es muy simple, solo tengo que acceder a Dominios >> Mis dominios y reemplazar los DNS actuales por los nuevos que proporciona CloudFlare como se muestra en las siguientes imágenes.
- 1Debes entrar en la sección Nameservers (Nombres de servidores).
- 2Aquí debes quitar tu DNS actual y poner el DNS del servidor 1 que te proporciono CloudFlare.
- 3Aquí es igual al paso anterior con una diferencia debes agregar el DNS del servidor 2.
- 4Una vez hecho el cambio debes hacer clic en el botón Cambiar Nameservers.
Recuerda que los cambios de DNS pueden tardar entre 24h y 48h en propagarse por todo el mundo ten paciencia. En el caso de dominios .es los cambios se procesan por el nic.es a las 02:00 06:00 10:00 14:00 18:00 y 20:00h.
Si estás impaciente hay herramientas que puedes utilizar para ver el estado de propagación de los DNS en todo el globo. Aquí te dejo un par de ellas para que vayas testando.
Cómo cambiar DNS en diferentes registradores de dominio
Puede darse el caso que hayas comprado el dominio de forma separada al contratar tu hosting, entonces deberás ingresar al panel de administración de tu registrador, por ejemplo; Namecheap, GoDaddy, Google Domains, Bluehost, entre otros.
Aquí te dejo unas guías publicadas por Kinsta (hosting de alto rendimiento) muy interesantes que muestran el proceso para cambiar los DNS en los registradores más conocidos.
Y como siempre digo, lo mejor es comprar el dominio junto con el hosting todo en el mismo lugar para que la administración de los mismos sea mucho más fácil. En Webempresa y Kinsta puedes administrar todo lo relacionado con los dominios en un mismo lugar. Échale un vistazo a estos artículos.
¿Cómo cambiar los DNS de otros registradores?
Aprovecha la cuenta gratuita del CDN de CloudFlare para que tu WordPress vuele. Mega tutorial 2021...
Ajustes con el asistente de CloudFlare
Después de haber cambiado los DNS tienes que volver a CloudFlare puedes ir desde aquí, una vez dentro de la plataforma debes seguir el asistente para finalizar la configuración, como te muestro a continuación.
Esta opción debes ponerla en ON para evitar el contenido mixto esto pasa cuando tienes URLs antiguas con http y otras con https. Te recomiendo este mega tutorial: Aprende a instalar un certificado SSL en tu WordPress
Este punto es importante. Si tu sitio tiene un Certificado SSL, como por ejemplo; Let's Encrypt tus URLs, empezarán asi: https://www.tusitio.com y si no lo tiene así: http://www.tusitio.com.
En Webempresa o Kinsta por ejemplo, cuando contratas un plan, todos tienen el Certificado SSL gratuito Let's Encrypt activado y operativo sin que tengas que hacer nada. ¡Está muy bien!
Pero si tienes una web hace algún tiempo sin Certificado SSL puedes instalarlo siguiendo este tutorial: Aprende a instalar un certificado SSL en tu WordPress en un abrir y cerrar de ojos: mega tutorial
Entonces aquí debes decidir si usarás http o https. En resumen, si tu sitio web no tiene Certificado SSL y no lo quieres utilizar, deberías poner en OFF el selector Usar siempre HTTPS.
Pero si ya tienes activo un Certificado SSL entonces sí deberías poner en ON el selector Usar siempre HTTPS. (recomendado).
Otro punto delicado es el minimizado, si bien es cierto que aceleran mucho los tiempos de carga al reducir los CSS, JS y HTML, en escenarios puntuales puede afectar negativamente a tu web rompiendo la misma.
Un caso puntual donde no deberías activar estas 3 opciones es cuando utilizas Thrive Architect y Thrive Suite porque todo su código ya se encuentra minimizado y optimizado, estarías produciendo el efecto inverso rompiendo todas las páginas de tu web.
Como cada web es un mundo y cada una de ellas usan diferentes tipos de plugins que interactúan con la misma, deberías hacer pruebas y ver cómo se comporta tu web con el CSS, JS y HTML activado.
No hay una regla general aquí y mi consejo sería que dejes esto desactivado por ahora. Eso sí, cuando tu web esté funcionando correctamente, puedes hacer pruebas con estos parámetros activados y ver el comportamiento de la misma.
Esta opción debes ponerla en ON porque la compresión Brotli acelera mucho los tiempos de carga y generalmente no suele causar problemas, pero nunca está de más revisar la web minuciosamente para ver que todo funciona de forma correcta.
¡Enhorabuena! Haz terminado de configurar los puntos más críticos, ahora solo debes hacer clic en el botón Finalizar.
CDN de CloudFlare como configurarlo en tu WordPress. Mega tutorial 2021...
Configurando SSL/TLS en CloudFlare
Una vez terminado el asistente anterior debes echar un ojo en la sección SSL/TLS para comprobar la configuración SSL.
- 1Desactivado: No se aplica encriptación (No recomendado).
- 2Flexible: Cifra el tráfico entre el navegador y CloudFlare, si no tienes certificado SSL deberías usar esta opción. (No recomendado).
- 3Completo: Cifra de un extremo a otro con un certificado autofirmado en el servidor, estos certificados no sirven de mucho. (No recomendado).
- 4Completo (estricto): Si tienes un certificado SSL firmado gratuito, como por ejemplo Let's Encrypt en tu servidor actual, es la mejor opción porque la información se encripta de un extremo al otro. (Recomendado).
Ahora debes dirigirte a la pestaña Certificados de perímetro para que el Certificado SSL Universal de CloudFlare se encuentre activado.
Para poder utilizar el Certificado SSL en modo Completo (estricto) (recomendado) junto con el SSL Universal de CF debes tener en tu hosting actual instalado un Certificado SSL como Let's Encrypt o de lo contrario no funcionará y no podrás acceder a la web.
Aquí en Certificados de perímetro debes fijarte que tu configuración coincida con la imagen superior, el Punto 3 es el más importante y debe figurar Activo el Certificado SSL Universal provisto por CloudFlare. Si por algún motivo no estuviese activado, deberás desplazarte hacia el final de la página donde encontrarás un botón azul que dice Activar SSL universal. Haz clic en él y actualiza la página para ver los cambios.
Recuerda: Debes tener en tu hosting actual instalado un Certificado SSL como Let's Encrypt para poder utilizar el SSL Universal de CF.
Seguimos en la pestaña de Certificados de perímetro y debes configurar el resto de las opciones como se muestra en la imagen superior.
Crear reglas de página en CloudFlare
¿Tienes problemas para acceder a la administración de WordPress? No te preocupes porque para no tener problemas con ciertas URLs de la web como las que están relacionadas con el panel de administración de WordPress y para que puedas iniciar sesión sin inconvenientes, habría que excluir la caché de CloudFlare en esas áreas.
Esta regla *tudominio.com/wp-admin/* lo que hace es omitir el caché en las URLs que están relacionadas con la administración de WordPress. Debes configurar la regla con los mismos parámetros que se muestran en la imagen superior. Cuando este terminado clic en el botón Guardar e implementar.
Si utilizas Thrive Architect y Thrive Suite o piensas adquirirlo en algún momento debes saber que esta regla es fundamental a la hora de crear entradas, post, page y landing page *tudominio.com/*tve=true/*. Lo que hace es omitir la caché cuando se está utilizando el editor visual Thrive Architect para evitar cualquier tipo de conflicto.
Debes configurar la regla con los mismos parámetros que se muestran en la imagen superior. Cuando este terminado clic en el botón Guardar e implementar.
Una vez creadas las reglas deberías verlas como se muestra en la imagen superior con el selector en ON, otra cosa que debes saber, es que en el plan gratuito de CloudFlare solo se permiten 3 reglas, si necesitas más debes comprarlas.
¿Quieres tener un CDN gratuito en tu WordPress? Te muestro como configurarlo de forma segura. Mega tutorial 2021...
Configuración del Firewall de CF (opcional)
Esta es una configuración opcional que permite desactivar las medidas de seguridad del firewall y otras optimizaciones de CF para que funcione solo como CDN.
¿Por qué haría esto? A veces puede darse que demasiada seguridad afecte negativamente en la experiencia del usuario que visita la web y que pueda ser bloqueado por una mera sospecha.
Si tienes un hosting de calidad y seguro como Webempresa y Kinsta puedes dormir tranquilo porque la seguridad de sus servidores está por encima de todo.
Pero como dije antes, esto es opcional y tu tienes la última palabra. Si quieres desactivar estas opciones debes mantener la configuración como se muestra en la siguiente imagen.
- 1Firewall: Accede a la configuración de las medidas de seguridad.
- 2Configuración: Debes desplazarte hasta la pestaña que dice Configuración.
- 3Nivel de seguridad: Debes ponerlo en Esencialmente desactivado.
- 4Pasaje de desafío: Configúralo en 1 año.
Otros ajustes (opcionales)
Estos ajustes son opcionales pero nunca está de más tener una protección extra para estar más tranquilos.
- 1Ofuscación de correo electrónico: Si no quieres que los bots recopilen tu e-mail para sus listas de spam deberías poner el selector en ON.
- 2Exclusión del lado del servidor: En todos lados hay gente buena y mala y si quieres una protección extra debes poner el selector en ON.
- 3Protección Hotlink: Si quieres proteger tus imágenes para que no las utilicen en otros sitios copiando las URLs de las mismas y evitar el consumo excesivo de ancho de banda pon el selector en ON.(recomendado)
Cómo vaciar o pausar la caché de CloudFlare
A veces es necesario vaciar la caché de CloudFlare por diferentes motivos, ya sea para detectar un fallo de un plugin, si queremos hacer pruebas y queremos ver los cambios en tiempo real o hicimos un cambio importante en la web.
Hay varias formas de vaciar la caché o pausar la misma en la siguiente captura puedes verlo más claro.
- 1Depurar cache: Que es lo mismo que Purgar caché o Vaciar caché. Esta acción borra toda la caché almacenada en CF. Como es muy agresiva utilízala cuando sea muy necesario porque tu web puede demorar más tiempo en cargar hasta que se re-construya nuevamente la caché.
- 2Modo Desarrollo: Te permite omitir temporalmente la caché de CF útil cuando estás haciendo pruebas en tu web y quieres ver todos los cambios de forma instantánea.
- 3Mode Under Attack: Este modo debes utilizarlo si tu sitio web está siendo atacado.
Cómo vaciar la caché de páginas y entradas de forma individual
Cuando hacemos algún cambio en una página de nuestra web sería muy drástico borrar toda la caché de CF por una simple modificación porque ya sabes que regenerar todo la caché de vuelta puede llevar un tiempo y tu web puede verse afectada en ese lapso en la carga de sus contenidos.
Para esto hay una solución y es la posibilidad de borrar páginas de forma individual como se puede apreciar en la siguiente captura.
- 1Caching: En el panel de administración de CF debes hacer clic en el icono Caching.
- 2Configuración: Luego hacer clic en la pestaña Configuración para acceder a otras opciones.
- 3Purga personalizada: Si haces clic aquí se abrirá un área de texto donde puedes poner las URLs que quieres vaciar de la caché de CF de a una o varias a la vez.
- 4Purgar todo: Aquí ya sabes esta opción borra la caché completa de CF.
Aprovechar la caché completa de CloudFlare
¡Enhorabuena! Ahora que ya tienes el CDN de CloudFlare en su versión gratuita totalmente configurado y funcionando correctamente. Seguro te habrás dado cuenta que no tienes la máxima velocidad de caché, pero no te preocupes porque en el próximo mega tutorial, te contaré como podrás llevar tu WordPress a la velocidad de la luz usando la caché completa de CloudFlare.
¿Quieres aprovechar la caché completa de CloudFlare gratis?
¿Te ha sido útil este artículo?
¿Te gustaría ayudar a otras personas? Entonces lo tienes fácil, compártelo en la redes sociales.
¿Necesitas más ayuda? Visita el foro hay una comunidad siempre lista para ayudar.
