Lorsqu’on charge des images dans un script p5.js, ça se passe de façon asynchrone. C’est souvent une bonne chose car ça évite d’attendre. Mais parfois ça pose beaucoup de problèmes. Alors je cherchais depuis longtemps un moyen efficace d’être certaine que les images seraient entièrement chargées avant que la suite du script ne les utilise.
J’ai trouvé la solution grace à Perplexity, le moteur de recherche avec AI. Je lui ai demandé « what are the solutions which work for loading a lot of images in an array using p5js? », il m’a répondu avec des solutions banales (qui ne fonctionnent pas lorsque les images mettent du temps à charger). J’ai insisté en « lui disant » : « this doesn’t ensure that all images in the array are fully loaded. are there more robust solutions? ». Et là il m’a apporté la réponse que je ne trouvais pas ! Merci Perplexity !
J’utilise loadImage et une fonction « call back » qui incrémente un compteur (imagesLoaded) à chaque fois qu’une image est correctement chargée. Lorsque le compteur imagesLoaded contient la valeur indiquée au début dans imagesToLoad, c’est qu’on a chargé autant d’images qu’on en avait prévu. On est donc prêts à la suite !
Site Kit est l’extension officielle de Google pour WordPress. Elle centralise Search Console, Google Analytics et PageSpeed Insights directement dans ton tableau de bord. Si tu utilises une extension de cache, elle peut aussi provoquer une déconnexion récurrente de Site Kit, voici comment éviter ce problème.
Ce que fait Site Kit
Site Kit connecte plusieurs services Google à ton site WordPress et affiche leurs données directement dans ton tableau de bord d’administration, sans que tu aies besoin de jongler entre plusieurs interfaces. Les services les plus utiles sont :
Search Console : le référencement de ton site, les requêtes qui t’amènent du trafic, les erreurs d’indexation
Google Analytics : la fréquentation du site, le comportement des visiteurs
PageSpeed Insights : la vitesse de chargement de tes pages
Une fois connecté, Site Kit sert aussi de passerelle pour d’autres extensions. Yoast SEO en est un bon exemple : au lieu de te redemander de connecter individuellement Google Analytics ou Search Console, Yoast s’appuie sur la connexion déjà établie par Site Kit pour valider ses propres accès. Tu gagnes ainsi du temps de paramétrage, en particulier si tu gères plusieurs sites.
Avantages et limites
Installer Site Kit sur tous ses sites WordPress présente de vrais atouts d’ergonomie, mais ce n’est pas forcément la meilleure solution pour tous les projets.
Avantages
Centralisation dans le tableau de bord : accès direct aux données clés de Search Console, Google Analytics et PageSpeed Insights, sans quitter l’administration WordPress
Installation simplifiée : déploiement automatique des balises de suivi, sans toucher au code du thème ni éditer de fichier
Validation de propriété rapide : Site Kit associe et vérifie la propriété du site auprès de Google en quelques clics
Gain de temps en gestion multi-sites : le même processus de configuration se répète à l’identique sur tous tes sites
Limites
Impact sur la vitesse de l’administration : Site Kit effectue de nombreux appels API en arrière-plan pour afficher ses graphiques, ce qui peut ralentir le chargement de l’admin WordPress
Rapports très synthétiques : les données affichées restent des résumés. Pour une analyse approfondie (comportement utilisateur avancé, tunnels de conversion personnalisés), il faut quand même se rendre sur les interfaces dédiées de Google Analytics ou Search Console
Consommation de ressources serveur : sur un petit hébergement mutualisé, le rafraîchissement régulier des jetons d’accès et des statistiques génère une charge processeur et mémoire inutile si tu ne consultes tes données qu’occasionnellement
Risque de double marquage : si un script Analytics est déjà injecté par ton thème, un constructeur de page (Divi, Elementor) ou une extension SEO, Site Kit peut créer des doublons de comptage s’il est mal configuré
Site Kit convient bien à des sites vitrines, des blogs, ou des sites de clients qui veulent un aperçu rapide de leur audience. Pour des sites à très fort trafic ou soumis à des contraintes d’optimisation serveur poussées, il est souvent préférable d’installer directement la balise Google Tag Manager ou Analytics, et de consulter les statistiques à la source.
Le problème de déconnexion avec une extension de cache
Si tu utilises une extension de cache comme WP Super Cache, tu as peut-être déjà rencontré ce symptôme : Site Kit se déconnecte régulièrement, parfois tous les jours, et tu dois le reconnecter manuellement à chaque fois, même si tu n’as touché à aucun réglage.
Pourquoi ça arrive
Pour rester connecté, Site Kit a besoin de renouveler régulièrement son jeton d’accès (le fameux refresh token) auprès de Google, via des requêtes vers des routes de l’API WordPress qui commencent par /wp-json/google-site-kit/. Cette requête doit s’exécuter en temps réel à chaque renouvellement.
Le problème, c’est que par défaut une extension de cache ne fait pas de distinction entre une page classique de ton site et ces requêtes d’API. Si elle met en cache la réponse de la requête /wp-json/google-site-kit/, elle va ensuite renvoyer cette réponse enregistrée, potentiellement périmée, au lieu de laisser la requête s’exécuter réellement vers Google. Google ne reçoit alors pas la confirmation attendue dans les temps, considère la session comme expirée ou corrompue, et coupe la connexion.
La solution avec WP Super Cache
Il suffit d’exclure les routes de Site Kit du cache :
Dans le tableau de bord WordPress, va sur Réglages > WP Super Cache
Ouvre l’onglet Avancé
Descends jusqu’à la section Chaînes d’URL rejetées (Rejected URL Strings)
Ajoute la ligne suivante dans le champ texte :
/wp-json/google-site-kit/
Clique sur le bouton Enregistrer les chaînes
À partir de là, WP Super Cache laisse passer ces requêtes en temps réel sans les mettre en cache, et Site Kit peut renouveler son jeton normalement.
Ce principe ne se limite pas à WP Super Cache. Si tu utilises une autre extension de cache (WP Rocket, W3 Total Cache, ou autre), le mécanisme est le même : cherche une option d’exclusion d’URL ou de chemin, et exclus /wp-json/google-site-kit/. Plus largement, tout plugin qui dépend d’un échange régulier avec une API externe peut être sujet au même type de problème s’il n’est pas exclu du cache.
J’ai découvert récemment l’intérêt de créer un site avec Google sites dans des circonstances où l’on souhaite partager simplement des documents avec un groupe de personnes. Et aujourd’hui, je viens de regarder la vidéo d’Olivier Margerand, de Digital Collab, qui nous explique comment créer un site web en 5 minutes avec Google Sites :
J’en retiens que c’est extraordinairement simple et rapide ! Il est possible de mettre en ligne des éléments de Google Suite de manière très simple. Mais aussi qu’on peut imaginer une infinité d’utilisations, comme par exemple la création d’un site pour une machine, afin de déclarer des opérations de maintenance ou suivre des fonctionnement simplement en scannant le QR code affiché sur la machine !
J’ai beaucoup apprécié les propos d’Olivier Margerand, toujours aussi percutant et juste. Par exemple :
Ce qui compte maintenant c’est l’intelligence qu’on va mettre derrière tout ça : qu’est-ce que ça peut apporter ? Qu’est-ce que ça peut aider à simplifier dans une entreprise, dans une équipe, dans un processus, avec nos clients, avec nos prospects avec nos fournisseurs ?
J’ai découvert l’application SnapCamera par une vidéo de l’excellent Cyrille CARTERET, dont la chaine FastLearner Academy recèle d’excellents tutoriels sur l’environnement Google.
Les instructions de Cyrille CARTERET sont très claires. Il faut tout simplement sélectionner la webcam SnapCamera plutôt que la webcam elle-même. C’est vrai dans google Meet, dans zoom et probablement d’autres applications.
La seule difficulté que j’ai eu est qu’il m’a fallu redémarrer windows deux fois avant que la webcam snapCamera devienne accessible.
Nous voyons ici, dans ce sixème article de la série p5.js mes "briques" de connaissance, comment créer un fichier et proposer à l’utilisateur de l’enregistrer. Nous recueillons des données (sur la base de la brique 5) et nous créons deux fichier texte au clic de la souris dans le canevas.
un fichier avec toutes les chaines de caractères de l’array (tableau) croppedUrl. Ce fichier est nommé croppedURLs.txt.
un fichier avec toutes les chaines de caractères de l’array (tableau) imgUrl. Ce fichier est nommé fullURLs.txt.
On utilise ici la fonction saveStrings() de p5.js. J’aurais également pu utiliser la fonction save(), de la même manière exactement. Dans d’autres circonstances on pourra s’intéresser aux fonctions : saveJSON(), saveTable(), voire saveCanvas() ou saveFrames().
Et maintenant ?
Et voilà nous avons une cinquième brique ! Les autres briques sont et seront publiées dans cette même série, p5.js mes "briques" de connaissance.
Commentaires récents