A IA construiu meu tema WordPress, depois quebrou meu desempenho

Sou especialista em SEO. Gosto de testar novas ferramentas.

Recentemente, pedi a uma IA para construir um tema WordPress personalizado do zero. Descrevi o layout e forneci o conteúdo.

No início, os resultados pareceram ótimos. O site atingiu uma pontuação de 100/100 no Lighthouse, tanto para dispositivos móveis quanto para desktop. O código parecia limpo.

Depois, fiz pequenas edições. A pontuação mobile caiu de 100 para 89. O desktop permaneceu em 100.

O problema foi um único atributo de imagem. Esse erro mostra por que você deve revisar o código gerado por IA.

Conexões desktop rápidas escondem gargalos. Dispositivos móveis os expõem. A queda na pontuação significava que um recurso estava usando uma largura de banda que não precisava.

O relatório mobile apontou para uma imagem no caminho do Largest Contentful Paint (LCP). Era um screenshot de um jogo antigo.

No desktop, essa imagem está ok. Mas no mobile, uma grande tabela de dados preenche a tela. Essa tabela empurra a imagem para longe, no final da página. A imagem não é visível quando a página carrega.

A IA escreveu este código: Aladdin

O código é válido. A lógica está errada. A IA assumiu que a primeira imagem no código era a imagem principal (hero image). Ela carece de consciência visual. Ela forçou os navegadores móveis a baixar uma imagem oculta imediatamente.

Eu alterei o código para: Aladdin

A pontuação não mudou de imediato. Achei que estava ficando louco. Passei vinte minutos procurando bugs. Então percebi que o cache do meu servidor ainda estava servindo o código antigo.

Limpei o cache. A pontuação mobile voltou para 100.

A IA não falhou. Ela fez uma suposição lógica baseada na ordem do código. Mas ela não consegue ver o layout. Ela não entende como uma tabela altera o viewport.

Se você usa IA para construir componentes, siga estes passos:

  • Audite o fetchpriority e o loading="lazy". Verifique-os em relação ao layout real. Não confie na ordem do código.
  • Procure por imagens escondidas sob tabelas ou sliders.
  • Isole seus testes. Sempre limpe seu cache antes de testar. Não audite código desatualizado.

O código de IA é limpo o suficiente para ser usado. Você ainda precisa de um humano para verificar se o código corresponde à realidade da página.

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