Sublim.design

Minifier ses fichiers (html, css, js, php) pour augmenter la vitesse de chargement de ses pages

Modifié le 10 novembre 2022

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 rapides pour un meilleur référencement 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.

Une réduction de taille plutôt qu'un véritable protocole de compression

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 compressions 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 [minify online] sur Google affichera bien d'autres résultats.

Php-minify.com

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 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 diagnostique 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 !

Pagespeed.web.dev

MADE IN FRANCE