• 06.95.78.29.57
  • contact@inumedia.fr
  • SIRET: 51842009600027
  • Les bureaux sont actuellement fermés
Haut

Optimiser la vitesse son site web

Introduction

L’internaute aime la vitesse, il est, par nature, très impatient. Vous-même vous faites partie de ces personnes. Vous avez une bonne connexion. Vous ne supportez pas que la page soit trop lente à charger. On est loin du temps avec la douce musique de connexion du modem ADSL. A l’époque, on prenait plus de 5 minutes à afficher une page. Maintenant tout doit aller vite.

Que faites-vous lorsqu’un site prend trop de temps à répondre ?

Vous quittez la page !

C’est donc ce qui se passe pour 97% des utilisateurs d’internet.

Vous vous retrouvez donc avec un taux de rebond élevé, un mauvais référencement.

Pourquoi est-ce mal référencé ?

Les critères en terme de SEO (référencement naturel) sont nombreux. Mais le temps de chargement d’une page est un argument que Google aime mettre en avant. Google n’aime pas les sites trop lourds, et quand il n’aime pas ça pèse dans la balance.

Qu’est-ce que le taux de rebond ?

Le taux de rebond correspond au taux de visiteurs qui sont arrivés sur votre site et y en sont repartis sans même avoir voulu le parcourir (ils ne sont restés que sur une page).

  • Un taux de rebond peut être dû à un mauvais référencement ; l’utilisateur arrive sur votre site par erreur. Ce n’était pas l’information qu’il recherchait. Il faudra alors voir votre positionnement sur vos mots clefs par exemple.
  • Il peut également venir d’une vitesse de chargement trop longue. L’internaute s’impatiente et s’en va.

Attention ce n’est pas parce que vous avez un taux de rebond un peu élevé que les éléments ci-dessus ne sont pas bons. Le taux de rebond se situe en moyenne aux alentours de 50%, donc pas de panique si vous tournez autour de ce chiffre.

Peut être que votre utilisateur cherchait des dates d’un événement précis près de chez lui et qu’il a trouvé son information sur votre site.  Il quittera immédiatement la page. Mais sa visite sera considérée comme un taux de rebond alors que votre site aura fait le travail.

Quand doit on s’inquiéter du taux de rebond ?

Au dessus de 70-80%, il faut se demander: pourquoi?? Il vous faudra faire une vérification de vos mots clefs, les requêtes qui ont mené les visiteurs sur votre site. Vous vous assurerez  d’avoir assez de contenu. Vous vérifierez également le temps de chargement. S’il est trop long, quelques petites modifications sont à prévoir pour améliorer  la vitesse de votre site. Nous allons les détailler.

Comment vérifier la vitesse de votre site ?

Personnellement, j’utilise GTMETRIX , ce petit outil rapide teste la vitesse de votre site web. Il vous conseille d’améliorer certains éléments pour gagner en rapidité de chargement

Pour mon exemple, j’ai utilisé le site d’un journal régional.
L’analyse de GTMETRIX nous annonce que la page s’est chargée en 8 secondes. Ceci vous paraît peu, mais dans la course au référencement, c’est déjà trop. Google travaille actuellement avec son plugin AMP sur un affichage instantané.

Actuellement des sites bien optimisés comme awwwards.com s’affichent en 4 secondes.

Comment améliorer la vitesse de mon site ?

Design, images, code, compression… Différents paramètres entrent en compte dans la vitesse de votre site

Le design

Partez sur un design le plus épuré possible, un design minimaliste. C’est devenu à l’heure actuelle une tendance; un design sobre où l’information est directement accessible à l’utilisateur.

Si votre page comporte trop d’animations superflues ou encore trop d’images, elle sera trop lourde à charger.

Si votre CSS peut vous permettre de mettre en place le design en lui même, favorisez-le plutôt que d’utiliser une image. Évitez donc un fond dégradé à partir d’une image qui sera répétée par exemple

Attention cependant à ne pas tomber dans des designs trop minimalistes. Votre site perdrait tout son intérêt pour l’expérience utilisateur qui ne trouverait pas l’information recherchée. Ce dernier quitterait votre site  et vous conduirait sur un taux de rebond élevé.

