Optimisation Web : Réduisez de 2 secondes le chargement de votre site Internet

Vous utilisez les boutons de partage Facebook, Twitter et Google+ sur votre site Internet ?

Vous trouvez que ces boutons sont trop gourmands en ressources et qu'ils alourdissent votre site Internet malgré les chargements "asynchrones" des fichiers Javascript ?
Cet article présente une solution pour charger les scripts des boutons de partage sociaux seulement lorsque cela est nécessaire.
Après une petite analyse sur ce blog, le chargement des 3 boutons de partage Facebook, Twitter et Google+ requièrent 33 requêtes et 1.50s de temps de traitement par le navigateur.

![network-stats.jpg](

Voici une solution faite maison et basée sur un "popover" du framework Twitter Bootstrap pour charger les scripts seulement lorsque l'utilisateur souhaite partager le contenu.

Le code HTML du lien permettant de déclencher le popover Twitter Bootstrap est très simple à mettre en place, il faut juste faire attention aux attributs data-url et data-text , ce sont des données importantes qui seront ensuite fournies aux boutons de partage sur les réseaux sociaux.

 <button class="btn share-button" data-url="http://www.monarticle.com" data-text="Le titre de mon article">
          Partager cet article
</button>

Enfin, voici la fonction Javascript permettant d'initialiser les boutons de partage et l'intercepteur JQuery permettant de détecter le clic sur le bouton déclaré précédemment.
Au premier clic sur le bouton, une popover s'affiche avec les différents boutons. Les librairies Javascript externes sont alors chargées, elles sont ensuite réutilisées à chaque nouvelle demande de partage sur la même page.

// On document ready ...
$( document ).ready( function() {

function initShareButton(){
        //Chargement de Twitter
        if (typeof (twttr) != 'undefined') {
                twttr.widgets.load();
        } else {
                Modernizr.load('//platform.twitter.com/widgets.js');
        }

        //Chargement de Google+
        if (typeof (gapi) != 'undefined') {
                $(".g-plusone").each(function () {
                        gapi.plusone.render($(this).get(0));
                });
        } else {
                 Modernizr.load('//apis.google.com/js/plusone.js');
        }
        //Chargement de Facebook
        if (typeof (FB) != 'undefined') {
                FB.init({ status: true, cookie: true, xfbml: true });
        } else {
                Modernizr.load({
                load:'http://connect.facebook.net/en_US/all.js#xfbml=1',
                complete: function(){
                        FB.init({ status: true, cookie: true, xfbml: true });
                }});
        }
}

$(".share-button").popover({
        html:true,
        placement:"bottom",
        title:"Partagez cet article",
        trigger:"click",
        content:    function(){
        var url = $(this).attr("data-url");
        var text = $(this).attr("data-text");
        return 'Sur Twitter : <a href="https://twitter.com/share" class="twitter-share-button" data-url="'+url+'" data-text="'+text+'" data-via="ltoinel" data-lang="fr" data-dnt="true">Tweeter</a><br/>Sur Google+ : <div class="g-plusone" data-size="medium" data-href="'+url+'"></div><br/>Sur Facebook : <div class="fb-like" data-href="'+url+'" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>';
    }
});

$(".share-button").click(function(){
        initShareButton();
});
}

L'énorme avantage de ce hack est que vos pages sont beaucoup plus légères à charger. Vous faites économiser aux navigateurs de vos visiteurs de nombreuses requêtes HTTP qui ne sont pas forcement utiles. Enfin, le design de votre site n'est pas pollué par les boutons de partage multicolores

L'inconvénient majeur de la solution est que le visuel du bouton de partage est différent du visuel habituel connu par vos visiteurs et qu'il est nécessaire de réaliser un clic supplémentaire pour permettre à vos visiteurs de partager du contenu ... On ne peut pas tout avoir ;-)

---