Des latences peuvent perturber l’expérience de vos visiteurs et pénaliser votre référencement web.
Pensez à optimiser la vitesse de votre site.
Depuis 2010, Google prend en compte la vitesse de chargement des pages comme critère de référencement.
Il est grand temps d’intervenir, d’établir un état des lieux qui mettra en exergue les leviers d’amélioration à actionner.
Pour un état des lieux de qualité, et accessible sans compétences techniques, je vous invite à visiter l’excellent site web Google PageSpeed Insights.
Cet outil Google sera en mesure de donner à votre site une note en accès mobile et une autre pour un accès ordinateur.
La note mobile est des plus importante, surtout depuis la mise à jour de la politique de Google en faveur du mobile first.
Comment procéder? Tout simplement en indiquant l’adresse (URL) de votre site web.
Mais constater n’est pas tout, place à l’action.
Google PageSpeed Insights liste une succession d’optimisation possibles.
Détaillons quelques unes de ces optimisations :
- Effectuer ses mises à jour
Un site WordPress, des extension et un thème à jour sont garants de vous fournir les toutes dernières optimisations possibles.
Il en va de même pour toutes les librairies utilisées.
- Utiliser un thème léger qui correspond à vos besoins
Vous pouvez évidemment opter pour une usine à gaz susceptible de tout gérer mais ce choix peut s’en ressentir en terme de temps de chargement de votre site web.
Prenons l’exemple de nombreux thèmes proposant l’intégration d’une Google Maps, effet parallax, ….
Toutefois dans le cas où ces options de thème ne vous seraient pas utiles, êtes vous bien certain qu’aucun appel au service de rendu de carte Google Maps n’est effectué ? À une librairie externe de gestion de l’effet parallax, …
Vérifiez également les extensions qui peuvent présenter des fonctionnalités doublon (ex. Yoast SEO incorpore directement un outil de génération du plan de site / sitemap alors pourquoi installer une extension supplémentaire ? ).
Faites le tri et nettoyez toutes celles qui vont sont inutiles.
Même principe pour les widgets.
Le cas particulier des thèmes one page
A noter enfin qu’un thème one page répond à une structure présentant le contenu sur une seule et unique page, la présence de trop nombreuses sections, de trop d’images, … peut réduire les performances.
De même qu’une pagination mal configurée (trop d’articles par page) peut là aussi sur des thèmes classiques conduire aux mêmes errements.
L’accompagnement dans le choix d’un thème, son adéquation avec votre besoin véritable influt sur les performances de votre site.
Gardez bien cela en mémoire.
- Réduire le poids des fichiers CSS (feuilles de style) et Javascript
Il est possible de minifier leur contenu c’est à dire retirer les espaces inutiles, saut de lignes, commentaires, … qui pourraient faire perdre de précieux octets.
- Privilégier le CSS aux images, beaucoup plus léger
Aujourd’hui il est par exemple tout à fait possible de réaliser un dégradé de couleurs directement via quelques instructions CSS.
- Utiliser les sprites CSS
Cette technique consiste à regrouper plusieurs petites images en une seule.
Réduire le nombre de fichiers CSS, Javascript chargés (concaténation)
Le regroupement des feuilles de style et scripts Javascript au sein d’un même et unique fichier .css et .js garanti une réduction des aller retour disque et par conséquent une fragmentation moindre.
- Déporter le chargement des fichiers de scripts bloquant l’apparition du contenu (appels déportés dans le footer)
- Optimiser le poids des images
Aujourd’hui nos smartphones, appareils photo créés des images d’excellentes qualité (16Mpx, …) mais bien souvent bien trop lourdes pour un usage optimisé web.
Le poids des images est bien souvent le facteur clé de l’optimisation des temps de chargement (jusqu’à 60% du poids total d’une page).
Des services en ligne tels que tinyPNG ou des solutions WordPress embarquées telles que WP Smush IT sont là pour réduire le poids de vos images grâce à à des algorithmes de compression évolués.
Le tout sans perte de qualité, je vous invite toutefois à vérifier le rendu avant toute mise en ligne.
Autre point, ne forcez pas la taille des images mais préférez une optimisation en amont, sans quoi c’est le serveur qui sera systématiquement chargé d’effectuer ce travail de redimensionnement à la volée.
Le format des images est aussi à surveiller, privilégiez le format jpeg pour les images à haut niveau de détail et devant bénéficier d’une haute résolution, le png pour les petits éléments d’infographie (logo, icônes, …).
Le giff, quand à lui, reste le format de prédilection des animations.
- Réduire le nombre d’extensions installées
Étudiez la réel utilité des différentes extensions que vous avez installé, pensez éventuellement à des alternatives plus optimisées.
Un site web qui chargerait trop de modules complémentaires, effectuant de nombreux appels en base de données ou utilisant trop de ressources serveur (mémoire, processeur) verrait inexorablement ses performances, en terme de vitesse d’affichage, chuter.
Un thème et des fonctionnalités épurées sont parfois la clef du succès.
- Internaliser les ressources externes (ex. Google Fonts, Bootstrap, jQuery, …)
Tout appel à une ressource externe située sur un serveur distant induit une requête beaucoup moins rapide que peut l’être l’appel à sa version locale.
De nombreuses extensions notamment de réseaux sociaux (fil d’actualité, partage Facebook, Twitter, …) font des appels externes.
À remplacer par exemple par un simple bouton.
Dans l’idéal, hébergez vous-même.
- Effectuer le chargement de certains éléments sur demande (ex. Chargement d’une vidéo, …)
On parle alors de lazy load ou chargement différé, sous WordPress vous avez notamment l’excellente extension WP Rocket qui s’en charge très bien.
- Mettre en cache le contenu (ex. WP Super Cache sous WordPress)
Cette solution permet de demander au serveur une version pré-chargée du contenu avant l’ouverture du site que ce soit côté navigateur web (si la page à déjà été consultée sur ce même navigateur) soit côté serveur (si la page à déjà été consultée sur le serveur relais).
La mise en cache navigateur ou serveur permet de charger la dernière version stockée de la page et évite ainsi une nouvelle requête à destination du serveur d’hébergement.
- Activer la compression des ressources statiques (Gzip)
- Mise en place d’un CDN (Content Delivery Network)
Soit une copie de votre site en plusieurs points d’accès à l’échelle mondiale.
Donc a privilégier dans le cas d’une internationalisation.
Le but étant de réduire les distances entre votre visiteur et une version de votre site web.
- Programmer ses sauvegardes serveur à des heures de faible affluence (ex. 3h du matin)
Les tâches de sauvegarde demandent une forte occupation du serveur, et peuvent pénaliser votre trafic.
Veillez à les paramétrer pour une exécution nocturne.
Pour aller plus loin…
Le reste des optimisations est plutôt à aller chercher du côté matériel (serveur dédié, configuration véloce : SSD, …).
Un serveur dédié à l’opposé d’un mutualisé ne partage pas ses ressources avec d’autres sites web, il est dédié à un site et permet donc des pics d’affluence important sans perte de disponibilité et performances.
Comme nous le voyons l’optimisation de la vitesse d’un site est parfois un choix subtile entre fonctionnalités et vitesse.
Le diable se cache dans les détails alors chassez tous les gains possibles, quelques kilo-octets par ci, quelques kilo-octets par là, le tout cumulé vous sentirez la différence.
Un site web qui n’est pas optimisé c’est un site web que l’on ne tarde pas à quitter, analysez donc votre taux de rebond pour vous en rendre compte, ainsi que le temps que vos internautes passent sur votre site.
Internet n’en est plus au 56k, les internautes ne veulent plus attendre.
La qualité d’un site web ne se limite pas qu’à sa carrosserie, ce qui se cache sous le capot est tout aussi important !
Vous avez besoin de vous faire accompagner? Contactez moi.
