Optimiser les performances de son site web

Bienvenue dans cet article, premier d’une longue série, où je vais faire un tour de table des différents moyens d’optimiser et d’accélérer son site web : C’est une série d’articles très générale qui se vaudra quasi-exhaustive.

Sur le chemin, nous verrons les performances, et les différents moyens d’accélérer le chargement et la navigation. Ensuite viendra le référencement, les bonnes et mauvaises pratiques, les trucs qu’on continue à croire même si ça fait 10 ans que google s’en fout, et tout ça.

Puis, pour terminer, nous nous pencherons sur l’ergonomie, la navigation et le contenu, et comment cela peut jouer dans le succès de votre site.

Les performances

Commençons par le début : Les performances. C’est quand même la première chose importante à prendre en compte, dans le sens où naviguer sur un site lent, non réactif, avec des temps de chargement à n’en plus finir ne donne envie que d’une chose : partir. Et faites-moi confiance, Google ne vous fera aucun cadeau à ce niveau-là : Un site lent et non-optimisé perdra bêtement du poids dans les serp.

Pour analyser les performances de votre site, vous avez à disposition pleins d’outils sympas. On va commencer en douceur avec l’incontournable Google PageSpeed Inshight (nouvel onglet).

Cet outil analyse votre site web et vous retourne un score sur 100, ainsi que la liste des problèmes rencontrés du plus grave au moins grave, sur mobile ou desktop.

Exemple : Le résultat de ce blog sur Google Insight

Si vous avez fait l’essai, il y a fort à parier que vous n’obteniez pas le même score, et que plusieurs problèmes remontent. Pas d’inquiétude, on va les prendre un par un, et voir comment les corriger.

Optimiser les images

Je ne sais pas si vous le savez, mais les fichiers image (PNG, Jpeg…) sont trop volumineux par défaut la plupart du temps et contiennent des metadatas inutiles qui les alourdissent encore.

Pour optimiser nos images, je vais considérer que votre site est hébergé sur une distribution linux, et que vous avez un accès en ligne de commande (SSH). Si ce n’est pas le cas, il faudra optimiser les images sur votre ordinateur puis les re-uploader via FTP. Je vous laisserai, le cas échéant, trouver avec google le logiciel le plus approprié selon votre système.

Nous allons utiliser deux logiciels en ligne de commande : OptiPNG pour les PNG, et Jpegoptim pour les Jpeg. Ne perdons pas de temps et installons ces deux logiciels en ligne de commande :

sudo apt-get install optipng jpegoptim

Tout bon ? Parfait. Maintenant, optimisons nos images. Pour cela, nous allons nous placer dans le répertoire contenant nos images (par exemple, pour un wordpress : /home/monsite/www/wp-content/uploads)

Et effectuer les deux commandes suivantes : (suivant la quantité d’images à optimiser, l’opération peut prendre un peu de temps)

find . -iname "*.png" -exec optipng -o5 -strip all {} \;
find . -iname "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

(Pour la deuxième commande, vous pouvez la refaire avec « *.jpeg » si vous avez des images avec l’extension .jpeg au lieu de .jpg).

Vos images sont maintenant optimisées. Pour vous assurer que les nouvelles le seront aussi, vous pouvez relancer ces commandes à chaque fois que vous ajoutez de nouvelles images, ou bien mettre en place un cron (= tache programmée) qui le fera tous les jours, par exemple.

Éliminer les scripts bloquants

Ah, l’erreur « Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison« . Sans doute la plus pénible à gérer : les fichiers css et javascript qui sont placés dans le <head> de votre page, et qui en ralentissent le chargement.

