Cómo instalar un CDN en su sitio web de WordPress

¿Su sitio web ha parecido lento últimamente? ¿Las imágenes o las fuentes tardan mucho en cargarse? Es posible que deba optimizar su sitio web utilizando un CDN. Cada vez más sitios web se están volviendo más rápidos que nunca con el uso de una herramienta tan simple pero valiosa. Algunos sitios web tendrán automáticamente una opción para un CDN a través de su servidor web. Por ejemplo, la mayoría de las soluciones de hosting dedicadas o de nivel empresarial vienen estándar con uno. Dicho esto, no todas las empresas ofrecen uno.

Los usuarios de WordPress son los candidatos perfectos para las CDN, ya que generalmente existe un entorno de tipo blog. Por lo general, donde hay un blog hay imágenes, fuentes, hojas de estilo CSS y Javascripts incrustados para mantener su función y forma. Un CDN permite servir este contenido a velocidades notables.

Si bien algunos sitios web ofrecen automáticamente una CDN a través de su servidor web, como la mayoría de las soluciones de alojamiento dedicadas o de nivel empresarial , no todas las empresas ofrecen esta opción. Por lo tanto, lo guiaremos a través de cómo instalar un CDN en su sitio web de WordPress. También presentaremos nuevos consejos para tener en cuenta, así como las múltiples opciones que puede tomar para mejorar el corazón de su sitio web.

¿Qué es un CDN?

Un CDN es una forma increíblemente simple de potenciar su sitio web de WordPress. CDN significa C ontent D elivery R etwork. Una red de entrega de contenido es una configuración de servidor dedicada que permite una entrega más rápida y eficiente de sus medios. No hace falta decir por qué un CDN es una gran solución para optimizar su sitio web a nivel global.

Cuando usa un CDN, su contenido se almacena en caché y se almacena en servidores de todo el mundo en lugar de en una sola ubicación como el típico servidor web. El contenido al que me refiero es principalmente imágenes, hojas de estilo, scripts, flash, etc. archivos que se vinculan o incrustan en su sitio web.

El lugar donde reside un usuario tiene un impacto en el tiempo de carga de su sitio web. Al usar una CDN e implementar estos archivos almacenados en caché en servidores de todo el mundo, ha tomado el mejor enfoque para entregar su contenido a sus usuarios de la manera más eficiente que está disponible actualmente.

¿Por qué necesita un CDN para su sitio web de WordPress?

Ya describí lo que puede hacer una CDN y por qué es útil, pero también me gustaría enumerar las cosas que obtiene al usar una.

Velocidad : una vez que su CDN esté en su lugar, notará una mayor velocidad en todo el sitio.
Menos bloqueos : si su sitio es grande con muchos visitantes, hay menos posibilidades de que su servidor se sobrecargue y se bloquee. El almacenamiento en caché que proporciona una CDN ahorra muchos dolores de cabeza.
Audiencia feliz : un sitio más rápido generalmente indica un sitio web más fácil de navegar para sus usuarios. Si descubre que permanecen en las páginas durante períodos más largos, puede agradecer a su CDN por la ayuda adicional.
SEO mejorado : los sitios web con tiempos de respuesta más rápidos tienden a terminar más arriba en los resultados de búsqueda de Google.

¿Cuáles son mis opciones?

Hay muchos proveedores de CDN y muchos funcionarán muy bien con WordPress. Sugiero encontrar un proveedor de CDN que admita Push & Pull Zones.

Una zona de extracción es cuando su CDN refleja su servidor, copiando todo el contenido estático y sirviendo su copia. Se extrae de su servidor.

Una Push Zone es cuando carga sus archivos directamente a su proveedor de CDN. Entonces, esencialmente los empuja desde el CDN que ahora sirve los archivos.

La opción más barata es una zona de extracción. Es una configuración simple que toma minutos para crear dependiendo de su sitio. Implementarlo dentro de su sitio puede llevar un poco más de tiempo.

