Optimiser les sites et accelerer la vitesse de chargement des pages web

Les pages de votre site se chargent lentement ? Il faut essayer de l'optimiser pour accélérer sa vitesse de chargement de pages . Imaginez vos visiteurs qui seront obligés d'attendre des secondes , chaque fois ou ils visitent votre site .Mais c'est pas le cas pour les crawler , qui ont des milliard de pages à indexer (Mille milliards de page selon Google :d ) .Malheureusement le site ne sera pas bien référencé .
Si c'est le cas pour vous , essayez de réduire le temps de chargement de vos site .
Quelques conseils que vous devez suivre :

• Nettoyer et optimiser le code Html

Optimiser le code source est important mais souvent négligé , ça représente la première étape dans l'amélioration de site Web et de ses performances.
L'élimination des espaces , des tabulations, des nouvelles lignes, ainsi que les commentaires,peut se traduire par de modestes économies de 10 à 15 pour cent .
Un logiciel gratuit HTML Tidy vous permet de vérifier et d'optimiser le code HTML .

• Réduire le nombre et la taille des requêtes HTML:

C'est important ce conseil , car le chargement de requêtes successives réduit la vitesse de chargement.Chaque requête HTML peut contenir des éléments :CSS, Javascript ,des graphiques..Je parle pas du code HTML , mais des éléments que j'ai mentionné , car chaque requête correspond à un temps de chargement relativement long , surtout lors d'une succession de reqêtes .

• Compacter et compresser JavaScript et CSS

Bien sûr le site va contenir des fichiers CSS et Java Script . On peut les concaténer dans un seul fichier , pour avoir plus de performances lorsque le navigateur charge ces fichiers .
Csstidy est un outil open source qui permet d'optimiser le CSS , vous pouvez le télécharger ici

• Compresser le Html

Sachant que le taux de compression du Html est élevé ,que le protocole Http supporte la compression depuis la version 1.0 et que la compression est supporté par la majorité les navigateurs ; cette technique est trés efficace .
Dans ce contexte l'algorithme utilisé est le Gzip :

un logiciel libre de compression qui a été créé pour remplacer le programme compress d'Unix.
gzip est basé sur l'algorithme deflate, qui est une combinaison des algorithmes LZ77 et Huffman. 'Deflate' a été développé en réponse à des problèmes de brevet couvrant LZW et autres algorithmes de compression, limitant ainsi les utilisations possibles de compress et autres programmes d'archivage populaires.

Source :Wikipédia

Ainsi l'utilsation du module Apache mod_deflate sert à compresser le contenu avant qu'il soit délivré au client.
Pour utiliser mod_deflate avec Apache 2.x , ouvrez le fichier httpd.conf dans le répertoire /etc/httpd/conf/, et vérifiez qu'il ny a pas le caractère "#" devant les lignes :

AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddOutputFilterByType DEFLATE text/php text/HTML text/txt (Sert à compresser que les pages HTML de type .txt .html ou .php )

• Validation du Html et Css

N'oubliez pas de vérifier les Mark-up HTML, XHTML, SMIL, MathML : ici
N'oubliez pas de vérifier vos feuilles de style CSS et vos documents HTML stylés avec CSS : ici

• Optimisation des images :

Acéelérez l'affichage des images à l'aide de width et height dans la balise img.En effet si l'image à les dimensions (20 , 20) , placez la balise img comme suit :

<IMG SRC="Img.gif" height=20 width=20 / >

Si par contre vous placez pas les dimensions dans la balise img , le naviguateur sera obligé de charger l'image pour calculer ses dimensions , et pour la placer dans son endroit en prenant compte des éléments voisins.Ça coûte du temps.

Si vous avez des images volumineuse qui doivent être publiés , pensez à

1. Réduire le nombre de couleurs .
2. Réduire le facteur de qualité.
3. Redimensionner l'image.

Vous pouvez utiliser le freeware , Image Resizer(lien de téléchargement) , très simple à utiliser ; il permet de réduire la taille de l'image , de modifier ses dimensions et d'autres options.

• Utiliser des stratégies d'optimisation de cache:

  
  

L'utilisation du cahing aura de bonnes effets sur la vitesse du loading des sites,il faut donc l'activer et savoir bien choisir des dates de modification et d'expiration .
Un article qui comprte 5 solutions d'optimisation , peut vous être utile .
Journaldunet s'est occupé aussi des solutions de caching (en Php4) :

Les types de solutions existants

