L'IA a créé mon thème WordPress, puis elle a ruiné mes performances

Je suis spécialiste SEO. J'aime tester de nouveaux outils.

Récemment, j'ai demandé à une IA de créer un thème WordPress personnalisé de toutes pièces. J'ai décrit la mise en page et fourni le contenu.

Au début, les résultats semblaient excellents. Le site a obtenu un score de 100/100 sur Lighthouse, tant sur mobile que sur ordinateur. Le code semblait propre.

Ensuite, j'ai effectué de petites modifications. Le score mobile est passé de 100 à 89. Le score sur ordinateur est resté à 100.

Le problème venait d'un seul attribut d'image. Cette erreur montre pourquoi vous devez impérativement réviser le code généré par l'IA.

Les connexions rapides sur ordinateur masquent les goulots d'étranglement. Les appareils mobiles, eux, les exposent. La chute du score signifiait qu'un élément utilisait une bande passante inutile.

Le rapport mobile indiquait une image située dans le chemin du Largest Contentful Paint (LCP). Il s'agissait d'une capture d'écran d'un vieux jeu.

Sur un ordinateur, cette image ne pose aucun problème. Mais sur mobile, un grand tableau de données remplit l'écran. Ce tableau repousse l'image loin dans la page. L'image n'est pas visible lors du chargement de la page.

L'IA a écrit ce code : Aladdin

Le code est valide. La logique est erronée. L'IA a supposé que la première image du code était l'image principale. Elle manque de conscience visuelle. Elle a forcé les navigateurs mobiles à télécharger immédiatement une image invisible.

J'ai modifié le code ainsi : Aladdin

Au début, le score n'a pas changé. J'ai cru perdre la tête. J'ai passé vingt minutes à chercher des bugs. Puis, j'ai réalisé que le cache de mon serveur servait encore l'ancien code.

J'ai vidé le cache. Le score mobile est revenu à 100.

L'IA n'a pas échoué. Elle a fait une supposition logique basée sur l'ordre du code. Mais elle ne peut pas voir la mise en page. Elle ne comprend pas comment un tableau modifie la zone d'affichage (viewport).

Si vous utilisez l'IA pour construire des composants, suivez ces étapes :

  • Auditez fetchpriority et loading="lazy". Vérifiez-les par rapport à la mise en page réelle. Ne faites pas confiance à l'ordre du code.
  • Recherchez les images cachées sous des tableaux ou des sliders.
  • Isolez vos tests. Videz toujours votre cache avant de tester. N'auditez pas un code obsolète.

Le code généré par l'IA est suffisamment propre pour être utilisé. Mais vous avez toujours besoin d'un humain pour vérifier si le code correspond à la réalité de la page.

Source: https://dev.to/serdiniakos/an-ai-built-my-wordpress-theme-then-i-found-the-performance-bugs-it-left-behind-59hg

Optional learning community: https://t.me/GyaanSetuAi