+ 33 6 28 36 29 41 agathe.brusset@gmail.com

Comment optimiser la performance de son site vitrine ?

par | 17 Août 2020

Nous l’avons vu, afin de prendre la décision de refaire son site vitrine, il est important de prendre en compte certains indicateurs, dont celui de la performance technique. Le site GTmetrix nous donne un score de performance, selon deux outils : PageSpeed (par Google) et YSlow (par Yahoo!).

En plus des scores généraux, GTmetrix détaille tous les critères de performances et donne des recommandations pour améliorer son score. On le rappelle, un bon score à ces tests peut vous sauver votre SEO !

Ainsi, faites le test sur Gtmetrix : entrez le nom de votre domaine et cliquez sur « Analyze ». Mettez vos scores en commentaires et gardez-les au chaud pour pouvoir les comparer à votre nouveau score !

De mon côté, voici une première optimisation que j’ai faite pour un client : 

Avant

Après

Aujourd’hui, je vais détailler cette optimisation :

PageSpeed

Yslow

Defer parsing of JavaScript

Qu’est-ce que c’est ?

Pour charger une page, le navigateur doit analyser le contenu de toutes les balises <script>, ce qui ajoute du temps supplémentaire au chargement de la page. En minimisant la quantité de JavaScript nécessaire pour rendre la page et en reportant l’analyse du JavaScript inutile jusqu’à ce qu’il doive être exécuté, vous pouvez réduire le temps de chargement initial de votre page.

Qu’est-ce qu’on fait ?

On installe un plugin comme Autoptimize (il y a également Speed Booster Pack ou encore W3 Total Cache) que l’on configure comme ceci :

 

Serve scaled images

Qu’est-ce que c’est ?

La diffusion d’images de taille appropriée peut enregistrer de nombreux octets de données et améliorer les performances de votre page Web, en particulier sur les appareils de faible puissance (par exemple, mobiles).

Qu’est-ce qu’on fait ?

On installe le plugin Optimole, qui sert les images au format nouvelle génération WebP depuis un CDN d’Amazon, en lazy-load.
Quand ce n’est pas suffisant, on identifie les images à retailler puis on les modifie depuis la librairie d’images.

Specify a cache validator

Qu’est-ce que c’est ?

Cette alerte est dûe à l’absence d’en-têtes de mise en cache HTTP qui doivent être inclus dans chaque réponse du serveur d’origine, car ils valident et définissent la longueur du cache. Si les en-têtes ne sont pas trouvés, une nouvelle requête pour la ressource sera générée à chaque fois, ce qui augmente la charge sur votre serveur.

Qu’est-ce qu’on fait ?

La première chose à noter à propos de cet avertissement est que vous ne pouvez résoudre ce problème que pour les demandes qui se trouvent sur votre serveur. Si vous avez des demandes tierces pour lesquelles vous voyez cette alerte, vous ne pouvez rien faire car vous n’avez pas le contrôle de leurs serveurs Web !

Il faut modifier le fichier .htaccess, dont nous avons déjà parlé, il peut être modifié depuis la base de donnée chez votre hébergeur ou depuis le plugin Yoast SEO, dans la section « Outils » :

Pour la durée de vie du cache :

# BEGIN browser caching
<IfModule mod_expires.c>
ExpiresActive On

#Images
ExpiresByType image/jpeg « access plus 1 year »
ExpiresByType image/gif « access 1 year »
ExpiresByType image/png « access plus 1 year »
ExpiresByType image/jpg « access plus 1 year »
ExpiresByType image/webp « access plus 1 year »
ExpiresByType image/x-icon « access 1 year »
ExpiresByType image/svg+xml « access plus 1 year »

# Video
ExpiresByType video/mp4 « access plus 1 year »
ExpiresByType video/mpeg « access plus 1 year »
ExpiresByType video/ogg « access plus 1 year »
ExpiresByType video/webm « access plus 1 year »

# Fonts
ExpiresByType application/vnd.ms-fontobject « access plus 1 month »
ExpiresByType application/x-font-ttf « access plus 1 month »
ExpiresByType application/font-woff « access plus 1 month »
ExpiresByType application/font-woff2 « access plus 1 month »
ExpiresByType font/opentype « access plus 1 month »

# CSS, JavaScript
ExpiresByType text/css « access 1 year »
ExpiresByType text/x-javascript « access plus 1 month »
ExpiresByType application/javascript « access plus 1 month »

# Others
ExpiresByType text/html « access 1 month »
ExpiresByType audio/ogg « access plus 1 year »
ExpiresByType application/atom+xml « access plus 1 hour »
ExpiresByType application/rss+xml « access plus 1 hour »
ExpiresByType application/pdf « access 1 month »
ExpiresByType text/x-component « access plus 1 month »
ExpiresByType application/x-shockwave-flash « access 1 month »

ExpiresDefault « access 1 month »

</IfModule>
# END browser caching

 

Pour les entêtes Cache-Control :

# BEGIN Cache-Control Headers
# Images
<ifModule mod_headers.c>
<filesMatch « \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ »>
Header set Cache-Control « max-age=604800, public »
</filesMatch>

 

# HTML
<filesMatch « \.(x?html?|php)$ »>
Header set Cache-Control « private, must-revalidate »
</filesMatch>

</ifModule>
# END Cache-Control Headers

Agathe Brusset
UX designer avec de nombreuses compétences en web-design et communication digitale, je vous accompagne dans la refonte de votre site vitrine, de la création de votre identité de marque à la publication de votre nouveau site en passant par les tests utilisateurs, faites appel à moi pour vos prochains projets ! En attendant, bonne lecture 🙂

Besoin d'aide pour la refonte de votre site ?

Faites-vous accompagner par une spécialiste du web design ! Je vous guide et vous conseille sur le meilleur moyen de réaliser votre projet de modernisation de votre présence en ligne, n’hésitez pas à me contacter avec les détails de votre projet !

0 commentaires

Soumettre un commentaire

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

CAPTCHA


Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.