Empezando

Para configurar nuestro propio CDN, usaré Amazon Web Services , ¡un servicio popular proporcionado por Amazon! Hay muchos proveedores entre los que puede elegir. Algunos nombres más importantes son MaxCDN o Cloudflare . Siéntase libre de usar cualquier servicio que desee. Amazon ofrece un plan gratuito por un año para sus usuarios hasta cierto límite. Puede ajustar su plan en consecuencia.

A los efectos de este tutorial, utilizaremos un plan gratuito y lo configuraremos como cualquier otro plan prorrateado. La diferencia obvia entre los planes prorrateados son los precios, los servicios y las características.

Comenzamos nuestro viaje en la página de inicio de Amazon AWS: aws.amazon.com

Debería ser recibido con el diseño vibrante a continuación:

Inicio de los servicios de AWS. http://aws.amazon.com

Si es nuevo en AWS , deberá registrarse para obtener una nueva cuenta. Amazon requiere una tarjeta de crédito para futuras compras que pueda realizar mientras utiliza sus servicios. No se preocupe, no se le cobrará a su tarjeta durante al menos un año su plan escalonado gratuito.

Facturación de Amazon

AWS también ofrece planes de soporte. A continuación he elegido el paquete gratuito. Utilice la opción que corresponda a su caso de uso específico.

Plan de soporte gratuito

Configuración

Con su cuenta configurada y confirmada, ahora puede visitar la Consola de administración de AWS haciendo clic en el menú desplegable «Mi cuenta/Consola» en el área del encabezado en aws.amazon.com O debe haber un botón que diga «Iniciar consola de administración» claramente visible como en mi pantalla. Cualquiera que sea el método, busque Consola de administración de AWS y haga clic en él.

Tablero de AWS. Aquí puedes acceder a todos los servicios disponibles en Amazon.

En esta etapa, accederá a un panel de servicios que debería tener un aspecto similar al siguiente:

Panel de servicios de AWS

Por el aspecto de esta página, puede darse cuenta fácilmente de que Amazon ofrece una amplia gama de servicios y funciones para las plataformas web que puedan requerirlos. No explicaré qué es cada uno de estos, pero vale la pena mencionar que estos servicios realmente pueden llevar sus sitios web o aplicaciones al siguiente nivel.

Para nuestro enfoque, seleccionaremos del bloque de servicios Almacenamiento y entrega . Haga clic en CloudFront para acceder al panel de configuración.

La página se mostrará como a continuación si no tiene distribuciones configuradas actualmente:

Panel de distribuciones de Cloudfront

Haga clic en Crear distribución .

A continuación, debería ver la página siguiente. Nuestro enfoque es para la web, por lo que, naturalmente, esta es la opción que querrá seleccionar. Haga clic en Continuar .

Cree una distribución web para su sitio web de WordPress

En la página siguiente, creará la nueva distribución. Aquí defino la configuración para mi sitio personal en el que actualmente no uso un CDN. El blog de mi sitio está construido con WordPress pero el resto es contenido estático. Un CDN puede ayudar sin importar el caso.

Use su propia URL e identificación para este paso. Hay una lista bastante larga de opciones entre las que puede elegir. Para facilitar las cosas, usaré las opciones predeterminadas proporcionadas por Amazon.

Configuración de distribución. Usaremos los valores predeterminados proporcionados.

Una vez que haga clic en Crear distribución, AWS lo enviará de regreso al panel de distribuciones y le mostrará información sobre la distribución que acabamos de crear.

Nuestra nueva distribución.

Lo primero que probablemente notará es la columna Estado de En curso . En esta etapa, AWS esencialmente indexa la URL que proporcionamos y encuentra los activos estáticos dentro de su sitio web. Una vez que los encuentra, los refleja (copia).

