هوش مصنوعی قالب وردپرس من را ساخت، اما عملکرد سایت را خراب کرد

من یک متخصص SEO هستم. از تست کردن ابزارهای جدید لذت می‌برم.

اخیراً از یک هوش مصنوعی خواستم تا یک قالب سفارشی وردپرس را از صفر بسازد. من چیدمان (layout) را توصیف کردم و محتوا را در اختیارش گذاشتم.

در ابتدا، نتایج عالی به نظر می‌رسیدند. سایت در Lighthouse هم برای موبایل و هم برای دسکتاپ امتیاز ۱۰۰ از ۱۰۰ را کسب کرد. کدها هم تمیز بودند.

سپس تغییرات کوچکی اعمال کردم. امتیاز موبایل از ۱۰۰ به ۸۹ کاهش یافت. امتیاز دسکتاپ روی ۱۰۰ باقی ماند.

مشکل مربوط به یک ویژگی (attribute) در یک تصویر بود. این اشتباه نشان می‌دهد که چرا باید کدهای تولید شده توسط هوش مصنوعی را بازبینی کنید.

اتصالات سریع دسکتاپ، گلوگاه‌ها (bottlenecks) را پنهان می‌کنند، اما دستگاه‌های موبایل آن‌ها را آشکار می‌سازند. کاهش امتیاز به این معنا بود که یکی از دارایی‌ها (assets) داشت از پهنای باندی استفاده می‌کرد که نیازی به آن نداشت.

گزارش موبایل به تصویری در مسیر Largest Contentful Paint (LCP) اشاره می‌کرد. آن تصویر، اسکرین‌شاتی از یک بازی قدیمی بود.

در دسکتاپ، این تصویر مشکلی ندارد. اما در موبایل، یک جدول داده بزرگ صفحه را پر می‌کند. این جدول، تصویر را به پایین صفحه می‌راند. زمانی که صفحه بارگذاری می‌شود، تصویر قابل مشاهده نیست.

هوش مصنوعی این کد را نوشت: Aladdin

کد از نظر ساختاری درست است، اما منطق آن اشتباه است. هوش مصنوعی فرض کرده بود که اولین تصویر در کد، تصویر اصلی (hero image) است. هوش مصنوعی فاقد درک بصری است. او مرورگرهای موبایل را مجبور کرد تا بلافاصله یک تصویر پنهان را دانلود کنند.

من کد را به این صورت تغییر دادم: Aladdin

در ابتدا امتیاز تغییری نکرد. فکر کردم دارم دیوانه می‌شوم. بیست دقیقه را صرف جستجو برای باگ‌ها کردم. سپس متوجه شدم که کش (cache) سرور من هنوز داشت کد قدیمی را ارائه می‌داد.

کش را پاک کردم. امتیاز موبایل دوباره به ۱۰۰ برگشت.

هوش مصنوعی شکست نخورد؛ بلکه بر اساس ترتیب کدها، یک حدس منطقی زد. اما او نمی‌تواند چیدمان را ببیند و درک نمی‌کند که یک جدول چگونه ویوپورت (viewport) را تغییر می‌دهد.

اگر از هوش مصنوعی برای ساخت کامپوننت‌ها استفاده می‌کنید، این مراحل را دنبال کنید:

  • ویژگی‌های fetchpriority و loading="lazy" را بررسی کنید. آن‌ها را با چیدمان واقعی تطبیق دهید. به ترتیب قرارگیری کدها اعتماد نکنید.
  • به دنبال تصاویری بگردید که زیر جدول‌ها یا اسلایدرها پنهان شده‌اند.
  • تست‌های خود را ایزوله کنید. همیشه قبل از تست، کش خود را پاک کنید. کدهای قدیمی و منقضی‌شده را بازبینی نکنید.

کدهای هوش مصنوعی برای استفاده به اندازه کافی تمیز هستند، اما همچنان به یک انسان نیاز دارید تا بررسی کند آیا کد با واقعیتِ صفحه مطابقت دارد یا خیر.

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