JQuery : Optimisez le chargement de vos Gravatars !

La rapidité de chargement de votre site internet est un critère important pour votre SEO. Si vous utilisez Gravatar pour afficher des avatars en face de vos commentaires, vous avez certainement du remarquer que vos articles qui contiennent énoméments de commentaires sont extrêmement lents à charger.
Je vous propose dans cet article de charger les gravatars de manière asynchrone afin d'améliorer le temps de chargement de vos pages et améliorer votre SEO.

La première étape consiste à modifier le tag HTML dans le thème de votre site où seront chargés les Gravatars :

<img src="https://www.geeek.org/unknown.jpg" alt="{{tpl:CommentAuthorMailMD5}}" class="gravatar" />

Je fais pointer l'image vers une image par défaut hébergée sur mon site et je place dans l'attribut "alt" le MD5 de l'email de l'auteur du commentaire.

Seconde étape, j'importe dans le header de mes pages le javascript async-gravatars.js localisé ici. Vous devez avoir préalablement chargé Jquery avant d'utiliser cette librairie qui se repose sur Jquery.

<script type="text/javascript" src="https://monsite.com/async-gravatars.js"></script>

La dernière étape consiste à ajouter le code javascript suivant à la fin du header de vos pages HTML. Celui-ci aura en charge le déclenchement du chargement des gravatars à la fin du chargement de la page.

<script type="text/javascript">
jQuery( document ).ready( function() {
    $( '.gravatar' ).async_gravatars( {
        'default_img'   : 'identicon',  // URL ou nom de l'image par dC)faut
        'hash_attr'     : 'alt',   // Nom de l'attribut contenant le Hash MD5 
        'rating'        : 'pg',     // Filtre pour les gravatars 
        'size'          : 64,       // Taille des gravatars demandC)s
        'ssl'           : false     // Utilisation du SSL pour le chargement des Gravatars.

    } );
} );
</script>

Et le tour est joué, vos gravatars seront chargés de manière asynchrone à la fin du chargement de vos pages Web. Vous gagnerez ainsi quelques précieuses secondes de temps de chargement sur vos articles les plus commentés.

(via Josephscott)

---