Comment utiliser CDN ? le temps de chargement d’une page est un critère important pour l’utilisateur. Pour accélérer celui-ci les CDN (Content Delivery Network) proposent d’héberger les fichiers statiques (CSS, JS, Images) sur leurs serveurs. Cela permet de :

  • Réduire les temps de réponse : les CDN ont des serveurs répartis dans le monde, donc il y a surement un serveur proche de l’utilisateur.
  • Réduire le temps de téléchargement : les fichiers utilisés par plusieurs sites utilisant le même CDN ne seront téléchargés qu’une seule fois. Ensuite ils seront placés dans le cache, ce qui évite de les retélécharger. Cela est d’autant plus vrai pour les bibliothèques couramment utilisées telles que jQuery, Bootstrap, FontAwesome, etc.
  • De réduire le nombre de requêtes sur notre serveur : il a donc plus de temps pour répondre aux “vraies” requêtes.
  • Bonus (souvent négligeable) : Réduire le temps d’envoi de la requête : le domaine du CDN est différent de celui de notre site, le navigateur n’a donc pas à envoyer les cookies.

D’un autre côté notre application devient dépendante du CDN. Si celui-ci est indisponible, les fichiers nécessaires à notre application ne peuvent plus être téléchargés et donc celle-ci ne fonctionne pas. En général ce cas n’est pas acceptable.

Pourquoi choisir ?

Pour les fichiers JavaScript et CSS il est possible d’utiliser un CDN et en cas de problème de servir les fichiers depuis notre site. Ainsi lorsque le CDN n’est pas disponible, le temps de chargement de la page est un peu allongé mais elle reste disponible. Voyons comment faire cela.

Comment utiliser CDN dans les Fichiers JavaScript

La première étape est d’ajouter le script avec l’adresse du CDN :

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

Ensuite il nous allons vérifier le bon chargement du script. Pour cela on identifie un objet ou une fonction définie par le script et on vérifie qu’il existe. Si ce n’est pas le cas, on ajoute une nouvelle balise script au document. Cette nouvelle balise n’est ajoutée que si nécessaire et pointe vers le fichier placé sur notre serveur. Dans notre cas on peut vérifier que l’objet angular existe :

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
if (!window.angular) {
    document.write("<script src=\"angular.js\"><\/script>");
}
</script>

Selon les besoins la vérification peut être plus complexe, mais le principe reste le même.

Comment utiliser CDN dans les Fichiers CSS

Comme pour les fichiers JS on commence par ajouter une balise link pointant vers le CDN :

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

Il faut ensuite vérifier que le style défini dans le CSS existe. Pour cela on ajoute une balise avec une classe définie dans le fichier CSS. Pour FontAwesome on peut par exemple ajouter la classe fa :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

<meta id="FontAwesomeTest" name="x-stylesheet-fallback-test" class="fa" />

On vérifie ensuite que le style appliqué à cette balise est le bon avec quelques lignes de JavaScript. Par exemple pour FontAwesome on peut vérifier que le nom de la police (font-family) est bien défini à FontAwesome pour la classe fa :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

<meta id="FontAwesomeTest" name="x-stylesheet-fallback-test" class="fa" />

<script>
var element = document.getElementById("FontAwesomeTest");

var style = document.defaultView && document.defaultView.getComputedStyle ? 
    document.defaultView.getComputedStyle(element) : 
    element.currentStyle;
            
if (style && style["font-family"] !== "FontAwesome") {
    document.write('<link rel="stylesheet" href="font-awesome.min.css" />');
}               
</script>

C’est un peu plus compliqué que pour le JavaScript, mais cela reste tout de même rapide à mettre en place.

Conclusion

Comme on peut le voir il est très simple d’utiliser un CDN sans pour autant en être totalement dépendant. Il suffit simplement d’ajouter une vérification pour chacune des ressources distantes. Cependant faite attention à toujours utiliser la même version des scripts sur le CDN et sur votre serveur…

Ne ratez plus aucunes actualités avec la newsletter mensuelle de SoftFluent