Comment améliorer le temps de chargement de son blog ? Le Guide Complet !


Le temps de chargement, c’est mon cheval de bataille préféré ! Pourquoi ?

  • Un site trop lent est une source de frustration pour le visiteur, en particulier sur mobile.
  • 40% des gens quittent un site qui met plus de 3 secondes à se charger.
  • Un temps de chargement trop long peut pénaliser votre référencement : ce n’est pas un hasard si Google donne beaucoup d’importance au format AMP pour proposer des pages encore plus rapides sur mobile…
  • Pour un professionnel, la moindre seconde de temps de chargement supplémentaire peut entraîner une baisse de 7% des conversions.

Bref, il faut optimiser la vitesse de chargement de votre site ! Mais comment la mesurer et comment procéder pour l’améliorer quand on n’est pas développeur web ? Je vous propose des conseils très concrets à appliquer dès maintenant.

Comment tester la vitesse d’un site ?

Direction GTMetrix. Je vous conseille de créer un compte gratuit car ça vous permettra de choisir l’emplacement depuis lequel mesurer la vitesse de votre site. En effet, même si le Web est mondial et que vous pouvez sans problème consulter un site à l’autre bout du monde, la distance affecte le temps de chargement.

Une fois votre compte créé, entrez l’adresse de votre blog (avec http ou https, avec/sans www selon le choix que vous avez fait) et choisissez le serveur de test le plus proche de l’endroit où se situent la plupart de vos lecteurs, Londres dans mon cas :

Tester la vitesse d'un site sur GT Metrix
Tester la vitesse d’un site sur GT Metrix

Cliquez sur le bouton « Analyze » pour lancer l’analyse. Vous allez obtenir deux scores : PageSpeed, l’indice de Google ; YSlow, l’indice de Yahoo. Je vous conseille de porter une attention toute particulière à PageSpeed :

  • C’est l’indice de Google – C’est donc un élément qui sert d’étalon à Google pour décider si votre site est performant ou pas en termes de temps de chargement… et qui dit Google dit référencement. En France, Google représente toujours plus de 93% de parts de marché (j’dis ça, j’dis rien !)…
  • C’est un indice plus accessible pour les blogueurs – YSlow de Yahoo a tendance à faire des recommandations souvent bien plus techniques et obscures pour un blogueur (on vous parle de filtre AlphaImageLoader, d’éléments DOM…).

Ne vous arrêtez pas à cette note sur 100 et jetez aussi un œil au temps de chargement indiqué en secondes.

Il faut plutôt interpréter la note PageSpeed comme une note de « respect des bonnes pratiques ». Un site peut avoir une très bonne note PageSpeed et mettre quand même 10 secondes à se charger… Or, ce qui compte au final, c’est l’impression qu’aura votre visiteur.

Voilà ce qui peut vous arriver…

Un temps de chargement trop long
Un temps de chargement trop long

Quand j’ai montré ce genre de score à l’un de mes nouveaux clients, autant vous dire que ça a suscité un regard horrifié et une question : « Mais…euh… en vrai… ma page ne met pas vraiment 33 secondes à se charger, si ? » Oui et non.

Le chiffre indiqué correspond au temps de chargement complet de la page.

Autrement dit, à chaque fois que vous affichez une page web, vous allez récupérer tout un tas d’éléments : le texte de la page, les images qu’elle contient, tous les fichiers qui permettent de la mettre en forme (feuilles de style, polices d’écriture), tous les fichiers qui apportent des fonctionnalités particulières (scripts).

Certains éléments sont stockés sur votre propre site, d’autres se trouvent sur des sites externes (par exemple, vous chargez une police d’écriture depuis le site de Google)… Tout ceci prend du temps, parfois un peu trop !

Ça ne veut pas dire que la page va rester blanche pendant 33 secondes mais qu’il va falloir 33 secondes pour que l’ensemble des éléments se chargent.

Idéalement, vous devez arriver à un temps de chargement inférieur à 3 secondes.

La vraie question, c’est « comment faire ? »

Vitesse de chargement
Mission : optimiser sa vitesse de chargement (sur les images libres de droit, le ridicule ne tue pas)

L’importance d’avoir un bon hébergeur

Vous allez devoir mettre les mains dans le cambouis pour améliorer la vitesse de votre site mais tous vos efforts ne serviront à rien si votre hébergeur n’est pas à la hauteur.

Si vous constatez régulièrement que votre site rame alors que votre note PageSpeed est bonne, il y a peut-être un problème à ce niveau. Souvenez-vous que vous n’êtes pas marié à votre hébergeur ;)

J’ai quitté OVH pour du jour au lendemain en 2014 justement à cause de problèmes de performance récurrents sur mon site, et d’un manque de réactivité du support technique.

Optimiser les images

Ca correspond aux lignes « Optimize images » et « Serve scaled images » sur GT Metrix.

Redimensionner une image

Il faut d’abord penser à redimensionner votre image (c’est-à-dire changer sa longueur et sa largeur) avant de la mettre en ligne sur votre blog. Si vous mettez en ligne une photo qui sort de votre appareil photo et qui fait 5000 pixels de large, peut-être qu’elle va s’afficher en petit sur votre blog mais le fichier, lui, fera toujours la même taille et ralentira donc votre page.

Vous pouvez utiliser Photoshop (menu Image > Taille de l’image). Si vous voulez un outil gratuit et plus « léger » à utiliser au quotidien, je vous conseille PhotoFiltre. Ce petit outil m’accompagne depuis des années et j’ai beau avoir Photoshop et Lightroom, je le trouve toujours aussi pratique et efficace pour les manipulations d’images « du quotidien ».

Quelle largeur utiliser ? Tout dépend de votre thème de blog. Vous pouvez faire une capture d’écran de votre blog, l’ouvrir avec Photoshop ou Photofiltre et regarder quelle largeur en pixels fait votre colonne de texte, ça vous donnera une idée de la largeur maximale à ne pas dépasser. C’est souvent moins de 1200 pixels.

Contrôler le poids de l’image

C’est la minute régime du jour… Pour faire maigrir ses images, il faut d’abord retenir qu’il existe différents formats d’images, certains étant plus adaptés au Web que d’autres : on utilise en général le JPEG pour les photos et le PNG pour les visuels type infographies, logos, etc.

Lorsque vous enregistrez votre image, au-delà du choix du format, pensez à supprimer les informations EXIF/les métadonnées (les logiciels de photos comportent souvent une option/une case à cocher à cet effet). Exemple ici avec Photofiltre :

Informations EXIF à supprimer
Informations EXIF à supprimer

Le poids idéal recommandé est autour de 100 Ko par image. C’est parfois difficile à atteindre quand on poste des photos en grand format et qu’on veut garder une qualité acceptable mais c’est bien d’avoir ce chiffre en tête afin de s’en approcher autant que possible.

Compresser l’image en ligne

Vous pouvez enfin installer sur votre blog un plugin qui va compresser les images en ligne, je vous conseille ShortPixel sur WordPress, qui est très performant.

Faites le tri dans vos plugins

Un plugin peut ralentir votre blog pour deux raisons majeures :

  • Il est mal codé : il existe de « bonnes pratiques » en termes de développement web et si elles ne sont pas respectées, le plugin peut impacter la vitesse d’une page web.
  • C’est une boule à facettes : certains plugins se vantent de pouvoir presque tout faire pour vous à part le café ;) Parfois, ils sont tellement riches en fonctionnalités que vous vous retrouvez avec mille options dont vous n’avez pas besoin, que vous ne pouvez pas forcément désactiver.

Faites le tri ! Avez-vous vraiment besoin de toutes ces fonctionnalités en plus ou certaines choses relèvent-elles du « gadget » ? Avez-vous deux plugins qui font la même chose ? Ce plugin concerne-t-il exclusivement votre site ou est-il lié à un autre site (par exemple, si vous affichez un flux Instagram sur votre blog, le plugin va être tributaire d’Instagram pour afficher les photos, ce qui va donc exiger un temps de chargement supplémentaire).

Quand un plugin ajoute des fonctionnalités ou modifie la mise en forme de votre blog, ça correspond à des lignes de code et à des fichiers à charger… et ils peuvent ralentir vos pages. Si vous constatez un problème de lenteur, essayez de supprimer les plugins qui ne sont pas indispensables. Vous pouvez aussi lire mon article Peut-on avoir trop de plugins WordPress ?.

Utilisez la pagination et le bouton « Lire la suite »

Sur un blog, vous pouvez contrôler la pagination, c’est-à-dire le nombre d’articles qui vont s’afficher sur chaque page.

Sur Blogger, l’option se trouve dans le menu Paramètres > Articles, commentaires et partages, au niveau de la ligne « Afficher au plus X articles sur la page principale ».

Pagination sur Blogger
Pagination sur Blogger

Sur WordPress, elle se trouve dans le menu Réglages > Lecture, au niveau de la ligne « Les pages du site doivent afficher au plus X articles ».

Pagination sur WordPress
Pagination sur WordPress

Ici, il faut trouver un équilibre :

  • Afficher suffisamment d’articles pour que le visiteur se fasse un avis sur votre contenu.
  • Afficher assez d’articles pour que les moteurs de recherche aient accès à un maximum de posts « au premier coup d’oeil » sans avoir des dizaines de contenus cachés dans les profondeurs des pages 20, 30 et plus…
  • Ne pas en afficher trop car sinon, vos pages deviennent plus lourdes.

Vous pouvez utiliser GT Metrix pour tester le poids d’une page de catégorie en faisant varier le nombre d’articles et voir si ça joue beaucoup sur le temps de chargement.

Pensez aussi à placer un lien Lire la suite sur vos contenus pour afficher seulement un extrait de l’article sur la page d’accueil ou dans les rubriques de votre blog.

Compresser et minifier ses fichiers

Je vous l’ai dit, une page web charge souvent tout un tas de fichiers. Le but du jeu est de faire en sorte qu’ils prennent le moins de place possible !

Minifier ses fichiers

Quand on écrit du code, on fait souvent en sorte d’avoir une présentation « aérée » pour s’y retrouver plus facilement. Par exemple, voilà à quoi ressemble la feuille de style de mon blog quand je travaille sur mon design :

Du code CSS non minifié
Du code CSS non minifié

Le problème, c’est que tous ces espaces alourdissent le code. Par ailleurs, on finit souvent par avoir des éléments qui apparaissent en double : par exemple, on indique que le gros titre utilise telle police… et un peu plus tard, on précise que le sous-titre utilise lui aussi cette police d’écriture. Alors qu’on aurait très bien pu dire en même temps « Le titre et le sous-titre utilisent telle police d’écriture ».

C’est là que la « minification » entre en jeu ! On va en quelque sorte miniaturiser le code en supprimant les espaces et en regroupant les éléments qui peuvent l’être pour que le fichier soit plus léger. On peut minifier du HTML, du CSS, du JavaScript… et ça donne quelque chose comme ça :

Code CSS minifié
Code CSS minifié

Si vous avez l’habitude de personnaliser votre thème, vous pouvez utiliser un site comme CSS Minifier ou JavaScript Minifier pour modifier vos fichiers.

On conserve en général les deux versions : la version « aérée » dont on se sert pour travailler parce qu’elle est plus confortable… et la version minifiée (qui s’appellera par exemple style.min.css) que l’on chargera sur son blog parce qu’elle est plus légère.

On peut aussi, plus simplement, mettre en place un plugin comme WP Fastest Cache : il comporte plusieurs options dédiées à la minification. Ça devrait vous permettre d’améliorer votre score sur les lignes « Minify HTML », « Minify CSS » et « Minify JavaScript » de GT Metrix sans avoir à trop mettre les mains dans le code.

Utiliser la compression Gzip

Pour améliorer le temps de chargement, vous pouvez aussi avoir recours à la compression : les fichiers qui composent vos pages web sont automatiquement compressés pour prendre moins de place (et être envoyés plus vite vers le navigateur de vos visiteurs !). Au moment de la consultation de la page, ils sont décompressés pour être affichés.

Le plugin WP Fastest Cache permet d’assurer ce type de compression si vous cochez la case « Réduire la taille des fichiers envoyés à partir de votre serveur » dans les options. Vous devriez ainsi améliorer la ligne « Enable gzip compression » sur GT Metrix (chez moi, elle est à 100/100).

La compression Gzip est très en forme !
La compression Gzip est très en forme !

Utiliser la puissance du cache

Quand un visiteur découvre votre site, il doit accéder à tous les éléments qui le composent : logo, bannière, feuille de style, contenu, scripts…

Avec le cache, on met en mémoire certains éléments lorsqu’une page est visitée pour la première fois de telle sorte que dès la seconde visite, l’utilisateur n’ait pas à les charger à nouveau.

On peut même « pré-charger le cache » en amont (l’option « Preload » existe dans le plugin WP Fastest Cache) pour que n’importe quel visiteur, même le tout premier à consulter une page, ait déjà une version rapide.

Il existe plusieurs plugins de cache de qualité en dehors de WP Fastest Cache : WP Rocket est une référence, WP Super Cache est également réputé.

Le (célèbre) Leverage browser caching

Vous pouvez ajouter le code qui suit à la fin du fichier .htaccess présent à la racine de votre blog (on y accède à l’aide d’un client FTP comme FileZilla ou WinSCP, en utilisant les informations de connexion fournies par votre hébergeur).

Il permet de mettre en mémoire certains fichiers d’un site (les images, les polices d’écriture, etc) pendant une durée déterminée afin que les visiteurs récurrents les réutilisent lors de leurs prochaines visites (au lieu de les charger à chaque fois).

Voilà ce que j’utilise sur mon blog :

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/svg+xml A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
</ifmodule>

Vous ne pouvez mettre en mémoire que des fichiers situés sur votre propre site. Par exemple, grâce à l’ajout de ce code, tout va bien pour No Tuxedo mais je n’obtiens pas une note de 100/100 sur GT Metrix car le blog charge aussi des fichiers issus de Twitter et de Google, sur lesquels je n’ai aucun contrôle (bon, dans mes rêves je contrôle Google mais après je me réveille).

Leverage Browser Caching (à tes souhaits)
Leverage Browser Caching (à tes souhaits)

Specify a cache validator

Le « cache validator » auquel GT Metrix fait référence est un système qui vérifie l’existence d’une version en cache de la page. Autrement dit, quand un visiteur demande à consulter une page, avant de se mettre à télécharger tous les éléments qui la composent (ce qui demande un certain temps de chargement), le validateur regarde s’il existe déjà une version en cache de la page, qui lui évite d’avoir à recharger tous les éléments.

Vous pouvez ajouter ce code au fichier .htaccess :

<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=2628000, public"
</filesmatch>

Le « max-age » correspond à une durée en secondes pendant laquelle une ressource est mise en cache (ici, un mois). On définit que la page peut être mise en cache publiquement (à l’inverse, quand on doit mettre en cache des données confidentielles, on peut choisir une autre politique !).

On peut tout à fait définir une durée différente d’un type de fichier à un autre.

Optimiser son code

C’est la partie qui exige le plus d’aisance technique quand on veut vraiment aller loin dans l’optimisation… mais il y a déjà des choses que vous pouvez faire facilement sur WordPress.

Defer parsing of JavaScript

Que signifie donc cette phrase mystérieuse ? Déjà, le JavaScript est un langage informatique qui permet d’ajouter des fonctionnalités à une page : par exemple, animer des éléments sur une page, la rendre plus interactive (en créant des pop-ups, etc).

Pour qu’un navigateur comprenne ce langage et effectue l’action attendue (par exemple, afficher un pop-up), le code JavaScript vit différentes aventures successives :) C’est très technique mais pour simplifier, il est analysé et transformé, en plusieurs étapes, pour aboutir à un code que le navigateur peut interpréter pour afficher le résultat à vos visiteurs.

L’une de ces étapes fait appel à un « parseur », qui analyse le code. Ce travail d’analyse prend un peu de temps et ralentit donc le chargement de la page web. Différer le parsing du JavaScript consiste à attendre d’avoir réellement besoin du code JavaScript en question pour lancer l’analyse, au lieu de le faire dès l’ouverture de la page.

A titre personnel, j’utilise le code suivant (issu du blog Laplacef), inséré dans le fichier functions.php du thème WordPress (pour savoir comment ajouter du code à functions.php, c’est par ici !).

if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
// return "$url' defer ";
return "$url' defer onload='";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Il est plutôt efficace. La preuve ? Un petit tour sur GT Metrix avant l’insertion du code…

Defer parsing of Javascript - Avant optimisation
Defer parsing of Javascript – Avant optimisation

Et un petit tour après insertion du code…

Defer parsing of Javascript - Après optimisation
Defer parsing of Javascript – Après optimisation

Remove query strings from static resources

Souvent, les fichiers qui composent les plugins comportent des numéros de versions. Par exemple, vous allez avoir un fichier intitulé « style.css?v=1.2 » dans le code. Le problème, c’est que ces noms comportant un point d’interrogation ne sont pas bien mis en cache, ce qui peut ralentir le site.

On peut donc supprimer ces paramètres. Il suffit d’ajouter ce morceau de code au fichier functions.php qui se trouve dans le dossier de votre thème WordPress.

function _remove_script_version( $src ){
return add_query_arg( 'ver', false, $src );
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Optimize the order of styles and scripts

Je vous l’ai dit, une page web fait appel à plein d’éléments et de fichiers différents : des styles, des scripts, etc. On ne doit pas charger tous ces éléments dans n’importe quel ordre.

C’est un peu comme lorsque vous déménagez : vous n’allez pas mettre tout au fond du camion le sac qui contient vos clés puis empiler les cartons et les meubles devant ;)

Avec le code, même principe : il y a un ordre… et en l’occurence, quand votre blog fait appel à des feuilles de style, il faut les charger avant de charger les fichiers JavaScript.

Là, il faut vraiment mettre les mains dans le code… et la façon de procéder est propre à chaque site. L’idée générale est la suivante :

  • Lister tous les styles/scripts qui sont chargés sur vos pages (en regardant le code de la page) ;
  • Vérifier qu’un même élément n’est pas chargé deux fois : parfois, deux plugins font appel à un même fichier… et chaque plugin va le charger, il apparaît donc en double… Si c’est le cas, il faut créer un code dédié (qu’on ajoute au fichier functions.php par exemple) à l’aide des fonctions wp dequeue script (si c’est un script) ou wp dequeue style (si c’est un style). Ça retire le script ou le style en question de la liste des fichiers à charger.
  • Définir l’ordre de chargement des fichiers : les CSS, puis les fichiers JavaScript. Pour ce faire, on crée là aussi des fonctions sur WordPress, qui font cette fois-ci appel à wp enqueue script et wp enqueue style.

Là, on est dans le code pur et ça permet de contrôler assez finement dans quel ordre se chargent tous les fichiers de vos plugins et de votre thème… C’est grâce à ce travail que j’ai pu obtenir une note de 100/100 sur GT Metrix sur ce point… et comme je ne suis pas développeur, autant dire que ça m’a demandé un peu de jus de cerveau ;)

Optimiser l'ordre des scripts et des styles
Optimiser l’ordre des scripts et des styles

Utiliser un CDN

C’est la cerise sur le gâteau, l’étoile sur le sapin, bref, le summum de la recherche de performance : le CDN. Ces trois lettres mystérieuses signifient « Content Delivery Network ». Ok, vous n’y voyez pas plus clair.

Je vous en parlais en début d’article, le temps de chargement d’un site pour un visiteur varie selon la distance entre le visiteur et le serveur où est stocké le site. No Tuxedo, par exemple, est hébergé en France. Regardez ce qui se passe si je charge le site depuis Londres : temps de chargement de la page d’accueil à 1.8 sec, tout va bien !

Temps de chargement à faible distance
Temps de chargement à faible distance

Et si je charge le site depuis l’Australie… aïe, ça met 2 secondes de plus !

Temps de chargement à longue distance
Temps de chargement à longue distance

Le but du CDN, c’est de réduire ces écarts. C’est un système qui va créer des « copies » de votre site sur différents serveurs, un peu partout dans le monde. A chaque fois qu’un visiteur consultera votre site, c’est le serveur le plus proche de lui qui lui enverra les données. Pratique, non ?

Le CDN le plus connu est CloudFlare, il y a un tutoriel sur leur site (en anglais) pour utiliser CloudFlare avec WordPress. Pour ma part, je n’ai pas encore décidé d’avoir recours à un CDN.

L’heure du bilan

Voilà, nous arrivons au terme de cet article… et je pense qu’il va vous falloir un peu de temps pour le digérer maintenant ;) La bonne nouvelle, c’est que ça fonctionne vraiment. Voici le score que j’ai obtenu sur GT Metrix au moment de la rédaction de cet article :

Score GT Metrix élevé
Un score GT Metrix pas trop mal

Par la suite, les performances ont un peu diminué car j’ai changé de régie publicitaire. C’est, en soi, une autre leçon à retenir : de nombreux choix que l’on fait sur un site web sont susceptibles d’affecter le temps de chargement… et c’est un critère à ne pas négliger ! J’espère en tout cas que ce guide vous sera utile. A vous de faire un tour sur GT Metrix… Alors, verdict ?


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

17 commentaires sur “Comment améliorer le temps de chargement de son blog ? Le Guide Complet !

  • Lisa Luna-Duran

    Bonjour,

    Je suis en train de parcourir tous tes articles sur la vitesse et la performance car j’avais un très mauvais score malgré des photos optimisées. Sur GMetrix, ce qui a l’air d’être le pire, c’est le « Leverage Browser Catching » qui est carrément à 0. J’ai mis le plug-in WP Super Cache mais ca n’a rien changé! Dois-je rajouter le bout de code au ficher .htaccess en plus de ca ?

    Merci d’avance pour ta réponse et merci pour ton super boulot!!! Sans toi, je me serais arraché tous les cheveux cette après-midi <3

    Lisa

    Répondre à Lisa
    • Marlène

      Hello Lisa, oui le code peut aider. Un plugin peut aider à pallier à certaines difficultés mais si le site a des problèmes de code au départ, il ne fera pas de miracle malheureusement. D’où l’intérêt, par exemple, de bien choisir son thème de blog quand on se lance.

      Répondre à Marlène
  • Suny

    Dans le htaccess de WP Super Cache, il y a déjà ça (avec moins de détails) :

    SetEnvIfNoCase Request_URI \.gz$ no-gzip

    Header set Vary « Accept-Encoding, Cookie »
    Header set Cache-Control ‘max-age=3, must-revalidate’

    ExpiresActive On
    ExpiresByType text/html A3

    >>> Est-ce qu’il n’y a pas conflit si on ajoute les deux codes de ton présent article pour  » Leverage browser caching » et « Specify a cache validator » dans le htaccess en sachant qu’il y a déjà une petite partie moins développée dans le htaccess de WP Super Cache ? (je t’ai C/C). Je ne sais pas ce que tu penses, Marlène ? J’imagine que je ne dois pas être le seul à me poser cette question pour ceux qui ont déjà WP Super Cache.

    Répondre à Suny
    • Marlène

      Si tu as déjà des dates d’expiration définies pour certains types de ressources, le code risque d’être redondant à certains égards mais en tout cas, l’ajout ne fera pas planter le blog :)

      Répondre à Marlène
  • Alexandrine

    Hello,
    J’ai un score catastrophique avec une note de 0 pour « minimize redirects » et là j’ai une liste incroyable de redirections vers des url que je ne connais pas. Que faire ?

    Répondre à Alexandrine
    • Marlène

      Hello, c’est généralement lié aux systèmes de tracking utilisés sur un site (publicité, A/B Testing, fonctionnalités marketing, etc). A creuser avec ta régie publicitaire ou les éventuels services concernés car je ne sais pas quelle marge de liberté tu as pour rectifier ça…

      Répondre à Marlène
    • Alexandrine

      Merci, je vais regarder ça de plus près

      Répondre à Alexandrine
  • Sandrine

    Je me suis longtemps pris la tête sur ce maudit poids et j’ai mis beaucoup de choses en place pour le réduire. Mais voilà longtemps que je ne m’en préoccupais plus, vu que les dernières mesures étaient tout à fait correctes.
    En voyant ton article je me suis dit « allez, je repèse » :-)
    Moment d’angoisse : et si j’avais pris du poids depuis la dernière fois ??
    Et verdict sur mon article de ce matin :
    PageSpeed Score : A – YSlow Score : B – Fully Loaded Time : 10.5 – Total Page Size : 690 – Requests : 45
    Ça me va très bien : je retourne dormir sur mes deux oreilles, en n’oubliant pas de te remercier pour tes articles que je ne commente pas souvent mais suis toujours avec intérêt.

    Répondre à Sandrine
    • Marlène

      Merci de ton commentaire ! 10 secondes ça reste élevé mais c’est parfois compliqué de faire descendre le chiffre sans un travail démesuré !

      Répondre à Marlène
  • Suny

    Salut Marlene,

    merci pour cet article, toujours aussi bien!

    * si on a déjà WP Super Cache, est-il nécessaire de suivre tes recommandations pour « Le (célèbre) Leverage browser caching » et « Specify a cache validator » ? (les codes à coller dans htaccess) ou ce n’est pas nécessaire ?

    * tu dis qu’il faut éviter de télécharger trop de plugins par rapport au temps de chargement du site.

    Mais tu suggères quelques plugins aussi en même temps comme : Le plugin WP Fastest Cache ,
    peut-être devrais-tu préciser pour chacun si on peut juste l’installer et faire la compression, et aussitôt le désinstaller pour éviter la surcharge ? enfin comme tu ne précises pas, j’ai tendance à me dire que si on installe, on est obligé de garder définitivement (comme WP Super Cache qui est normal). Donc, je sais pas quoi faire, désolé de te taquiner avec ça :-p

    Répondre à Suny
    • Marlène

      Hello, je n’utilise plus WP Super Cache donc je ne me souviens plus exactement des lignes qu’il ajoute dans le htaccess et ça dépend de la façon dont tu l’as configuré. Le plus simple est de tester ton site sur GTMetrix et de voir s’il te sort des avertissements relatifs à la mise en cache ou pas. Un plugin de cache doit effectivement être laissé en continu sur le site.

      Petite précision complémentaire : je ne dis pas vraiment qu’il faut « éviter de télécharger trop de plugins »… mais plutôt qu’il faut veiller à avoir les plugins dont on a besoin, bien codés… et pas plus :) On peut tout à fait avoir beaucoup de plugins s’ils sont performants et utiles au site. Je pense au développeur Pippin Williamson qui avait 80 plugins sur son site et aucun problème de temps de chargement !

      Répondre à Marlène
  • Véronique

    Merci beaucoup pour cet article très complet qui va m’être très utile. Surtout la partie sur le Java script et l’amélioration du code. Je cherchais depuis longtemps des infos claires et précises à ce sujet car je n’aime pas trop ajouter des bouts de code par peur d’enclencher l’autodestruction de mon site! Maintenant, je pense pouvoir le faire sans stress.

    Répondre à Véronique
    • Marlène

      Ca reste un sujet assez technique donc ça ne m’étonne pas que ça suscite quelques hésitations avant d’agir :) Une petite sauvegarde avant toute modification est toujours souhaitable !

      Répondre à Marlène
  • Daphné @ Be Frenchie

    Quel guide intéressant, et quelle somme de travail ! Un petit test GT Metrix m’a permis de vérifier qu’effectivement, mes photos sont bien trop lourdes à charger. Je connaissais certains points, comme le CDN de Cloudflare mais avais fait l’impasse sur d’autres.

    Merci pour cet article sous forme de check-list; je vais pouvoir lancer un audit complet pour comprendre comment améliorer l’espérience utilisateur.

    Répondre à Daphné
    • Marlène

      Merci Daphné, les photos sont toujours un défi quand on veut allier une certaine qualité et un poids raisonnable.

      Répondre à Marlène
  • Thomas

    Article très intéressant et très complet ! Le temps de chargement est en effet un facteur très important que certains oublient d’optimiser, ce qui est dommage ne serait-ce que pour l’expérience utilisateur. Et même si cela n’a pas un impact énorme en termes de référencement, c’est quand même l’un des facteurs utilisés par notre ami Google. :)

    Je rajouterai simplement une chose : le PageSpeed de GTMetrix n’est pas tout à fait le PageSpeed de Google. Ce dernier utilise sa propre version non open source, alors que GTMetrix utilise une version plus ancienne si je ne me trompe pas. D’ailleurs, les scores PageSpeed de GTMetrix et ceux de PageSpeed Insights sont souvent différents.

    Répondre à Thomas
    • Marlène

      Hello, tu as tout à fait raison sur le PageSpeed. GTMetrix utilise un SDK open source créé par Google, qui est à la base du fonctionnement de PageSpeed Insights. Google a mis à jour sa version de la librairie mais pas celle qui est intégrée au PageSpeed Insights SDK… donc si l’indice reste bien basé sur celui de Google, ça explique que les résultats ne soient pas toujours les mêmes que lorsqu’on fait le test sur PageSpeed Insights. Il n’a pas été mis à jour depuis le printemps 2016.

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.