Una excelente manera de verificar si las cosas funcionan desde esta vista es copiar el nuevo enlace debajo de la columna Nombre de dominio y pegarlo en el campo de dirección de su navegador. Visite ese enlace y debería ver su sitio en vivo después de que el Estado esté marcado como «Implementado». Mi sitio puede estar orientado por mi URL normal http://justalever.comy ahora un enlace similar a http://1x1x1x1x.yourcdn.com/. Este proceso puede llevar algún tiempo, así que sea paciente y deje que termine antes de continuar.

Con la CDN implementada, ahora puede acceder a su contenido de dos maneras.

La forma original:
http://mywebsite.com/wp-content/uploads/post-image.png

La nueva forma:
http://1x1x1x1x.yourcdn.com/wp-content/uploads/post-image.png

Aquí está mi distribución en estado Implementado :

Nuestra distribución se ha implementado con éxito.

Como puede ver, el contenido se extrajo de nuestro servidor y se reflejó como describí anteriormente al definir qué era una Zona de extracción. ¡Cosas interesantes!

Cosas a tener en cuenta: si su blog está alojado como un subdominio de su sitio web como el mío, deberá incluir un CNAME en su configuración de distribución. Todo lo que hace es comunicar a su CDN qué debe reflejar. Por ejemplo, si su blog está en, http://mywebsite.com/blogdeberá declararlo como CNAME agregando blog.mywebsite.coma sus opciones. Lea los documentos de soporte de su CDN para obtener más información.

Integrando el CDN con WordPress

Necesitamos que WordPress use su estructura de enlace permanente incorporada para aprovechar nuestra CDN recién implementada para que podamos servir nuestro contenido estático desde nuestra CDN en lugar de nuestro servidor web. Hacer esto requiere que agreguemos/modifiquemos algunos filtros y funciones dentro de nuestro functions.phparchivo dentro de nuestro tema activo.

Paso 1: carpeta wp-uploads

Al publicar en WordPress, su contenido estático (imágenes, videos, audio) se carga en una carpeta wp-uploads en su servidor web. WordPress usa esta carpeta para mostrar cualquier imagen destacada o imágenes en línea o medios que incluya en las publicaciones de su blog.

Apuntemos a esa carpeta y cambiemos dónde carga WordPress los medios dentro de nuestro functions.phparchivo. Agregue la siguiente función a su functions.phparchivo, asegúrese de agregarla antes de la etiqueta PHP de cierre.

function cdn_url() {
  return 'http://1x1x.yourcdn.com/wp-content/uploads';
}
add_filter( 'pre_option_upload_url_path', 'cdn_url' );

Con esa función en su lugar y en vivo en su servidor web, busque una imagen que haya cargado en su sitio de WordPress e inspecciónela. Estoy usando Chrome, así que simplemente hice clic derecho en la imagen para inspeccionarla. Busque la imagen que se vincula dentro del código HTML y observe que la nueva URL se muestra de manera similar a lo que ve a continuación.

<img width="835" height="475" src="http://1x1x1x1x.yourcdn.com/blog/wp-content/uploads/2014/06/imagename.jpg" class="attachment-post-thumbnail wp-post-image" alt="image alt tag">

Debería ver que la imagen ahora proviene de nuestra distribución CDN. Probablemente también notará cuánto más rápido se carga la página. ¡Lindo!

Paso 2: Scripts y hojas de estilo

Con nuestra carpeta wp-uploads ahora utilizando nuestro CDN, también necesitamos vincular el contenido estático restante. La mayoría de las veces, sus hojas de estilo y archivos JavaScript se pondrán en cola dentro de su functions.phparchivo, por lo que con ese archivo aún abierto, busque funciones que utilicen las wp_enqueue_scripts' andfunciones wp_enqueue_styles`.

Estas funciones varían en la forma en que se agregan a su tema específico, por lo que es posible que deba realizar una búsqueda para encontrarlas más rápido.

