Des pages internet légères encouragent les visiteurs à explorer, et à revenir sur le site. Le temps de chargement d'une page web a de ce fait tout intérêt à être optimisée, pour améliorer l'audience. Les différents moyens pour y parvenir sont expliqués en quelques points, inspirés de Google pour les développeurs.

pagespeed

1. Compresser systématiquement

Autoriser la compression avec Gzip ou Delfate pour tout téléchargement de fichier ou d’image.

2. Effacer les lignes de code CSS inutilisées

Les codes de lignes CSS inutilisées retardent le chargement d’une page web. Au cas où des fichiers CSS externes sont nécessaires pour le site, la solution consiste à les trier dans des fichiers et à les diriger vers les pages appropriées.

Les codes CSS inopérants et ceux nécessaires au démarrage sont à répartir dans différents fichiers. Il est préférable de les charger après que le chargement de la page soit achevé.

3. Compacter JavaScript

Compresser les codes JavaScript fait économiser une quantité considérable de données. Le téléchargement se fera alors plus rapidement. Le temps d’exécution et d’analyse des tâches se verront aussi réduits.

4. Compresser le code CSS

Un code CSS compressé présente les mêmes effets que la compression des codes Javascript, et contribuera ainsi à l'accélération du téléchargement.

5. Minimiser le HTML

Pour gagner du temps lors du chargement d’une page, il est conseillé de compresser le code HTML ainsi que les balises telles que <script> ou <style>.

Un code HTML compacté allège indéniablement le réseau. En conséquence de quoi, le chargement, la compression et l’exécution du navigateur se trouvent améliorés.

6. Différer le chargement du JavaScript

Reporter les fonctions JavaScript non nécessaires au démarrage est bénéfique pour les raisons suivantes :

–                     Contribue à la réduction du volume de chargement initial

–                     Améliore la vitesse du temps d’exécution et d’analyse

–                     Avec la possibilité de télécharger d’autres fonctions

Le téléchargement, l’analyse et l’exécution des ressources JavaScript se font au préalable lors du chargement d’une page web, comme cela est le cas pour les feuilles de style.

Voici le code JavaScript qui force les fichiers externes à charger après l’onload de la page, qui est placé entre deux balises <head> :

               <script type="text/javascript">

               // Ajouter un élément script comme fils de body

               function downloadJSAtOnload() {

                 var element = document.createElement("script");

                 element.src = "deferredfunctions.js";

                 document.body.appendChild(element);

               }

 

               // Check for browser support of event handling capability

               if (window.addEventListener) {

                 window.addEventListener("load", downloadJSAtOnload, false);

               }else{ if (window.attachEvent) {

                 window.attachEvent("onload", downloadJSAtOnload);

               }else{ window.onload = downloadJSAtOnload; }

 

               </script>

7. Optimiser les images

Compresser ou formater des images réduit leur volume.

Fireworks dispose de programmes qui sauvegardent les images, sans pour autant léser leur qualité. Ces données incluent parfois des commentaires additionnels et nécessitent une pléthore de couleurs. Pour éviter qu’une image ne prenne davantage de volume, il est recommandé de conserver sa taille initiale.

Une optimisation, basique ou avancée, d’une image consiste à ;

–                     Supprimer tout espace superflu

–                     Minimiser la palette de couleurs

–                     Restaurer au format approprié

 

Pour toute optimisation basique, les logiciels d’édition d’image, à l’instar de GIMP, sont largement accessibles. L’optimisation avancée nécessite une conversion en format JPEG ou PNG. Cela permet un gain de 25 octets ou plus, qui se fait cependant au détriment de la qualité de l’image. Le choix du format est donc déterminant.

Dans la plupart des cas, le format PNG est supérieur en qualité et en taille par rapport au format GIF. C’est pour cela que les utilisateurs d’IE4, de Mac IE 5, d’Opera 3.5.1 et d’autres versions de Safari et Firefox privilégient le format PNG, dont la transparence est acceptée par ces navigateurs. Les versions 4 et 6 d'Internet Explorer ne supportent que 256 couleurs de ce format, alors que les versions 7 et 8, combinés à un filtre d'opacité alpha, approuvent le PNG. GIMP permet de changer ou de créer le format PNG en choisissant le mode « Indexé » à la place de « RGB ».

Le format GIF est utilisé pour du graphisme moins complexe et de plus petite taille, de moins de 10X10 pixels ou de moins de 3 couleurs, ainsi que pour les images contenant une animation. Il est conseillé d'avoir deux versions de l'image, en GIF et PNG, pour en comparer la qualité et  le volume.

Le format JPG est indiqué pour tout style d’image photographique. Les formats BMP et TIFF, volumineux et de qualité appauvrie sont à bannir.

Enfin, l'utilisation d'un compresseur d’image JPEG et PNG est recommandé, notamment OptiPNG et PNGOUT, qui préservent la qualité.

 

8. Redimensionner les images

Redimensionner une image permet d'en réduire son volume. Il arrive qu’une image doive être affichée sous différentes tailles, le redimensionnement se fait dans ce cas en se servant des codes HTML et CSS. Enfin, il est nécessaire de se rappeler que le fait de rétrécir une image de grande taille revient à lui créer des espaces superflus.

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required