Optimisez vos images

La vitesse de votre site internet, repose le plus souvent sur vos images. Elles sont la principale cause de ralentissement. Elles doivent être optimisées pour le web et  il faut veiller à n’utiliser que les bonnes tailles au bon moment.

Utiliser les bonnes images

Cette étape est la moins évidente avec l’arrivée du responsive et des écrans HD.

La base étant d’utiliser les bonnes images pour la bonne taille d’écran et la bonne résolution d’écran. Il faut donc éviter de charger une image de 2000px sur un écran de téléphone qui aurait une largeur de 600px par exemple.

Pour les sites statiques, il vous suffira d’utiliser la fonction srcset

 

Votre balise image

<img src=”ma-super-image.jpg” width=”600″ height=”200″ alt=”ma super image non optimisee”>

deviendra donc

<img src=”ma-super-image.jpg” srcset=”ma-super-imagehQ.jpg 2x” alt=”ma super image optimisee”>

On indique donc à notre navigateur de choisir entre des images.

  • Si l’internaute utilise un pc avec un écran rétina, haute définition, on chargera l’image prévue pour la HD grâce au “2x”; dans le cas présent il s’agit de ma-super-imagehQ.jpg
  • Sinon il affichera l’image normale “ma-super-image.jpg”

Comment créer nos images pour le rétina/ écrans HD et pourquoi le faire ?

L’écran HD est par définition en haute définition, si vous ne respectez pas ce ratio, l’image affichée sera nettement moins belle à l’affichage.

Prenons un exemple:

Pour ce café, l’image rétina utilisée pour un mobile de 600 pixels de large devra être 2 fois plus grande (avec 4 fois plus de pixels) que celle utilisée par un écran à définition normale.

Nous allons ensuite compléter notre srcset en lui imposant une taille et en utilisant la balise “sizes”

<img src=”ma-super-image.jpg” srcset=”ma-super-image-1024.jpg 1024w”  sizes=”768vw” alt=”ma super image optimisee”>

J’indique à mon navigateur d’aller piocher l’image de taille 1024 et je lui dit qu’elle devra avoir une largeur de 768px dans la fenêtre.

<img src=”ma-super-image.jpg” srcset=”ma-super-image-320.jpg 320w, ma-super-image-640.jpg 640w” sizes=”200vw” alt=”ma super image optimisee”>

Dans cet exemple je laisse le choix à mon navigateur d’utiliser soit l’image en 640 soit celle en 320 pour occuper un espace de 200px.

Si vous utilisez un iphone avec un écran haute résolution, votre navigateur fera le choix de prendre l’image la plus grande pour avoir un meilleur rendu.

Pour conclure cette partie, vous comprendrez que si vous n’êtes pas sous wordpress mais que vous développez vous-même votre site, il vous faudra faire plusieurs versions de vos images afin de vous assurez que la bonne sera chargée et ne pas impacter sur la vitesse de votre site.

Utiliser les icônes SVG ou les Fonts icons

Les icônes SVG

Plutôt qu’utiliser une image PNG pour vos icônes, tournez vous vers les images SVG.
Ce format est une image vectorielle (donc non pixelisée) qui ne perdra pas de sa qualité peut importe la taille de cette dernière. Il est donc plus simple d’utiliser un même fichier SVG que plusieurs versions PNG de votre icône.

Il a l’avantage d’être beaucoup plus léger également.

Les fonts icons

Il existe plusieurs sites comme fontawesome ou icomoon qui vous permettent d’utiliser des icônes sous forme de polices. Elles ont l’avantage d’être facilement utilisables et très légères puisqu’elles ne sont traitées pas traitées comme des images mais comme une “font”.

C’est la méthode que je préfère utiliser. Le mieux est de créer votre propre font, grâce à icomoon par exemple. Vous pourrez regrouper toutes les icônes que vous souhaitez utiliser et en ajouter des personnalisées.

Je reviendrai plus tard dans un tutoriel pour vous montrer comment utiliser cette technique.

Le “font icon” a juste une limite, on peut l’utiliser pour des choses “basiques” mais appliquer un dégradé de couleur par exemple sur la font est impossible. Il faudra utiliser du SVG dans ce cas.

