Optimisation du nombre de requêtes, utilisation de sprites… Le traitement d’images peut être avantageusement complété par des pratiques pertinentes concernant l’intégration HTML.
Dans le précédent article, Optimiser l’utilisation des images d’un site web : traiter les images, nous avons évoqué cinq axes de travail pour un cure d’amaigrissement majeur du poids de votre site.
La valeur de ce travail peut être avantageusement complétée par des pratiques pertinentes concernant l’intégration HTML, que nous pouvons organiser autour de trois chapitres majeurs. Voyons cela ensemble.
Dans cette partie, nous n’allons pas chercher à optimiser le poids des images, mais plutôt à rendre le comportement du site plus véloce et augmenter sa réactivité.
Les bonnes pratiques nous recommandent de toujours spécifier les attributs height et width, ainsi que, si nécessaire, hspace et vspace (à défaut d’une gestion CSS avec margin et padding) pour les balises <IMG>.
Ici, l’objectif est, d’une part de faciliter le travail du navigateur en lui donnant le maximum d’instructions exploitables et, d’autre part, éviter les phénomènes dits de reflow qui provoquent un re-calcul de l’affichage de la page.
Moins de travail de déduction des caractéristiques d’affichage manquantes et moins de calcul du navigateur signifient un affichage plus rapide et une meilleure réactivité de la page durant son chargement ou son redimensionnement.
La majorité des navigateurs (malheureusement, exception faite d’Internet Explorer) est aussi capable de traduire une déclaration d’image codée en base 64 si elle est directement spécifiée dans le code HTML ou CSS.
Nous savons que, par défaut, les standards Internet limitent les accès à deux chargements simultanés, augmentant ainsi les temps de latence pour des pages constituées d’un grand nombre de toutes petites images. Avec une déclaration inline, vous supprimez les multiples requêtes au profit d’une seule.
Par exemple, pour une image de 20×20 pixels, se chargeant en 0,6 seconde, l’encodage en base 64 produit environ 1500 octets de données, soit un temps de chargement de 0,7 secondes pour 10 images. Si 10 images de ce type sont utilisées dans la page, nous observons 4 périodes de latence d’environ 0,6 secondes. Au final, avec une conception traditionnelle, nous pouvons observer jusqu’à 3 secondes de temps de chargement, pour seulement 0,7 avec une déclaration inline.
Pour réaliser l’encodage base 64, vous pouvez aussi utiliser un service en ligne, comme par exemple Motobit – Base 64 encoder-decoder ou http://www.greywyvern.com ou encore préférer l”utilisation d”un outil Windows sur votre poste, comme celui développé par John Dyer, Css Image Embedder.
L’utilisation de sprites est aussi une excellente technique de réduction du nombre de requêtes de chargement. L’idée est de regrouper le maximum d’images en une seule pour ensuite utiliser les propriétés CSS afin d’en afficher qu’une partie, en fonction du besoin.
Une fois ce regroupement réalisé, vous pouvez utiliser deux techniques, la plus commune (et plus simple) utilisant la propriété CSS background et son positionnement dans une balise DIV de dimension définie, la deuxième s’appuyant sur le clipping d’image.
01 <style>
02 .clipDiv {
03 position:relative;
04 overflow:hidden;
05 width:32px; /* la taille de l’icone */
06 height:32px;
07 }
08 .faceBook {
09 position:absolute;
10 top:0;
11 left:0;
12 clip:rect(0 32px 32px 0);
13 }
14 .linkedIn {
15 position:absolute;
16 top:0;
17 left:-32px;
18 clip:rect(0 64px 32px 32px);
19 }
20 .Rss {
21 position:absolute;
22 top:0;
23 left:-64px;
24 clip:rect(0 96px 32px 64px);
25 }
26 .viadeo {
27 position:absolute;
28 top:0;
29 left:-96px;
30 clip:rect(0 128px 32px 96px);
31 }
32 </style>
33
34 <body>
35 <div class=”clipDiv”>
36 <img class=”faceBook” src=”img/optimisation-image-5.png” />
37 </div>
38 <div class=”clipDiv”>
39 <img class=”linkedIn” src=”img/optimisation-image-5.png” />
40 </div>
41 <div class=”clipDiv”>
42 <img class=”Rss” src=”img/optimisation-image-5.png” />
43 </div>
44 <div class=”clipDiv”>
45 <img class=”viadeo” src=”img/optimisation-image-5.png” />
46 </div>
47 </body>
Avec toutes les informations présentées, vous pouvez dès maintenant (avec plus ou moins d’huile de coude suivant que vous soyez décideur, chef de projet, amateur éclairé ou débutant) rendre votre site véritablement plus véloce et réactif en appliquant rigoureusement un plan d’actions établi sur six axes :
Il n’est pas rare de réduire le volume des éléments graphiques de plus de 75%, ce qui est, avouons-le, un gain plus que substantiel.
Et n’oubliez pas : à chaque seconde de chargement, c’est 10 internautes qui fuient !
Dans un article à suivre (très rapidement), j’évoquerai un autre aspect de l’optimisation du temps de chargement des pages d’un site web, sous un angle exclusivement technique en parlant de la structure et de la conception de la page ainsi que de la gestion des dépendances JavaScript et CSS.
Dans le précédent article, Optimiser l’utilisation des images d’un site web : traiter les images , nous avons évoqué cinq axes de travail pour un cure d’amaigrissement majeur du poids de votre site. La valeur de ce travail peut être…
Je gère mes abonnements push
Les informations recueillies sont destinées à CCM Benchmark Group pour vous assurer l’envoi de votre newsletter.
Elles seront également utilisées sous réserve des options souscrites, par CCM Benchmark Group à des fins de ciblage publicitaire et prospection commerciale au sein du Groupe Le Figaro, ainsi qu’avec nos partenaires commerciaux.
Le traitement de votre email à des fins de publicité et de contenus personnalisés est réalisé lors de votre inscription sur ce formulaire. Toutefois, vous pouvez vous y opposer à tout moment
Plus généralement, vous bénéficiez d’un droit d’accès et de rectification de vos données personnelles, ainsi que celui d’en demander l’effacement dans les limites prévues par la loi.
Vous pouvez également à tout moment revoir vos options en matière de prospection commerciale et ciblage. En savoir plus sur notre politique de confidentialité ou notre politique Cookies.