AI Membangun Tema WordPress Saya, Lalu Merusak Performa Saya

Saya adalah seorang spesialis SEO. Saya senang menguji alat-alat baru.

Baru-baru ini saya meminta AI untuk membangun tema WordPress kustom dari nol. Saya mendeskripsikan tata letaknya dan menyediakan kontennya.

Awalnya, hasilnya terlihat luar biasa. Situs tersebut mencapai skor 100/100 di Lighthouse baik untuk seluler maupun desktop. Kodenya terlihat bersih.

Kemudian saya melakukan sedikit pengeditan. Skor seluler turun dari 100 menjadi 89. Skor desktop tetap di 100.

Masalahnya terletak pada satu atribut gambar. Kesalahan ini menunjukkan mengapa Anda harus meninjau kode AI.

Koneksi desktop yang cepat menyembunyikan hambatan (bottleneck). Perangkat seluler mengungkapkannya. Penurunan skor tersebut berarti ada aset yang menggunakan bandwidth yang tidak dibutuhkannya.

Laporan seluler menunjukkan sebuah gambar dalam jalur Largest Contentful Paint (LCP). Itu adalah tangkapan layar dari sebuah game lama.

Di desktop, gambar ini tidak masalah. Namun di seluler, sebuah tabel data yang besar memenuhi layar. Tabel ini mendorong gambar tersebut jauh ke bawah halaman. Gambar tersebut tidak terlihat saat halaman dimuat.

AI menulis kode ini: Aladdin

Kodenya valid. Logikanya salah. AI berasumsi bahwa gambar pertama dalam kode adalah hero image. Ia kurang memiliki kesadaran visual. Ia memaksa browser seluler untuk segera mengunduh gambar yang tersembunyi.

Saya mengubah kodenya menjadi: Aladdin

Skornya tidak berubah pada awalnya. Saya pikir saya sudah gila. Saya menghabiskan dua puluh menit mencari bug. Kemudian saya menyadari bahwa cache server saya masih menyajikan kode yang lama.

Saya membersihkan cache. Skor seluler kembali ke 100.

AI tidak gagal. Ia membuat tebakan logis berdasarkan urutan kode. Namun ia tidak bisa melihat tata letak. Ia tidak memahami bagaimana sebuah tabel mengubah viewport.

Jika Anda menggunakan AI untuk membangun komponen, ikuti langkah-langkah ini:

  • Audit fetchpriority dan loading="lazy". Periksa kesesuaiannya dengan tata letak yang sebenarnya. Jangan percaya begitu saja pada urutan kode.
  • Cari gambar yang tersembunyi di bawah tabel atau slider.
  • Isolasi pengujian Anda. Selalu bersihkan cache Anda sebelum melakukan pengujian. Jangan mengaudit kode yang usang.

Kode AI cukup bersih untuk digunakan. Anda tetap membutuhkan manusia untuk memeriksa apakah kode tersebut sesuai dengan realitas halaman.

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