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. Configura regla de cache en Cloudflare

  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. 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

5. 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: