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.
1. Compresser/minifier systématiquement le code pour alléger le poids des ressources téléchargées sur le poste de l'internaute
Autoriser la compression avec Gzip ou Deflate 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. Minifier le code JavaScript pour alléger le poids des scripts téléchargés sur le poste de l'internaute
Compresser, minifier 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, minifier 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.
- Le format JPG est indiqué pour tout pour les images de type photographique.
- Le format PNG est conseillé pour les images à fond transparent. La partie transparente ne coûte rien en terme de poids (0 octet), en revanche, ce format est plus volumineux que le JPG.
- Le format WEBP est un format récent et pas forcément compatible avec tous les navigateurs - c'est aujourd'hui le meilleur format pour le web. Il est d'ailleurs fortement recommandé par Google.
- Les formats BMP et TIFF, volumineux et de qualité médiocre 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 vos images avant la mise en ligne pour les diffuser dans leur taille originale
Redimensionner une image permet d'en réduire son poids. 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/CSS. Mais rappelez-vous que si vous redimensionnez l'image pour l'afficher dans l'espace qui lui est réservé dans le bloc HTML, sachez que vous pourriez gagner de précieux octets - peut-être auriez-vous pu la réduire davantage.
Enfin, lorsque vous pensez que vous avez fait le maximum pour optimiser votre site, vous pouvez le passer au crible avec l'outil "lighthouse" qui est une extension à installer sur Google Chrome.