CDN per immagini

Quando si inizia ad utilizzare una CDN lo si fa con lo scopo di velocizzare il sito. In un articolo passato ho introdotto le funzioni di sicurezza garantite dalla CDN CloudFlare spiegando come i Content Delivery Network mettono a disposizione dei servizi di sicurezza e di caching.

Molti grandi siti vengono rallentati dalle immagini ad alta risoluzione caricate in migliaia di articoli. Il lavoro di una web agency in questo caso è quello di alleggerire il lavoro di caricamento della pagina al fine di effettuare un miglioramento SEO sull’e-commerce, il sito o più in generale la piattaforma di lavoro.

Come funziona una CDN?

Ho già spiegato di come una CDN offra una copia dei contenuti statici del sito direttamente salvati sui loro server.

Ma come si fa a far puntare una risorsa caricata sulla CDN e non sul sito?

In realtà basta veramente poco, occorre puntare gli URL delle risorse statiche alla CDN, tramite per esempio una configurazione che inserisca la CDN come sottodominio, ad esempio cdn.example.com.

A questo punto il gioco è fatto, e l’unica operazione da compiere è aggiungere il nome del sottodominio, cdn. in questo caso.

Creare gli URL per la CDN

Il primo passaggio sarà quello di creare sul dominio un record CNAME per far riconoscere la CDN come un sottodominio.

CNAME per la CDN

Il secondo passaggio è quello di realizzare una regola globale che anteponga alle URL statiche delle immagini le versioni della CDN.

La regola ci aiuta a non sbagliare come invece potrebbe accadere nel caso di un possibile cambio manuale e in secondo luogo ci risulta più facile effettuare un secondo passaggio, nel caso in cui il primo diventasse obsoleto.

In questa prima ipotesi lo script che ci aiuta ad effettuare il passaggio è in PHP:

<?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='<?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>

Ma è possibile operare anche con Javascript:

(function() {
    var preloadImage = document.createElement('img');
    preloadImage.src = cdnURL + 'img/logo.png';
})();

E infine, esiste anche una versione CSS in cui una volta impostata una variabile è facile lavorare sulla sostituzione.

@cdnURL: 'http://cdn.css-tricks.com/';
button {
  background-image: url('@{cdnURL}img/button.png');
  &:hover {
    background-image: url('@{cdnURL}img/button_hover.png');
  }
}

La gestione del TTL

Il TTL o Time To Live è in poche parole il tempo in cui la risorsa affidata alla CDN rimane valida, prima che quest’ultima non vada a ricercare nuovamente la risorsa statica.

Il vero problema di questa gestione è che se viene effettuato un cambio nel periodo di grazia indicato dal TTL, la modifica non sarà comunque visibile.

Per ovviare a questo problema basta utilizzare una regola su htaccess che faccia apparire i nomi delle cartelle riscritte, così che la CDN sia costretta a riprendere la risorsa anche se questa era già in suo possesso e ancora all’interno dei tempi della CDN:

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

In aggiunta a questo, per invalidare i dati precedenti basterà aggiungere del codice in 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.'/'); /* the trailing slash is important */

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *