Le code influe beaucoup sur le chargement d'une page web

Comment optimiser le chargement d’une page web sous WordPress !

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.

Optimiser sur 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 un site internet sous WordPress, c’est exactement la même chose.

Ainsi, trois paramètres principaux sont à étudier et optimiser.

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 (Gzip or Deflate). Pour le savoir je vous invite attester différents sites hébergés sur un même hébergeur avec un lien du style suivant.

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 à faire ralentir votre page 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é.

Étapes pour optimiser la vitesse des pages

On en arrive donc à la première vraie règle pour optimiser : toujours mesurer. Mesurer la vitesse de chargement et l’optimisation de votre page web est en effet indispensable.

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.

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.

Si vous avez, sur vos pages, des images ou du code non optimisé, Google PageSpeed Insights générera automatiquement un rapport contenant ces fichiers optimisés : vous n’aurez plus qu’à le suivre et le temps de chargement de votre page en sera réduit considérablement.

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

Optimiser des images

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 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.

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.

chargement image web

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

Optimisation des codes et du cache

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'un site web s'optimise en passant par Google Insight, entre autres.

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.

Minimisez l’utilisation de script externes

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/

Conclusion

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.

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