Le code influe sur le chargement d'une page web sous WordPress. Comment faire ?

Comment profiter un max de votre serveur pour l’optimisation WordPress !

Mon score
Notes des visiteurs
[Total : 0 Moyenne : 0]

Les internautes ont de moins en moins de patience en ce qui concerne leur navigation internet : si le temps de chargement d’une page internet dépasse les 2 secondes, le nombre de visiteurs qui quitteront la page internet augmentera avant même d’avoir eu le temps de visiter le site. Que soyez sous WordPress ou non.

En suivant ce guide, vous pourrez réduire de manière drastique les temps de chargement de votre site et ainsi le rendre bien plus convivial pour vos utilisateurs. Cela fera plaisir à Google aussi.

La vitesse de chargement d'un site web joue sur son positionnement dans Google

Ah ! Peut mieux faire.

Comment optimiser une page web  dés sa construction ?

On pourrait faire une analogie entre une page web et une maison. Si les fondations sont mauvaises, la maison s’écroulera : pour une migration ou la création d’un site internet sous WordPress, c’est exactement la même chose. Si un site est lent à se charger quelque soit le navigateur utilisé, les visiteurs resteront moins longtemps sur le site et Google le discréditera.

Ainsi, trois paramètres principaux sont à étudier et optimiser la vitesse d’un site web.

Tout d’abord, il est nécessaire de bien l’héberger, auprès d’un hébergeur de qualité. (Deux grands types de serveurs sont à votre disposition : mutualisé, dédié).

Choisissez un serveur compatible avec au moins une de ces deux technologies (compression Gzip or Deflate). Pour le savoir je vous invite à tester différents sites hébergés sur un même hébergeur.

Pour rappel, il vous faudra bien choisir le thème WordPress que vous voulez, c’est-à-dire un thème qui vous correspond, mais qui se charge aussi de manière efficace et rapide.

Enfin, travaillez uniquement avec les plugins WordPress réellement nécessaires : n’incluez pas un plugin qui servira à peu de chose à part à part diminuer la vitesse de vos pages sur Internet.

Théoriquement les serveurs mutualisés bénéficiant d’un système de maintenance logicielle sous la responsabilité de l’hébergeur contrairement au serveur dédié classique ou VPS où il faut tout gérer de A à Z.

L’hébergeur peut proposer l’infogérance. Généralement ce type de services optionnels une demande un surcoût. L’infogérance comprend normalement, la sauvegarde et la maintenance du serveur. Un conseil : faites, dans tous les cas, régulièrement, une copie de vos fichiers et de votre base de données de votre côté.

Comment tester la vitesse d’un site web ?

On en arrive donc à la première vraie règle pour optimiser : toujours mesurer pour gagner, à la longue en terme de bande passante. Mesurer la vitesse de chargement et l’optimisation de votre page web est en effet indispensable. (pour un site de e-commerce ou autres).

Ce qu’il faut savoir c’est que même en suivant ce guide, vous n’arriverez pas forcement à une efficacité de 100% en mesurant avec Google Insights sans bug plus ou moins discret, mais vous vous en approcherez. Plusieurs mesures d’efficacité de temps de chargement existent, nous étudierons les principaux dans la suite de ce guide.

Google PageSpeed Insight

Pour rappel, ce produit du moteur Google mesure un score d’optimisation et donne des informations et conseils très utiles pour optimiser de vos temps de chargement et optimiser les ressources clés de votre serveur.

En effet, cet outil vous permet de travailler d’une certaine manière sur le SEO de vos pages de manière globale. (en particulier la vitesse).

Oui, le référencement naturel, ce n’est pas uniquement produire du contenu de qualité, mais il faut aussi avoir des fondations informatiques solides, comme la ligne éditoriale, par exemple ou un bon code source pour chacune de vos pages.

Si vous avez, sur vos pages, des images ou du code non optimisé pour vos fichiers en javascript (et autres…), Google PageSpeed Insights générera automatiquement un rapport contenant ces fichiers à optimiser : vous n’aurez plus qu’à le suivre et le temps de chargement de votre page en sera réduit considérablement et ainsi en augmenter la vitesse de chargement. Pensez à alléger les photos sans logiciel particulier sur Windows.

D’autres outils et techniques sont mentionnés dans un précédent article. Pour les (re)connaître, je vous invite à consulter le lien suivant : 5-outils-optimiser-pages-web

Comment optimiser des images et accélérer votre site WordPress ?

Les images : passer à côté de leur optimisation et de leur implantation sur un site WordPress est une grave erreur technique. En effet, les images représentent un poids de page important au niveau du chargement, car c’est un des facteurs qui demandent beaucoup de ressources en temps de chargement.

Si vous avez une extension de cache, pensez à utiliser l’option correspondants au Lazyload, si le paramètre ne casse pas votre site web. Un gain en matière de vitesse non négligeable.

Notez la chose suivante : pensez à les redimensionner et à les compresser avant de le télécharger sur votre espace web même si vous possédez un plugin de cache sous WordPress.