Optimiser le poids de vos images

Je travaille mon optimisation avant d’intégrer mes images sur le site. Si vous êtes sur des petits sites (hors CMS) avec peu d’images on peut travailler cela manuellement

Dans photoshop

Enregistrez votre image en utilisant l’option « enregistrer pour le web ». Ceci vous permettra d’avoir un fichier plus léger de 50% sans perdre la qualité de votre image.

Pour traiter un dossier complet d’images, vous pourrez lancer une automatisation à partir d’un script. Créez votre script d’enregistrement pour le web et appliquez le sur tout votre dossier à traiter.

Prenez garde cependant à traiter chaque familles d’images ensembles. Si vous appliquez un script JPG à un dossier contenant du PNG, toutes vos images seront transformées en JPG.

Dans GIMP

De base, il n’existe pas d’option dans GIMP prévue à cet effet. Il suffit donc d’ajouter un petit plugin

Pour cela, placez-le dans:

<Utilisateur>/.gimp-X.X/ plug-ins sur Windows

Ou /home/<user>/.gimp/ plug-ins sur Linux

Pour effectuer un traitement par lots, donc une “automatisation d’une action sur plusieurs images”, on passera par le plugin Batch, vous l’installerez en téléchargeant et exécutant le fichier .exe

Batch sera alors disponible dans Fichier > Batch Image Manipulation
Il vous permettra de compresser vos images, ajouter une watermark (un texte comme un copyright sur toutes vos images), redimensionner vos images… Vous pourrez également aisément ajouter d’autres propriétés en allant piocher dans les plugins de GIMP

Utiliser des optimiser en ligne

Il existe plusieurs outils en ligne qui proposent ce service. Vous pourrez envoyer toutes vos images en une seule fois et les re-télécharger optimisées pour le web.

Pour ma part, j’utilise https://tinypng.com/ qui traite les images GIF, PNG et JPG. Il traitera simultanément 20 fichiers maximum  pour un compte gratuit.

Compresser vos CSS et JS

La vitesse de votre site dépendra également de vos fichiers de code. Tous les navigateurs acceptent la décompression des fichiers, il n’y a donc pas de raison de ne pas l’utiliser. Le compresseur / Minifier va venir supprimer tous les espaces, commentaires présents dans votre code.

Via le htacess

Pour le paramétrer je vous renvoie au site d’Alsacréation qui a fait un article entier sur le sujet et qui est très bien détaillé.

Compresseur en ligne

Si vous avez peu de fichiers CSS, JS, il est possible de passer par un compresseur en ligne : https://www.minifier.org/

Si vous avez besoin de modifier un CSS ou JS qui a été compressé vous pouvez passer par cet outil

http://unminify.com/

qui vous remettra votre document avec les différents espaces histoire d’y voir un peu plus clair

Optimiser votre CSS

Tout d’abord, limitez le nombre de fichiers CSS de votre site et évitez le plus possibles les @import

Pour l’intégrateur ou le développeur avoir plusieurs CSS permet de vous organiser. Mais en pratique la vitesse de votre site sera impactée puisqu’il devra aller chercher uns par uns tous les fichiers CSS pour afficher votre page.

Éviter les attributs "style"

<div style=”padding: 0;”>

Ceci n’est pas forcément évident lorsque vous utilisez des CMS avec des plugins qui les intègrent. Mais si vous codez vous-même votre template ou page, insérez ces éléments dans votre fichier CSS

Déclarer votre CSS en début de document

<link rel=”stylesheet” type=”text/css” href=”http://www.monsite.fr/monstyle.css” media=”screen” />

Optimiser votre Javascript

Commencez par mettre vos scripts en bas de page afin qu’ils ne bloquent pas l’affichage. Un fichier javacript qui prend du temps à se charger, rendra le chargement plus long de votre page. En utilisant cette technique vous contribuez à rendre votre site plus rapide.
Cependant pour que cela soit suffisant, il faudra user de quelques astuces supplémentaires.

  • Soit mettre son bout de javascript directement dans la page HTML si celui-ci est assez court plutôt que d’importer votre fichier .js
  • Soit, ce que préconise Google, ajouter la balise async. Cette dernière indiquera à votre navigateur que ce script n’est pas nécessaire au chargement de votre page et que donc il n’a pas besoin de bloquer l’affichage pour finir de charger votre site web.

On déclarera alors sous cette forme

<script async src=”monjavascript.js”>

Fusionner les fichiers

La dernière solution pour le CSS et le javascript est de fusionner tous les fichiers CSS en un seul et faire de même pour les fichiers javascript.
Cette étape est utile pour les CMS.

Attention cela peut conduire à une « destruction » du design de votre site et le rendre non fonctionnel.
Je n’ai personnellement jamais activé cette étape à cause de ça.

Mettre en cache serveur et en cache navigateur

Coté navigateur, vous pourrez stocker vos styles et vos scripts, ainsi à chaque changement de pages votre serveur devrait tout recharger. Coté serveur, vous éviterez que ce dernier effectue des calculs à chaque chargement.

Je vous invite à aller sur le site de creativejuiz pour le tuto via un htaccess

Avoir un bon hébergeur

L’hébergeur est responsable à environ 20% de la vitesse de chargement de votre site web. Ce n’est pas un élément décisif mais cela y contribue si vous souhaitez tout optimiser.

  • Un usage adapté au site (nombre de requêtes, volume de trafic…). Votre hébergeur doit être assez puissant, et pouvoir absorber les pics de trafic.
  • Serveur mutualisé ou privé ?
  • Qu’il mette à disposition des caches serveur
  • Utiliser un CDN pour déléguer une partie de l’hébergement à d’autres serveurs. Ce dernier est indispensable pour les sites d’e-commerce

Comment optimiser sa vitesse de chargement sur WordPress ?

Optimisation du code, de la base de données

WP rocket, le plugin premium

Si je devais vous donner un seul et même plugin qui brille par sa puissance, je vous dirais tout simplement WP Rocket !
Il est performant, vous propose toutes les étapes citées plus haut sauf le traitement d’images. Il vous permet également de nettoyer votre base de données.
En testant le “avant WP Rocket” et le “après”, le résultat est bluffant. La vitesse s’est considérablement réduite.
Le prix est plus que raisonnable et en plus il est Français. Il vous coûtera moins de 40€ en licence unique.

Les plugins gratuits

WP-Optimize

Nettoyez votre base de donnée grâce à ce petit plugin gratuit

Pourquoi nettoyer sa base de données ?

Avec le temps, plusieurs choses se sont stockées dans votre base de donnée. Elle devient alors plus lourde. Le listing des commentaires en attente, des fichiers brouillons ou encore de toutes les modifications effectuées sur un article. Tout ça mis bout à bout fait que nous avons une base de donnée qui s’est alourdie et peut ralentir la vitesse d’affichage de votre site web.

WP Super cache

Comme son nom l’indique, il pourra gérer le cache de votre site

WP Super minify

Minifiez vos fichiers CSS et Javascript

Déplacer vos fichiers JS en bas de page

Pour déplacer tous vos fichiers JS en bas de page, on ajoute ce bout de code dans le fichiers functions.php de votre thème

remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);

Optimisation des images dans wordpress

Il est plus difficile de trouver des plugins totalement gratuits. Je préfère traiter mes images directement avant de les importer dans wordpress ou de traiter mon dossier d’images avec les techniques citées plus haut.

Cependant, si vous devez traiter beaucoup d’images et que vous n’avez pas accès à votre dossier uploads, tournez-vous sur le plugin freemium Compress JPEG & PNG images

Compress JPEG & PNG images

Ce plugin vous permettra de traiter 500 images par mois, ce qui est un bon compromis. Par contre, qui dit “images” compte également les vignettes, images moyennes que WordPress génère automatiquement etc. Si vous avez téléchargé 10 photos, vous en avez beaucoup plus qui seront traitées.

Responsify WP

Paramétrez votre site pour afficher les bonnes images sur les bons supports

Aurélie Schmitt

Située à Montbéliard, dans le Doubs, Inu média conçoit votre identité visuelle pour votre association ou entreprise. Nous réalisons vos sites internet, logos, supports de communication.

Ajouter un commentaire

c07d5b9c7cc9d5e891b1bee20a5c05b5#####################