Como activar el CDN en WordPress

24 de octubre, 2018 @ 11:51 — 0 comentariosDescargar PDF

Una CDN se encarga de ayudar a tu servidor principal a entregar el contenido de tu web a los clientes, ya sea para mejorar la carga de nuestra web, o para conseguir atender a más usuarios a la vez, en esta guía se explica como activar la CDN en WordPress.

Para que entendáis como funciona una CDN, la configuraron más simple seria la siguiente:

  1. El HTML de la web se descarga desde tu hosting habitual, por ejemplo: www.midominio123.com
  2. Las imágenes y otros recursos estáticos de la web se descargan desde el servicio CDN, por ejemplo: cdn.midominio123.com

De esta forma estaríamos utilizando 2 servicios diferentes ( tu hosting habitual y el servicio CDN ) para descargar una sola web, lo que resulta en una carga más ágil y que permite elevar la capacidad de la web.

En esta guía vamos a mostrar como activar el CDN de CloudFlare para una web creada con WordPress y alojada en guebs.

Define tus dominios

Primero tenemos que definir cuáles son nuestros dominios, principal y secundario, en este ejemplo asumiremos lo siguiente:

  • El dominio principal de nuestra web: www.midominio123.com
  • El dominio secundario para la CDN sera: cdn.midominio123.com

Teniendo claro cuáles van a ser estos dominios en tu caso, puedes seguir con la guía.

IMPORTANTE: El procedimiento explicado en esta guía solo es compatible cuando el dominio principal de nuestra web también es el dominio principal de tu plan de hosting. También es necesario que tu dominio use los servidores DNS de guebs.

1 - Añade el dominio secundario como apuntado

Lo primero que tendremos que hacer es entrar al Panel de Hosting y hacer click en Dominios Apuntados

Una vez en Dominios Apuntados, añadimos el dominio secundario.

2 - Ajusta el .htaccess de la web

Antes de activar el CDN, las imágenes, CSS, para que las fuentes y demás recursos estáticos se visualicen correctamente en la web, es necesario añadir lo siguiente al principio del archivo .htaccess de la web:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Además, para evitar que Google indexe la dirección del CDN ( cdn.midominio123.com ), conviene añadir lo siguiente al principio del mismo archivo .htaccess :

RewriteEngine On
RewriteCond %{HTTP_HOST} ^cdn\.
RewriteCond %{REQUEST_URI} !wp-content
RewriteCond %{REQUEST_URI} !wp-includes
RewriteRule (.*) https://midominio123.com%{REQUEST_URI} [R=301,L]

Nota: Es importe que reemplaces https://midominio123.com por la dirección o URL interna de tu WordPress.

3 - Activa Cloudflare en el dominio CDN

Accede al apartado CloudFlare CDN del Panel de Hosting. Busca la línea que contenga el dominio secundario "cdn.midominio123.com" y haz click en Activar cloudflare.

Si todo va bien, el valor de la columna Cloudflare para tu dominio secundario pasará a ser Activado. En ese caso, haz click en el enlace "Apuntar a CloudFlare.

No debes Apuntar a CloudFlare el dominio principal de tu web.

4 - Espera a que CloudFlare emita el certificado SSL

Una vez activado CloudFlare y apuntado el dominio secundario a CloudFlare, antes de continuar con el resto de pasos de la guía, debes esperar a que el valor de la columna SSL en CloudFlare sea Activo, tal y como se ve en la imagen:

5 - Haz que WordPress sirva los recursos estáticos vía CDN

Para hacer que WordPress sirva los recursos estáticos de tu web usando el dominio del CDN tendremos que usar algún plugin de caché o un plugin como Autoptimize.

Sigue las indicaciones de nuestra guía Configurar WordPress para que sirva los recursos estáticos usando otro dominio para saber como hacerlo usando alguno de los plugins más populares: WP Super Cache, WP Fastest Cache y Autoptimize.

Si en tu web no usas ningún plugin de cache, te recomendamos usar WP Super Cache configurado de la siguiente manera. En cambio, si ya usas otro plugin de cache diferente, el procedimiento para forzar a WordPress sirva los recursos estáticos usando otro dominio suele ser muy similar, por lo que leer la mencionada guía te puede orientar.

6 - Navegando con CDN

Ya esta todo funcionando. Si abrimos el navegador y vamos a www.midominio123.com y veremos como el en codigo html de la web los ficheros de media están utilizando el nuevo dominio cdn.midominio123.com:

<script type='text/javascript' src='//cdn.midominio123.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='//cdn.midominio123.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

Etiquetas: