
Si ha estado trabajando en el desarrollo web durante un tiempo, sabrá que la web necesita velocidad. La verdad es simple: la velocidad importa y más rápido se considera mejor.
Una “victoria fácil” para aumentar el rendimiento es utilizar una CDN. Hemos hablado de esto varias veces en CSS-Tricks. Es fácil porque no está reescribiendo una base de código o editando contenido a mano, pero es un área de rendimiento que muchos de nosotros podríamos pasar por alto porque, bueno, hosting, servidores y cPanels, ¡oh Dios!
Afortunadamente, el proceso para integrar una CDN no tiene por qué ser complicado. Idealmente, configura las cosas y luego cosas como Google PageSpeed chillan de alegría en forma de puntajes de alto rendimiento que, a su vez, dan como resultado mejores clasificaciones en los motores de búsqueda, mayores ingresos, un aumento para usted y … ya entiendes.
Esta publicación explicará el proceso para configurar una CDN para que funcione en una aplicación web personalizada, seguido de algunos trucos que podemos usar para aprovechar al máximo nuestro trabajo. Como dije, no tiene por qué ser difícil, ¡así que vamos a sumergirnos y hacer que la web sea más rápida!
Vale la pena señalar que configurar un CDN puede ser incluso más simple de lo que estamos cubriendo aquí para aquellos que trabajan con un CMS como WordPress, donde los complementos pueden ayudar con el impulso. Vamos a suponer que no todo el mundo tiene ese lujo (¡grite a las aplicaciones web!) Y procederemos de la forma más tradicional.
Espera, me perdiste en CDN
No nos hace daño revisar los conceptos básicos de lo que es una CDN y para qué se utilizan, así que comencemos con eso.
Una CDN funciona obteniendo activos estáticos del servidor de su sitio y almacenándolos en caché en sus servidores. Cuando un navegador solicita visitar su sitio, los contenidos estáticos se sirven a través de la CDN en lugar de su sitio. Esto es más rápido porque los servidores CDN están distribuidos globalmente y sirven como proxies que determinan qué servidor está ubicado físicamente más cerca de su visitante, entregando así contenido en una red más rápida y conveniente. De ahí el nombre completo: Content Delivery Network.
Una red de entrega de contenido se distribuye globalmente para optimizar la entrega de activos estáticos.
Entonces, ¿cómo sabe el navegador que debe obtener los recursos de la CDN en lugar de su servidor? La URL de sus recursos estáticos se reemplaza para apuntar al servidor CDN en lugar de la URL de su propio sitio.
Por ejemplo, digamos que queremos que CDN se configure como un subdominio. Para CSS-Tricks, eso podría ser algo como cdn.css-tricks.com
y esa será la URL relativa en la que basamos todos nuestros activos.
Dicho de manera más sucinta, las URL de los activos en nuestro sitio de esta manera:
https://css-tricks.com/image.jpg
https://css-tricks.com/style.css
https://css-tricks.com/script.js
…se convertiría:
http://cdn.css-tricks.com/image.jpg
http://cdn.css-tricks.com/style.css
http://cdn.css-tricks.com/script.js
El navegador envía las solicitudes a su CDN en lugar de a su servidor, quitando la carga de su servidor y haciendo que todo su sitio sea más rápido como resultado.
Espera, ¿dos servidores para un sitio?
Sí, hasta cierto punto, pero en realidad no significa que esté administrando dos servidores.
En cambio, estamos hablando de usar la CDN como una capa virtual que se interpone entre su servidor y el navegador de un usuario. Esa capa virtual escucha la solicitud que el navegador está haciendo a su servidor y responde con gusto con activos almacenados en caché en nombre del servidor.
En algunos casos, puede cargar su activo directamente en el CDN y quitarle toda la carga a su servidor. En cambio, lo que veremos en esta publicación es un proceso en el que la CDN obtiene activos de su servidor y los almacena en caché para que no sea necesario cargarlos en diferentes servidores y administrar múltiples ubicaciones.
Cómo implementar una CDN en una aplicación personalizada
Dos de los servicios CDN más utilizados son Amazon AWS y MaxCDN, aunque ciertamente hay muchos otros servicios disponibles. Centraremos la mayor parte de nuestra atención en MaxCDN como un ejemplo de cómo configurar las cosas.
Paso 1: elija un CDN y registre su sitio
Una vez que haya decidido que un CDN es el camino a seguir para su aplicación web, querrá registrarse para obtener una cuenta. Hay muchas, muchas opciones y, en lugar de sopesar los pros y los contras de cada una (lo que podría ser una buena publicación en el futuro), aquí hay algunas para comenzar:
- MaxCDN
- AWS CloudFront
- Cloudflare
- Akamai
- Google CLoud
- Microsoft Azure
Un paso común al registrar su cuenta es configurar una zona de tracción o distribución. La CDN utiliza una zona de extracción o distribución como un depósito para sus archivos de soporte diarios. Automáticamente extraerá los datos de una ubicación que especifique en la primera solicitud del archivo. Los archivos se entregan al usuario final desde un subdominio de su CDN de elección o un dominio personalizado (subdominio) de su elección que apunta a la CDN. Los datos del depósito se eliminan automáticamente del servidor después de un período de tiempo personalizable.
Paso 2: crea tu URL de CDN
Su URL de CDN es la URL a la que apuntarán todos sus activos una vez que se hayan configurado las cosas. Una buena regla general es usar un nombre de URL que sea fácil de buscar y reemplazar en su base de datos para todas sus URL existentes.
Como cualquier otro subdominio, esto deberá configurarse como un registro CNAME en la configuración de DNS de su host.
Una pantalla típica de cPanel para configurar registros CNAME con un host
Paso 3: apunte sus activos al CDN
Veamos un método para crear una variable para la URL de CDN y cómo se puede utilizar para ayudar mediante programación a anteponer la URL a nuestros recursos estáticos. La razón por la que queremos hacer esto es que (1) hace que sea más difícil cometer errores en nuestro marcado y (2) es más fácil mantener la URL en caso de que necesitemos cambiarla.
Haremos esto definiendo una variable CDN global, luego anteponiendo esta variable a nuestra URL de recursos estáticos. Definimos esta variable tanto a nivel de PHP como a nivel de JavaScript para que tengamos más flexibilidad en cómo la usamos en el futuro. También nos facilita las cosas si decidimos deshacernos de la CDN porque todo lo que tenemos que hacer es reemplazar la variable con una simple /
para que todo vuelva a la ruta relativa de nuestro servidor original.
Tenga en cuenta que los siguientes ejemplos están aquí para ilustrar ejemplos en lugar de usarse literalmente. Su uso real puede variar.
<?php
define('cdnURL', 'http://cdn.css-tricks.com/');
?>
<html>
<head>
<title>Hello World!</>
<script type="text/javascript">
/* Let’s define a javascript global for using the CDN inside scripts */
var cdnURL = '<?php echo cdnURL ?>';
</script>
<link rel="stylesheet" href="https://css-tricks.com/adding-a-cdn-to-your-website/<?php echo cdnURL ?>css/style.css" />
</head>
<body>
<img src="<?php echo cdnURL ?>img/logo.png" />
<button>Submit</button>
<script type="text/javascript" src="<?php echo cdnURL ?>js/main.js"></script>
</body>
</html>
O, hecho en JavaScript:
(function() {
var preloadImage = document.createElement('img');
preloadImage.src = cdnURL + 'img/logo.png';
})();
Esto requiere un ligero cambio en sus procesos de pensamiento como desarrollador. Cada recurso estático necesita obtener el cdnURL
variable que se le antepone.
Lo mismo ocurre con su CSS. Por ejemplo, también podemos configurar una variable CDN global y anteponerla a nuestros recursos CSS usando un preprocesador CSS, como LESS:
@cdnURL: 'http://cdn.css-tricks.com/';
button {
background-image: url('@{cdnURL}img/button.png');
&:hover {
background-image: url('@{cdnURL}img/button_hover.png');
}
}
… o Sass para el caso:
$cdnURL: 'http://cdn.css-tricks.com/';
button {
background-image: url('#{$cdnURL}img/button.png');
&:hover {
background-image: url('#{$cdnURL}img/button_hover.png');
}
}
Lo mejor de esto es que puede apagar su CDN simplemente configurando el cdnURL
a /
que volverá a crear todas sus URL relativas. Esto también tiene la ventaja de que si desea cambiar la URL de CDN, solo necesita cambiar la cdnURL
.
Ese es realmente el proceso de tres pasos para configurar un CDN, vincularlo a su servidor y luego apuntar sus activos existentes a él para que el CDN pueda servir las cosas cuando se le solicite.
Hablemos de algunas configuraciones avanzadas
Configurar el CDN no fue tan aterrador, ¿verdad? Ahora que hemos superado los principales obstáculos, podemos divertirnos un poco con configuraciones avanzadas que optimizan la forma en que se sirven nuestros activos.
TimeToLive (TTL)
Los CDN suelen tener un conjunto de TimeToLive (TTL) para los activos. Esta es una forma elegante de decirle a la CDN cuánto tiempo (en segundos) antes de que deba tratar un activo como obsoleto. En ese momento, lo busca en el servidor nuevamente para obtener una copia “nueva”.
Cuanto más largo sea el TTL, más tiempo permanecerá una “versión” de ese activo con la CDN y se seguirá sirviendo. Cuanto más corto sea el TTL, más a menudo abandona la “versión” del activo que almacena y vuelve al servidor original para buscar una versión actualizada.
Pantalla de configuración de caché de MaxCDN para configurar los vencimientos de TTL
Invalidar activos
La espada de doble filo con TTL es que puede actualizar un activo en su servidor y el cambio no se reflejará en su sitio hasta que el TTL haya expirado y el CDN haga su próxima parada en el servidor para encontrar una nueva copia.
Podemos superar esto invalidando un activo. El truco aquí es cambiar el nombre del archivo en la actualización. Si el nombre del archivo cambia, la CDN no lo sabe mejor y lee el archivo recién nombrado como un activo completamente nuevo en lugar de una actualización del existente.
En otras palabras, esto: http://cdn.css-tricks.com/image100.jpg
… sería renombrado a algo como esto: http://cdn.css-tricks.com/image101.jpg
¡Hasta luego versión antigua y hola nueva!
Aprovechando TTL para el control de versiones
Oye, entonces, si el CDN se está quedando con una versión de un activo y hay una copia nueva en nuestro servidor que aún no se ha recuperado, entonces técnicamente tenemos dos iteraciones del mismo activo. Podemos usar esto para crear una forma de “control de versiones” donde actualizar nuestros activos en el servidor no significa que los perdamos automáticamente y podamos volver a una copia anterior, si es necesario.
La forma realmente complicada de hacer esto es cambiar el nombre de todos sus recursos cada vez que realiza un cambio como lo hicimos al invalidar el activo. Sin embargo, esto es excesivo desde la perspectiva del mantenimiento, incluso si tuviéramos que crear una variable para hacer esto como lo hicimos para el cdnURL
. En su lugar, vamos a hacer algunas trampas porque así es como avanzamos en un blog que se basa en trucos.
Comenzaremos colocando nuestros activos estáticos en sus propias carpetas para que esto: http://cdn.css-tricks.com/image.jpg
… se convierte en esto: http://cdn.css-tricks.com/img100/image.jpg
Para invalidar el archivo y forzar que la CDN sirva la última versión, modificaríamos la ruta del subdirectorio de esta manera: http://cdn.css-tricks.com/img101/image.jpg
¿Ver la diferencia? El nombre del archivo sigue siendo el mismo, pero ahora parece vivir en un directorio del servidor. Nuevamente, la CDN no conoce la diferencia y ve esto como un archivo completamente nuevo. ¡Acabamos de crear una forma falsa de control de versiones que ocurre directamente en la carpeta!
Pero espera, podemos hacerlo mejor.
Cambiar el número de una carpeta en cada actualización sigue siendo un proceso engorroso y un paso más en el mantenimiento de nuestro sitio. Lo que podemos hacer en cambio es realizar algunos pequeños cambios en el sitio .htaccess
archivo para hacer el trabajo pesado por nosotros.
Vamos a ser más astutos que la CDN sirviendo todos nuestros activos desde la misma carpeta, pero haremos que parezca que se sirve desde una carpeta versionada, gracias a algunas reglas de reescritura.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^ver-[0-9]+.[0-9]+.[0-9]+(.*)$ $1 [L,NC]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,L]
</IfModule>
¡Decir ah! Ahora nuestro servidor está falsificando el número de versión en la URL mientras entrega nuestro ejemplo image.jpg
activo de la misma ruta en el servidor donde se cargó originalmente.
Invalidar todos los activos bajo demanda
Lo último para redondear esto es integrar nuestro truco de control de versiones en nuestro marcado HTML para que la CDN actualice todos los activos tan pronto como queramos invalidarlos por completo.
Configuraremos un archivo de configuración donde definimos una variable para el número de versión, importamos esa variable a nuestra estructura de URL de activos y luego cambiamos el número de versión cada vez que queramos actualizar nuestros activos en todos los ámbitos.
Esto es lo que podría parecer en un archivo de configuración PHP:
VERSION
1.0.0
Configure::load('cdn');
define('VERSION', file_get_contents(APP.DS."Config".DS."VERSION"));
define('CDN', Configure::read('CDN.path').VERSION."https://css-tricks.com/"); /* the trailing slash is important */
Así es como eso podría funcionar como un archivo de configuración MENOS:
@VERSION: '1.0.0';
@import 'cdn';
@import 'version';
@CDNURL: '@{CDN}@{VERSION}/';
button {
background-image: url('@{CDNURL}img/button.png');
&:hover {
background-image: url('@{CDNURL}img/button_hover.png');
}
}
Como puede ver, también puede optar por utilizar la variable CDN como un archivo, variable de entorno o lo que funcione mejor para usted. Los principios son en su mayoría los mismos, todos lograrán el resultado final deseado al incorporar la URL de CDN (y el número de versión) en todos nuestros recursos externos.
CDN, FTW!
Con suerte, esto le quita el susto a la creación de un CDN. Ciertamente, puede parecer una tarea desalentadora y hay configuraciones avanzadas que pueden hacer que se pierda en la maleza. La configuración inicial es lo que la mayoría de nosotros necesitamos de todos modos y los beneficios son profundos en lo que respecta al rendimiento y la experiencia del usuario, entre muchas otras cosas (juego de palabras).
La verdad es que se vuelve aún más simple si administra el contenido de su sitio con un CMS popular como WordPress, donde hay abundantes complementos para agilizar aún más el proceso.
Incluso si no tenemos el lujo de los complementos, configurar una CDN puede ser bastante sencillo, incluso para los menos orientados al alojamiento. La configuración es el obstáculo más grande y pudimos dividirlo en tres pasos básicos. Todo lo demás fluye muy bien desde allí.