تحسين متغيّرات التصميم التراكمية

كيفية تجنُّب التغييرات المفاجئة في التصميم لتحسين تجربة المستخدم

Addy Osmani

Barry Pollard

تاريخ النشر: 5 مايو 2020، تاريخ آخر تعديل: 7 فبراير 2025

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

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

لتقديم تجربة جيدة للمستخدم، يجب أن تسعى المواقع الإلكترونية إلى أن تكون قيمة CLS أقل من 0.1 في% 75 على الأقل من زيارات الصفحة.

على عكس مؤشرات Core Web Vitals الأخرى التي تستند إلى قيم مرتبطة بالوقت ويتم قياسها بالثواني أو الملّي ثانية، فإنّ نتيجة CLS هي قيمة غير مرتبطة بوحدة قياس وتستند إلى عملية حسابية لمقدار المحتوى الذي يتم نقله ومقدار المسافة التي يتم نقله بها.

في هذا الدليل، سنتناول كيفية تحسين الأسباب الشائعة لتغيّرات التنسيق.

في ما يلي الأسباب الأكثر شيوعًا لانخفاض قيمة CLS:

• الصور التي لا تتضمّن أبعادًا
• الإعلانات وعناصر التضمين وإطارات iframe بدون أبعاد
• المحتوى الذي يتم إدراجه ديناميكيًا، مثل الإعلانات وعناصر التضمين وإطارات iframe بدون أبعاد
• خطوط الويب

فهم أسباب تغييرات التنسيق

قبل البدء في البحث عن حلول لمشاكل CLS الشائعة، من المهم فهم نتيجة CLS ومصدر التغييرات.

مقياس CLS في أدوات المختبر مقارنةً بالبيانات الميدانية

من الشائع أن يعتقد المطوّرون أنّ مقياس CLS الذي يحدّده تقرير تجربة المستخدم في Chrome (CrUX) غير صحيح لأنّه لا يتطابق مع مقياس CLS الذي يحدّدونه باستخدام أدوات مطوّري البرامج في Chrome أو أدوات الاختبار الأخرى. قد لا تعرض أدوات مختبر أداء الويب، مثل Lighthouse، إجمالي CLS للصفحة لأنّها عادةً ما تُجري عملية تحميل أساسية للصفحة لقياس بعض مقاييس أداء الويب وتقديم بعض الإرشادات (مع أنّ عمليات Lighthouse التي يجريها المستخدم تتيح لك القياس بما يتجاوز عملية التدقيق التلقائية في تحميل الصفحة).

‫CrUX هي مجموعة بيانات Google الخاصة ببرنامج Web Vitals، ولهذا السبب يتم قياس متغيّرات التصميم التراكمية (CLS) طوال عمر الصفحة بالكامل وليس فقط أثناء التحميل الأولي للصفحة الذي تقيسه أدوات المختبر عادةً.

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

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

تعرض أداة إحصاءات PageSpeed مقياس CLS الذي يدركه المستخدم من عنوان URL في قسم "التعرّف على تجربة المستخدمين"، كما تعرض مقياس CLS المستند إلى المختبر في قسم "تشخيص مشاكل الأداء". من المحتمل أنّ تكون الاختلافات بين هذه القيم ناتجة عن متغيّرات التصميم التراكمية بعد التحميل.

تحديد المشاكل المتعلّقة بمقياس CLS عند التحميل

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

توفّر لوحة الأداء في "أدوات مطوّري البرامج" الكثير من المعلومات حول عمليات تغيير التنسيق:

يتم تمييز تغييرات التصميم في مسار تغييرات التصميم. يتم تجميع متغيّرات التصميم في مجموعات باستخدام الخط الأرجواني، وتُظهر المعيّنات متغيّرات التصميم الفردية في تلك المجموعة. يتناسب حجم المعيّن مع حجم التغيّر، ما يتيح لك التركيز على أكبر التغيّرات.

يؤدي النقر على تغيير إلى ظهور نافذة منبثقة تتضمّن صورة متحرّكة للتغيير، كما يتم تمييز العناصر التي تم تغييرها باللون الأرجواني.

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

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

تحديد المشاكل المتعلّقة بمقياس CLS بعد تحميل الصفحة

يشير الاختلاف بين نتائج CLS في CrUX وLighthouse غالبًا إلى CLS بعد التحميل. قد يكون من الصعب تتبُّع هذه التغييرات بدون بيانات الحقول. للحصول على معلومات حول جمع بيانات الحقول، اطّلِع على قياس عناصر CLS في الحقل.

تتيح لك طريقة عرض المقاييس المباشرة في "لوحة الأداء" التفاعل مع الصفحة وتتبُّع نتيجة CLS لتحديد التفاعلات التي تتسبّب في تغييرات كبيرة في التخطيط.

كبديل لاستخدام "أدوات مطوّري البرامج"، يمكنك تصفّح صفحة الويب أثناء تسجيل عمليات تغيير التنسيق باستخدام Performance Observer تم لصقه في وحدة التحكّم.

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

لمزيد من المعلومات، يُرجى الاطّلاع على تصحيح أخطاء تغييرات التنسيق.

بعد تحديد أي أسباب شائعة لـ CLS، يمكن أيضًا استخدام وضع "مدد الفواصل الزمنية" في مسار المستخدم في Lighthouse لضمان عدم حدوث تراجع في مسارات المستخدم النموذجية بسبب إدخال تغييرات في التنسيق.

قياس عناصر CLS في الحقل

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

تتضمّن مكتبة web-vitals وظائف تحديد المصدر تتيح لك جمع هذه المعلومات الإضافية. لمزيد من المعلومات، يُرجى الاطّلاع على تصحيح أخطاء الأداء في بيئة التشغيل. بدأ مقدّمو خدمات RUM الآخرون أيضًا في جمع هذه البيانات وعرضها بطريقة مماثلة.

الأسباب الشائعة لزيادة CLS

بعد تحديد أسباب CLS، يمكنك البدء في حلّ المشاكل. في هذا القسم، سنعرض بعض الأسباب الأكثر شيوعًا لحدوث CLS، والإجراءات التي يمكنك اتّخاذها لتجنُّبها.

صور بدون أبعاد

أدرِج دائمًا سمات الحجم width وheight في عناصر الصور والفيديوهات. يمكنك بدلاً من ذلك حجز المساحة المطلوبة باستخدام CSS aspect-ratio أو ما شابه ذلك. يضمن هذا النهج أن يتمكّن المتصفّح من تخصيص مقدار المساحة الصحيح في المستند أثناء تحميل الصورة.

سجلّ السمتَين width وheight في الصور

في الأيام الأولى للويب، كان المطوّرون يضيفون السمتَين width وheight إلى علامات <img> لضمان تخصيص مساحة كافية على الصفحة قبل أن يبدأ المتصفّح في جلب الصور. سيؤدي ذلك إلى تقليل إعادة التدفق وإعادة التنسيق.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

لا يتضمّن width وheight في هذا المثال وحدات. تضمن هذه الأبعاد "بالبكسل" أن يحجز المتصفّح مساحة 640x360 في تخطيط الصفحة. سيتم تمديد الصورة لتناسب هذه المساحة، بغض النظر عمّا إذا كانت الأبعاد الحقيقية تتطابق معها.

عندما تم تقديم تصميم الويب السريع الاستجابة، بدأ المطوّرون في إغفال width وheight وبدأوا في استخدام CSS لتغيير حجم الصور بدلاً من ذلك:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

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

وهنا يأتي دور نسبة العرض إلى الارتفاع. نسبة العرض إلى الارتفاع في الصورة هي نسبة عرضها إلى ارتفاعها. من الشائع رؤية هذه النسبة معبّرًا عنها برقمين مفصولين بنقطتين (على سبيل المثال، 16:9 أو 4:3). بالنسبة إلى نسبة العرض إلى الارتفاع x:y، يكون عرض الصورة x وحدة وارتفاعها y وحدة.

وهذا يعني أنّه إذا عرفنا إحدى السمات، يمكن تحديد السمة الأخرى. بالنسبة إلى نسبة العرض إلى الارتفاع 16:9:

• إذا كان ارتفاع puppy.jpg يبلغ 360 بكسل، يكون العرض 360 × (16 / 9) = 640 بكسل
• إذا كان عرض puppy.jpg يبلغ 640 بكسل، يكون الارتفاع 640 × (9 / 16) = 360 بكسل

معرفة نسبة العرض إلى الارتفاع لصورة ما يتيح للمتصفّح احتساب المساحة الكافية وحجزها للارتفاع والمساحة المرتبطة به.

أفضل الممارسات الحديثة لضبط أبعاد الصور

بما أنّ المتصفّحات الحديثة تضبط نسبة العرض إلى الارتفاع التلقائية للصور استنادًا إلى سمتَي width وheight في الصورة، يمكنك منع التحركات المفاجئة في التصميم من خلال ضبط هاتين السمتين في الصورة وتضمين CSS السابق في ورقة الأنماط.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

ستضيف جميع المتصفحات بعد ذلك نسبة عرض إلى ارتفاع تلقائية استنادًا إلى سمتَي width وheight الحالية للعنصر.

يتم احتساب نسبة العرض إلى الارتفاع استنادًا إلى السمتَين width وheight قبل تحميل الصورة. ويوفّر هذه المعلومات في بداية عملية احتساب التنسيق. ما إن يتم تحديد عرض صورة معيّن (على سبيل المثال width: 100%)، يتم استخدام نسبة العرض إلى الارتفاع لاحتساب الارتفاع.

يتم احتساب قيمة aspect-ratio هذه من خلال المتصفّحات الرئيسية أثناء معالجة HTML، وليس باستخدام ورقة أنماط وكيل المستخدم التلقائية (راجِع هذه المشاركة للحصول على تفاصيل حول السبب)، لذا يتم عرض القيمة بشكل مختلف قليلاً. على سبيل المثال، يعرض Chrome هذه السمة على النحو التالي في قسم "الأنماط" ضمن لوحة "العنصر":

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

يتصرف Safari بشكل مشابه، حيث يستخدم مصدر نمط سمات HTML. لا يعرض Firefox هذه القيمة المحسوبة aspect-ratio على الإطلاق في لوحة أداة الفحص، لكنّه يستخدمها في التنسيق.

إنّ الجزء auto من الرمز السابق مهم، لأنّه يؤدي إلى تجاهل نسبة العرض إلى الارتفاع التلقائية بعد تنزيل الصورة. إذا كانت أبعاد الصورة مختلفة، سيؤدي ذلك إلى حدوث بعض تغيير التنسيق بعد تحميل الصورة، ولكن يضمن ذلك استخدام نسبة العرض إلى الارتفاع للصورة عند توفّرها، في حال كان رمز HTML غير صحيح. حتى إذا كانت نسبة العرض إلى الارتفاع الفعلية مختلفة عن النسبة التلقائية، سيظلّ ذلك يؤدي إلى تغيير في التنسيق أقل من الحجم التلقائي 0x0 لصورة لم يتم توفير أبعادها.

للحصول على شرح تفصيلي رائع حول نسبة العرض إلى الارتفاع مع المزيد من الأفكار حول الصور السريعة الاستجابة، يمكنك الاطّلاع على تحميل الصفحات بدون مشاكل في العرض باستخدام نسب العرض إلى الارتفاع للوسائط.

إذا كانت الصورة في حاوية، يمكنك استخدام CSS لتغيير حجم الصورة إلى عرض الحاوية. نضبط height: auto; لتجنُّب استخدام قيمة ثابتة لارتفاع الصورة.

img {
  height: auto;
  width: 100%;
}

ماذا عن الصور المتجاوبة؟

عند استخدام الصور المتجاوبة، تحدّد السمة srcset الصور التي تسمح للمتصفّح بالاختيار من بينها وحجم كل صورة. ولضمان إمكانية ضبط سمات العرض والارتفاع <img>، يجب أن تستخدم كل صورة نسبة العرض إلى الارتفاع نفسها.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

يمكن أن تتغير نسب العرض إلى الارتفاع للصور أيضًا حسب التوجيه الفني. على سبيل المثال، قد تريد تضمين لقطة مقتطعة من صورة لعرضها على مساحات عرض ضيقة، وعرض الصورة الكاملة على أجهزة الكمبيوتر:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

تتيح الآن متصفّحات Chrome وFirefox وSafari ضبط width وheight على عناصر <source> ضِمن عنصر <picture> معيّن:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

الإعلانات وعناصر التضمين والمحتوى الآخر الذي يتم تحميله لاحقًا

