Blog

Optimiser le temps de chargement de votre blog

Avez-vous déjà visité un blog dont le design est merdique mais dont le contenu est excellent ? La plupart des blogs que je suis sont dans cette catégorie.

Je n’essaie pas de réduire la valeur que ces blogs apportent grâce à leur excellent contenu. Mais je me demande combien leur croissance aurait été plus rapide s’ils avaient consacré plus de temps à réfléchir à l’apparence et aux performances de leur blog.

Depuis que j’ai lancé Money Stir, cette idée me trotte dans la tête. Surtout si l’on considère à quel point l’espace des blogs sur les finances personnelles est encombré, je m’inquiétais de la difficulté de bien faire et du temps qu’il faudrait pour commencer à gagner de l’argent avec le blog.

Il y a quelques semaines, j’ai mis en place un nouveau thème WordPress premium sur Money Stir. Ce que j’avais utilisé auparavant m’avait laissé un sentiment de « blah ». Je me sentais plutôt bien dans mon orientation de contenu, mais mon design et les fonctionnalités du site laissaient beaucoup à désirer. Et étant donné le nombre de projets que j’ai pour ce site, je n’avais pas l’impression que le design communiquait une marque dont j’étais fier.

Jetez un coup d’œil à l’article de suivi intitulé Stop Being a Cheap Ass : Spend Money on Your Blog !

Et puis j’ai recommencé

J’étais satisfait de l’apparence du nouveau site Web utilisant le nouveau thème premium, mais lorsque j’ai examiné de près les performances du site, j’ai remarqué qu’une tonne de choses ralentissaient les performances du blog.

J’ai été un développeur PHP pendant plus de 15 ans, donc je suis à l’aise avec le code des sites Web et WordPress. Mais en utilisant un thème premium, j’étais dépendant de leur code pour le site. Je pouvais mettre en œuvre des hacks pour modifier certaines choses ici et là, mais si je voulais que mon site soit BLAZINGLY FAST et avoir un contrôle total sur le thème, aller avec un thème premium ne fonctionnerait pas à long terme.

Alors qu’est-ce que j’ai fait juste après avoir lancé le nouveau thème premium de WordPress ? J’ai commencé à créer un nouveau thème WordPress à partir de zéro.

Lorsque j’ai écrit l’article parlant de mon nouveau thème, mon plan initial était d’attendre jusqu’à plus tard cette année. Mais une fois que la « démangeaison » a commencé, je n’ai pas pu l’ignorer longtemps. J’ai consacré tout mon temps libre à la création de ce nouveau thème personnalisé, et cela m’a pris énormément de temps.

Il y a eu des nuits pendant le week-end. Je suis resté debout à travailler jusqu’à 4 heures du matin. A certains moments, j’avais envie de me taper la tête contre le mur par frustration. Mais j’ai travaillé à travers cette douleur et ce que vous voyez maintenant est le résultat de mes efforts.

Tirer profit de mes points forts

Le fait d’être un développeur web et d’avoir une bonne connaissance de la construction et de la mise en place de sites web me donne un avantage sur la plupart des blogueurs spécialisés dans les finances personnelles. Je pourrais me contenter de quelque chose de « blah », mais pourquoi ne pas distinguer mon site des nombreux blogs de finances personnelles incroyables qui existent ?

Je ne voulais pas que l’apparence et les performances de mon blog soient la principale raison pour laquelle les gens visitaient le site. Mais j’apprends aussi que les sites qui peuvent faire tout ce qui suit grandissent plus vite et plus gros :

  • Un contenu de qualité
  • Un logo impressionnant
  • Site web facile à naviguer
  • Chargement rapide

Plus vite j’atteindrai ces objectifs, plus mon lectorat devrait augmenter. Lorsque les gens apprécient le contenu de votre blog ET aiment l’aspect et les performances de votre site Web, ils sont plus susceptibles de vouloir revenir et de parcourir votre site.

Pourquoi attendrais-je pour le faire et rater tout ce potentiel de croissance ? Une fois que vous avez construit une base solide pour votre site Web, vous avez plus de temps pour vous concentrer sur ce qui compte le plus : le contenu et le marketing de blog.

Ce que je ne savais pas à l’époque, c’était la quantité de travail que cela représenterait de recréer le site en tant que thème WordPress personnalisé.

La création d’un thème WordPress personnalisé est difficile

L’avantage d’opter pour un thème WordPress premium est qu’ils ont passé une tonne de temps à comprendre comment tout s’assemble. Les meilleurs thèmes ont beaucoup d’options pour personnaliser l’apparence à travers les zones de configuration de l’administration. WordPress a créé des systèmes pour faciliter le développement de ces options.

La plupart des thèmes premium sont mis en place pour les personnes qui ont peu ou pas de connaissances en développement de sites web. Et je pense que c’est un énorme avantage.

Mais les thèmes WordPress premium ont aussi quelques inconvénients :

  • Vous êtes enfermé dans leur base de code.
  • Le coût du thème comprend des éléments que vous n’utiliserez pas ou dont vous n’aurez pas besoin à l’avenir.
  • Comme le thème doit prendre en charge de nombreuses fonctionnalités différentes, votre site subira une baisse de performance.
  • Les personnalisations sont plus difficiles à réaliser dans le thème.
  • Vous devez vous préoccuper des plugins qui entrent en conflit avec votre thème premium.
  • Vous courez le risque d’avoir un design/une mise en page similaire à ceux des autres sites qui utilisent le même thème.

J’ai trouvé le site fantastique en utilisant le nouveau thème premium que j’ai acheté. Il était plus facile à gérer, et il complétait le nouveau logo du site. Mais je voulais que le site soit très rapide, et je voulais avoir plus de contrôle sur certaines choses.

J’ai décidé d’essayer de faire en sorte que le site ait un aspect proche de celui du nouveau thème premium, mais en recréant tout à partir de zéro. Cela m’a permis d’optimiser le code et d’améliorer les performances.

Ai-je perdu 60 € en achetant le thème WordPress premium ? Oui et non. Comme je ne suis pas un designer, le thème premium m’a fourni un exemple solide de la façon dont je voulais le site. Si j’avais commencé à créer un thème à partir de rien, je peux garantir qu’il ne serait pas aussi beau. Je ne suis pas un designer, et mes compétences créatives visuelles sont insuffisantes (c’est le moins qu’on puisse dire). Je suis beaucoup plus confiant dans le code.

Le nombre de problèmes que j’ai rencontrés en recréant le site dans un thème WordPress 100% personnalisé était décourageant. La partie avec laquelle j’ai eu le plus de mal était le CSS. Il était difficile de déterminer l’emplacement de chaque élément, et je me laissais sans cesse rattraper par des détails mineurs qui auraient pris des heures à régler. Si je devais recommencer, j’essaierais de couvrir les bases d’abord et de m’inquiéter des aspects plus détaillés une fois que le code de base du thème WordPress serait solide. Cela m’aurait probablement permis d’économiser 25 % du temps total qu’il a fallu pour mettre en œuvre le nouveau thème personnalisé.

Pour chaque élément dépassant le style de base ou les fonctionnalités de WordPress, j’ai dû soit trouver une bibliothèque JS personnalisée pour gérer cette fonctionnalité (comme le sticky de la navigation principale, la navigation mobile, etc.), soit créer un code personnalisé pour accomplir la tâche. La bonne nouvelle, c’est qu’il existe de nombreuses bibliothèques utiles, mais la recherche de celles qui offrent ce dont j’ai besoin et qui ne ralentissent pas le site a pris beaucoup de temps.

Blog Website Performance

La raison principale pour laquelle j’ai décidé de recréer un thème WordPress personnalisé à partir de zéro était d’augmenter les performances. Ai-je atteint cet objectif ? Regardons quelques chiffres.

Utilisation du thème Premium

D’un point de vue général, le site avec le nouveau thème premium était très performant. En regardant GTMetrix, voici les chiffres des performances :

  • Score PageSpeed : 97
  • Score YSlow : 98
  • Temps de chargement complet : 1.8s
  • Taille totale de la page : 677KB
  • Requêtes : 28

Ces chiffres sont assez impressionnants. Mais les choses étaient légèrement plus lentes que le thème que j’utilisais auparavant (il est vrai que le site était BEAUCOUP plus beau et avait plus de fonctionnalités). Ce qui m’a poussé à envisager de créer un thème WordPress à partir de zéro, c’est de regarder de près l’onglet « waterfall » dans GTMetrix. Pourquoi y avait-il plus de 7 polices différentes chargées ? Le site avait-il vraiment besoin de charger un fichier Font Awesome de 75KB ? Essayer d’optimiser davantage le site à ce stade m’a conduit à créer un thème WordPress personnalisé.

Utilisation du nouveau thème personnalisé

C’est ici que les choses commencent à devenir intéressantes. Si je créais un nouveau thème WordPress personnalisé, j’aurais plus de contrôle sur ce qui est chargé. Les performances pourraient être améliorées en supprimant ce dont je n’avais pas besoin. J’espérais pouvoir charger le site en moins d’une seconde.

Non seulement j’ai atteint mon objectif de charger le site en moins d’une seconde, mais j’ai décimé ce chiffre ! Voici le nouveau rapport GTMetrix utilisant le nouveau thème :

  • Score PageSpeed : 99
  • Score YSlow : 100
  • Temps de chargement complet : 0.8s
  • Taille totale de la page : 413KB
  • Requêtes : 24
vitesse de l'argent1
vitesse de l'argent2

Ces chiffres correspondent au chargement complet de la page d’accueil, mais le rendu de la page commence à apparaître avant ce moment-là. Je suis ravi de la rapidité du site. En fait, elle dépasse de loin mes attentes. Je peux peut-être optimiser certains aspects du code, mais je pense que la plus grande amélioration que je pourrais apporter à l’avenir serait de passer à un hôte plus rapide.

WPEngine est rapide pour un hébergeur mutualisé, mais j’aimerais passer à quelque chose de plus rapide lorsque le site prendra de l’ampleur.

Plugins WordPress

Les plugins WordPress peuvent avoir un impact considérable sur les performances de votre site. Beaucoup d’entre eux ajoutent des CSS et des JS au frontend, ce qui met les performances de votre site à genoux !

J’ai examiné en détail chaque élément JS et CSS ajouté par les plugins WordPress que j’utilisais. Dans certains cas, j’ai décidé de recréer le plugin à partir de zéro pour améliorer les performances. J’ai également supprimé certains JS et CSS qui étaient ajoutés par certains plugins.

Il s’agit d’un travail très détaillé sur les performances, et il est difficile de déterminer ce que vous pouvez supprimer et ce que vous devez ajouter pour que les choses fonctionnent. Comme je fais ce genre de travail presque tous les jours, j’ai pensé que le défi en valait la peine. Mais c’était quand même frustrant.

Je recommande vivement l’utilisation de WPRocket comme plugin de mise en cache pour WordPress. La minification JS et CSS et la fonctionnalité de combinaison de fichiers sont massivement bénéfiques. Dans la plupart des cas, vous devriez activer le module et configurer facilement les choses sans casser votre site. Leur zone d’administration est facile à comprendre et fournit toutes les fonctionnalités que je recherche.

Quels sont les avantages d’un chargement plus rapide d’une seconde pour votre blog WordPress ?

Avoir un site web qui se charge une seconde plus lentement ne semble pas être un gros problème, n’est-ce pas ? C’est faux ! Des études indiquent que les sites Web lents réduisent l’engagement des visiteurs et, en fin de compte, les ventes. Même si vous ne vendez rien sur votre blog, un site lent aura un impact négatif sur vos taux de rebond.

