AI ने माझी WordPress थीम तयार केली, आणि नंतर त्याने माझी परफॉर्मन्स खराब केली

मी एक SEO स्पेशालिस्ट आहे. मला नवीन टूल्स टेस्ट करायला आवडते.

मी अलीकडेच एका AI ला शून्यापासून (from scratch) एक कस्टम WordPress थीम तयार करण्यास सांगितले. मी लेआउटचे वर्णन केले आणि मजकूर (content) प्रदान केला.

सुरुवातीला, निकाल खूप छान दिसत होते. मोबाईल आणि डेस्कटॉप दोन्हीसाठी साइटने Lighthouse वर १००/१०० स्कोअर मिळवला. कोड स्वच्छ (clean) दिसत होता.

त्यानंतर मी काही छोटे बदल केले. मोबाईल स्कोअर १०० वरून ८९ वर खाली आला. डेस्कटॉप स्कोअर १०० वरच राहिला.

समस्या एका इमेज ॲट्रिब्युटमध्ये (image attribute) होती. ही चूक दाखवते की तुम्हाला AI कोडची रिव्ह्यू का करणे आवश्यक आहे.

डेस्कटॉपवरील वेगवान कनेक्शनमुळे अडथळे (bottlenecks) लपले जातात. मोबाईल डिव्हाइसेस ते उघड करतात. स्कोअर कमी होण्याचा अर्थ असा होता की एखादे ॲसेट (asset) नको असलेली बँडविड्थ वापरत होते.

मोबाईल रिपोर्टने Largest Contentful Paint (LCP) पाथमधील एका इमेजकडे लक्ष वेधले. तो एका जुन्या गेमचा स्क्रीनशॉट होता.

डेस्कटॉपवर ही इमेज ठीक आहे. पण मोबाईलवर, एक मोठा डेटा टेबल स्क्रीन भरून टाकतो. हा टेबल इमेजला पेजच्या खूप खाली ढकलतो. पेज लोड होताना ती इमेज दिसत नाही.

AI ने हा कोड लिहिला: Aladdin

कोड वैध (valid) आहे. पण लॉजिक चुकीचे आहे. AI ने असे गृहीत धरले की कोडमधील पहिली इमेज ही hero image आहे. त्यामध्ये व्हिज्युअल अवेअरनेसचा (visual awareness) अभाव आहे. यामुळे मोबाईल ब्राउझर्सना लपलेली इमेज त्वरित डाउनलोड करण्यास भाग पाडले गेले.

मी कोड बदलून असा केला: Aladdin

सुरुवातीला स्कोअरमध्ये कोणताही बदल झाला नाही. मला वाटले की मी वेडा होत आहे. मी २० मिनिटे बग्स शोधण्यात घालवली. त्यानंतर मला समजले की माझा सर्व्हर कॅशे (server cache) अजूनही जुना कोडच सर्व्ह करत होता.

मी कॅशे क्लिअर केला. मोबाईल स्कोअर पुन्हा १०० वर आला.

AI अयशस्वी झाले नाही. त्याने कोडच्या क्रものवर आधारित एक तार्किक अंदाज (logical guess) लावला होता. पण ते लेआउट पाहू शकत नाही. टेबल व्ह्यूपोर्ट (viewport) कसा बदलतो, हे त्याला समजत नाही.

जर तुम्ही कंपोनंट्स तयार करण्यासाठी AI वापरत असाल, तर या स्टेप्स फॉलो करा:

  • fetchpriority आणि loading="lazy" ऑडिट करा. प्रत्यक्ष लेआउटच्या संदर्भात त्यांची तपासणी करा. कोडच्या क्रमावर विश्वास ठेवू नका.
  • टेबल किंवा स्लाईडर्सच्या खाली लपलेल्या इमेजेस शोधा.
  • तुमचे टेस्टिंग वेगळे (isolate) ठेवा. टेस्ट करण्यापूर्वी नेहमी तुमचा कॅशे पर्ज (purge) करा. जुना (stale) कोड ऑडिट करू नका.

AI कोड वापरण्यासाठी पुरेसा स्वच्छ आहे. परंतु कोड पेजच्या वास्तव परिस्थितीशी जुळतो की नाही, हे तपासण्यासाठी तुम्हाला अजूनही मानवी हस्तक्षेपाची गरज आहे.

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