الذكاء الاصطناعي صمم قالب ووردبريس الخاص بي، ثم تسبب في تدهور أدائه

أنا متخصص في تحسين محركات البحث (SEO). وأستمتع بتجربة الأدوات الجديدة.

طلبت مؤخرًا من أحد نماذج الذكاء الاصطناعي بناء قالب ووردبريس (WordPress) مخصص من الصفر. قمت بوصف التخطيط وتوفير المحتوى.

في البداية، بدت النتائج رائعة. حقق الموقع درجة 100/100 في أداة Lighthouse لكل من الهاتف المحمول وسطح المكتب. وبدا الكود نظيفًا.

ثم أجريت تعديلات بسيطة. انخفضت درجة الهاتف المحمول من 100 إلى 89، بينما ظلت درجة سطح المكتب عند 100.

كانت المشكلة في سمة (attribute) صورة واحدة. يوضح هذا الخطأ سبب ضرورة مراجعة الكود الذي ينتجه الذكاء الاصطناعي.

الاتصالات السريعة على أجهزة سطح المكتب تخفي نقاط الاختناق، بينما تكشفها الأجهزة المحمولة. انخفاض الدرجة كان يعني أن أحد العناصر يستهلك عرض نطاق ترددي (bandwidth) لا يحتاجه.

أشار تقرير الهاتف المحمول إلى صورة في مسار "أكبر رسم محتوى" (Largest Contentful Paint - LCP). كانت لقطة شاشة من لعبة قديمة.

على سطح المكتب، تبدو هذه الصورة جيدة. ولكن على الهاتف المحمول، يملأ جدول بيانات كبير الشاشة، مما يدفع الصورة إلى أسفل الصفحة بعيدًا. وبالتالي، لا تكون الصورة مرئية عند تحميل الصفحة.

كتب الذكاء الاصطناعي هذا الكود: Aladdin

الكود صحيح برمجياً، لكن المنطق خاطئ. افترض الذكاء الاصطناعي أن أول صورة في الكود هي الصورة الرئيسية (hero image). إنه يفتقر إلى الوعي البصري، حيث أجبر متصفحات الهاتف المحمول على تحميل صورة مخفية على الفور.

قمت بتغيير الكود إلى: Aladdin

لم تتغير الدرجة في البداية. ظننت أنني بدأت أفقد صوابي، وقضيت عشرين دقيقة في البحث عن أخطاء (bugs). ثم أدركت أن ذاكرة التخزين المؤقت (cache) في الخادم كانت لا تزال تقدم الكود القديم.

قمت بمسح ذاكرة التخزين المؤقت، فعادت درجة الهاتف المحمول إلى 100.

لم يفشل الذكاء الاصطناعي؛ بل قام بتخمين منطقي بناءً على ترتيب الكود. لكنه لا يستطيع رؤية التخطيط، ولا يفهم كيف يغير الجدول مساحة العرض (viewport).

إذا كنت تستخدم الذكاء الاصطناعي لبناء المكونات (components)، فاتبع هذه الخطوات:

  • راجع fetchpriority و loading="lazy". تحقق منهما مقابل التخطيط الفعلي. لا تثق في ترتيب الكود.
  • ابحث عن الصور المخفية تحت الجداول أو أشرطة التمرير (sliders).
  • اعزل اختباراتك. قم دائمًا بمسح ذاكرة التخزين المؤقت قبل الاختبار. لا تقم بمراجعة كود قديم (stale code).

كود الذكاء الاصطناعي نظيف بما يكفي للاستخدام، ولكنك لا تزال بحاجة إلى إنسان للتحقق مما إذا كان الكود يتوافق مع واقع الصفحة.

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