Le chargement wordpress des pages

Maintenance & dépannage
Photo by Braden Collum on Unsplash

Le chargement WordPress des pages impactent l’expérience utilisateur, augmentent le nombre de pages vues et facilitent votre référencement . Dans cet article, nous partagerons les différents outils à mettre en place pour améliorer les performances de WordPress et accélérer votre site Web.

Les idées reçues sur les performances des pages web

Vous devez accélérer l’ensemble de votre site

Parfois, si ! Dans le cas où aucune de vos pages de ne se charge en moins de 4 secondes, c’est que votre installation a probablement besoin d’optimisation

Dans d’autres cas, les temps de chargement WordPress sont plus variables. Et il est répandu de penser que plus un site va charger rapidement, et meilleurs seront ses conversions. En effet, de nombreux sites ont une corrélation significative entre les vitesses de la page d’accueil et les taux de conversion et la taille des paniers, mais chaque site est différent. Parfois, l’optimisation d’une autre page aura un plus fort impact, dépendamment de vos parcours clients.

Nous conseillons la plupart du temps de ne pas (trop) dépenser de ressources, en temps ou en argent, pour accélérer des pages qui n’amélioreront pas les revenus.

Votre site devrait se charger en deux secondes ou moins

Chaque page web a sa propre conception de code, ses images, son contenu et, plus important encore, ses propres clients. Pourquoi un chargement de pages en deux secondes ou moins ? En règle général, charger ses pages plus vite ne fait pas de mal. Mais être en dessous des deux secondes fera-t-il augmenter la satisfaction des utilisateurs et les ventes du site ?

La meilleure façon de connaître ces cibles est d’identifier à quelle vitesse de page la plupart des utilisateurs convertissent. Cela peut être fait en traçant le temps de chargement WordPress de la page par rapport aux conversions / ventes (dans Google Analytics, regardez Avg. Page Load Time). De ces données, vous pourrez en tirez de véritables conclusions.

Plus votre site est rapide, plus vos ventes sont élevées

Pour gagner en temps de chargement WordPress, le poids des images a un impact fort. On peut alors penser à compresser les images sur toutes ses pages produits. Mais, en étant trop exigeant, la qualité d’image des produits peut considérablement diminuer, et l’effet inverse peut se produire !

Parfois, des vitesses plus rapides ne signifient pas des ventes plus élevées si l’esthétique d’une page est sacrifiée. Vos clients peuvent préférer une expérience visuellement riche à une expérience rapide. Il y a donc un équilibre à identifier entre l’expérience client et l’efficacité du site pour maximiser vos ventes.

Tous les services tiers nuisent aux performances de votre site

Lorsque quelqu’un dans le marketing demande à un développeur web de mettre une balise sur le site, la réaction peut être parfois négative, pour des raisons évidentes. La gestion et la gouvernance des balises sont récemment devenues un sujet brûlant parmi les développeurs Web en raison de leur impact potentiel sur les performances.

Tous les contenus tiers ne nuisent pas aux performances de la page. Surtout, ils peuvent vous apporter des fonctionnalités essentielles pour l’activité de votre site. L’important semble être plutôt la vitesse de chargement perçu par l’utilisateur.

Le principe du chargement d’une page web

Qu’est-ce qu’une page web ?

Techniquement, une page Web est constituée d’une ou plusieurs ressources distinctes du World Wide Web. La principale ressource est généralement un document écrit dans le langage informatique HTML ou sa variante XHTML. HTML permet de contenir du texte, et de définir l’adresse Web et la disposition dans la page, d’autres ressources comme : des images, des vidéos, des animations, du son, des applets et des documents inclus.

Wikipedia: Page web

Pour s’afficher, une page web doit donc être chargée depuis un navigateur. Elle contient du :

  • HTML, c’est ce qui définit la structure du contenu de la page
  • CSS, c’est ce qui définit l’affichage des éléments HTML
  • JavaScript, c’est ce qui définit des comportements dynamiques
  • Des documents (images, PDF…)

Remarque :
Dans nos précédents guides, nous avons parlé de WordPress comme étant une technologie web « dynamique », car elle utilise PHP. Pour simplifier, PHP permet de générer du HTML en fonction de paramètres et de votre base de données (par exemple, si l’utilisateur est connecté, si un produit n’est plus en stock…)

Si vous souhaitez explorer ce qu’est le HTML, n’hésitez pas à consulter notre documentation Quelques balises HTML utiles pour WordPress.

La séquence de chargement WordPress d’une page web

Lorsqu’un visiteur accède à une URL, il envoie l’ordre à un serveur de lui envoyer tous les fichiers qui correspondent à l’URL, selon les règles qui ont été établies par le site web :

  • Le HTML peut-être généré différemment avec PHP, en fonction de certaines situations. Il est généralement chargé en premier.
  • Le CSS et le JavaScript ne sont pas toujours les mêmes selon les pages. Leur chargement WordPress peut être configuré comme « bloquant pour la page ». Par exemple, tant que la police des textes n’est pas chargée, aucun texte ne sera affiché.
  • Chaque page contient des documents différents, en fonction du contenu. Et chaque document, surtout les images, ont un poids différent.
  • Si le visiteur a déjà parcouru le site, certaines ressources ont pu être chargées dans son navigateur et mises en cache. Ce mécanisme permet de gagner du temps de chargement WordPress en évitant de re-télécharger des ressources.

Normalement, rien de très compliqué pour le moment !

Nettoyer votre installation WordPress

Là où ça peut se compliquer, c’est lorsqu’on considère le fonctionnement modulaire de WordPress, avec ses plugins et thèmes…

Sans rentrer dans les cas particuliers, il faut considérer que chaque plugin et thème peut ajouter ses propres fichiers de ressources (HTML, CSS, JavaScript, documents) à vos URL.

Parfois, ce comportement est voulu et contrôlé. Avec le plugin WooCommerce, par exemple, il est extrêmement utile que le plugin génère les pages produit, la page de paiement ….

Parfois, cependant, certains plugins chargent toutes leur ressources sur toutes les pages. Par exemple, le plugin Contact Form 7 permet de créer des formulaires, simplement en ajoutant un shortcode dans votre contenu. Super simple d’utilisation ! Mais lourd à charger, car les ressources doivent être disponibles sur toutes les pages au cas où vous ajouteriez un shortcode…

Les différentes étapes du nettoyage

  • Pour commencer donc, il sera absolument nécessaire de s’assurer que votre thème n’est pas trop lourd. Par exemple en consultant les forums de support à ce propos, ou les tutoriels expliquant les configurations spécifiques à votre thème. La plupart du temps, vous pouvez considérer que les thèmes qui utilisent des « Page Builders » vont nécessiter plus de travail. Certains thèmes peuvent être tout simplement trop lourds et trop mal codé pour être chargé rapidement.
  • Ensuite, il faudra probablement faire le ménage dans vos plugins et Désactiver / Supprimer ceux qui ne sont pas utiles !
  • Puis, si vos compétences vous le permettent, vous pourrez identifier les ressources CSS et JavaScript chargées sur chacune de vos pages. Il sera alors primordial de déterminer si elles sont utiles ou non, puis de limiter leur chargement WordPress avec un peu de code PHP, par exemple dans votre fichier functions.php de votre thème enfant.
    NB : Si le PHP vous effraie, certains plugins sont disponibles comme le plugin premium Perfmatters.
  • Après ça, vous pourrez vous assurer que votre base de données est optimisée, pour qu’elle puisse être parcourue plus rapidement.
  • Enfin, vous devrez impérativement optimiser la taille de vos documents (pour WordPress, on parle des Médias). Soit en :
    • utilisant un plugin comme Smush pour réduire le poids des images
    • utilisant un service externe d’optimisation d’images avant de les charger dans votre site
    • réduisant leur résolution

La minification des fichiers

Une fois que les fichiers de ressources de votre site WordPress sont nettoyés, vous pourrez peut-être observer des améliorations, notamment pour vos pages « simples », avec peu de fonctionnalités. Mais, nous pouvons continuer à avancer grâce à la concaténation et la minification de vos ressources CSS et JavaScript

La concaténation est le regroupement de plusieurs fichiers différents en un seul. Vous pourrez alors charger en une fois les ressources pour vos pages, par exemple, vos CSS de votre thème et de vos plugins se chargeant sur la page.
Cela permet de réduire le nombre de demandes distinctes au serveur, en en faisant idéalement une seule, mais plus grosse.
La minification consiste à optimiser votre code en réduisant les espaces blancs, les noms de fonctions longs et d’autres lettres inutiles. Cela permet d’avoir des fichiers beaucoup plus petits et donc plus rapides pour le transfert du serveur vers le navigateur.

Remarque :
Cette opération entraîne la plupart du temps des erreurs d’affichage et/ou de fonctionnement des pages. C’est pourquoi il est nécessaire de prendre le temps de tester les pages, et d’exclure parfois certaines ressources de cette optimisation (par exemple, un plugin mal codé)

La mise en cache

Nous avons vu la mise en cache côté navigateur, pour le chargement WordPress des ressources. Mais cette mise en cache est différente, car elle s’applique au serveur PHP.

Dans le cas de WordPress, les fichiers HTML des pages est généré grâce au PHP. Or, certaines requêtes de page sont identiques. Le serveur peut alors garder quelques résultats pour pouvoir les envoyer plus rapidement lorsqu’ils seront de nouveau demandés !

Le CDN (Content Delivery Network)

Le terme Content Delivery Network peut être traduit par Réseau de Diffusion de Contenu. Il s’agit d’un service tiers, qui fournit un groupe de serveurs répartis géographiquement pour améliorer la vitesse de transfert des ressources nécessaires à vos pages.

Ils ne remplacent en aucun cas votre serveur web, car ils vont être utiles uniquement pour les pages HTML, les feuilles de style CSS, les fichiers JavaScript et les documents. Mais, ils peuvent aider à protéger votre site, notamment en cas d’attaque DDOS

À noter que certains de ces services tiers proposent une offre gratuite, comme Cloudlfare.

Chargement