AI Membina Tema WordPress Saya, Kemudian Ia Merosakkan Prestasi Saya

Saya seorang pakar SEO. Saya suka menguji alatan baharu.

Baru-baru ini, saya meminta AI untuk membina tema WordPress tersuai dari awal. Saya menerangkan susun atur dan menyediakan kandungan.

Pada mulanya, hasilnya kelihatan hebat. Laman web tersebut mencapai skor 100/100 pada Lighthouse untuk kedua-dua mudah alih dan desktop. Kodnya kelihatan bersih.

Kemudian saya membuat sedikit suntingan. Skor mudah alih jatuh daripada 100 kepada 89. Skor desktop kekal pada 100.

Masalahnya adalah satu atribut imej. Kesilapan ini menunjukkan mengapa anda mesti menyemak semula kod AI.

Sambungan desktop yang pantas menyembunyikan kesesakan (bottlenecks). Peranti mudah alih mendedahkannya. Penurunan skor bermakna satu aset menggunakan jalur lebar yang tidak diperlukan.

Laporan mudah alih menunjukkan imej dalam laluan Largest Contentful Paint (LCP). Ia adalah tangkapan skrin daripada sebuah permainan lama.

Pada desktop, imej ini tidak menjadi masalah. Tetapi pada peranti mudah alih, jadual data yang besar memenuhi skrin. Jadual ini menolak imej tersebut jauh ke bawah halaman. Imej tersebut tidak kelihatan apabila halaman dimuatkan.

AI menulis kod ini: Aladdin

Kod tersebut sah. Logiknya salah. AI menganggap imej pertama dalam kod adalah imej utama (hero image). Ia kurang kesedaran visual. Ia memaksa pelayar mudah alih untuk memuat turun imej yang tersembunyi dengan serta-merta.

Saya menukar kod tersebut kepada: Aladdin

Skor tidak berubah pada mulanya. Saya fikir saya sudah hilang akal. Saya menghabiskan masa dua puluh minit mencari pepijat (bugs). Kemudian saya menyedari cache pelayan saya masih menyediakan kod lama.

Saya membersihkan cache tersebut. Skor mudah alih kembali kepada 100.

AI tidak gagal. Ia membuat tekaan logik berdasarkan urutan kod. Tetapi ia tidak dapat melihat susun atur. Ia tidak memahami bagaimana jadual mengubah paparan (viewport).

Jika anda menggunakan AI untuk membina komponen, ikuti langkah-langkah ini:

  • Audit fetchpriority dan loading="lazy". Semak ia berbanding susun atur sebenar. Jangan percaya pada urutan kod.
  • Cari imej yang tersembunyi di bawah jadual atau slaid (sliders).
  • Asingkan ujian anda. Sentiasa bersihkan cache anda sebelum menguji. Jangan audit kod yang usang.

Kod AI cukup bersih untuk digunakan. Anda masih memerlukan manusia untuk menyemak sama ada kod tersebut sepadan dengan realiti halaman tersebut.

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

Komuniti pembelajaran pilihan: https://t.me/GyaanSetuAi