4

sprites CSS ou comment réduire les requêtes HTTP sur le serveur web

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
  • gplus_icon

    twitter_icon

    email_icon

    flattr_icon

  • A ce jour: 1 seule image
  • sprite1

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.

Partager l'article :





fred

"Dire que l'on s'en fiche du droit à la vie privée sous prétexte qu'on a rien à cacher, c'est comme déclarer que l'on se fiche du droit à la liberté d'expression sous prétexte qu'on a rien à dire." Edward Snowden

4 commentaires

  1. Sympa, ça faisait longtemps que je voulais me pencher sur les Sprites RSS.

  2. Au premier abord ce n’est pas très clair le « sprite » CSS, j’ai eu un peu de mal(le dev ce n’est pas trop mon truc…).
    Cependant c’est vrai que c’est très efficasse et sa soulage un peu le serveur! :-)

  3. Non ce n’est pas très clair en effet mais très recommandé. Il y en a qui font leur site avec un sprite de tout leur CSS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *