logo-k-graphiste

Comment réduire le temps de chargement des pages sur WordPress ?

Vous souhaitez optimiser votre site WordPress et corriger vos problématiques SEO en réduisant le délai de réponse de votre serveur ? Vous êtes au bon endroit, K-Graphiste vous guide pour que votre site web ne se charge qu’en quelques millisecondes !

performance-wordpress,-ameliorer-son-chargement-de-pages,-statistiques-millisecondes,-illustration
Sommaire

PageSpeed Insights : Testez le score temps de chargement des pages

Page d'accueil de PageSpeed Insights

La première étape est de tester le temps d’affichage de vos pages web en secondes.

Plus précisément, le temps d’affichage de la première fenêtre (=zone d’écran visible avant le scroll).

Vous pouvez tester les rendus avec plusieurs outils : 

Attention : Vous ne devez pas vous contenter d’une note de 100/100 sur PageSpeed Insights, mais de vous donner des objectifs précis pour améliorer le temps de chargement.

La localisation est également à prendre en compte. Les deux outils ne vous donneront pas les mêmes résultats en fonction des paramètres associées sur GTmetrix.

Vous devez également prendre en compte le fait que Google ne crawl pas votre site web depuis un ordinateur, mais bien depuis un mobile.

Plus exactement, l’émulateur utilisé sur Pagespeed.web.dev est le Moto G Power. Les données sont chargées en 4G.

Je vais vous aider à réduire votre temps de chargement facilement à 800ms.

Les services utilisés pour héberger le site web et booster l’affichage des pages

Concevez un modèle d’infrastructure optimisée, choisissez un thème optimisé pour WordPress et améliorez la vitesse de chargement de votre première fenêtre d’affichage.

Attention : Prenez tout de même en compte que l’optimisation d’une page dépend entièrement de votre infrastructure, de votre code HTML et des moyens mis en œuvre pour servir les pages à l’utilisateur.

Cette page est donc là pour vous servir de “guide pratique”, mais les configurations apportées peuvent être modulables d’un site à l’autre.

Infrastructures

En choisissant les bonnes options, vous pourrez optimiser chaque partie du processus de livraison des pages en HTML..

OVH : Nom de domaine facile à réserver

Pour commencer, choisissez un nom de domaine chez OVH.

Prenez uniquement le nom de domaine, et décocher les options complémentaires à l’offre.

Choisir nom de domaine sur OVHcloud

Les tarifs démarrent à 9,99€ pour les .FR et .COM facturé annuellement, en fonction de l’extension de domaine.

C’est simple, rapide et sans prise de tête.

O2Switch : Serveur mutualisé performant

O2Switch, hébergeur web mutualisé de qualité

Enregistrez ensuite les DNS d’O2Switch pour accéder à votre serveur.

Installez votre site WordPress sur un serveur O2Swich vous permettra en moyenne d’atteindre les 1,5s en FCP ( thème classique, sans pré-config, sans cache…)

WPRocket : Performances de vos pages web

WPRocket : Meilleur plugin de performances WordPress tout en 1

Maintenant, ajoutez WPRocket. Ce plugin vous permettra d’optimiser votre site web en un instant.

Les fonctionnalités de WPRocket sont les suivantes :

  • Ajouter de vos pages en cache : Les pages sont desservies en HTML sans interpréter de PHP
  • Différer et reporter l’exécution du JS : TRÈS IMPORTANT
  • Minifier CSS et Optimiser CSS ( ce dernier est important aussi )
  • Activer le LazyLoad pour optimiser l’affichage de vos images afin qu’elle ne charge que si elle est visible à l’écran

Avec tous ces réglages, vous pourrez facilement atteindre les 1s en FCP.

Cloudflare : Déployez votre contenu dans le monde entier

CloudFlare : CDN mondial cloud rapide

Passez par le CDN Cloudflare vous donnera un sérieux avantage sur le TTFB ( premier octet perçu par le navigateur ).

Si vous activez Cloudflare et que vous sélectionnez les options basiques, vous pourrez bénéficier d’une bonne réduction de délai.

Attention à ne pas activer des fonctionnalités qui pourraient entrer en conflit avec WPRocket ou tout autre plugin d’optimisation de performances !

Par exemple, si vous minifiez vos fichiers CSS avec WPRocket, vous devrez désactiver ces fonctionnalitées manuellement sur CloudFlare.

Choisissez le meilleur thème WordPress

GeneratePress : Simple, léger, rapide

Theme GeneratePress, performance

GeneratePress est un thème WordPress léger conçu pour répondre aux prérequis nécessaire au bon fonctionnement du CMS et de la compatibilité des extensions.

Par-dessus le thème, vous pouvez installer votre constructeur de page favori pour personnaliser votre site web sans contrainte.

Thème custom (=100% développée)

La meilleure solution est de développer votre thème WordPress personnalisée en HTML/CSS/PHP/JS.

Développer un thème personnalisé vous permettra d’avoir la main complète sur ce qui est chargé et à quel moment dans votre page.

Vous pourrez alors accéder facilement aux éléments à modifier en cas d’optimisation à gérer.

Testez les performances avec DevTools

Une fois que les optimisations ont étés faites, vous devrez tester les performances avec l’outil DevTools de Google Chrome. Pour l’utiliser :

  • Utilisez le navigateur Google Chrome pour accéder à votre site WordPress.
  • Accéder à DevTools :
    • Faites un clic droit sur une page de votre site et sélectionnez `Inspecter` dans le menu contextuel.
    • Utilisez le raccourci clavier `Ctrl + Shift + I` sur Windows/Linux ou `Cmd + Option + I` sur Mac.

Utiliser l'onglet Performance

Analyse des performances, DevTools Chrome, exemple de k-graphiste
  1. Sélectionner l’onglet Performance : Dans les DevTools, cliquez sur l’onglet `Performance`. Cet onglet vous permettra de voir une chronologie des événements qui se produisent lorsque la page se charge.
  2. Enregistrer un chargement de page :
    1. Cliquez sur le bouton `Record` (le cercle rouge) ou pressez la touche `Ctrl + E` pour commencer.
    2. Rafraîchissez votre page web (F5 ou `Ctrl + R`).
    3. Cliquez à nouveau sur `Record` pour arrêter l’enregistrement après que la page ait fini de se charger.
  3. Analyser les résultats : Après l’arrêt de l’enregistrement, Chrome va générer un profil de performance montrant une chronologie de ce qui s’est passé lors du chargement de la page.
Comprendre les résultats
  1. Chronologie du chargement : En haut, vous trouverez une barre de chronologie avec différents couleurs indiquant les types d’activités (rendering, scripting, loading, etc.).

  2. Frame Rate : Juste en dessous, une vue du taux de rafraîchissement de la page (FPS). S’il y a des chutes drastiques, cela peut indiquer de lourds processus scriptés ou des problèmes de rendu.

  3. Main Thread : Vous trouverez des détails sur ce que le navigateur faisait à divers moments. Survolez chaque section pour obtenir des informations sur les tâches spécifiques, comme le style CSS, les scripts JavaScript ou le rendu.

Utiliser l'outil "Réseau"

DevTools Chrome : Onglet Réseau, exemple de chargement k-graphiste homepage
  1. Cliquez sur l’onglet Réseau
  2. Rafraîchissez la page (en maintenant la fenêtre DevTools ouverte).
  3. Vous verrez une liste des ressources chargées et combien de temps chacune a pris pour être téléchargée.

Optimisez la première fenêtre d’affichage

Pour garantir une bonne expérience dès l’instant où un utilisateur atterrit sur votre site, optimiser la première fenêtre d’affichage (également appelée zone de flottaison) est important.

Cela se réfère à la partie du site que l’on voit sans avoir à scroller.

Un chargement rapide de cette 1ère zone sera bénéfique pour le SEO et l’UX.

Minifiez votre première section

La minification CSS/JS est une méthode qui consiste à réduire la taille de vos fichiers de code sans en altérer la fonctionnalité.

Cela inclut la suppression des espaces blancs, des commentaires, et la simplification du code là où c’est possible.

Par exemple, des fichiers CSS et JavaScript minifiés chargent plus rapidement, car ils sont plus légers et contiennent moins de lignes de code. Ils sont donc transmis plus rapidement du serveur au navigateur.

Pour minifier les ressources qui apparaissent dans la première section de votre page :

Annuler le LazyLoad sur vos images et iframes

La technique du LazyLoad (chargement différé) a pour but de retarder le chargement de certaines ressources (comme les images et iframes) jusqu’à ce qu’elles soient nécessaires, c’est-à-dire lorsqu’elles entrent ou sont sur le point d’entrer dans le viewport de l’utilisateur.

Cependant, cela ne devrait pas s’appliquer aux images et iframes qui sont dans la première fenêtre d’affichage, car cela ralentirait la perception du chargement de la page.

Pour optimiser l’affichage des ressources dans la première fenêtre : Désactivez LazyLoad pour les images et iframes critiques.

Assurez-vous que les images au-dessus de la ligne de flottaison chargent immédiatement avec la page.

Solution : Dans la plupart des cas, il faut ajouter des exceptions dans les réglages de votre plugin de LazyLoad et écrire une classe personnalisée dans le fichier HTML de votre thème WordPress.

Optimisez le chargement de vos images

reduire-la-taille-image-performance-web

Compresser sans perdre en qualité

  • Utilisez des outils de compression en ligne comme TinyPNG ou Compressor.io pour réduire la taille de vos images sans affecter visuellement leur qualité.
  • Installez des plugins WordPress dédiés à la compression des images comme Imagify, ou ShortPixel qui offrent des fonctionnalités de compression automatique.

Choisir le bon format

  • Utilisez le format JPEG pour les images avec de nombreux dégradés de couleur, comme les photos.
  • Privilégiez le format PNG pour les images avec des zones de couleur unie ou avec de la transparence.
  • Envisagez le format WebP, qui offre une compression supérieure aux formats JPEG et PNG.

Des plugins comme WebP Express peuvent vous aider à convertir automatiquement vos images dans ce format plus léger.

Redimensionner les Images pour Correspondre à leur Utilisation sur le Site

  • Assurez-vous que les images sont de la bonne taille pour leur conteneur. (Pas besoin d’une image de 2000 pixels de large si elle va être affichée à 500 pixels)
  • Utilisez des plugins WordPress comme Smush, Imsanity qui redimensionnent automatiquement les images à une taille maximale prédéfinie lorsqu’elles sont téleversées dans votre bibliothèque de médias.
5/5 - (2 votes)
Parcourez d'autres articles
Visuels 100% uniques

Recevez des créations graphiques personnalisées aux couleurs de votre charte graphique

Mise en page optimisée

Mettez en avant les éléments essentiels grâce à une communication visuelle travaillée

Fichiers vectoriels + HD

Téléchargez tous les fichiers nécessaires à la publication & aux modifications de vos visuels graphiques

Visualisez vos modèles graphiques en ligne

Échangez facilement avec votre designer graphique & visualisez vos projets graphiques en ligne. 

Discutez en toute liberté avec votre graphiste sur une fenêtre de conversation instantané. 

Soyez libre de donner votre avis sur chacune des réalisations graphiques & demandez des modifications directement.

Vous recevez une notification par mail ou directement sur votre téléphone si vous possédez l’application K-Graphiste.

Demandez vos retouches et donnez votre avis facilement entre chaque proposition graphique. Joignez des pièces jointes si besoin.

Téléchargez un dossier complet avec votre création graphique, vos déclinaisons & les fichiers sources.

espace-client-k-graphiste

Échangez avec votre graphiste en ligne facilement

Téléchargez votre dossier complet au format ZIP

Découvrez toutes les propositions graphiques

Incluez des exemples de design dans votre réponse

+ 0
Solutions de communication
+ 0
Clients depuis 2019
+ 0
Réalisations graphiques
kevin-benabdelhak
Kevin Benabdelhak

Je suis Kevin Benabdelhak, un graphiste freelance spécialisé en communication visuelle & stratégie marketing. Créateur de K-Graphiste, mon but est d’aide votre entreprise à communiquer et à se démarquer.

K-Graphiste

GRATUIT
VOIR