Vous cherchez à accélérer le temps de chargement de votre site ? Vous faites bien ! Accélérer le temps de chargement de ses pages n’aura pas seulement un impact sur votre parcours utilisateur, mais aussi sur votre SEO. Si je vous disais que les robots Google sont encore plus sensibles au temps de chargement que vos visiteurs vous me croirez ?

Dans ce Guide complet, je vais vous révéler comment j’ai réussi à faire passer mon site WordPress utilisant le thème Divi à un score de 100% sur Desktop et + 90% sur mobile. Après plusieurs mois d’AB testing de différents outils en tout genre, je pense avoir enfin trouvé la recette magique : recette que nous appliquons maintenant à tous les sites de nos clients.

Pour ne rien louper, n’hésitez pas à vous abonner à la Newsletter (tout en bas de l’article). Vous recevrez tous les dimanches soir votre petite veille SEO dans votre boîte mail. Parfait pour terminer le week-end tranquillement ou pour commencer la semaine sur les chapeaux de roues !

Pourquoi accélérer son temps de chargement est indispensable ? 🚀

Accélérer votre temps de chargement vous permettra de garder vos visiteurs sur vos pages, certes. Mais il vous permettra aussi de chouchouter les robots Google.

La vélocité du site est un des critères les plus importants pour votre référencement naturel. Rétrospective sur les dernières mises à jour de Google.

• Google a sorti en 2016 le format AMP (Accélerated Mobile Pages). Concrètement ce format permet de rendre vos pages ultrarapides sur mobiles en supprimant toutes les ressources JavaScript ou CSS.
• Google estime que le temps doit être inférieur à 2,5 secondes. Si ce n’est pas le cas, votre SEO se verra pénalisé.
• En juillet 2018, Google lance un Speed Update qui pénalise tous les sites avec un temps de chargement trop lent.

Vous l’aurez compris, le temps de chargement est non seulement primordial pour votre parcours utilisateur, et surtout pour votre SEO. Pourquoi “surtout” pour votre SEO ? Car sans SEO n’espérez pas avoir des utilisateurs. CQFD.

Comment mesurer son temps de chargement ? 📐

Bonne nouvelle ! Google a mis en place un outil qui permet de connaître le temps de chargement de vos différentes pages. Cet outil, c’est le Google Page Speed Insigt.

Il vous permet d’avoir des données sur le temps de chargement sur :

• Mobile
• Desktop

Petite précision, 90% des robots d’indexation sont paramétrés pour explorer vos pages en version mobile. Avoir un excellent score de chargement sur mobile aura donc des conséquences ultra-positives pour votre SEO.

Ma préconisation

Je vous recommande de viser + 90% sur mobile et + 98% sur Desktop. C’est tout à faire réalisable si vous suivez pas à pas les étapes de ce Guide.

Les données Page Speed ne sont pas toujours les mêmes :

Il est tout à fait normal de ne pas avoir toujours les mêmes résultats à chacun de vos tests sur l’outil. Tout simplement car Google simule des visites provenant de types de Device différents. Ainsi une fois vous aurez 98, l’autre fois 89, etc. … Pas d’inquiétude, prenez ces statistiques comme un indicateur et pas comme un fin en soi.

Pourquoi je déconseille GT Metrix ou les autres outils.

Comme je vous le disais plus haut, pour moi le principal avantage à booster votre temps de chargement sera d’améliorer votre SEO. Alors oui, lorsque l’on part de tout en bas, le temps de chargement a un impact direct sur le confort de vos visiteurs. Mais généralement quand on fait des tests sur GT Metrix ou Page Speed en boucle, c’est pour avoir un top score. La différence sur la session sera minime que vous passez de 90 à 100%.

Google utilise son propre outil (Page Speed donc) pour noter la qualité de vos pages. Autant donc prendre son scop si votre but est d’améliorer votre SEO. Oubliez les outils comme GT Metrix.

Temps de chargement sur WordPress : mes 5 conseils 👇

Après de nombreux tests de plugins en tout genre, j’ai identifié 5 critères principaux qui impacteront fortement votre temps de chargement. Comme je vous l’ai dit, vous n’aurez nullement besoin de savoir coder pour corriger ces points. Je vous communique pour chacun d’entre eux les outils à utiliser pour les corriger vous-même.

L’hébergement 💻

L’hébergement est indispensable pour avoir un excellent temps de chargement.

Lorsque vous créez une nouvelle page sur votre site, un fichier FTP sera créé sur votre serveur (ou hébergeur comme vous voulez)

