L’optimisation d’un site web est un facteur indispensable à prendre en compte lors du développement d’un site. Après le précédent article d’optimisation sur les sprites CSS, nous allons voir un nouveau point particulier de l’optimisation: l’utilisation de CDN (Content Delivery Network).
Introduction
Si vous utilisez des frameworks Javascript comme jQuery, Prototype ou MooTools par exemple, vous les avez probablement placés dans un répertoire spécifique à tous vos fichiers Javascript que vous appelez à chaque chargement de vos pages. Cela veut dire que vous allez devoir solliciter votre serveur pour chaque demande de chargement de fichiers et utiliser aussi votre bande passante. Il y a pourtant une alternative très intéressante pour optimiser ce chargement grâce au CDN.
Qu’est qu’un CDN ?
Un Content Delivery Network (CDN) est constitué d’ordinateurs reliés en réseau à travers Internet, et qui coopèrent afin de mettre à disposition du contenu ou des données (généralement du contenu multimédia volumineux) à des utilisateurs. Ce réseau est constitué de nœuds répartis géographiquement, et généralement connectés à Internet à travers différentes dorsales Internet. Ces nœuds coopèrent entre eux afin de satisfaire les requêtes émises par les utilisateurs, leur envoyant les données ou le contenu en retour, et déplaçant le contenu de façon transparente afin d’optimiser le mécanisme de transmission. L’optimisation peut se traduire par la réduction des coûts de bande passante, l’amélioration de l’expérience utilisateur, voire les deux. [Source: Wikipédia]
Quel est l’intérêt d’utiliser un CDN ?
Imaginons que vous utilisiez le framework jQuery ainsi que son complèment jQuery UI sur votre site. Actuellement lors du chargement d’une page de votre site, les fichiers Javascript sont chargés depuis votre serveur, il y a donc 1 requête à traiter pour chaque fichier Javascript et vous utilisez en plus votre bande passante. Le CDN va vous permettre de charger ces fichiers depuis un autre serveur, vous allez donc diminuer le nombre de requêtes vers votre serveur et économiser de la bande passante. Le CDN propose aussi à vos visiteurs le chemin le plus court pour accéder aux fichiers ce qui permet de diminuer le temps de réponse et il gère aussi en général très bien le cache de vos visiteurs.
Comment utiliser le CDN ?
Dans notre exemple nous utiliserons les services de Google, ce dernier propose en effet les principaux framework Javascript sur ses serveurs.
Google Code
Partons du principe que notre site fonctionne avec la dernière version de jQuery (1.3.2). Nous aurions eu par exemple auparavant dans notre balise <head> le code suivant :
<script src="/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Nous appelons donc notre fichier sur notre serveur, nous sollicitons notre serveur pour effectuer cette requête et nous utilisons notre bande passante pour envoyer ce fichier au visiteur.
Maintenant en allant chercher ce fichier sur les serveurs de Google nous changeons notre code comme ceci:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Nous voyons bien cette fois ci que nous appelons le fichier sur les serveurs de Google, par conséquent nous évitons 1 requête supplémentaire à notre serveur et économisons notre bande bassante.
Google propose aussi un autre moyen très performant de charger vos frameworks. Vous devez dans un premier temps inclure l’API de Google:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Ensuite vous pouvez très facilement charger une bibliotèque et la version désirée de la manière suivante:
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
Rien de vous empêche ainsi d’utiliser une version antérieure à la dernière mise à jour de votre biliothèque.
Par exemple, à l’heure ou j’écris cet article la dernière version de Mootools est la 1.2.4, or pour des raisons de compatibilité, j’ai besoin de la version 1.1, je vais donc tout simplement utilisé le code suivant pour charger la version de MooTools dont j’ai besoin :
<script type="text/javascript">
google.load("mootools", "1.1");
</script>
Google propose les principales bibliothèques Javascript open source comme jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject, Yahoo! User Interface Library (YUI), Ext Core et Chrome Frame.
Conclusion
L’utilisation d’un CDN peut vous permettre d’optimiser incontestablement le chargement de votre site. Je vous ai présenté dans ce billet une solution gratuite de Google pour certaines bibliothèques Javascript, mais vous pouvez aussi utiliser d’autres prestataires pour charger vos propres fichiers mais le coût n’est en général pas négligeable. N’hésitez pas à laisser vos remarques et suggestions dans les commentaires à la fin de cet article.
Plus d’informations
Related posts:
- Les sprites CSS L'utilisation de sprites CSS dans vos sites permet de diminuer...
La liste des entrées complémentaires est établie par le module d’extension YARPP.
Tags : cdn, content delivery network, jQuery, Optimisation
Hodler : Il s’agit des supports des 3 premiers cours. Si...
Tres intiresno, gracias