La IA construyó mi tema de WordPress y luego arruinó mi rendimiento
Soy especialista en SEO. Disfruto probando nuevas herramientas.
Hace poco le pedí a una IA que creara un tema de WordPress personalizado desde cero. Describí el diseño y proporcioné el contenido.
Al principio, los resultados parecían excelentes. El sitio alcanzó una puntuación de 100/100 en Lighthouse tanto para móvil como para escritorio. El código parecía limpio.
Luego hice pequeñas ediciones. La puntuación en móvil bajó de 100 a 89. En escritorio se mantuvo en 100.
El problema era un único atributo de imagen. Este error demuestra por qué debes revisar el código generado por la IA.
Las conexiones rápidas de escritorio ocultan los cuellos de botella. Los dispositivos móviles los exponen. La caída en la puntuación significaba que un recurso estaba utilizando un ancho de banda que no necesitaba.
El informe móvil señaló una imagen en la ruta del Largest Contentful Paint (LCP). Era una captura de pantalla de un juego antiguo.
En un escritorio, esta imagen está bien. Pero en el móvil, una gran tabla de datos llena la pantalla. Esta tabla empuja la imagen hacia abajo en la página. La imagen no es visible cuando la página se carga.
La IA escribió este código:
El código es válido. La lógica es errónea. La IA asumió que la primera imagen en el código era la imagen principal (hero image). Carece de percepción visual. Obligó a los navegadores móviles a descargar inmediatamente una imagen oculta.
Cambié el código a:
Al principio, la puntuación no cambió. Pensé que me estaba volviendo loco. Pasé veinte minutos buscando errores. Entonces me di cuenta de que la caché de mi servidor todavía estaba sirviendo el código antiguo.
Limpié la caché. La puntuación en móvil volvió a 100.
La IA no falló. Hizo una suposición lógica basada en el orden del código. Pero no puede ver el diseño. No entiende cómo una tabla cambia el viewport.
Si utilizas la IA para construir componentes, sigue estos pasos:
- Audita
fetchpriorityyloading="lazy". Compruébalos con el diseño real. No confíes en el orden del código. - Busca imágenes ocultas bajo tablas o sliders.
- Aísla tus pruebas. Limpia siempre la caché antes de probar. No audites código desactualizado.
El código de la IA es lo suficientemente limpio como para usarse. Aun así, necesitas a un humano para comprobar si el código coincide con la realidad de la página.
Comunidad de aprendizaje opcional: https://t.me/GyaanSetuAi