Loading...

الأداء · قراءة 9 دقائق

Core Web Vitals: إصلاح LCP وINP وCLS حيث يهم فعلًا

مؤشرات Core Web Vitals هي الأرقام الثلاثة التي تلخّص بها Google إحساس الصفحة: كم يسرع ظهور المحتوى الرئيسي (LCP)، وكم تسرع الصفحة في الاستجابة للإدخال (INP)، وكم يقفز التخطيط أثناء التحميل (CLS). أهميتها مضاعفة — فهي إشارة ترتيب، وهي تقيس في الوقت نفسه الأشياء ذاتها التي تجعل الزوار يغادرون. يشرح هذا الدليل ما يقيسه كل مؤشر حقًا، وأي البيانات تستحق الثقة، والإصلاحات بترتيب الأثر لا بترتيب فولكلور الإنترنت.

Updated

Core Web Vitals: إصلاح LCP وINP وCLS حيث يهم فعلًا

ما الذي تقيسه الأرقام الثلاثة فعليًا

LCP — أي Largest Contentful Paint — هو الزمن حتى يُرسم أكبر عنصر مرئي: صورة الهيرو، أو كتلة العنوان. وهو المقياس الأقرب إلى "متى بدت الصفحة محمَّلة". الجيد هو أقل من 2.5 ثانية عند المئين 75 من الزيارات الحقيقية.

INP — أي Interaction to Next Paint — يقيس كم تستغرق الصفحة للاستجابة المرئية بعد لمسة أو نقرة أو ضغطة مفتاح، على امتداد الزيارة كلها. الجيد أقل من 200ms. حلّ محل FID في 2024 وهو أكثر صرامة: يلتقط البطء الذي يشعر به المستخدمون على الصفحات المثقلة بـ JavaScript، لا الإدخال الأول فقط.

CLS — أي Cumulative Layout Shift — يقيّم كم يتحرك المحتوى المرئي دون طلب من المستخدم: الفقرة التي كنت تقرؤها تقفز عند تحميل إعلان، والزر الذي تحرّك لحظة لمسته. الجيد أقل من 0.1، وبخلاف المؤشرَين الآخرين هو درجة بلا وحدة، لا زمن.

البيانات الميدانية مقابل بيانات المختبر: أي الأرقام تصدّق

يعرض PageSpeed Insights عالمَين مختلفَين. القسم العلوي — "ما اختبره المستخدمون الحقيقيون" — بيانات ميدانية من مستخدمي Chrome على مدى 28 يومًا، وهي ما تستخدمه Google فعلًا. أما الدرجة السفلية فمحاكاة مختبرية على عتاد مقيَّد: مفيدة للتشخيص، مضلِّلة كهدف.

النتائج العملية: درجة مختبر 60 مع بيانات ميدانية خضراء تعني أنك بخير؛ ومختبر مثالي مع ميدان أحمر يعني أن زوارًا حقيقيين على شبكات حقيقية يعانون بينما آلة المختبر لا تعاني. حسّن للأرقام الميدانية، واستخدم تقرير المختبر لتعرف لماذا هي كما هي، وتذكّر أن البيانات الميدانية متأخرة — إصلاح اليوم يحتاج حتى 28 يومًا ليظهر كاملًا.

إصلاح LCP: مشكلة توصيل في معظمها

Core Web Vitals: إصلاح LCP وINP وCLS حيث يهم فعلًا — إصلاح LCP: مشكلة توصيل في معظمها
خيارات image optimization وcompression لقاعدة توصيل.

يتفكك LCP إلى: زمن الحصول على HTML، وزمن اكتشاف الصورة الرئيسية، وزمن تنزيلها، وزمن الرسم. ثلاثة من هذه الأربعة توصيل — ولهذا فإن LCP هو المؤشر الحيوي الذي يحرّكه CDN أكثر من غيره، ولهذا هو الهدف الأول الصحيح.

الروافع بترتيب الأثر: قدّم HTML والأصول من كاش الحافة لتأتي البايتات الأولى من مكان قريب بدل أصلك؛ حوّل صور الهيرو إلى WebP/AVIF وقِسها على العرض الفعلي بدل شحن ملفات بدقة الكاميرا؛ واضغط النصوص التي يجب أن تصل قبل الرسم. على cdn.com.tr الثلاثة كلها إعدادات على قاعدة التوصيل — كاش الحافة، وتحسين الصور التلقائي WebP/AVIF، وBrotli/Gzip — فأكبر روافع LCP مفاتيح تُفعَّل لا إعادة بناء. ومن جانب التطبيق، أعطِ صورة الهيرو أولوية جلب عالية ولا تؤجل تحميلها أبدًا: التحميل الكسول لعنصر LCP هو أكثر جراح LCP الذاتية شيوعًا على الإطلاق.

إصلاح CLS: احجز المساحة

لإزاحة التخطيط سبب جذري واحد: محتوى يصل دون مساحة محجوزة. والإصلاحات غير برّاقة لكنها موثوقة. أعطِ كل صورة وفيديو سمتَي width وheight صريحتين (أو aspect-ratio في CSS) ليحجز المتصفح الصندوق قبل وصول الملف. أعطِ خانات الإعلانات والتضمينات حاويات ثابتة الحجم تحفظ مساحتها سواء حُمّل المحتوى أم لا. حمّل الخطوط المخصصة مسبقًا واستخدم استراتيجيات font-display تتجنب التبديلات المتأخرة التي تعيد تدفق الصفحة. ولا تحقن أبدًا لافتات فوق محتوى قائم بعد التحميل — هذا النمط وحده وراء معظم درجات CLS الرهيبة.

CLS هو المؤشر الحيوي الذي تكفي فيه عطلة نهاية أسبوع من إضافة السمات لنقل صفحة راسبة إلى الأخضر بشكل روتيني.

إصلاح INP: أقل JavaScript على الخيط الرئيسي

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

كن مرتابًا في أي وعد بإصلاح INP دون لمس JavaScript لديك — فالمقياس موجود تحديدًا لأن التوصيل وحده لا يستطيع تزييف الاستجابة.

ترتيب عمل عاقل

افحص البيانات الميدانية للصفحات المهمة تجاريًا، لا الصفحة الرئيسية فقط. إذا فشل LCP: كاش الحافة، وصيغة الصور وقياسها، والضغط — مجموعة التوصيل — ثم أولوية الجلب. إذا فشل CLS: الأبعاد، والخانات المحجوزة، وتحميل الخطوط. إذا فشل INP: خصص وقتًا لعمل تطبيقي حقيقي؛ لا شيء غيره يحرّكه بصدق. أعد القياس ميدانيًا بعد كل جولة وتوقّع تأخر الـ 28 يومًا.

وأبقِ الإطار حاضرًا: الهدف ليس الشارة. الثواني الـ 2.5 نفسها التي تُرضي المقياس هي الفرق بين زائر يبقى وزائر يغادر — الشارة مجرد المكان الذي ترى فيه ذلك.

أسئلة شائعة

هل تؤثر Core Web Vitals فعلًا في الترتيب؟

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

لماذا درجة المختبر لديّ سيئة بينما البيانات الميدانية خضراء؟

المختبر يحاكي جهازًا بطيئًا على شبكة مقيَّدة؛ وجمهورك الحقيقي قد يكون على عتاد أفضل. البيانات الميدانية الخضراء هي الجواب المعتبر — استخدم المختبر للتشخيص فقط، لا كهدف.

بأي سرعة سيحسّن CDN مؤشراتي الحيوية؟

الآلية فورية: HTML المخزّن على الحافة والصور المحسّنة يغيّران LCP منذ الزيارة غير المخزّنة التالية. أما الأرقام الميدانية المبلَّغ عنها فتتحرك على مدى يصل إلى 28 يومًا، لأنها نافذة متدحرجة من الزيارات الحقيقية.

أي مؤشر حيوي أصلح أولًا؟

الذي يفشل في البيانات الميدانية على صفحاتك التجارية. وعند فشل عدة مؤشرات: LCP أولًا (إعدادات التوصيل، أسرع مكسب)، ثم CLS (إصلاحات تطبيقية رخيصة)، وINP أخيرًا (عمل JavaScript حقيقي).