Core Web Vitals في موقع بناه وكيل

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

المقاييس الثلاثة والحدود التي تُحتسب

Core Web Vitals ثلاثة أرقام، وتُحكَم ثلاثتها عند المئين الخامس والسبعين من الزيارات الحقيقية لا على حاسوبك. وذلك المئين هو ما يتجاوزه الناس، وهو يغيّر ما ينبغي أن تحسّنه: فصفحة سريعة لك وبطيئة لربع الزوّار صفحةٌ فاشلة.

في موقع تسويقي، أكبر عنصر فوق الطيّة صورة، أي أن LCP مشكلة تحميل صور متنكّرة بزيّ مقياس. والوكيل الذي يبني الصفحة سيستعمل مكوّن الصور في الفريمورك ويُصيب معظمه، ثم يُفوت السمة الوحيدة المهمّة: صورة البطل تحتاج وسمَ أولوية لئلّا تُحمَّل بتأخير كما يُحمَّل كل ما تحتها.

واثنتان أخريان تتكرّران. قيمة جودة غير مُدرَجة في مكوّن الصور تُعيد خطأً من المُحسِّن وتُعطب الصورة بلا فشل بناء إطلاقاً، وهذا عيب شحنّاه. وصورة بطل تُخدَم بدقّتها الأصلية على هاتف تكلّف ثانيةً من اللاشيء، لأن المتصفّح يُنزّل بكسلات يُلقيها بعدها. ومرجع مكوّن الصور يغطّي الاثنتين.

CLS: استبدال الخطّ والتضمين بلا أبعاد

الإزاحة التخطيطية هي المقياس الأقلّ تجهيزاً لأن يلاحظه وكيل، لأنها غير مرئية في الحالة النهائية. فالصفحة تبدو صحيحة بعد استقرار كل شيء، والعيب كلّه حدث أثناء الاستقرار. وسببان يفسّران معظمه في موقع تسويقي: خطّ ويب يُحمَّل بعد أول رسم فيعيد سيلان العنوان، وأي شيء مضمّن بلا أبعاد معلنة، أي الخرائط والفيديو وأدوات الأطراف الثالثة.

وكلاهما قابل للإصلاح بسطر واحد لكلٍّ، ولن يُصلَح أيّهما إلّا إذا قاس أحد، لأن وكيلاً سُئل هل تبدو الصفحة صحيحة سيأخذ لقطة بعد استقرار كل شيء ويجيب بنعم صادقاً.

INP: التفاعلية التي لم يطلبها أحد

التفاعل إلى الرسم التالي يقيس كم تستغرق الصفحة لتستجيب عند نقر أحدهم. وفي موقع محتوى ينبغي أن يكون بلا كلفة، والطريقة التي يفقد بها ذلك هي صفحة صارت تفاعلية لدعم شيء صغير واحد. قائمة محمولة، أو شريط تبويبات، أو أكورديون: كلّ منها ميزة معقولة، وكلّ منها قادر على جرّ المسار كلّه إلى العرض في العميل إن رُسم حدّ المكوّن بإهمال.

هذا هو الموضع الذي يحتاج فيه الوكيل قاعدةً لا اجتهاداً، لأن حدّ المكوّن يبدو اعتباطيّاً من داخل الملف. وقاعدتنا أن التفاعلية ورقة: أصغر مكوّن ممكن هو التفاعلي، ولا يحوي محتوى أبداً. وذلك السطر الواحد في تعليمات المشروع منع عملَ أداءٍ أكثر مما منعه أي تحسين أجريناه، وهذه هي الحجّة التي يطرحها مقال CLAUDE.md عموماً.

أرقام المخبر فرضية وأرقام الميدان حكم

التدقيق المحلّي يشغّل صفحة واحدة، مرّة، على عتادك، عبر اتّصالك. وهو نافع لإيجاد الأسباب وعديم النفع للحكم هل لديك مشكلة. وLighthouse صريح في كونه أداة مخبر، وPageSpeed Insights يعرض بيانات الزيارات الحقيقية بجانب تشغيل المخبر تحديداً لتراهما يختلفان.

والتسلسل الناجع: أوجد الأسباب محليّاً، واحكم على التحسّن من بيانات الميدان بعد أسابيع. وتوقّع تحرّك رقم الميدان يوم النشر هو أشهر طريق يستنتج بها الناس أن عمل الأداء لا يفيد.

قِس في متصفّح يُركّب

ملاحظة مكتسبة بعُسر. ليست كل بيئة يرى فيها الوكيل صفحةً تعرضها كما يعرضها المتصفّح. فقد مرّ عندنا عنوان في كل قياس أخذناه وكان معطوباً بصريّاً على الشاشة، لأن الأدوات أبلغت قيماً محسوبة من مُعالِج عرض لم يُركّب الطبقة قطّ. فإن كان السؤال أداءً أو تخطيطاً، تحقّق في متصفّح حقيقي عند عرض حقيقي. وما عدا ذلك فرضية، وهذا هو درس التحقّق من عمل الوكيل نفسه.

أحكِمه بوابةً أو سيعود

الأداء ينحدر بصمت، مكوّناً مكوّناً، وسيُعيد وكيلٌ الأنماط نفسها بعد ستّة أسابيع لأن لا شيء في المستودع يقول لا. والحلّ كحلّ كل عيب متكرّر: اكتب القاعدة حيث تُقرأ، وأحكِمها حيث يرخص فحصها. سطر عن حدود التفاعلية، وسطر عن صور البطل، وفحصٌ على الخَرْج المبنيّ. ومقال الـhooks يغطّي البوابة، وقائمة الـSEO تغطّي ما يُتحقّق منه أيضاً عند إطلاق الموقع، وإن فضّلت ألّا تشغّل شيئاً من ذلك بنفسك، فهذا ما نحن له.