الصور ليست النوع الوحيد من المحتوى الذي يمكن أن يتسبّب في تغييرات التنسيق. يمكن أن تتسبّب الإعلانات وعناصر التضمين وإطارات iframe والمحتوى الآخر الذي يتم إدراجه بشكل ديناميكي في نقل المحتوى الذي يظهر بعدها إلى الأسفل، ما يؤدي إلى زيادة CLS.

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

تتيح لك التطبيقات المصغّرة القابلة للتضمين تضمين محتوى ويب قابل للنقل على صفحتك، مثل الفيديوهات من YouTube والخرائط من "خرائط Google" ومنشورات وسائل التواصل الاجتماعي. ومع ذلك، غالبًا ما تكون هذه التطبيقات المصغّرة غير مدركة لحجم محتواها قبل تحميله. نتيجةً لذلك، لا تحجز المنصات التي توفّر عمليات التضمين مساحة دائمًا لعناصر واجهة المستخدم، ما يؤدي إلى حدوث تغييرات في التنسيق عند تحميلها أخيرًا.

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

الاحتفاظ بمساحة للمحتوى الذي يتم تحميله لاحقًا

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

إحدى الطرق هي إضافة قاعدة min-height CSS لحجز مساحة أو استخدام خاصية aspect-ratio CSS بطريقة مشابهة للطريقة التي تستخدمها المتصفحات تلقائيًا للصور التي يتم توفير أبعادها، وذلك للمحتوى السريع الاستجابة، مثل الإعلانات مثلاً.

قد تحتاج إلى مراعاة الاختلافات الطفيفة في أحجام الإعلانات أو العناصر النائبة على مستوى أشكال الأجهزة باستخدام طلبات البحث عن الوسائط.

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

يمكنك بدلاً من ذلك ضبط الحجم الأولي على أصغر حجم سيتم استخدامه، وقبول مستوى معيّن من التغيير للمحتوى الأكبر. إنّ استخدام min-height، كما تم اقتراحه سابقًا، يسمح للعنصر الأصل بالتوسّع حسب الحاجة مع تقليل تأثير تغييرات التصميم، مقارنةً بالحجم التلقائي 0 بكسل لعنصر فارغ.

حاوِل تجنُّب تصغير المساحة المحجوزة من خلال عرض عنصر نائب إذا لم يتم عرض أي إعلان، مثلاً. يمكن أن تؤدي إزالة المساحة المخصّصة للعناصر إلى حدوث CLS بقدر ما يحدث عند إدراج المحتوى.

وضع المحتوى الذي يتم تحميله متأخرًا في أسفل إطار العرض

عادةً ما يتسبّب المحتوى الذي يتم إدراجه ديناميكيًا بالقرب من أعلى إطار العرض في حدوث تغييرات أكبر في التنسيق مقارنةً بالمحتوى الذي يتم إدراجه في أسفل إطار العرض. ومع ذلك، يؤدي إدراج المحتوى في أي مكان في إطار العرض إلى حدوث بعض التغيير. إذا لم تتمكّن من حجز مساحة للمحتوى الذي يتم إدراجه، ننصحك بوضعه في وقت لاحق على الصفحة للحدّ من تأثيره في CLS.

تجنَّب إدراج محتوى جديد بدون تفاعل من المستخدم

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

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

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

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

الصور المتحركة

قد تتطلّب التغييرات التي يتم إجراؤها على قيم سمات CSS أن يتفاعل المتصفّح مع هذه التغييرات. تؤدي بعض القيم، مثل box-shadow وbox-sizing، إلى إعادة التخطيط والرسم والتركيب. يؤدي تغيير السمتَين top وleft أيضًا إلى حدوث تغييرات في التصميم، حتى عندما يكون العنصر الذي يتم نقله في طبقة خاصة به. تجنَّب إنشاء رسوم متحركة باستخدام هذه السمات.

يمكن تغيير خصائص CSS الأخرى بدون بدء عمليات إعادة التنسيق. وتشمل هذه الحركات استخدام transform للترجمة أو تغيير الحجم أو التدوير أو التشويه.