Comme cité dans cet article :

Amazon a indiqué que pour chaque 100 ms de retard supplémentaire (littéralement une fraction de seconde), les ventes diminuaient de 1 % ; cela donne à réfléchir.

tidycustoms.net

Les blogueurs ignorent souvent trop facilement les performances de leur site web.  » Tant que j’ai du contenu de qualité, le site va se développer « . Cette affirmation est peut-être vraie, mais dans quelle mesure voulez-vous ralentir le taux de croissance de votre blog ?

De plus, la performance du blog n’est pas quelque chose que vous pouvez gérer une fois et oublier. Vous devez continuellement vérifier que vous ne chargez pas des images de 400KB alors qu’une image de 10KB fonctionnerait tout aussi bien. Et ces problèmes ne sont pas faciles à résoudre.

Cela dit, une fois que vous aurez mis en place un thème WordPress solide avec des protections appropriées (comme le redimensionnement et l’optimisation des images) et que vous serez attentif aux nouveaux plugins que vous activerez, vous devriez avoir la plupart du travail en main.

Qu’est-ce qui a changé ?

Plus de 90% du site ressemble à ce qu’il était avec le thème premium, mais il y a quelques exceptions. C’est une chose d’augmenter les performances, mais c’en est une autre d’augmenter les performances ET de conserver l’aspect général de votre blog.

Voici les principaux changements fonctionnels et visuels par rapport à l’implémentation du thème premium :

  • Le menu mobile a une apparence différente mais se comporte de la même manière que le thème premium.
  • La page d’accueil n’a plus de curseur.
  • J’ai supprimé la fonction de parallaxe sur les articles pleine page. J’avais implémenté la parallaxe dans le thème personnalisé, mais le JS supplémentaire et la façon dont les images étaient affichées ne semblaient pas en valoir la peine, alors j’ai supprimé cette fonctionnalité.
  • L’expérience mobile du site a changé. Non seulement les choses sont plus rapides, mais le site est plus agréable à regarder avec des images en pleine largeur et moins de parasites sur les appareils mobiles. Je reçois une quantité importante de trafic mobile, donc c’est un gros problème.
  • Toutes les images du site, y compris celles des articles, sont maintenant chargées paresseusement. Cela a augmenté les temps de chargement de façon spectaculaire.

Voici à quoi ressemble le site sur les appareils mobiles :

moneystir mobile
Page d’accueil de Money Stir

Faut-il utiliser un thème premium ?

Si vous n’êtes pas un développeur web, je vous suggère fortement d’investir dans un thème WordPress premium. Votre site se chargera probablement plus rapidement et aura une meilleure apparence, et vos visiteurs vous remercieront. Mais vous voudrez passer du temps à trouver un bon thème WordPress premium qui donne la priorité aux performances du site web.

Avoir accès à un tas de fonctionnalités dans un thème WordPress premium est génial, mais faites une liste des fonctionnalités qui sont absolument essentielles pour ce dont vous avez besoin. Il pourrait être préférable d’opter pour un thème avec moins de fonctionnalités mais tout ce dont vous avez besoin, car cela rendra très probablement votre site Web plus rapide à charger.

Vous pouvez envisager d’opter pour un thème personnalisé pour les raisons suivantes :

  • Vous êtes un codeur ou avez de l’expérience dans le développement web.
  • Ou peut-être êtes-vous un autodidacte qui aime s’attaquer aux problèmes.
  • Vous avez de l’argent pour payer quelqu’un pour créer un site Web personnalisé et un thème WordPress (assurez-vous qu’il donne la priorité aux performances du site Web !)

Que pensez-vous de ce nouveau site web ? Pensez-vous que l’investissement en temps et en argent en valait la peine pour Money Stir ?