مُؤَشِّرَاتُ الوِيب الأَسَاسِيَّةُ
سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)
يقيس LCP أداء تحميل الصفحة، ولتوفير تجربة مُثلى للمستخدم، يجب أن يظهر المحتوى بشكل عام في غضون 2.5 ثانية من وقت بدء تحميل الصفحة لأول مرة.
ويُعد (Largest Contentful Paint (LCP مقياسًا هامًا يركز على المستخدم لقياس سرعة التحميل المتصوَّرة، لأنه يشير إلى النقطة، في المخطط الزمني لتحميل الصفحة، وعند تحميل المحتوى الرئيسي للصفحة -على الأرجح- يساعد LCP السريع، في طمأنة المستخدم بأن الصفحة مفيدة.
ما هي درجة LCP الجيدة؟
لتوفير تجربة جيدة للمستخدم، يجب أن تسعى المواقع جاهدة للحصول على أكبر محتوى يظهر خلال أول 2.5 ثانية من بدء تحميل الصفحة. لضمان تحقيق هذا الهدف لمعظم المستخدمين ، فإن العتبة الجيدة للقياس هي 75 بالمائة من تحميلات الصفحات، مقسمة عبر أجهزة الجوال وأجهزة سطح المكتب.
ما هي العوامل التي تؤثر في LCP؟
- عناصر <img>
- عناصر <image> داخل عنصر <svg>
- عناصر <video> (صورة الملصق مستخدمة)
- عنصر مع صورة خلفية تم تحميلها عبر وظيفة url () (على عكس تدرج CSS)
- عناصر مستوى الكتلة التي تحتوي على عقد نصية أو عناصر نصية أخرى مضمنة على مستوى الأطفال.
كيف يتم تحديد حجم العنصر؟
عادةً ما يكون حجم العنصر الذي تم الإبلاغ عنه لـ Largest Contentful Paint هو الحجم المرئي للمستخدم داخل منفذ العرض. إذا امتد العنصر خارج إطار العرض ، أو إذا تم قطع أي عنصر أو كان به تجاوز غير مرئي ، فلن يتم احتساب هذه الأجزاء ضمن حجم العنصر.
بالنسبة لعناصر الصورة التي تم تغيير حجمها من حجمها الداخلي، فإن الحجم الذي يتم الإبلاغ عنه هو إما الحجم المرئي أو الحجم الداخلي، أيهما أصغر. على سبيل المثال، الصور التي تم تقليصها إلى حجم أصغر بكثير من حجمها الحقيقي ستبلغ فقط عن الحجم الذي يتم عرضها به، بينما الصور التي يتم تمديدها أو توسيعها إلى حجم أكبر ستبلغ فقط عن أحجامها الذاتية.
بالنسبة لعناصر النص، يتم أخذ حجم العقد النصية فقط في الاعتبار (أصغر مستطيل يشمل جميع العقد النصية).
بالنسبة لجميع العناصر، لا يتم اعتبار أي هامش أو مساحة متروكة أو حد مطبق عبر LCP.
مهلة الاستجابة لأوّل إدخال (FID)
يقيس FID التفاعل، ولتوفير انطباع جيد لدى المستخدم، يجب أن يكون معرف FID أقل من 100 مللي ثانية.
يعتبر تأخير الإدخال الأول (FID) مقياسًا مهمًا يركز على المستخدم لقياس استجابة الحمل لأنه يحدد التجربة التي يشعر بها المستخدمون عند محاولة التفاعل مع الصفحات غير المستجيبة - يساعد انخفاض معدل إدخال البيانات على ضمان أن الصفحة قابلة للاستخدام.
يمكن أن يحدث الانطباع الجيد الأول فرقًا بين أن يصبح شخص ما مستخدمًا مخلصًا ودائم الحضور على الموقع الإلكتروني أو أن يقوم بمغادرته وعدم العودة مطلقًا.
على الويب، يمكن أن تتخذ الانطباعات الأولى العديد من الأشكال المختلفة - مثل الانطباعات الأولى عن تصميم الموقع، وجاذبيته المرئية، بالإضافة إلى الانطباعات الأولى عن سرعته واستجابته.
في حين أنه من الصعب قياس مدى إعجاب المستخدمين بتصميم الموقع باستخدام واجهات برمجية، إلا أن قياس سرعة الموقع واستجابتهيمكن قياسها.
الانطباع الأول لدى الزوار عن مدى سرعة تحميل الموقع الإلكتروني، يمكن قياسه باستخدام (First Contentful Paint (FCP. ولكن مدى سرعة الموقع في رسم وحدات البكسل على الشاشة هي مجرد جزء واحد. إذ لا تقل أهميتع عن مدى استجابة الموقع الإلكتروني عندما يحاول المستخدمون التفاعل مع وحدات البكسل هذه.
يساعد مقياس تأخير الإدخال الأول (FID) في قياس الانطباع الأول للمستخدم عن تفاعل الموقع الإلكتروني واستجابته.
كيفية تحسين FID
لمعرفة كيفية تحسين FID لموقع معين ، يمكنك إجراء تدقيق أداء Lighthouse والانتباه إلى أي فرص محددة يقترحها التدقيق.
وفي حين أن FID هو مقياس ميداني (و Lighthouse هي أداة قياس معملية)، فإن التوجيه لتحسين FID هو نفسه لتحسين مقياس المختبر إجمالي وقت الحظر (TBT). ولتحسين FID، يمكن فعل الآتي:
- تفريق المهام الطويلة
- تحسين صفحتك للاستعداد للتفاعل
- استخدم عامل الويب
- تقليل وقت تنفيذ JavaScript
متغيّرات التصميم التراكمية (CLS)
يقيس CLS الثبات البصري. ولتوفير تجربة مستخدم جيدة ، يجب أن تحافظ الصفحات على CLS أقل من 0.1.
يعد التّحوّل في التّخطيط التراكمي (CLS) مقياسًا مهمًا يركز على المستخدم لقياس الاستقرار البصري لأنه يساعد في تحديد عدد المرات التي يواجه فيها المستخدمون تغيرات غير متوقعة في التخطيط - يساعد انخفاض CLS على ضمان أن تكون الصفحة ممتعة.
هل سبق لك أن قرأت مقالًا عبر الإنترنت عندما تغير شيء ما فجأة على الصفحة؟ بدون سابق إنذار، يتحرك النص، وقد فقدت مكانك. أو حتى أسوأ من ذلك: أنت على وشك النقر فوق ارتباط أو زر ، ولكن في اللحظة التي تسبق إصبعك - BOOM - يتحرك الرابط ، وينتهي بك الأمر بالنقر فوق شيء آخر!
في معظم الأوقات ، تكون هذه الأنواع من التجارب مزعجة ، ولكن في بعض الحالات ، يمكن أن تسبب ضررًا حقيقيًا.
كيفية تحسين CLS
بالنسبة لمعظم مواقع الويب، يمكنك تجنب جميع التغييرات غير المتوقعة في التخطيط من خلال الالتزام ببعض المبادئ التوجيهية:
- يجب دائمًا تضمين سمات الحجم في الصور وعناصر الفيديو، أو احتفظ بالمساحة المطلوبة بشيء مثل مربعات نسبة العرض إلى الارتفاع في CLS.
يضمن هذا الأسلوب أن المستعرض يمكنه تخصيص المقدار الصحيح من المساحة في المستند أثناء تحميل الصورة. لاحظ أنه يمكنك أيضًا استخدام نهج ميزة الوسائط غير الحجم لفرض هذا السلوك في المتصفحات التي تدعم سياسات الميزات.
- لا يُنصح أبدًا بإدراج محتوى أعلى المحتوى الحالي، إلا في حالة استجابة المستخدم. هذا يضمن توقع أي تغييرات في التخطيط تحدث من طرف المستخدم.
- يفضل تحويل الرسوم المتحركة إلى الرسوم المتحركة للخصائص التي تؤدي إلى تغييرات التخطيط. حرك التحولات بطريقة توفر السياق والاستمرارية من حالة إلى أخرى.
كما قد يُثير انتباهك الآتي:
- CLS | التحوّل في التّخطيط التّراكمي
- LCP | عرض أكبر جزء من المحتوى
- الأسئلة الشائعة حول مؤشّرات الويب الأساسية
وإذا كان لا يزال هناك أي سؤال أو استفسار، لا يجب التّردّد في تركه في الرّدود في الأسفل، أو طرح السؤال مباشرة على منتدى مساعدة مجموعة خدمات "بحث Google" مباشرة عن طريق الرّابط التّالي: