ШІ створив мою тему WordPress, а потім зіпсував продуктивність

Я SEO-спеціаліст. Мені подобається тестувати нові інструменти.

Нещодавно я попросив ШІ створити кастомну тему WordPress з нуля. Я описав макет і надав контент.

Спочатку результати виглядали чудово. Сайт отримав 100/100 балів у Lighthouse як для мобільних пристроїв, так і для десктопів. Код виглядав чистим.

Потім я вніс невеликі правки. Мобільний показник впав зі 100 до 89. Десктопний залишився на рівні 100.

Проблема полягала в одному атрибуті зображення. Ця помилка показує, чому ви повинні перевіряти код, написаний ШІ.

Швидкі десктопні з'єднання приховують «вузькі місця». Мобільні пристрої їх виявляють. Падіння показника означало, що один із ресурсів використовував зайву пропускну здатність.

Мобільний звіт вказав на зображення у шляху Largest Contentful Paint (LCP). Це був скриншот зі старої гри.

На десктопі з цим зображенням усе гаразд. Але на мобільному пристрої велика таблиця даних заповнює весь екран. Ця таблиця зміщує зображення далеко вниз сторінки. Зображення не видно під час завантаження сторінки.

ШІ написав такий код: Aladdin

Код валідний. Логіка — ні. ШІ припустив, що перше зображення в коді є головним (hero image). Йому бракує візуального сприйняття. Він змусив мобільні браузери негайно завантажувати приховане зображення.

Я змінив код на: Aladdin

Спочатку показник не змінився. Я подумав, що втрачаю розум. Я витратив двадцять хвилин на пошук багів. Потім я зрозумів, що кеш мого сервера все ще видає старий код.

Я очистив кеш. Мобільний показник повернувся до 100.

ШІ не провалився. Він зробив логічне припущення на основі порядку коду. Але він не бачить макета. Він не розуміє, як таблиця змінює область перегляду (viewport).

Якщо ви використовуєте ШІ для створення компонентів, дотримуйтесь цих кроків:

  • Перевіряйте fetchpriority та loading="lazy". Порівнюйте їх із реальним макетом. Не довіряйте порядку коду.
  • Шукайте зображення, приховані під таблицями або слайдерами.
  • Ізолюйте тестування. Завжди очищуйте кеш перед тестуванням. Не перевіряйте застарілий код.

Код від ШІ достатньо чистий для використання. Але вам все одно потрібна людина, щоб перевірити, чи відповідає код реальному вигляду сторінки.

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