AI نے میرا WordPress تھیم بنایا، پھر اس نے میری پرفارمنس خراب کر دی

میں ایک SEO سپیشلسٹ ہوں۔ مجھے نئے ٹولز آزمانا پسند ہے۔

میں نے حال ہی میں ایک AI سے شروع سے ایک کسٹم WordPress تھیم بنانے کو کہا۔ میں نے لے آؤٹ کی وضاحت کی اور مواد فراہم کیا۔

شروع میں، نتائج بہت اچھے لگے۔ سائٹ نے موبائل اور ڈیسک ٹاپ دونوں کے لیے Lighthouse پر 100/100 اسکور حاصل کیا۔ کوڈ صاف ستھرا لگ رہا تھا۔

پھر میں نے کچھ معمولی تبدیلیاں کیں۔ موبائل اسکور 100 سے گر کر 89 ہو گیا۔ ڈیسک ٹاپ 100 پر ہی رہا۔

مسئلہ ایک واحد امیج ایٹریبیوٹ (image attribute) کا تھا۔ یہ غلطی ظاہر کرتی ہے کہ آپ کو AI کوڈ کا جائزہ کیوں لینا چاہیے۔

تیز رفتار ڈیسک ٹاپ کنکشنز رکاوٹوں (bottlenecks) کو چھپا دیتے ہیں۔ موبائل ڈیوائسز انہیں ظاہر کر دیتی ہیں۔ اسکور میں کمی کا مطلب یہ تھا کہ کوئی اثاثہ (asset) ایسی بینڈوتھ استعمال کر رہا تھا جس کی اسے ضرورت نہیں تھی۔

موبائل رپورٹ نے Largest Contentful Paint (LCP) پاتھ میں موجود ایک تصویر کی طرف اشارہ کیا۔ یہ ایک پرانے گیم کا اسکرین شاٹ تھا۔

ڈیسک ٹاپ پر یہ تصویر ٹھیک ہے۔ لیکن موبائل پر، ایک بڑا ڈیٹا ٹیبل اسکرین کو بھر دیتا ہے۔ یہ ٹیبل تصویر کو صفحے میں کافی نیچے دھکیل دیتا ہے۔ جب صفحہ لوڈ ہوتا ہے تو تصویر نظر نہیں آتی۔

AI نے یہ کوڈ لکھا: Aladdin

کوڈ درست ہے۔ منطق غلط ہے۔ AI نے یہ فرض کر لیا کہ کوڈ میں پہلی تصویر 'hero image' ہے۔ اس میں بصری آگاہی (visual awareness) کی کمی ہے۔ اس نے موبائل براؤزرز کو فوری طور پر ایک چھپی ہوئی تصویر ڈاؤن لوڈ کرنے پر مجبور کر دیا۔

میں نے کوڈ کو اس میں تبدیل کر دیا: Aladdin

شروع میں اسکور تبدیل نہیں ہوا۔ مجھے لگا کہ شاید میرا دماغ کام نہیں کر رہا۔ میں نے بگ (bugs) تلاش کرنے میں بیس منٹ صرف کیے۔ پھر مجھے احساس ہوا کہ میرا سرور کیش (server cache) اب بھی پرانا کوڈ فراہم کر رہا تھا۔

میں نے کیش (cache) صاف کر دیا۔ موبائل اسکور واپس 100 پر آگیا۔

AI ناکام نہیں ہوا۔ اس نے کوڈ کی ترتیب کی بنیاد پر ایک منطقی اندازہ لگایا تھا۔ لیکن یہ لے آؤٹ کو نہیں دیکھ سکتا۔ یہ نہیں سمجھتا کہ ایک ٹیبل ویو پورٹ (viewport) کو کیسے تبدیل کرتا ہے۔

اگر آپ اجزاء (components) بنانے کے لیے AI کا استعمال کرتے ہیں، تو ان اقدامات پر عمل کریں:

  • fetchpriority اور loading="lazy" کا آڈٹ کریں۔ انہیں اصل لے آؤٹ کے مطابق چیک کریں۔ کوڈ کی ترتیب پر بھروسہ نہ کریں۔
  • ٹیبلز یا سلائیڈرز کے نیچے چھپی ہوئی تصاویر تلاش کریں۔
  • اپنی ٹیسٹنگ کو الگ تھلگ رکھیں۔ ٹیسٹ کرنے سے پہلے ہمیشہ اپنا کیش (cache) صاف کریں۔ پرانے (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