#1 Réduire le nombre des requêtes http
Une requête http sera envoyée pour chaque élément de votre page. Logiquement, plus vous avez d’éléments (images, scripts, Flash…), plus votre page sera lente à charger. Selon Yahoo, 80% du temps de chargement est imputable au téléchargement des différentes parties de la page. Vous devez donc rationaliser le nombre d’éléments par page, préférer le CSS à l’image dans la mesure du possible et placer les scripts en fin de page.
#2 Réduire le temps de réponse des serveurs
Vous devez viser un temps de réponse inférieur à 200 ms à ce niveau. Nous vous conseillons d’utiliser une solution de monitoring des applications web. Voici quelques pistes :
Yslow : ce logiciel mesure le temps de réponse de vos pages et vous propose des solutions adaptées pour le réduire autant que possible ; PageSpeed Tools de Google : pour mettre en lumière les meilleures actions à entreprendre afin d’améliorer les performances de votre site et ensuite les automatiser.
#3 Activer la compression
Aujourd’hui, près de 90 % des navigateurs supportent le format Gzip qui compresse les pages. Toujours selon Yahoo, la compression en Gzip réduit le temps de chargement de 70%. Configurez votre serveur pour activer la compression :
Apache : utilisez mod_deflate ; Nginx : utilisez HttpGzipModule ; ISS : utilisez Configure http Compression.
#4 Activer la mise en cache du navigateur
À chaque fois que vous vous rendez sur un site, des données seront stockées dans le cache pour gagner en temps de chargement lors de votre prochaine visite. Le temps de sauvegarde sur la mémoire cache dépend de ce que le code de votre site autorise. Ainsi, étendez le temps de sauvegarde à une semaine au minimum (et à un an au maximum). Pour les ressources tierces comme les publicités, une petite journée suffira.
#5 « Minifier » les ressources
Alors bien sûr, le WYSIWYG facilite grandement la construction des pages. Toutefois, cela peut se répercuter sur la propreté du code. Pour le nettoyer, Google recommande :
PageSpeed Insights pour minifier le HTML. Cette extension chrome vous aidera à optimiser la vitesse de chargement sans toucher à l’affichage ; YUI Compressor ou CSSmin.js pour minifier le CSS ; Closure Composure, JSMin, YUI Compressor pour minifier JavaScript.
#6 Optimiser les images
L’optimisation des images répond au triptyque suivant :
Taille : une image plus grande que nécessaire entrainera un temps de chargement supplémentaire et surtout inutile (une image plus large que votre site n’a pas de sens) ; Format : JPEG est la meilleure option (le format PNG est aussi acceptable). Attention aux GIFS démesurés ! Attribut Source : le code HTML d’une image comprend la mention : "">. Veillez à ne pas laisser l’attribut vide, sous peine d’un ralentissement conséquent aux requêtes émises par le navigateur vers le répertoire de l’image.
#7 Nettoyer le CSS
Evitez d’inclure du CSS dans votre HTML (les fameux divs par exemple). Réduisez le nombre de styles pour éviter les duplications de code qui alourdissent votre site. Vous pouvez également combiner vos différents styles par une simple manipulation de copier-coller dans un fichier CSS unique.
#8 Prioriser le contenu "above the fold"
Divisez votre CSS en deux parties : une pour les éléments de la partie supérieure de la page, une autre pour le reste. Cela se traduira par un chargement plus rapide du haut de page. Le visiteur ne se rendra pas forcément compte que la page est encore en train de charger, car il pourra déjà commencer sa navigation par les éléments déjà chargés.
#9 Restreindre le nombre des plugins
Accumuler les plugins peut vite vous jouer des tours. Supprimez tous les plugins inutiles et désactivez ceux que vous n’utilisez que ponctuellement. Vous pouvez également tester la vitesse de chargement de vos pages selon les plugins activés. Cela vous permettra d’identifier ceux qui ralentissent le plus le chargement.
#10 Réduire les redirections
La redirection génère une requête HTML. Ainsi, dans le cas d’un site en responsive, la redirection est inévitable pour les terminaux mobiles. Vous pouvez toutefois limiter l’impact de ces redirections sur la vitesse de chargement. Pour cela, faites une redirection HTTP pour renvoyer les mobinautes directement sur l’URL de la version mobile sans redirection intermédiaire.