Petite astuce si vous travaillez sous Windows et que vous utilisez un logiciel d’édition d’image Paint.Net, pensez à enregistrer votre image de nouveau en utilisant enregistrer ou enregistrer sous. Tout ceci dans le but, d’éviter d’avoir des images pesant plus de 100 ko.

Retenez qu’une page web ne doit pas peser plus de 1-2Mo dans un environnement bureau et encore moins sur un environnement mobile.

N’hésitez pas à tester les nombreux outils WordPress qui optimisent (compressent) les images tout en évitant de leur faire perdre en qualité. (Smush It, Kraken…)

Plusieurs points sont ainsi à retenir comme choisir le bon format d’image (le plus souvent jpg, png (si vous voulez jouer sur l’opacité) ou gif su vous souhaitez une animation.

Le chargement des images sur vos pages web peut être faciliter avec un plugin de cache

Quel dommage de passer à côté d’une si belle image si le site web est trop lent à charger. Non ?

Optimisation du code pour un meilleur temps de chargement de pages web.

Vous pouvez aussi utiliser des outils qui optimiseront le code de votre site. Par ailleurs, n’hésitez pas employer les différentes pour optimiser des bouts de codes en CSS, HTML, JS, PHP… grâce un système de cache lié à un serveur compatible afin de réduire le temps de chargement des pages que les visiteurs regarderont.

Il est aussi évident qu’il faut se débarrasser de tous les codes inutiles qui se chargent à l’arrivée du visiteur.

Option de mise en place

Tout bon serveur doit avoir le module de service : mod_expires d’activé. Cette option un tiens pratique pour contrôler la durée de mise en place de la plupart de vos scripts.

Pour en savoir plus, je vous invite sur le lien suivant les procédures de mise en cache liées aux navigateurs de vos visiteurs.

Render-blocking JavaScript and CSS in above-the-fold content

Combien de fois avez-vous été confronté à ce message d’erreur avec Google Insight ? Certes vous pouvez minimiser l’handicap décelé par le moteur Google.

Cependant, tenter résoudre le problème à 100 % peut-être pire que le mal si vous avez trouvé la solution pour d’y arriver. Pensez à tester le résultat d’affichage sous différents type de navigateurs (et sur mobile). En effet on peut avoir une sérieuse surprise.

Si vous n’êtes pas développeur, le plugin WordPress WP-Rocket a mis à jour son plugin de cache en proposant une solution pour le code en CSS ou JS.

Je vous invite aussi à lire cet article pour tenter d’y remédier avec WP-Rocket.

Le chargement d'une page web s'optimise en utilisant Google Insight, entre autres. Pensez aux css et js

On touche au but, il faut maintenant  récupérer le script externe de la police de caractères.

Solution de préchargement des DNS

Là encore une fois, vous avez droit d’implanter une option de cache très pratique. Cette option (prefetch) permet d’éviter de rechercher sur le web les DNS de chaque site à chaque fois que l’on fait appel une  deuxième fois sur une page à un script externe. Croyez-moi, cette option peut parfois vous faire baisser fortement le temps de chargement de vos pages web.

J’ai beau avoir testé plusieurs solutions gratuites sur le web, je n’en retiendrais aucune. WP-Rocket (eh oui encore lui) :) vous permet très facilement d’optimiser le préchargement des DNS pour votre site sous WordPress.

Oui mais le CSS, le HTML et le JS

Bien sûr, la combinaison et la minification des scripts en CSS et JS peuvent s’avérer bénéfiques. Attention veillez à effectuer des tests minutieux pour éviter de casser littéralement le design de votre site.

Comment optimiser un script externe très gourmand ?

Ayant déjà évoqué ce sujet dans un article, il est fort utile d’embarquer une copie des scripts externes dans la mesure du possible. L’exemple de Google Analytics a été traité dans un article d’optimisation de site précédent. Toujours le même : /5-outils-optimiser-pages-web/

N’utilisez pas uniquement ces outils afin d’obtenir un résultat pour la page d’accueil. Testez aussi des pages profondes de votre site.

Conclusion sur la vitesse d’un site web

Comme vous pouvez le constater sur le web, de nombreux outils sont disponibles et accessibles afin de rendre vos pages web plus performantes et rapides tels que WP-Rocket. Ce guide vous aura présenté celles qui sont considérées comme les principales et qui sauront, si elles sont utilisées à bon escient, vous faire gagner en optimisation. Vous avez des pistes pour savoir comment faire.

Si vous êtes un fan de WP-Rocket testez, une par une, les différentes options de cache. N’oubliez pas à chaque fois de tester tous les paramètres au moins 2 types de navigateurs (en mode déconnecté de votre site). Grâce à ce guide sans prétention d’exhaustivité, vous allez finir par obtenir des scores corrects sous Pingdom Tools et Google Insight et peut vous aider à compléter le cahier des charges lors de la création d’un site.

N’oubliez pas de tester les options relatives au remove query string. ;)