Vous l'avez noté, plusieurs solutions de caching sont donc disponibles pour un site conçu en Php. Celles-ci permettent, en influant plus ou moins sur la charge CPU ou la consommation de mémoire, d'obtenir pour une même configuration matérielle une disponibilité du serveur web supérieure à l'origine.
[......]
Trois catégories sont susceptibles d'accueillir nos solutions :
- Les optimiseurs
- Les caches de code compilé (opcode)
- Les caches de page

Zend Optimizer constitue à lui seul la première catégorie. Distribué gratuitement par Zend, ce produit a deux actions principales : optimiser le code intermédiaire compilé par le "Zend Engine", et permettre l'exécution du code crypté par le "Zend Encoder" (Produit commercial permettant le cryptage du code source). A l'instar d'un compilateur classique, C/C++ par exemple, "Zend Optimizer" réorganise le fichier qu'on lui soumet afin de rendre son exécution plus rapide. Cela est particulièrement vrai pour les scripts complexes comme nous le verrons plus tard.

Seconde catégorie parmi les solutions d'optimisation disponibles, les caches de code compilé. On retrouve ici les produits "Zend Cache", "Alternative Php Cache (ou APC)", et "Bware AfterBurner Cache".
L'existence de ces produits se justifie par le fait que par défaut Php génère pour chaque page appelée un code intermédiaire (semblable au bytecode java par exemple), fruit de la compilation du script. Répétée "n" fois, cette procédure est bien évidemment coûteuse en ressources pour le serveur web.
[.....]
Dernière catégorie représentée, les caches de pages. Basé sur Phpcache, "jpcache" est de ceux-là. Ce type de solution est le plus contraignant à mettre en place puisqu'il faut insérer un script spécifique dans chacune des pages que l'on souhaite optimiser. Cette catégorie de produits stocke dans un fichier ou une base de données (moins performant) les "sorties" générées par les scripts Php (output buffering) et renvoie un flux compressé ou pas vers le navigateur selon que celui-ci supporte ou non la compression. "jpcache" utilise à ce titre "gzip".
[......]

• Http et Https:

Ce qu'il faut connaître ici , est que le Https = Http + SSl , le SSl :s'occupe de tous ce qui est cryptage , clés , certificats . C'est alors une autre couche , qui s'ajoute et ajoute plus de charge et plus de temps lors de la connexion .Il faut donc limiter l'utilisation du Https et ne pas abuser , pour un site qui offre des services payants (par exemple) , Https , ne doit être présent que sur quelques pages , les pages d'authentification , de transaction ..
Il' y a des services payants tel que le propose Akamai;Citrix; riverbed.... , pour accélérer les application sur le réseaux étendu et d'améliorer en toute sécurité les performances et la fiabilité des transactions lors de l'utilisation des protocoles Https et du SSL.

• Quelques bonnes pratiques:

1. Placez CSS en début de la page (balise header).
2. JavaScript au contaraire , doit être placé en bas de la page .
3. Il est recommandé de réduire les dimensions des images publiés.
4. Les fichier JPEG et GIF sont moins volumineux que les fichier BMP , les fichiers PNG sont moins volumineux que les fichier JPEG .
5. Ne placez pas trops de photos , de vidéos et de graphique dans une seule page .Si c'est le cas , pensez à les mettre en fin de la page.
6. Essayez de réduire la taille de chaque pages à 30 Kb (sans compter JS) , même si difficile il faut réduire le maximum possible
7. Faites patienter vos visiteurs pendant le chargement de votre page, ce script , que j'ai vu sur le site editeurjavascript affiche un texte d'attente jusqu'à ce que la page soit totalement chargée (compatible Internet explorer 5+) , placez le juste après la balise

<body>

Vous pouvez changer la taille en pixels du cadre où s'affiche le texte , la couleur de la bordure ,la couleur du fond de la page d'attente ,la couleur du fond de la cellule de texte ,la couleur du texte

• Tester la vitesse d'affichage/chargement de votre site/blog:

Utilisez cet outil gratuit , qui permet de vous donner le temps exact de chargement de chaque élément du votre site/blog : image , script , graphique ....

• Quelques liens à voir :

1. performance.survol.fr :Quelques mots pour des sites web rapides
2. Optimiser les performances d’un site web en vidéo
3. Un tutorial pour optimiser les images
4. Compacter JavaScript, CSS
   
5. Accélérer le chargement de JavaScrpit (en)
   
6. Guide du caching Apache 2.x (en)
   
7. Le htacess caching (en)
   

web-01