Pagespeed : utiliser Disqus avec Lazyload

Ceux qui utilisent le système de commentaires Disqus sur leur blog auront tôt ou tard remarqué qu'il y a parfois des retards de chargement dus à Disqus. La solution : Lazyload.

L'idée de base est la suivante : si un point défini est atteint lors du défilement d'une publication, les commentaires sont rechargés. Si un lecteur ne lit pas l'article en entier, les commentaires ne sont pas chargés du tout, ceux qui lisent un article en entier voient les commentaires chargés à temps pour qu'ils soient affichés lorsque la zone de commentaires est atteinte.

Cette approche "Lazyload" est connue pour les images (également utilisée ici sur le blog), car les images non affichées ne sont pas transférées. En adaptant le script Disqus, ce comportement peut également être utilisé pour la zone de commentaires. Il existe différentes approches, mais j'utilise une variante qui nécessite jQuery - pour la fonctionnalité Lightbox, cette bibliothèque Javascript est déjà intégrée, il n'y a donc rien à charger en plus.

Modifier le plugin Disqus

Pour utiliser Lazy Load, le plugin Disqus doit être adapté, plus précisément le fichier disqus-comment-system/comments.php. Le traitement commence dans WordPress en sélectionnant dans le menu "Plugins" le sous-menu "Editor" et ensuite le plugin correspondant dans la liste en haut à droite. Tout à la fin de la comments.php un javascript est intégré, qui est remplacé par le code suivant :

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
 var ds_loaded = false;
 var top = $(".related_post_title").offset().top; // WHERE TO START LOADING

 function check(){
  if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
   ds_loaded = true;
   (function() {
     var dsq = document.createElement('script'); dsq.type = 'text/javascript';
     dsq.async = true;
     dsq.src = 'https://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=<?php echo DISQUS_VERSION; ?>';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
  }
 }

 $(window).scroll(check);
 check();
});
/* ]]> */
</script>

Il est particulièrement important Ligne 5J'ai opté pour "Posts similaires" ou la classe CSS ".related_post_titleLe choix s'est porté sur l'attribut "Cadre", car il se trouve nettement avant la zone de commentaires et nettement après le début du message. Selon le thème, il peut être nécessaire d'utiliser un autre ID (alors précédé de #) ou une autre classe CSS à cet endroit.

Disqus Lazy-Load en pratique

L'avantage de Lazyload est évident : seules les données réellement nécessaires sont chargées. Le temps de chargement des pages s'en trouve amélioré, ce qui peut à son tour présenter des avantages pour Google - et bien sûr une meilleure ergonomie. De plus, comme Disqus ne fonctionne pas sans Javascript, l'utilisation de jQuery ne présente aucun inconvénient supplémentaire.

Mais il y a aussi des inconvénients : ainsi, la reconnaissance de la marque de chargement ne fonctionne pas toujours de manière fiable et avec tous les navigateurs. Il peut donc arriver qu'aucun commentaire ne soit affiché. Ici, sur le blog, je vais d'abord laisser la fonction activée et voir ce que cela donne. Ceux qui souhaitent s'intéresser de plus près à Lazy Load et Disqus trouveront sur le net différents exemples de scripts et d'instructions, par exemple ici ou sur Github.com.