L'IA ha creato il mio tema WordPress, poi ha rovinato le mie prestazioni

Sono uno specialista SEO. Mi piace testare nuovi strumenti.

Recentemente ho chiesto a un'IA di creare da zero un tema WordPress personalizzato. Ho descritto il layout e fornito i contenuti.

All'inizio, i risultati sembravano ottimi. Il sito ha ottenuto un punteggio di 100/100 su Lighthouse sia per mobile che per desktop. Il codice sembrava pulito.

Poi ho apportato delle piccole modifiche. Il punteggio mobile è sceso da 100 a 89. Il desktop è rimasto a 100.

Il problema era un singolo attributo di un'immagine. Questo errore dimostra perché è necessario revisionare il codice generato dall'IA.

Le connessioni desktop veloci nascondono i colli di bottiglia. I dispositivi mobile li mettono in evidenza. Il calo del punteggio significava che un asset stava consumando una larghezza di banda non necessaria.

Il report mobile indicava un'immagine nel percorso del Largest Contentful Paint (LCP). Era uno screenshot di un vecchio gioco.

Su un desktop, questa immagine va bene. Ma su mobile, una grande tabella di dati riempie lo schermo. Questa tabella spinge l'immagine molto in basso nella pagina. L'immagine non è visibile al caricamento della pagina.

L'IA ha scritto questo codice: Aladdin

Il codice è valido. La logica è errata. L'IA ha dato per scontato che la prima immagine nel codice fosse l'immagine hero. Manca di consapevolezza visiva. Ha costretto i browser mobile a scaricare immediatamente un'immagine nascosta.

Ho modificato il codice in: Aladdin

All'inizio il punteggio non è cambiato. Pensavo di stare impazzendo. Ho passato venti minuti a cercare bug. Poi mi sono reso conto che la cache del mio server stava ancora servendo il vecchio codice.

Ho svuotato la cache. Il punteggio mobile è tornato a 100.

L'IA non ha fallito. Ha fatto una supposizione logica basata sull'ordine del codice. Ma non può vedere il layout. Non capisce come una tabella modifichi il viewport.

Se usi l'IA per creare componenti, segui questi passaggi:

  • Controlla fetchpriority e loading="lazy". Verificali rispetto al layout effettivo. Non fidarti dell'ordine del codice.
  • Cerca immagini nascoste sotto tabelle o slider.
  • Isola i tuoi test. Svuota sempre la cache prima di testare. Non analizzare codice obsoleto.

Il codice generato dall'IA è abbastanza pulito da essere utilizzato. Hai comunque bisogno di un essere umano per verificare che il codice corrisponda alla realtà della pagina.

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

Community di apprendimento opzionale: https://t.me/GyaanSetuAi