Intérêt & explication
L’utilisation du cache de votre navigateur optimise le temps de chargement des pages d’un site, pourquoi et comment ?
- Tout simplement car lorsque vous visitez un site, le navigateur qui est votre intermédiaire avec Internet, enregistre les données multimédia que vous recevez (javascript, feuilles de styles, images, flash, etc.) et effectue une copie de chaque page traitée qu’il place dans des endroits précis de votre disque dur et de votre mémoire centrale. Ces zones sont les fameux caches.
- Si vous revisitez le même site, les données précédemment stockées seront retrouvées plus rapidement dans ces caches, le navigateur n’aura pas besoin de les télécharger à nouveau : typiquement si vous utilisez les boutons « précédent » et « suivant » de votre navigateur, il recharge les pages depuis le cache.
A quel moment ?
Lorsque votre navigateur a fini complètement de charger la page en cours, que vos feuilles de styles ont été appliquées, que vos scripts javascript ont été exécutés et que vos images ont été chargées, pourquoi ne pas en profiter pour mettre en cache les données de la page suivante afin qu’elle soit plus rapide à s’afficher ?
Cela peut se faire sans gêner l’utilisateur, vous optimiserez ainsi la vitesse de chargement de vos pages et vous maitriserez le cache de votre navigateur :
- Pré-chargement sans condition : vous mettez en cache des données que vous savez qu’elles seront utilisées ultérieurement sans que vous sachiez pour autant à quel moment
- Pré-chargement anticipé : vous mettez en cache des données juste avant le chargement de la page qui va les utiliser, la mise en cache est alors ciblée et plus intelligente
En pratique
- Une première façon consiste à utiliser DOM (Document Object Model)
Il est possible de pré-charger nos futures données en les injectant directement dans la balise HEAD de la page après chargement de celle-ci via DOM. Nous allons donc créer à la volée un élément LINK pour les feuilles de style, une élément SCRIPT pour nos scripts javascript et un élément IMAGE pour nos images.
Le désavantage de cette méthode est que les fichiers CSS et JavaScript sont exécutés et donc peuvent impacter la page en cours par mégarde, il faut donc faire attention :
window.onload = function() {
setTimeout(function(){
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "new.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "new.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "new.png";
}, 1000);
};
- Une seconde façon, bien meilleure, consiste à utiliser AJAX (Asynchronous JAvascript Xml)
Ajax quand tu nous tiens … c’est la façon que je préfère, je la trouve élégante et vraiment simple, elle fonctionne sur tous les navigateurs qui supporte l’objet XMLHttpRequest, autant dire à peu près tous.
L’avantage sur la façon ci-dessus est que les fichiers CSS et JavaScript ne sont pas exécutés et donc aucun impact possible sur la page courante. Méthode propre et efficace.
window.onload = function() {
setTimeout(function(){
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'new.css');
xhr.send('');
// preload image
new Image().src = "new.png";
}, 1000);
};
Remarque
Il existe des bibliothèques qui permettent de mettre de faire la même chose, plus de la première façon présentée que la seconde, en voici une qui a l’air simple d’utilisation et performante que je n’ai pas testé personnellement : LazyLoad
- Bien découper et structurer le code de nos pages Web
- Optimiser et structurer son code JavaScript
- CSS Sprites : une technique pour accélérer le chargement des pages Web
- Agrandir une image lorsque la souris survole ou se déplace dans l’image
- Mes outils en ligne préférés pour l’optimisation de sites web
{ 1 trackback }
{ 5 comments… lisez-les, puis ajoutez le vôtre ! }
Article instructif, mais alors quelle est la différence entre « cache » et « cookies » ? (oui je sais je comprends vite quand on m’explique longtemps…)
Oui c’est vrai que la différence n’est peut-être pas intuitive, pourtant il y en a une, la voici :
- le cookie est un fichier stocké sur le disque dur par le navigateur permettant d’enregistrer les informations de notre visite sur le site : par exemple nos identifiants afin de ne plus avoir à le saisir, nos préférences d’affichage afin d’afficher 3 colonnes au lieu de 2 par exemple, nos rubriques les plus visités afin de nous envoyer des emails personnalisés, etc. Le cookie a une durée limitée dans le temps.
- le cache est simplement l’endroit sur le disque dur où les fichiers, qui composent les pages des sites qu’on visite (.js, .html, .css, .swf, etc.), sont stockées afin d’y accéder plus rapidement lors de la prochaine visite pour que l’affichage des pages soient plus rapides
Ils travaillent ensemble mais dans des rôles différents
ouais, pourquoi faire simple quand on peut faire compliqué ..
Brilliant article, thanks for the help
No problem, glad to have helped !