Pour gérer cette erreur, plusieurs solutions s’offrent à nous selon la situation :

  • Mettre le contenu de vos fichiers css et javascript directement dans le head. (Sur wordpress, l’excellente extension gratuite Autoptimize vous permettra de faire cela facilement, ainsi que la plupart des autres techniques citées ici). Recommandé pour les sites dont le ratio pages vues par visite est faible, non recommandé dans le cas contraire.
  • Inclure les fichiers javascript et css juste avant la fin du </body>, au lieu de les inclure dans le <head>. (Attention : cette technique peut entraîner un FOUC (La page s’affiche sans style pendant quelques millisecondes avant que le CSS ne se charge. J’expliquerai comment parer à ce problème ci-dessous).
  • Utiliser l’attribut « defer » dans les inclusions css et javascript : cet attribut diffère le chargement de ces ressources à la fin du chargement de la page (Cette technique peut également entraîner un FOUC
  • Utiliser l’attribut « async » dans les inclusions css et javascript : similaire à defer, async va quant à lui rendre asynchrone le chargement des ressources. (Et rebelote, FOUC aussi)

Voilà à quoi ressemblerait l’utilisation des attributs async et defer :

<link href="style.css" rel="stylesheet" media="screen" defer>
<link href="style.css" rel="stylesheet" media="screen" async>

Comment combattre les fouc ? Très simplement. Pour éviter cet effet visuel gênant, vous pouvez inclure dans votre head avant toute inclusion css le code suivant (qui aura pour effet de mettre un bloc prenant tout l’écran, au dessus de tous les autres, de la couleur de votre arrière plan) :

<style>
    body:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: #333; // La couleur d'arrière plan de votre site
        z-index:999
    }
</style>

Et ensuite, pour cacher ce bloc lorsque le css est chargé, insérez ce code à la fin de votre CSS :

body:before {
    display: none!important;
}

Notez que vous pouvez aussi remplacer le body:before par un div avec un #id ou une .class quelconque.

Exploiter la mise en cache du navigateur

Il s’agira ici d’indiquer au navigateur qu’il peut mettre en cache les ressources afin de s’éviter de les recharger à chaque fois. Je vous montre la manip’ pour Apache, car c’est le plus courant.

Il faut commencer par activer le mode header si ce n’est pas déjà fait. Connectez-vous en SSH et exécutez la commande suivante :

sudo a2enmod headers

Suivi de

sudo service apache2 restart

Ensuite, ouvrez le fichier .htaccess à la racine de votre site, ou créez-le s’il n’existe pas. Puis, mettez ceci à l’intérieur :

<IfModule mod_headers.c>
    <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
</IfModule>

Votre page envoie maintenant les bonnes en-têtes pour indiquer au navigateur de garder en cache les fichiers dont le type correspond à ceux cités dans le <FileMatch> pendant 2592000 secondes, soit un mois. Vous pouvez modifier cette valeur au besoin.

Autoriser la compression

Lorsque votre visiteur charge votre page, il doit charger la page html, ainsi que les différentes ressources (images, css, javascript…). Eh bien croyez-le ou non, mais il est possible de demander à apache (ou les autres) de compresser ces ressources, les envoyer et indiquer au navigateur de les décompresser après réception. Cette technique simple à mettre en place peut économiser jusqu’à 70% sur la taille des ressources, et accélérer drastiquement le chargement de la page. C’est donc non négligeable.

Alors, comment fait-on ? On commence par activer le module deflate sur apache. Toujours en ligne de commande :

sudo a2enmod deflate

Suivi de

sudo service apache2 restart

Ensuite, ajouter le code suivant à votre fichier .htaccess

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Et c’est tout bon, les fichiers des types ci-dessus seront compressés. On se rapproche des 100 points 🙂

Réduire la taille des ressources HTML, CSS ou JS

Vous aurez cette erreur si votre page contient du HTML, ou fait appel à des ressources CSS et JS trop dispersées. La solution à ce problème est simple, il vous suffit de compresser et minifier vos fichiers css et javascript en un seul fichier. De nombreux outils en ligne existent pour cela, je vous invite donc à taper « compress and minify online » dans google pour en trouver.

Notez que si votre site tourne sous wordpress, le plugin « Autoptimize » dont j’ai déjà parlé peut s’occuper de cela tout seul (y compris compresser votre html).

Conclusion

Voilà, on a fait le tour des principaux points à mettre en place pour optimiser son site internet. Et quand je dis qu’on a fait le tour, je veux dire qu’on commence à peine ! En effet, il reste de nombreux points plus avancés à voir ensemble, ainsi que les bonnes bases du référencement, et quelques secrets d’optimisation maison. Mais ce sera pour de prochains articles. D’ici là, prenez soin de vous et n’hésitez pas à faire un retour dans les commentaires au besoin.

Sources

Google PageSpeed Insight

Adam Écrit par :

Développeur web et webdesigner en Freelance passionné de code et de design. Autodidacte et amoureux de la connaissance, je suis curieux et passe mon temps à apprendre de nouvelles choses, que j'ai envie de vous faire partager !

Soyez le premier à commenter

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *