Longtemps réservé aux images, fichiers javascript et autres css, le préchargement, ou "prefetching" en anglais, est maintenant disponible pour des pages complètes. Cette avancée, on la doit à html5 qui, grâce à une simple balise meta, ordonne au navigateur de charger une page à l'avance. Là où c'est formidable, c'est que ce dernier ne se contente pas de télécharger les éléments de la page, mais en réalise un pré-rendu. Du coup, lorsqu'un visiteur clique sur un lien vers cette page, l'affichage est instantané.

Si le prefetching offre une expérience utilisateur incomparable, il est important de choisir avec précaution les pages que vous allez pré-charger. Il convient d'en limiter le nombre (à 2-3 selon moi) pour ne pas surcharger votre serveur avec des requêtes http inutiles. J'ai énormément réfléchi à la meilleure façon d'utiliser cet outil, et l'ai finalement implémenté sur Scooter System dans 3 cas de figures :

• sur la page d'accueil du site, vers la dernière actualité publiée ;
• sur les principales rubriques du site, vers les pages de destination les plus populaires (liste récupérée dans Google Analytics) ;
• sur toutes les pages lorsqu'un visiteur arrive sur le site (détection du referer en php), vers la page d'accueil.

function prefetch($l){
if(false!==strpos($_SERVER['HTTP_USER_AGENT'],'Chrome/')){
return "\n".'<link rel="prerender" href="'.$l.'">';
} elseif(false!==strpos($_SERVER['HTTP_USER_AGENT'],'Firefox/')){
return "\n".'<link rel="prefetch" href="'.$l.'">';
}
}

Il suffit ensuite d'appeler votre fonction prefetch() dans le header de votre site ou blog autant de fois qu'il y a de pages à précharger, et elle renverra le code qui va bien. Notez qu'Internet Explorer, Opera et Safari ne gèrent pour le moment pas le pré-chargement, mais que cela viendra prochainement. Il vous suffira alors de modifer la fonction pour prendre en compte les évolutions. Voilà donc pour cette introduction à une nouveauté html5 pleine de promesses ! N'hésitez pas à publier un petit commentaire ci-dessous si cet article vous a intéressé !