Ensuite, lorsqu’un utilisateur clic sur un lien de votre site, il envoie une requête FTP au serveur. C’est-à-dire qu’il demande au serveur de lui envoyer la page en question. Le serveur envoie en réponse votre page sur l’écran de l’utilisateur. Vous comprenez donc qu’un bon serveur permettra d’améliorer considérablement votre temps de chargement.

Serveur mutualisé VS serveur dédié

Un serveur mutualisé est un serveur qui va héberger des fichiers FTP de plusieurs sites différents.

Un serveur dédié n’hébergera que les fichiers FTP de votre ou de vos sites.

Plus un serveur contient de fichiers FTP, et plus il sera lent. Cependant je vous déconseille formellement d’utiliser des serveurs dédiés si vous n’avez pas un site contenant au minimum 10 000 pages. Le retour sur investissement ne sera pas intéressant.

L’utilisation d’un CDN

Un CDN est un serveur international. C’est-à-dire que vous allez avoir plusieurs serveurs dans plusieurs pays. Cela à l’avantage de réduire le temps de réponse serveur pour les personnes effectuant des recherches à l’autre bout du monde. Cela est très utile pour des sites ayant des visiteurs dans plusieurs pays distincts et géographiquement éloigné. Le CND le plus utilisé est CloudFlare. Pour avoir fait pas mal de tests avec et sans CDN en France, je ne recommande pas son utilisation si vous n’avez pas une stratégie internationale.

Ma préconisation

Je sais que vous êtes dans la grande majorité des cas gestionnaires de petits et moyens sites. Dans ce cas je vous recommanderai un serveur dédié. Pour notre part, nous utilisons O2Swhitch chez SEO Monkey. Ça fait des années que nous travaillons avec eux et nous avons jamais été déçus. En plus d’avoir de bonnes statistiques de vitesse, ils proposent un service d’accompagnement téléphonique ouvert 24h sur 24.

Je vous déconseille d’utiliser OVH, je connais beaucoup trop de gens qui ont eu des problèmes avec cet hébergement. C’est une usine à gaz.

Si vous choisissez un hébergement dédié (budget important et/ou gros sites), les meilleures solutions sont celles d’Amazon Web Services ou de Google Cloud. Cependant ces solutions nécessitent une mise en place et une maintenance technique. Vous pouvez nous contacter pour en savoir plus sur nos prestations d’hébergements optimisées pour le SEO.

Le thème 🖌

Peu importe votre secteur, le choix du CMS aura un impact sur votre Business en ligne à long terme. WordPress est un CMS (Customer Manager System). Les CMS ont l’avantage de permettre de créer des pages rapidement. Et en SEO il est primordial d’avoir la main totale sur la création de votre contenu. C’est pour cette raison que je ne vous recommanderai jamais assez d’utiliser WordPress pour votre SEO.

Le revers de la pièce est qu’il est forcément plus lent au chargement qu’un site codé from scratch (et encore j’ai vu des horreurs). Imaginez un peu qu’un site WordPress c’est une première surcouche PHP du CMS, puis une deuxième surcouche CSS / HTML du thème, puis une troisième surcouche de Builder (Divi, Elementor, Ect…).

C’est pour cette raison qu’il est primordial de faire le bon choix de thème dès le début. Si vous avez déjà votre thème, pas de panique. Tous les thèmes ne sont pas un frein en soi. Cependant il existe des thèmes personnalisables qui auront l’avantage d’être entièrement compatibles avec les plugins d’accélération de sites que nous allons voir plus bas.

Le Builder intégré à WordPress

WordPress a mis en place un builder directement intégré à sa solution il y a quelques années. C’est le builder Gutenberg. Il permet de construire ses pages directement sur le back-office. J’ai été étonné de voir des sites complètement refondus depuis Divi ou Elementor sur Gutenberg.

• Le + : C’est un builder totalement intégré à la solution WordPress. Du coup, vous ne pourrez pas trouver plus rapide que ce dernier. Il n’y aura pas de surcouche de code ou autre en passant par ce dernier.
• Le – : Il est encore beaucoup moins facile d’utilisation qu’un builder classique tels que Divi ou Elementor.

Divi & Elementor

Divi et Elementor sont d’excellents Builder. Ils vous permettront concrètement de construire vos sites totalement personnalisés sans avoir à coder. En plus d’être très pratique d’un point de vue design, ils intègrent des tas de modules (formulaires, accordéons, carrousels, etc…) qui permettent de ne pas à avoir télécharger des plugins à tout va.

Divi et Elementor sont les thèmes les plus optimisés que vous pourrez trouver sur WordPress à condition qu’ils soient utilisés avec Rankmath. Vous pouvez retrouver ici notre top des Plugins SEO à utiliser sur WordPress.

Ma préconisation

Si vous partez totalement de 0, je vous recommande de construire une maquette de votre site sur Figma dans un premier temps. Seulement par la suite, vous serez en mesure de faire le choix de votre thème.

Le choix de Gutenberg est un excellent choix que je vous invite à étudier. Le problème est que je ne peux pas vous assurer que vous ne rencontrerez pas de blocages techniques avec cet outil, qui commence tout juste à être utilisé à grande échelle. Je recommanderai Gutenberg pour des projets de très long terme soutenu par un apport financier. C’est un retour sur investissement intéressant seulement si vous vous voyez utiliser toujours votre site dans au moins 24 mois.

Divi & Elementor est la solution la plus adaptée à 90% d’entre vous. Le site SEO Monkey est lui-même construit sur Divi. Ça ne nous empêche pas d’avoir de très bonnes statistiques de vélocité. Si c’était à refaire aujourd’hui, j’opterai cependant pour un site Gutenberg qui me permettrait d’améliorer encore davantage les statistiques de vélocité de ce dernier.

Les images 🖼

Les images sont la première chose que vous devez regarder si vous avez un temps de chargement anormalement long sur une page de votre site web. Ce qui est bien avec les images, c’est qu’elles offrent des opportunités d’amélioration sur l’ensemble de votre site. Pour identifier les images trop lourdes sur votre site, je vous recommande d’utiliser Screaming Frog. Après un Scroll complet de votre site, il vous listera les images classées par ordre croissant ou décroissant de poids. En termes de “Quick Win”, vous ne trouverez pas mieux. Petite parenthèse car je n’en parle pas dans cette vidéo, mais il ne faut jamais intégrer des vidéos directement au sein des pages de votre site. Il faut toujours privilégier un hébergement de la vidéo sur une plateforme externe comme Youtube et l’intégrer directement à votre site via un lien Embed ou Json.

La bonne taille

Pour améliorer le temps de chargement de vos images, vous devez veiller dans un premier temps à choisir la bonne taille de l’image. Alors il faut savoir que la taille de l’image dépendra de la taille de l’écran. C’est-à-dire que sur un mobile, une image peut être sans pixel et devenir pixélisée sur ordinateur car l’écran est plus grand. Le tout ici sera donc de trouver la bonne formule pour avoir à la fois une image suffisamment grande pour qu’elle s’adapte à tous types de Devices sans exagérer.

La bonne résolution

Une fois la taille de format identifiée, vous allez pouvoir jouer sur la qualité de l’image. Vous pouvez parfois économiser 90% du poids d’une image en abaissant sa qualité sans que cela ne soit visible à l’œil. La préconisation ici sera donc de diminuer tant que possible la qualité sans rendre l’image trop pixélisée pour votre site web.

Le bon format

Il existe 4 types de format pour les images :

• Le JPG
• Le PNG
• Le SVG
• Le Webp

Chaque format a une fonction précise. Le Jpg et le Png sont destinés à l’exportation d’images classiques, à la différence que je PNG permet de faire un effet de transparence. Cependant le PNG est largement plus lourd que le JPG. Il est donc recommandé d’utiliser du JPG, avec le fond de votre site si vous souhaitez faire un effet transparence.

Le Webp est un nouveau format recommandé par Google. Il a été créé pour alléger encore plus les images classiques type JPG et PNG. Il permet quant à lui un effet transparence comme le PNG mais a un poids beaucoup moins élevé.

Le SVG est un format créé pour les illustrations. Il permet d’avoir une qualité optimale (car vectorisée) sur les images de votre site. Par exemple sur le site de SEO Monkey, les petits singes sont tous en format SVG. C’est le format idéal pour les illustrations.

Ma préconisation

Pour faire simple, je recommande de travailler conjointement la taille et la résolution et le format conjointement sur mon outil coup de cœur : Squoosh.

Avec Squoosh, vous allez pouvoir glisser-déposer votre image directement sur l’outil en ligne, et gérer conjointement la taille, le format et la qualité. Vous aurez aussi une bulle avec le % de poids économisé. L’outil est totalement gratuit.

STOP, si tu aimes Squoosh et que tu veux découvrir d’autres super-outils de la sorte, abonne-toi à ma newsletter. Tu recevras tous les dimanches soir nos articles et vidéos de la semaine dans ta boîte mail !

Concernant les formats, je vous recommanderai d’utiliser du WebP ou du JPG sur l’ensemble d’images de votre site, à l’exception des illustrations ou le format SVG sera de loin le plus adapté. Pour rappel, un logo est une illustration !

Le CSS & Javascript 🧑‍💻

Une page web est composée de 3 types de langages différents : du HTML, du CSS et du Javascript. Les autres langages sont des langages de back-office, qui ne sont donc pas lus par le robot Google.

• Le HTML structure les pages de votre site : c’est lui qui indique à Google les sections, les titres, les textes, les images, etc…. Le HTML est le seul langage qui permet à une page de se positionner sur Google.
• Le CSS stylise les pages, c’est lui qui permet de changer une police, une couleur, les tailles et espacement…
• Le Javascript quant à lui vient intégrer des éléments externes à votre site (flux de réseaux sociaux, vidéos, certaines animations, tracking analytics, ads, plugins & extensions…). Il est très néfaste en termes de temps de chargement.

Alors, lorsque l’on part de la base qu’un site simplement construit en HTML avec un minimum de CSS et de JS sera plus rapide, faut-il pour autant chercher à supprimer tous les flux JS et CSS ?

La réponse est non, le CSS et Javascript, bien que ralentissant les pages d’un site web participe à améliorer la qualité de vos pages. Il faut cependant avoir en tête de trouver un bon équilibre entre style et web performance. Prenons l’exemple du site de SEO Monkey. Baladez-vous donc sur les différentes pages. Bien que stylisé, le site reste très simple, ce qui nous permet d’avoir des statistiques de temps de chargement plus que correct pour un WordPress utilisant Divi.

Minification

La Minification permet de supprimer toutes les choses inutiles dans le code CSS et Javascript. Il va supprimer les commentaires, les espaces, les retours à la ligne ect… Cela permet donc d’alléger vos fichiers de code et donc d’améliorer votre temps de chargement. Une fois la minification effectuée, les fichiers seront complètement indéchiffrables par vos développeurs. Ce n’est pas un problème en soi pour un WordPress.

Pour minifier votre code, je vous conseille d’utiliser le plugin WP Rocket. C’est une extension payante qui a réellement fait ses preuves dans l’optimisation des Web Performances des sites hébergés sur WordPress.

Mise en cache

La mise en cache consiste à enregistrer sur la session de votre visiteur les fichiers FTP de votre site afin que ce dernier se charge instantanément à la seconde visite. C’est quelque chose qu’on peut qualifier de Quick Win qu’il faut absolument mettre en place sur votre site.

Il existe plusieurs outils de cache sur WordPress. Je vous recommande de ne pas multiplier les outils et de passer également par WP Rocket, qui viendra également minifier votre code.

Attention, la mise en cache peut poser des problèmes de mise à jour. C’est-à-dire que lorsque vous ferez des modifications sur votre site, elles ne seront parfois pas visibles directement. Pour ce faire, je vous conseille simplement sur désactiver le plugin WP Rocket lorsque vous travaillez le design de vos pages.

Éléments bloquants

Les éléments bloquants remontent sur l’outil Google Page Speed ou encore GT Metrix. Concrètement, ils ralentissent fortement le site car ils sont changeables un par un uniquement. C’est-à-dire que pendant le chargement d’un élément bloquant, aucun autre élément de votre page ne se chargera avec l’élément bloquant totalement chargé.

Pour corriger les éléments bloquants, vous n’aurez pas d’autres choix que de les remonter à un développeur spécialisé. Vous pouvez aussi nous contacter car chaque site et différent et rencontre des problèmes spécifiques.

Format AMP

Le format AMP est un format qui coupe totalement le CSS et le JS sur les pages de votre site. Il est conseillé, si vous décidez de l’utiliser, de le mettre en place uniquement sur vos articles de blog. En effet une page de vente / page d’accueil / catégorie / ect, ne peut pas se permettre de ne pas avoir de style.

Sur WordPress, il y a peu de formats AMP qui ont réellement fait leur preuve. Je n’ai personnellement pas identifié de grandes améliorations sur les sites sur lesquels je l’ai testé. C’est pour cette raison que je vous le déconseille aujourd’hui à une exception près : les sites de presse.

En effet, lorsque je travaillais à la voix du nord, nous avons observé une amélioration directe à l’installation du format AMP. Je pense que le format AMP reste à suivre pour les années à venir mais n’est pas encore complètement fonctionnel.

Ma préconisation

Les codes Javascript est CSS ralentissent le temps de chargement, c’est un fait. Cependant il ne faut pas être dans l’extrême en voulant le supprimer à tout prix au maximum de vos pages. Tout est une question d’équilibre entre web performance et design / parcours utilisateur.

Je vous recommande d’utiliser le plugin WP Rocket en version payante pour mettre votre site en cache et minifier votre code. Faîtes également attention à ne pas démultiplier les plugins qui génèrent du code Javascript. Concernant les éléments bloquants, je vous recommande plutôt de passer par une agence spécialisée qui vous fera un devis pour les supprimer.

En résumé ⏰