AI stworzyło mój motyw WordPress, a potem zepsuło moją wydajność

Jestem specjalistą SEO. Lubię testować nowe narzędzia.

Niedawno poprosiłem AI o stworzenie niestandardowego motywu WordPress od zera. Opisałem układ i dostarczyłem treść.

Na początku wyniki wyglądały świetnie. Strona uzyskała wynik 100/100 w Lighthouse zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych. Kod wyglądał czysto.

Potem wprowadziłem małe poprawki. Wynik mobilny spadł ze 100 na 89. Wynik na komputerze pozostał na poziomie 100.

Problemem był pojedynczy atrybut obrazu. Ten błąd pokazuje, dlaczego musisz sprawdzać kod wygenerowany przez AI.

Szybkie połączenia stacjonarne ukrywają wąskie gardła. Urządzenia mobilne je obnażają. Spadek wyniku oznaczał, że jeden z zasobów zużywał pasmo, którego nie potrzebował.

Raport mobilny wskazał na obraz w ścieżce Largest Contentful Paint (LCP). Był to zrzut ekranu ze starej gry.

Na komputerze ten obraz nie stanowi problemu. Jednak na urządzeniach mobilnych duża tabela danych wypełnia ekran. Tabela ta spycha obraz daleko w dół strony. Obraz nie jest widoczny w momencie ładowania strony.

AI napisało taki kod: Aladdin

Kod jest poprawny. Logika jest błędna. AI założyło, że pierwszy obraz w kodzie to obraz główny (hero image). Brakuje mu świadomości wizualnej. Zmusiło przeglądarki mobilne do natychmiastowego pobrania niewidocznego obrazu.

Zmieniłem kod na: Aladdin

Na początku wynik się nie zmienił. Myślałem, że tracę zmysły. Spędziłem dwadzieścia minut na szukaniu błędów. W końcu zdałem sobie sprawę, że pamięć podręczna serwera wciąż serwuje stary kod.

Wyczyściłem pamięć podręczną. Wynik mobilny wrócił do 100.

AI nie zawiodło. Dokonało logicznego przypuszczenia na podstawie kolejności w kodzie. Nie potrafi jednak „widzieć” układu. Nie rozumie, jak tabela zmienia viewport.

Jeśli używasz AI do budowania komponentów, postępuj zgodnie z poniższymi krokami:

  • Przejrzyj fetchpriority i loading="lazy". Sprawdź je pod kątem faktycznego układu. Nie ufaj kolejności w kodzie.
  • Szukaj obrazów ukrytych pod tabelami lub sliderami.
  • Izoluj testy. Zawsze czyść pamięć podręczną przed testowaniem. Nie sprawdzaj nieaktualnego kodu.

Kod z AI jest wystarczająco czysty, by go używać. Nadal jednak potrzebujesz człowieka, aby sprawdzić, czy kod odpowiada rzeczywistemu wyglądowi strony.

Źródło: https://dev.to/serdiniakos/an-ai-built-my-wordpress-theme-then-i-found-the-performance-bugs-it-left-behind-59hg

Opcjonalna społeczność edukacyjna: https://t.me/GyaanSetuAi