Tanto mi hoja de estilo como los archivos de JavaScript están vinculados mediante el URI del directorio de plantillas disponible en WordPress, que se parece al siguiente código:

function my_blog_scripts() {
  wp_enqueue_style( 'blog-style', get_template_directory_uri() . '/css/style.css', true );</p>
 
  wp_enqueue_script( 'blog-scripts', get_template_directory_uri() . '/js/main.js', true );
}
add_action( 'wp_enqueue_scripts', 'my_blog_scripts' );

Por ahora comentaremos este código en caso de que queramos usar nuestra versión local de los archivos nuevamente.

Agreguemos un par de funciones y acciones nuevas a nuestro functions.phpque reescribirán nuestros enlaces a los activos en el sitio web. Hacer esto permitirá que los enlaces a la hoja de estilo y los archivos JavaScript se inyecten dinámicamente en cada página del sitio web de WordPress.

//This code loads the stylesheet from the CDN
 
function enqueue_my_styles() {
    wp_register_style('my-styles','http://1x1x1x1x.yourcdn.com/blog/wp-content/themes/yourtheme/style.css');
    wp_enqueue_style('my-styles');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');

//This code loads our JavaScript file from the CDN 
 
function enqueue_my_scripts() {
    wp_register_script('my-scripts', 'http://1x1x1x1x.yourcdn.com/blog/wp-content/themes/yourtheme/scripts.js');
    wp_enqueue_script('my-scripts');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts');

En el caso de que tenga más de una hoja de estilo o archivo JavaScript, puede agregarlos a sus funciones anteriores de la misma manera. Sugiero tratar de mantener todo pequeño y dentro de archivos individuales para que no haga muchas solicitudes desde su sitio. Una tendencia común en estos días es minimizar sus activos, lo que ahorra espacio y promueve la velocidad. El objetivo de una CDN es acelerar las cosas para que no queramos pegarnos un tiro en el pie agregando toneladas de archivos. Puedo seguir y seguir, pero hablaré más de este tema en otra publicación de blog.

Paso 3: Éxito

Los dos pasos anteriores combinados nos han dado un sitio de WordPress completamente funcional con activos entregados a través de CDN. ¡Date una palmadita en la espalda si llegaste hasta aquí! no estuvo tan mal verdad? Si inspecciona todas sus imágenes, su hoja de estilo y su archivo JavaScript, debería notar que la nueva URL se genera y entrega desde su CDN.

Desde aquí, debería poder realizar actualizaciones donde mejor le parezca a su tema o sitio. El servicio CDN debe monitorear cualquier cambio y volver a implementarse con bastante frecuencia para mantener su sitio actualizado. Puede haber pasos que pueda seguir para ajustar la velocidad de implementación y que tenga que realizar actualizaciones manuales al actualizar algún contenido. Todo depende de su proveedor de CDN.

Como siempre, puede haber problemas en el camino para configurar su CDN. Si elige usar un proveedor de CDN diferente y los pasos son los mismos que se ven en este tutorial, le sugiero que haga algunas búsquedas en Google o el proveedor de CDN probablemente tendrá una sección de soporte en su sitio web.

¿No puede un complemento hacer todo esto por mí?

Hay algunos complementos excelentes disponibles para los servicios de CDN. Algunos proveedores de CDN incluso mantienen sus propios complementos. Realice una búsqueda en el directorio de complementos de WordPress para encontrar uno que pueda funcionar para usted.

Algunas opciones notables incluyen:

Paquete de rendimiento de WP
Caché total W3
Amazon S3 y frente a la nube

Conclusión

Espero que este tutorial haya sido útil y fácil de seguir. Un CDN es una excelente manera de acelerar un sitio web lento. El uso de WordPress combinado con un CDN es un enfoque muy inteligente para entregar el mejor contenido rápidamente a todos sus usuarios.

Imagen en miniatura del artículo por Max Griboedov / shutterstock.com