WordPress CDN

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

Ya sea por mejorar la carga de nuestra web, o para conseguir atender a mas clientes a la vez, las redes de distribución de contenido (CDN) son una buena solución. Una CDN se encarga de ayudar a tu servidor principal a entregar el contenido de tu web a los clientes.

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

  1. El HTML de la web se cargara desde tu hosting habitual.  ejemplo: www.midominio123.com
  2. Las imágenes de la web se descargan de un segundo servidor. ejemplo: cdn.midominio123.com

De esta forma estaríamos utilizando 2 servidores para descargar una sola web, lo que resulta en una carga mas ágil y que permite elevar la capacidad de la web.

En esta guía vamos a mostrar como activar este tipo de servicio para una web con WordPress en los servicios de hosting de www.guebs.com.

Define tus dominios

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

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

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

1. Añade un dominio apuntado

Accede al Panel de Hosting de tu web en www.guebs.com y busca el icono "Dominios apuntados":

Añade el dominio "cdn.midominio123.com" como apuntado.

2. Activa Cloudflare en el dominio cdn

Busca la linea que contenga el dominio secundario "cdn.midominio123.com" y haz click en activar cloudflare.

El proceso de activación y emisión de certificado SSL de cloudflare puede tardar hasta 24horas, aunque por lo general se completa mucho antes.

3. Forzar a que CloudFlare cachee videos, etc.

Por defecto, CloudFlare cachea la mayoría de tipos de archivo habituales en una web, pero es cierto que hay algunos archivos que no cachea. Por ejemplo, a fecha actual ( Mayo del 2020 ) no cachea archivos de video ( MP4, OGG, AVI, etc. ) y esto es algo que nos podría interesar.

Por suerte, podemos hacer que CloudFlare lo cachee todo creando un par de reglas desde interfaz de gestión de CloudFlare. Por tanto, si en tu web alojas videos te recomendamos seguir los siguientes pasos para forzar a que CloudFlare los cachee:

  1. Accedemos a la gestión de CloudFlare con los datos que aparece en el recuadro amarillo "Gestión de CloudFlare"
  2. Dentro de nuestro dominio en cloudflare, buscamos en los iconos superiores "Page Rules".
  3. Añadimos una nueva regla que contenga la siguiente información.
    • url match: *cdn.midominio123.com/wp-content/*
    • Cache Level: Cache Everything
    • Browser Cache TTL: a day
    • Edge Cache TTL: 12 hours

En este momento todas las peticiones que empiecen por cdn.midominio123.com/wp-content/ se cachearan en la red cloudflare, por lo que se puede utilizar esa url para las imágenes, css, javascript, etc, de tu web.

4. Ajustar el .htaccess de la web

Para que las imagenes, CSS, 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>

5. Activa CDN en WordPress Fastest Cache

Para hacer que worpdress cambie la dirección url de los contenidos de la web utilizaremos el plugin WP Fastest cache. Disponemos de una guía, que define como hacer la configuracion inicial de WP Fastest cache.

  1. Accedemos al plugin WP Fastest cache y hacemos click en la pestaña CDN.
  2. Introducimos la url del CDN, y la url original del dominio como se ve en la imagen.
  3. Seleccionamos que todos estos ficheros pasen por el CDN y damos a continuar
  4. Completamos el proceso de configuracion de CDN

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:

<link rel='stylesheet' id='dashicons-css'  href='//cdn.midominio123.com/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='//cdn.midominio123.com/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-style-css'  href='//cdn.midominio123.com/wp-content/themes/twentyseventeen/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='wp-fastest-cache-toolbar-css'  href='//cdn.midominio123.com/wp-content/plugins/wp-fastest-cache/css/toolbar.css?ver=1528807144' type='text/css' media='all' />
<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>
<link rel='https://api.w.org/' href='https://www.midominio123.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.midominio123.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.midominio123.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.9.6" />
<link rel="canonical" href="https://www.midominio123.com/" />
<link rel='shortlink' href='https://www.midominio123.com/' />

Etiquetas: