Suite à la lecture de l’article de Korben, j’ai mis en pratique la mise en place des boutons de partage sans tracking.

Cependant, les notes des tests effectués sur GTmetrix ont sérieusement chutées surtout concernant « Combine images using CSS sprites« , qui sont passées à la note F!
Le message était clair, il fallait que je « sprite » les images de partages!

C’est quoi le sprite?

En gros, le sprite conciste à fournir une seule image au navigateur et n’afficher que les zones prédéfinies dans la feuille de style CSS. Sur cette image on va retrouver toutes les petites images. Donc au lieu de faire des reqêttes serveurs pour chaques images, une fois le sprite mis en place, une seule requếte sera nécessaire.

Illustration, qui explique la situation

• Avant: 4 images affichées









• A ce jour: 1 seule image

Le code CSS

#partage a{
    background-image: url(https://cdn-02.memo-linux.com/wp-content/uploads/2013/10/sprite1.png);
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 52px;
    overflow: hidden;
    text-indent: 20px;
    width: 52px;
}
#google{
background-position:-5px -5px;
}
#twitter{
background-position:-59px -5px;
}
#mail{
background-position:-114px -5px;
}
#flatrr{
background-position:-167px -5px;
}

J’ouvre une seule image qui est: https://cdn-02.memo-linux.com/wp-content/uploads/2013/10/sprite1.png et n’affiche que les zones prédéfinies par les valeurs de background-position.

Le code HTML

Dans la page single.php

<div id="partage">
<a id="google" target="_blank" title="Google +" href="https://plus.google.com/share?url=<?php the_permalink(); ?>&hl=fr" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"></a>
<a id="twitter" target="_blank" title="Twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=memo-linux.com" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"></a>
<a id="mail" target="_blank" title="Envoyer par mail" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>" rel="nofollow"></a>
<a id="flatrr" target="_blank" title="Flattr !" href="https://flattr.com/submit/auto?user_id=Freddy_L&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&description=<?php bloginfo('description'); ?>&language=fr_FR&tags=blog&category=text" rel="nofollow"></a>
</div>

J’appelle ma classe CSS « partage » puis j’affiche seulement chaque zone de l’image prédéfinie dans ma feuille de style via leur id.

Pour faire mes sprites, je me suis inspiré de cet article: netmacom.fr
Pour générer la feuille de style, je me suis aidé du site www.floweringmind.com.