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

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

Addy Osmani

Barry Pollard

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

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

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

إنّ قيم متغيّرات التصميم التراكمية (CLS) الجيدة هي 0.1 أو أقل. القيم السيئة أكبر من 0.25.

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

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

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

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

ملاحظة: لإلقاء نظرة عامة مرئية على بعض المحتوى المقدَّم في هذا الدليل، يمكنك مشاهدة فيديو "أدوات تحسين الأداء من أجل مؤشرات أداء الويب الأساسية" من مؤتمر Google I/O لعام 2020:

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

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

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

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

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

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

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

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

في هذا المثال، تقيس CrUX قيمة CLS أكبر بكثير من Lighthouse.

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

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

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

بيانات تشخيص متغيّرات التصميم التراكمية (CLS) التفصيلية في Lighthouse

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

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

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

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

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

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

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

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

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

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

قياس عناصر متغيّرات التصميم التراكمية (CLS) في الحقل

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

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

ملاحظة: إنّ حلول RUM التي تقيس متغيّرات التصميم التراكمية (CLS) في الحقل، بما في ذلك مكتبة web-vitals، قد تُظهر فروقًا في بيانات CrUX كما هو موضّح في المشاركة التالية: لماذا تختلف بيانات CrUX عن بيانات RUM؟. على وجه التحديد، لا يمكن قياس متغيّرات التصميم التراكمية التي تحدث في إطارات iframe من خلال واجهات برمجة تطبيقات الويب، ولكنها مرئية للمستخدم، وبالتالي يتم تضمينها في CrUX. لذا، على الرغم من أنّ البيانات الميدانية قد تكون مهمة لتحديد مشاكل متغيّرات التصميم التراكمية (CLS)، عليك الانتباه إلى أنّها قد تكون غير كاملة في سيناريوهات معيّنة.

الأسباب الشائعة لمتغيّرات التصميم التراكمية (CLS)

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

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

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

صور بدون تحديد عرض وارتفاع.

صور تم تحديد عرضها وارتفاعها

تأثير أداة Lighthouse 6.0 عند ضبط أبعاد الصورة على متغيّرات التصميم التراكمية (CLS)

سجلّ السمتَين 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 × (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 المحسوبة على الإطلاق في لوحة Inspector، ولكنه يستخدمها للتنسيق.

ويُعدّ الجزء 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).
• حمِّل المحتوى بسلاسة خارج الشاشة مع عرض إشعار للمستخدم بأنه متاح (على سبيل المثال، باستخدام زر "التمرير لأعلى").

أمثلة على تحميل المحتوى الديناميكي بدون حدوث متغيّرات غير متوقعة في التصميم على اليمين: يتم تحميل محتوى خلاصة البث المباشر على Twitter. على اليمين: "Load more" (تحميل المزيد) مثال على موقع Chloé الإلكتروني يمكنك الاطّلاع على الآلية التي يتّبعها فريق YNAP في تحسين أداء متغيّرات التصميم التراكمية (CLS) عند تحميل المزيد من المحتوى.

ملاحظة: إذا كان من المحتمل أن يستغرق المحتوى أكثر من 500 مللي ثانية، على سبيل المثال، يتطلب استرجاع البيانات من الشبكة، يمكنك حجز المساحة المتوقّعة ضمن هذا الإطار الزمني البالغ 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) بالكامل، من المفترض أن يتيح لك استخدام بعض هذه الأساليب تقليل تأثيرها. ونأمل أن يسمح لك ذلك بالبقاء ضمن هذه الحدود لتقديم تجربة أفضل لمستخدمي موقعك الإلكتروني.