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

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

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

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

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

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

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

في ما يلي الأسباب الأكثر شيوعًا لانخفاض متغيّرات التصميم التراكمية (CLS):

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

فهم أسباب متغيّرات التصميم

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

متغيّرات التصميم التراكمية (CLS) في الأدوات المعملية مقارنةً بالمجال

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

CrUX هي مجموعة البيانات الرسمية لبرنامج "مؤشرات أداء الويب"، وبالتالي يتم قياس متغيّرات التصميم التراكمية (CLS) على مدار الصفحة بأكملها وليس فقط أثناء التحميل الأولي للصفحة التي تقيسها الأدوات الاختبارية عادةً.

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

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

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

تحديد مشاكل متغيّرات التصميم التراكمية (CLS)

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

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

تحديد مشاكل CLS بعد التحميل

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

يمكن استخدام إضافة Web Vitals في Chrome لمراقبة متغيّرات التصميم التراكمية (CLS) أثناء تفاعلك مع الصفحة، إما في شاشة عرض تنبيهية أو في وحدة التحكم، حيث يمكنك الحصول على مزيد من التفاصيل فوق العناصر التي تم تغييرها.

بدلاً من استخدام الإضافة، يمكنك تصفُّح صفحة الويب أثناء لصق تسجيل متغيّرات التصميم باستخدام أداة "مراقبة الأداء" في وحدة التحكّم.

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

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

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

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

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

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

الأسباب الشائعة لبطء استجابة الصفحة

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

الصور التي لا تتضمّن أبعادًا

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

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

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

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

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

عندما تم تقديم تصميم الويب سريع الاستجابة، بدأ المطوّرون في حذف 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 x ‏(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 - وميض النص غير المرئي).

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

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

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

اطّلِع على أفضل الممارسات المتعلّقة بالخطوط للاطّلاع على أفضل الممارسات الأخرى المتعلّقة بالخطوط.

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

من الأساليب الأكثر فعالية لإبقاء نتائج متغيّرات التصميم التراكمية (CLS) منخفضة هي التأكّد من أنّ صفحات الويب مؤهَّلة لاستخدام ميزة التخزين المؤقت للصفحات.

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

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

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

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

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

الخاتمة

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