À une époque où presque toutes les informations sont disponibles à tout moment et de n'importe où, les sites web et autres contenus en ligne doivent répondre à certains critères pour satisfaire les utilisateurs (et donc les moteurs de recherche). L'un de ces critères est le temps de chargement. Nous t'expliquons comment analyser la performance et l'optimiser par la suite afin d'obtenir un meilleur classement à long terme.
Optimiser la performance signifie améliorer l'utilisabilité
Imagine que tu entres dans un snack-bar, que tu as une énorme faim de loup et que tu n'es tout simplement pas servi. Que se passe-t-il ? Exactement, tu quittes précipitamment le magasin et tu vas chez la concurrence, en espérant y trouver plus rapidement quelque chose à manger. Même si tu ne pars pas directement, tu ne reviendras probablement pas.
Mauvaise performance = taux de rebond élevé
Si l'on transpose cet exemple dans le monde numérique, le snack devient le site web et la rapidité devient le service, le temps de chargement de ce site web. Celui qui veut jouer dans la cour des grands en matière de classement devrait donc se préoccuper au plus vite de son service, autrement dit de sa performance. En effet, Google classe volontiers les sites web qui sont particulièrement conviviaux. Outre une répartition cohérente et une présentation claire d'un thème, le temps de chargement du contenu fait également partie de la convivialité. Si la page met trop de temps à s'afficher, le taux de rebond augmente, car de nombreux utilisateurs cliquent sur le bouton "retour" et se servent dans le résultat de recherche suivant sur la SERP de Google.
Étape 1 : Contrôle des performances
Avant d'améliorer les performances de ton site web, il est préférable de vérifier si ton PageSpeed est vraiment mauvais. Pour cela, tu peux utiliser différents outils.
Tendances PageSpeed
Tendances PageSpeed est un outil mis à disposition par Google qui te permet de vérifier en un clin d'œil la performance d'une URL donnée. Dans le meilleur des cas, tu obtiens la note "Good" pour la sortie sur les appareils mobiles et sur les ordinateurs de bureau. Si le temps de chargement n'est pas optimal, l'outil attribue la note "Medium" à la performance. Un besoin d'optimisation existe pour l'évaluation "low". Ce qui est bien : Google te fournit directement des propositions d'optimisation après l'analyse.
Pingdom
Utilisez-vous le Test de vitesse de site web Pingdom pour analyser la performance de tes pages, tu constateras qu'il donne une image nettement plus positive des temps de chargement que PageSpeed Insights de Google. En outre, tu as la possibilité de sélectionner différents emplacements de serveur pour ta requête. Après l'analyse, l'outil t'indique le temps de chargement (en millisecondes, espérons-le), le degré de performance de Google PageSpeed (qui devrait être A), la taille de la page web et une série d'autres données.
Test de la page web
L'analyse est encore plus complète avec le Outil de webpagetest.org. Ici, tu peux choisir encore quelques autres emplacements de serveur et - particulièrement cool - définir l'environnement de test (modèle de smartphone, navigateur, etc.). Les résultats sont extraordinairement complets et constituent une excellente base de données qui t'aidera à optimiser les performances de ton site web.
Étape 2 : l'optimisation
Après avoir analysé où le bât blesse en matière de temps de chargement du site web, tu peux commencer à l'optimiser.
Pour rendre les données d'analyse livrées un peu plus compréhensibles pour toi : Les causes les plus fréquentes d'une mauvaise performance sont...
de grandes quantités de données,
les images non compressées,
un thème surchargé et
bases de données & serveurs lents.
Repenser le thème & désactiver les plugins inutiles
Ton site web fonctionne sur WordPress ou Joomla ! et le thème premium que tu as acheté a l'air vraiment chic ? C'est bien, mais il n'est pas rare que les thèmes soient complètement surchargés, ce qui entraîne des temps de chargement du site web très lents. Regarde simplement s'il n'y a pas un thème plus léger qui se distingue non seulement par son aspect visuel immédiatement attrayant, mais aussi et surtout par ses performances.
Si le problème ne vient pas du thème lui-même, les plugins peuvent également avoir une influence négative sur le temps de chargement des pages web s'il y a trop d'accès à la base de données. C'est surtout le cas pour les plugins peu connus et mal mis en œuvre. Vérifie simplement quels plugins se sont accumulés au fil du temps et désinstalle tout ce dont tu n'as pas absolument besoin.
Réduire les requêtes HTTP
Si moins de requêtes HTTP sont effectuées, ton site web se construit logiquement plus rapidement. Une telle requête serveur a toujours lieu lorsqu'un fichier doit être chargé. Si tu mets moins de fichiers (images, scripts, etc.) dans un document, ton site se chargera plus rapidement.
Astuce : tu peux regrouper différentes feuilles de style dans un seul fichier CSS et le lier à partir de la zone du document HTML. Si tu veilles à ce qu'il n'y ait plus d'indications de style en ligne dans le document HTML, le fichier CSS peut être mis en cache, ce qui accélère également le chargement des pages.
Optimiser les images pour le web
Un site web ne peut pas se passer de bonnes images (de préférence au format .jpg) et de graphiques (de préférence en fichier .png), car une image vaut souvent mille mots. Il est toutefois important que ces images soient optimisées pour le web afin d'éviter des temps de chargement trop longs. L'erreur la plus fréquente dans ce contexte est de charger les images sur le serveur dans leur taille originale et de les intégrer exactement de la même manière dans le contenu.
Exemple : Si une image fait 2500 x 1000 pixels, mais qu'elle n'est intégrée que dans une zone de contenu de 750 pixels de large, elle sera ensuite affichée en taille réduite. Toutefois, l'image ou le graphique doit quand même être chargé(e) dans toute sa taille. Pour éviter un tel encombrement inutile, tu devrais toujours réduire les images à la taille dans laquelle elles doivent effectivement être affichées.
D'ailleurs : dès qu'une URL est appelée, toutes les images sont en général chargées automatiquement - même celles que l'on ne voit pas encore, par exemple parce que l'on ne fait pas défiler la page aussi bas. Pour ne charger les images que lorsque cela est nécessaire, tu peux utiliser des plugins tels que Crazy Lazy pour l'utiliser. Et pour ajouter directement une astuce de plugin : WP Smush.it compresse automatiquement la taille des fichiers d'images lors du téléchargement. Tu peux également optimiser ultérieurement les images déjà téléchargées.
Compression Gzip
Il n'y a pas que les images qui peuvent être compressées, mais aussi les fichiers système (par exemple de WordPress). Comment faire ? Tout simplement avec Gzip, un programme de compression gratuit qui, tout comme le format de fichier, est disponible pour tous les systèmes d'exploitation. Tout ce que tu dois faire, c'est insérer un extrait de code dans le fichier .htaccess. Avec WordPress, tu n'as pas besoin d'intervenir manuellement à ce stade, mais tu peux compter sur des plugins tels que Gzip Compression de vitesse Ninja pour les utiliser. Joomla dispose également d'extensions correspondantes qui font exactement la même chose.
Utiliser la mise en cache
En tant qu'utilisateur de WordPress, tu ne peux pas non plus te passer d'un bon plug-in de mise en cache. La mise en cache consiste à créer des versions statiques de toutes les pages au lieu de les créer de manière dynamique, ce qui a un impact considérable sur la vitesse de chargement de l'ensemble du site. Un plugin de mise en cache très bien écrit pour WordPress est le suivant Cachify. Le plugin W3 Total Cache te permet de bénéficier d'un package sans souci. Sinon, il fait WP Rocket de ton côté une petite fusée
Conseil supplémentaire :
Pour accélérer encore ton site web, tu peux supprimer les espaces et les retours à la ligne inutiles en HTML, CSS et Javascript. Comme l'ensemble du code est ainsi allégé, le temps de chargement diminue également. Seule la clarté du code se détériore. Le Plugin W3 Total Cache te propose, en tant qu'utilisateur WordPress, une fonction appelée "Minify". Toutefois, celle-ci ne fonctionne particulièrement bien que si tu définis toi-même dans le mode manuel du plugin la manière dont les scripts Java doivent être chargés. Comme cela n'est pas vraiment adapté aux débutants, nous recommandons pour le "minify" (minification) le Plugin Autoptimize.
