InstantClick charge les pages instantanément

Pour obtenir un site sous WordPress rapide, un bon hébergeur, un thème optimisé et un système de cache constituent la base de ce qui est nécessaire. Mais il y a des manières d’aller plus loin encore, la preuve avec ce petit module JavaScript qui commence à charger les pages avant même de cliquer sur un lien.

InstantClick part d’un principe assez simple : entre le moment où on place le curseur de la souris sur un lien, et le moment où on le clique pour ouvrir la page correspondante, il se passe en moyenne entre 200 et 300 ms (vous pouvez essayer ici, vous verrez). C’est imperceptible, certes, mais dans cet intervalle de temps, le serveur ne fait rien alors qu’il aurait largement le temps de charger la page, ou au moins de commencer ce chargement. Et c’est exactement ce que fait InstantClick : dès que vous survolez un lien, il demande au serveur de précharger la page. Avec un peu de chance, au moment où vous cliquez, le chargement sera terminé et vous aurez instantanément le résultat, sans le moindre temps d’attente.

Ce module a un côté assez magique, d’autant que l’installer est très simple. Pour un blog WordPress, il faut ajouter un fichier JavaScript dans les ressources du thème et l’insérer sur chaque page. À partir de là, tous les liens internes sont pris en charge et le résultat est déjà bluffant. Vous pouvez voir les modifications apportées à mon blog sur GitHub pour installer InstantClick et, comme vous pourrez le constater, elles sont minimes.

Ces quelques lignes suffisent à installer InstantClick.
Ces quelques lignes suffisent à installer InstantClick.

Néanmoins, InstantClick nécessitera probablement quelques ajustements si vous souhaitez l’utiliser. Pour fonctionner, ce script modifie assez fondamentalement le fonctionnement d’un site, puisque c’est lui qui charge les pages, et non plus le navigateur. Quand vous cliquez sur un lien, vous restez en fait sur la même page, même si le contenu et l’URL changent. Par défaut, InstantClick ajoute une barre de progression pour simuler le chargement, mais on peut facilement la retirer et on obtient alors encore mieux l’illusion d’un chargement instantané. On clique et le contenu apparaît instantanément.

Dans certains cas toutefois, InstantClick peut poser problème. En particulier, c’est le cas des pages d’administration du site, qui doivent être chargées normalement. Pour tous ces liens, la solution consiste à les exclure en ajoutant simplement data no-instant soit directement sur les liens, soit sur une balise HTML associée aux liens (pratique pour exclure plusieurs liens en une seule fois). Dans mon cas, j’ai ainsi exclu les liens qui permettent de modifier un article, et un autre vers une page d’archive qui charge des ressources uniques (voir le code).

Parfois aussi, InstantClick peut entrer en conflit avec d’autres scripts en JavaScript, et en particulier empêcher leur lancement. C’est le cas typiquement de tous les scripts qui s’activent au chargement d’une page : avec ce module, il n’y a plus de chargement de page à proprement parler. Il existe toutefois des solutions pour pallier ce défaut et elles sont assez simples à mettre en œuvre. Dans mon cas, j’ai été contraint de le faire pour le module BigFoot évoqué dans un précédent article.

Voici le code que j’ai finalement utilisé pour mon blog. L’idée est de créer une fonction pour le code JavaScript à activer à chaque changement de page, puis d’appeler cette fonction avec une commande spécifique à InstantClick.

<script type="text/javascript" data-no-instant>
    function bigfoot() {
        $ = jQuery.noConflict();
        $.bigfoot({actionOriginalFN: "ignore"})
    }

    InstantClick.on('change', bigfoot);
    InstantClick.init();
</script>

Si votre blog est plus complexe que le mien, s’il repose sur un grand nombre de JavaScript et s’il contient beaucoup de contenu statique, InstantClick ne fera peut-être pas l’affaire. Mais l’essayer est assez simple et le gain peut être vraiment bluffant. Vous pouvez l’essayer sur mon blog pour vous faire une idée : en général, l’article apparaît vraiment instantanément, même s’il faudra peut-être quelques secondes de plus pour charger toutes les images si votre connexion est lente.

Point important à noter pour les gros sites : par défaut, InstantClick charge les pages dès que le curseur de la souris passe sur un lien, et même si l’utilisateur ne veut pas ouvrir le lien en question. Avec beaucoup de visiteurs, cela peut représenter une charge trop importante sur le serveur, ou des frais inutiles de bande-passante. Le créateur d’InstantClick y a pensé toutefois et propose plusieurs options. À vous d’ajuster ces paramètres en fonction de vos besoins et des capacités de votre serveur.

Publicités

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s