Compresser les fichiers de son site internet (html, css, js, php) pour augmenter la vitesse de chargement de ses pages et améliorer le positionnement
Modifié le 14 février 2024
Sommaire
- Créer des pages web qui se chargent rapidement pour un meilleur référencement naturel (SEO)
- La minification d'un fichier web désigne un processus de réduction de taille qui repose sur la suppression des caractères inutiles
- Comment minifier les fichiers de son site web
- Un travail de compression à tous les niveaux
- Utiliser PageSpeed Insights pour tester les performances techniques de son site web
Le terme minify désigne le processus de compression d’un fichier pour le rendre plus léger et plus rapide à charger. En français, on parlera plutôt de minification. Malgré une vitesse de connexion toujours plus élevée avec le déploiement massif de la fibre et de la 5G, il reste important, même en 2022, de concevoir des sites web dynamiques et réactifs. En cas de chargement trop long, l’utilisateur risque d’abandonner sa requête et d’aller rechercher son information sur un site concurrent.
Créer des pages web qui se chargent rapidement pour un meilleur référencement naturel (SEO)
Plus que jamais, la vitesse de chargement d’une page est devenue un critère important pour un bon référencement.
Google utilise en effet des scripts autonomes, les Googlebots, qui parcourent le web de lien en lien, à la recherche de nouvelles pages ou de nouveaux contenus. Ces robots d’indexation visitent des millions de sites par jour et passent très peu de temps sur chaque URL, d’où l’importance de répondre rapidement aux requêtes d’indexation Google avant qu’il ne passe à la page suivante.
Aussi, en optimisant son code et toutes les ressources externes d’une page (feuilles de style, Javascripts, images, polices de caractère...) on envoie un message positif à Google, on l’informe que le site a été bien réalisé et que l’expérience utilisateur, la fameuse UX, a été respectée.
En faisant cet effort d’optimisation, Google va augmenter la note du site, le Rank. Cet indicateur permettra à la page d’être mieux positionnée dans les résultats de recherche et d’avoir plus de chance d’être consultée.
La minification d'un fichier web désigne un processus de réduction de taille qui repose sur la suppression des caractères inutiles
La compression réalisée lors d’une minification est différente d’une compression zip (ou rar, gzip...) qui propose plutôt l’archivage (un seul fichier qui en contient plusieurs) et la compression des données grâce à un algorithme complexe (diminution de l’espace occupé) sans perte de qualité. Dans le cadre d’une minification, on parle plutôt de réduction , car le système va simplement supprimer tous les caractères inutiles pour réduire la taille du fichier : certains espaces, les sauts de ligne, les tabulations, les balises de commentaires du développeur... Il est possible de minifier plusieurs formats de fichiers: html, js, css, php, le gain d’espace atteint environ 20%.
Example d’un code HTML avant minification (335 caractères) :
<html>
<head>
<title>Hello World</title>
<style>
body {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #0088ff;
}
h1 {
position: relative;
with: 100%;
font-site: 32px;
Color: #ffffff;
}
</style>
</head>
<body>
<?php
echo "<h1>/Hello world</h1>";
?>
</body>
</html>
Après minification, il se présente sous la forme suivante avec un total de seulement 232 caractères. Le code minifié est plus difficile à lire et à comprendre, il faut donc garder l’original de ses fichiers pour permettre d’éventuelles interventions de codage.
<html><head><title>Hello World</title>
<style>body{width:100%;margin:0;padding:0;
background-color:#08f}h1{position:relative;
with:100%;font-site:32px;Color:#fff}</style></head>
<body><?php echo"<h1>/Hello world</h1>";?>
</body></html>
Comment minifier les fichiers de son site web
De nombreux outils en ligne permettent la compression des fichiers. Ils sont généralement gratuits et parviennent à des résultats plus ou moins identiques. Le site www.php-minify.com a la particularité de compresser tous les formats de fichiers web: php, html, css et js. La requête
Un travail de compression à tous les niveaux
La compression GZIP par exemple est une optimisation serveur qui consiste à compresser la page côté serveur tandis que la décompression s’effectue dans le navigateur, côté client. Particulièrement efficace, elle atteint un taux de compression d’environ 70 à 90% ! Les sites générés avec Sublim.design utilisent le protocole de compression GZIP !
La compression des images est également très importante. Dans un premier temps, il faut choisir le bon format (jpg, gif, svg ou webp) selon l’usage. Ensuite, il convient d’optimiser la taille du fichier grâce à un logiciel de traitement d’image comme Photoshop.
... tout ça fera l’objet d’un autre article 😉
Utiliser PageSpeed Insights pour tester les performances techniques de son site web
PageSpeed Insights, est un outil proposé par Google pour tester la vitesse de chargement de son site web. Il suffit de saisir l’URL d’une page pour accéder à un diagnostic très complet sur les points forts et les éléments à corriger pour améliorer les performances. Les sites web réalisés avec Sublim.design obtiennent un score souvent supérieur à 80 sur 100 !