Quand l’éditeur d’article rame rame rame…

Cet article s’adresse surtout aux utilisateurs de WordPress, notamment ceux qui comme moi utilisent l’éditeur Visual Builder de Divi, qui permet l’agencement de la page par des blocs réutilisables ( voir ici ). Cet éditeur offre des possibilités très puissantes, car il permet de nombreuses possibilités de mise en page pour chaque page et article. Cependant les concepts évoqués ici sont assez généralistes pour couvrir un large éventails de situations et de difficultés que la publication sur internet peut présenter.

Un problème de « cache »

L’édition d’un contenu publié sur internet se fait souvent sur des pages du site, accessibles seulement aux utilisateurs autorisés, qui ont été prévues à cet effet, et qui offrent une panoplie d’outils d’édition, souvent semblables aux bien populaires traitements de texte.

Le retour d’expérience (personnelle et par les remontés de mes clients), fait état de cas où il arrive d’attendere longtemps avant que la page d’édition soit opérationnelle, ou qu’après le chargement de la page les fonctionnalités ne soient pas disponibles ou seulement partiellement. Que se passe-t-il ?

Les raisons peuvent être multiples, mais j’ai constaté que le plus souvent c’est un problème de « cache ».

Qu’est-ce qu’est le cache ?

Qu’est-ce que c’est le cache d’un site internet ? En deux mots, c’est un outil intégré au site afin que les pages se chargent le plus rapidement possible dans le navigateur. Ironie du sort, c’est bien lui le responsable de bien de retards et de dysfonctionnements dans notre éditeur préféré.

Le cache est un mécanisme complexe, qui se déploie à plusieurs niveaux. Une partie des opérations sont effectuées sur le serveur, avant d’envoyer la page au navigateur, et d’autres opérations sont effectuées au niveau du navigateur lors du chargement et de l’affichage de la page. Le principe est toujours le même : garder à porté de mains des pages entières, ou des parties de la page, afin de ne pas devoir les calculer ou les recalculer à chaque fois. Par exemple le redimensionnement d’une image est effectué une seule fois, mis en cache, et réutilisé chaque fois que nécessaire.

Comment le fonctionnement du cache peut-il se détériorer ?

Les mécanismes du cache sont programmés pour renouveler leur contenu après certains laps de temps : quelques heures, quelques jours… sur commande ou jamais. Lors d’un changement du site, que ce soit pour la modification du contenu, ou pour la mise à jour du moteur  ou de ses extensions, des commandes sont envoyées au cache du site afin qu’il recalcule tout de nouveau, afin de fournier de nouvelles pages actualisées. Cependant certaines parties du code, ou de la page, peuvent échapper à cette mise à jour, et provoquer des effets inattendus.

De plus, même si la page est envoyée correctement au navigateur, c’est ensuite le cache local qui peut ne pas s’apercevoir que certaines parties ont été modifiées, et qui fournirait donc au navigateur des informations corrompues, où se mélangent des parties anciennes avec des parties bien actualisées.

L’éditeur en ligne, tout particulièrement, base son fonctionnement sur des fonctionnalités exécutées dans le navigateur. Pour cela, un programme complexe est chargé dans le navigateur avant l’ouverture de la page : ce programme est stocké dans le « Local Storage » du navigateur et pour assurer la réactivité des commandes d’édition. Quand ce programme est détérioré (mises à jours mal effectuées, bouts de code manquants…) le travail d’édition résulte perturbé ou même impossible.

Un moment délicat est donc lors de la mise à jour du site, quand de nouvelles versions sont disponibles pour améliorer les fonctionnalités ou pour corriger des failles de sécurité ou de fonctionnement, et que différentes parties de la page, dont le Local Storage, sont modifiées.

Comment faire quand ce problème perturbe notre travail ?

Lors de la mise à jour du moteur du site, ou de ses extensions, il est important d’effectuer une réinitialisation complète du cache du serveur. Pour les sites hébergés par FBServices, où nous effectuons périodiquement les mises à jour pour tous nos clients, cela est effectué systématiquement à chaque mise à jour.

Pour le cache du navigateur, deux opérations permettent d’intervenir aux différents niveaux du cache local. Les instructions que je détaille ici se réfèrent aux navigateurs Firefox et Chrome que j’utilise le plus souvent. Pour d’autres navigateur, notamment ceux de Microsoft, cela pourrait être un peu différent, voir éventuellement ici).

1. Recharger la page avec la commande Ctrl + Maj + R (ou son équivalent Ctrl + F5). Le faire éventuellement deux ou trois fois de suite. On peut agir de manière plus radicale en allant dans le menu « Historique / Supprimer l’historique récent… » et effacer le cache pour toutes les pages mémorisées.
2. Effectuer une action plus en profondeur à l’aide des outils de développement du navigateur. Ouvrir la console de développement avec la touche F12.  Pour Firefox aller dans le menu « Stockage« , puis parcourir les différents méthodes (Cookies, Indexed DB …) et effacer le cache du site en question. Pour Chrome, aller dans le menu Application / Clear storage.