لا يمكن أن تؤثّر الصور المتحركة المركّبة باستخدام translate في العناصر الأخرى، وبالتالي لا يتم احتسابها ضمن مقياس CLS. لا تؤدي الصور المتحركة غير المركّبة أيضًا إلى إعادة التخطيط. لمزيد من المعلومات عن خصائص CSS التي تؤدي إلى حدوث تغييرات في التنسيق، يمكنك الاطّلاع على الرسوم المتحركة عالية الأداء.

خطوط الويب

عادةً ما تتم معالجة تنزيل خطوط الويب وعرضها بإحدى الطريقتَين التاليتَين قبل تنزيل خط الويب:

• يتم استبدال الخط الاحتياطي بخط الويب، ما يؤدي إلى ظهور النص بخط مختلف (FOUT).
• يتم عرض النص "غير المرئي" باستخدام الخط الاحتياطي إلى أن يتوفّر خط ويب ويصبح النص مرئيًا (FOIT—flash of invisible text).

يمكن أن يؤدي كلا الأسلوبين إلى حدوث متغيّرات في التصميم. حتى إذا كان النص غير مرئي، سيتم تنسيقه باستخدام الخط الاحتياطي، لذا عند تحميل خط الويب، سيتم نقل مقطع النص والمحتوى المحيط به بالطريقة نفسها كما هو الحال مع الخط المرئي.

يمكن أن تساعدك الأدوات التالية في تقليل تغيير موضع النص:

• font-display: optional يمكن تجنُّب إعادة التنسيق لأنّ خط الويب لا يُستخدم إلا إذا كان متاحًا عند إجراء التنسيق الأوّلي.
• تأكَّد من استخدام الخط الاحتياطي المناسب. على سبيل المثال، سيضمن استخدام font-family: "Google Sans", sans-serif; استخدام sans-serif خط احتياطي للمتصفح أثناء تحميل "Google Sans". عدم تحديد خط احتياطي باستخدام font-family: "Google Sans" فقط يعني استخدام الخط التلقائي، وهو "Times" في Chrome، وهو خط ذو عوارض سفلية وعلوية، ما يجعله خيارًا أسوأ من الخط التلقائي sans-serif.
• يمكنك تقليل الاختلافات في الحجم بين الخط الاحتياطي وخط الويب باستخدام واجهات برمجة التطبيقات الجديدة size-adjust وascent-override وdescent-override وline-gap-override كما هو موضّح بالتفصيل في المشاركة تحسين الخطوط الاحتياطية.
• يمكن أن تقلّل Font Loading API الوقت المستغرَق للحصول على الخطوط الضرورية.
• حمِّل خطوط الويب المهمة في أقرب وقت ممكن باستخدام <link rel=preload>. سيكون للخط المحمَّل مسبقًا فرصة أكبر لتلبية متطلبات أول طلاء، وفي هذه الحالة لن يحدث أي تغيير في التنسيق.

يمكنك الاطّلاع على أفضل الممارسات المتعلّقة بالخطوط لمعرفة المزيد من أفضل الممارسات المتعلّقة بالخطوط.

تقليل CLS من خلال التأكّد من أنّ الصفحات مؤهَّلة للاستفادة من ميزة "التخزين المؤقت للصفحات"

من التقنيات الفعّالة جدًا للحفاظ على انخفاض نتائج CLS التأكّد من أنّ صفحات الويب مؤهَّلة للاستفادة من ذاكرة التخزين المؤقت للصفحات السابقة/التالية (bfcache).

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

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

تُعدّ عمليات التنقّل للخلف وللأمام شائعة على العديد من المواقع الإلكترونية. على سبيل المثال، الرجوع إلى صفحة محتويات أو صفحة فئة أو نتائج بحث

عندما طرحنا هذه الميزة في Chrome، لاحظنا تحسّنات ملحوظة في مقياس CLS.

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

الخاتمة

هناك عدد من الأساليب لتحديد وتحسين مقياس CLS كما هو موضّح بالتفصيل في وقت سابق من هذا الدليل. تتضمّن "مؤشرات أداء الويب الأساسية" حدودًا مسموحًا بها، لذا حتى إذا لم تتمكّن من إزالة CLS بالكامل، من المفترض أن يتيح لك استخدام بعض هذه الأساليب تقليل التأثير. نأمل أن يتيح لك ذلك البقاء ضمن هذه الحدود، ما يؤدي إلى تحسين تجربة مستخدمي موقعك الإلكتروني.