تحدث متغيّرات التصميم عندما يتغيّر موضع عنصر مرئي على صفحتك أو حجمه، ما يؤثر في موضع المحتوى حولها. في بعض الأحيان يكون الغرض من التغيير، مثل توسيع حاوية نتيجة لإجراء مستخدم ما. ومع ذلك، يمكن أن تؤدي الطبيعة الديناميكية للإعلانات إلى تغييرات غير متوقّعة في التنسيق، ما يؤثر سلبًا في تجربة المستخدم ويمكن أن يتسبّب في حدوث مشاكل خطيرة في إمكانية الاستخدام.
يوضّح هذا الدليل كيفية قياس متغيّرات التصميم وتقليلها عند العمل باستخدام علامات "ناشر Google" (GPT).
كيفية تسبب الإعلانات في متغيّرات التصميم
عادةً ما يُطلب من المستخدمين إضافة محتوى إلى صفحتك بشكل غير متزامن وديناميكيًا أثناء تحميل الصفحة أو بعده. أثناء جلب الإعلانات، يستمر تحميل بقية الصفحة وقد يصبح المحتوى غير الإعلاني مرئيًا للمستخدم. إذا لم تحجز مساحة كافية لتحميل الإعلانات، يمكن أن يؤدي ذلك إلى استبدال المحتوى المرئي غير الإعلاني عندما تتم إضافتها في النهاية إلى الصفحة.
عند العمل باستخدام علامات "ناشر Google"، هناك بعض النقاط التي يمكن أن تحدث في مراحل النشاط الإعلاني فيها:
- عند الاتصال بـ "
display()" قد تتوسع الخانة أو يتم تصغيرها بناءً على طريقة إعدادها. - عند عرض محتوى الإعلان يمكن تغيير حجم الخانة في حال عرض إعلان غير مرن أو في حال عدم توفّر مساحة كافية. قد تتسع الخانة أيضًا أو يتم تصغيرها في هذه المرحلة، بناءً على كيفية تكوينها.
- بعد عرض محتوى الإعلان تم تصميم أنواع معينة من تصميمات الإعلانات للتوسع بعد ظهورها على الصفحة.
تجدر الإشارة إلى أنّه كلما كانت الشريحة الإعلانية أعلى داخل إطار العرض، زاد المحتوى الذي يُحتمل إزاحة المحتوى فيه. انتبه جيدًا للخانات الموجودة بالقرب من الجزء العلوي من إطار العرض الأولي (في الجزء المرئي من الصفحة). يمكن أن تتسبب هذه الخانات في حدوث قدر غير متناسب من متغيّرات التصميم لأنّه من المرجّح أن تكون مرئية عند تحميل المحتوى الإعلاني.
قياس متغيّرات التصميم
متغيّرات التصميم التراكمية (CLS) هي مقياس لـ مؤشرات أداء الويب الأساسية يمكنك استخدامه لتحديد تأثير تغيّرات التصميم على موقعك الإلكتروني في التطبيق وفي المجال.
في جلسة المعمل،
وتقيس أدوات المختبر متغيّرات التصميم التراكمية (CLS) بشكل اصطناعي. وهذا يعني أنّها لا تعتمد على تفاعل المستخدم الفعلي، ما يجعلها مناسبة تمامًا للاستخدام في عمليات الدمج المستمر والتطوير المحلي. ومع ذلك، تقيس هذه الأدوات عادةً الأداء أثناء تحميل الصفحة فقط وتكون محدودة في الشروط التي يمكن محاكاتها، لذلك قد تكون القيم التي تم الإبلاغ عنها أقل مما قد يجربه المستخدم الحقيقي.
Publisher Ads التدقيقs for Lighthouse هي أداة يمكن استخدامها لقياس متغيّرات التصميم التراكمية (CLS) التي يعود مصدرها على وجه التحديد إلى إعلانات GPT. لمعرفة التفاصيل، يُرجى الاطّلاع على مستندات التدقيق في تقليل متغيّرات التصميم المتعلّقة بالإعلانات.
يمكن أيضًا ضبط "أدوات مطوري البرامج في Chrome" لإبراز متغيّرات التصميم أثناء التنقّل في موقعك الإلكتروني. يمكن استخدام هذه البيانات لتحديد متغيّرات التصميم التي تحدث بالقرب من الخانات الإعلانية على صفحتك يدويًا.
في هذا المجال
تقيس أدوات الحقل متغيّرات التصميم التراكمية (CLS) التي يواجهها المستخدمون الفعليون أثناء تفاعلهم مع موقعك الإلكتروني. وتُعرف هذه العملية عادةً باسم مراقبة المستخدم الحقيقي (RUM). تتيح لك نماذج RUM رصد كيفية تأثر متغيّرات التصميم التراكمية (CLS) بالعوامل الواقعية، مثل إمكانات الجهاز وظروف الشبكة وتفاعل المستخدم وتخصيص الصفحة، والتي غالبًا ما يكون من الصعب أو المستحيل محاكاتها باستخدام الاختبارات الاصطناعية.
تقليل متغيّرات التصميم
إنّ الطريقة الوحيدة المضمونة لتجنّب متغيّرات التصميم هي حجز قدر كافٍ من المساحة لشريحة إعلانية معيّنة باستخدام CSS. إنّ ضبط ارتفاع وعرض ثابت
مباشرةً على الشريحة الإعلانية div هو الطريقة الأكثر فعالية لإجراء ذلك. مع ذلك، في حين أنّ هذا الإجراء مناسب للخانات الإعلانية الثابتة ذات الحجم الثابت، قد تتطلب السيناريوهات الأكثر تعقيدًا منهجًا أكثر دقة. تم شرح بعض السيناريوهات الشائعة
في الأقسام التالية.
شرائح إعلانية متعددة الأحجام
بالنسبة إلى الخانات الإعلانية التي تقبل أحجامًا متعدّدة، ننصح باتّباع أحد الأساليب التالية:
- حجز مساحة لأكبر حجم تم إعداده للعرض.
- حجز مساحة لأصغر حجم تم إعداده للعرض.
- احجز مساحة للحجم الذي يُرجّح أن يتم عرضه، ويتم تحديدها من خلال فحص بيانات التعبئة السابقة من تقارير "مدير إعلانات Google".
اختيار النهج الصحيح
إن حجز المساحة لأكبر حجم تم تكوينه للعرض هو الطريقة الأكثر فعالية للتخلص من متغيّرات التصميم. مع ذلك، يمكن أن تؤدي هذه الطريقة إلى ترك مساحة فارغة إضافية حول الإعلان، في حال عرض تصميم إعلان أصغر من الحجم المحجوز. سيؤدي تقليص الخانة الإعلانية لتتناسب مع حجم تصميم الإعلان المعروض إلى حدوث تغيير إضافي في التصميم، لذا ننصح بتجنب ذلك. بدلاً من ذلك، يمكن استخدام التوسيط العمودي والأفقي لتقليل التأثير المرئي للمساحة الفارغة الزائدة.
من ناحية أخرى، يؤدي حجز مساحة لأصغر حجم تم إعداده للعرض إلى تجنب المساحة الفارغة الزائدة حول إعلانك. ويمكن أن يكون هذا خيارًا جيدًا إذا كانت خانتك الإعلانية عادةً ما تمتلئ بتصاميم إعلانات أصغر، أو في الحالات التي تكون فيها جميع الأحجام التي تتوافق معها الخانة الإعلانية متشابهة. ومع ذلك، ينتج عن هذه الطريقة تغيُّر في التنسيق في حال عرض تصميم إعلان أكبر من الحجم المحجوز (على الرغم من أنّ هذه التحولات تكون أصغر عمومًا عند مقارنتها بعدم حجز مساحة على الإطلاق).
لتحقيق توازن بين المساحة الفارغة ومتغيّرات التصميم، يمكنك حجز
مقدار "متوسط" من المساحة للخانات الإعلانية. على سبيل المثال، يؤدي حجز 100px عموديًا إلى تحميل مساحة فارغة صغيرة عند عرض تصميم إعلان 320x50، ولكنّه يقلل من نتيجة متغيّرات التصميم التراكمية (CLS) مقارنةً بعدم حجز أي مساحة على الإطلاق. وستحتاج إلى تجربة أحجام مختلفة لتحقيق أفضل توازن لموقعك الإلكتروني.
عند تحديد مقدار المساحة التي سيتم حجزها لشريحة معيّنة، يمكن أن تساعدك دراسة بيانات التعبئة السابقة من تقارير "مدير إعلانات Google" في اتخاذ قرار مدروس. يمكن توضيح ذلك بشكل أفضل من خلال استكشاف بعض الأمثلة.
المثال الأول
| حجم تصميم الإعلان (تم تسليمه) | مرات الظهور في خادم الإعلانات (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
في هذه الحالة، يمكن أن يؤدي حجز 250px عموديًا إلى تقليل متغيّرات التصميم التراكمية (CLS) بشكل كبير لأنّ معظم تصميمات الإعلانات المعروضة هي 300x250.
المثال الثاني
| حجم تصميم الإعلان (تم تسليمه) | مرات الظهور في خادم الإعلانات (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
في هذه الحالة، يبلغ ارتفاع معظم الإعلانات 90px، لذا من المفترض أن يؤدي حجز 90px عموديًا إلى تجنُّب متغيّرات التصميم في معظم الأوقات.
كيفية حجز مساحة
ننصح بمعالجة هذه المشكلة من خلال تحديد حجم شريحتك الإعلانية من خلال سمتَي CSS min-height وmin-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
يتيح لك استخدام سمتَي "min-height" و"min-width" (الحدّ الأدنى للعرض) حجز حد أدنى من المساحة لشريحتك الإعلانية مع السماح للمتصفّح في الوقت نفسه بزيادة حجم الحاوية حسب الضرورة. يضمن ذلك عدم اقتطاع أي محتوى في الحدث الذي يتم فيه عرض تصميم إعلان أكبر.
يمكنك الجمع بين هذا الأسلوب واستعلامات وسائط CSS لتحديد حدود دنيا مختلفة لأحجام الشاشات المختلفة:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
يجب تجنُّب حجز مساحة باستخدام JavaScript، لأنّ ذلك قد يؤدي إلى حدوث تغيير في التصميم أثناء تحميل النص البرمجي. يؤدي حجز المساحة باستخدام CSS إلى تجنب هذه المخاطر.
الشرائح الإعلانية المرنة
لا تحدد الشرائح الإعلانية المرنة مجموعة ثابتة من الأحجام التي تدعمها. بدلاً من ذلك، يتم تغيير حجم هذه الخانات تلقائيًا لتلائم محتوى تصميم الإعلان المعروض لها، ما يسمح لها بدعم تصميمات إعلانات ذات حجم غير محدَّد. ونتيجةً لذلك، لا يمكن حجز مساحة لهذه الخانات قبل طلب محتوى الإعلان، ودائمًا ما تتسبب الإعلانات ذات الحجم المرن في متغيّرات التصميم.
للحدّ من تأثيرات متغيّرات التصميم عند التعامل مع الخانات الإعلانية السلسة، نقترح ما يلي:
- لا تستخدم سوى الحجم
fluidمع الخانات الموجودة في الجزء السفلي غير المرئي من الصفحة. - ننصحك باسترجاع خانات السوائل في أقرب وقت ممكن لتقليل فرصة أن يمرّر المستخدم هذه الخانات لعرضها قبل تغيير حجم الخانة.
تصغير الخانات الإعلانية وتوسيعها
تسمح لك طريقة collapseEmptyDivs() بتصغير علامات div للشرائح الإعلانية بحيث لا تشغل مساحة على الصفحة في حال عدم وجود محتوى إعلاني لعرضه. ومع ذلك، يجب استخدام هذه الميزة بحذر لأنها قد
تؤدي إلى حدوث تغييرات غير مقصودة في التخطيط. كما هو موضّح في
القسم السابق، يمكن أن تؤدي تصغير الخانات الإعلانية وتوسيعها إلى حدوث تغيّرات في التصميم في مرحلتين مختلفتين من دورة حياة الإعلان.
إذا كنت بحاجة إلى الاستفادة من هذه الميزة، يمكنك تقليل تأثير متغيّرات التصميم باستخدام بيانات التعبئة السابقة من تقارير "مدير إعلانات Google" لتنفيذ أفضل الممارسات التالية:
- يجب أن تبدأ الشرائح التي يُرجح ملئها دائمًا بالحالة موسَّعة.
- يجب أن تبدأ دائمًا الشرائح التي لا يُرجح تعبئتها بتصغيرها.
للحصول على مثال لتنفيذ هذا الإجراء، اطّلِع على نموذج تصغير الشرائح الإعلانية الفارغة.