كيف ساهم الالتزام بـ "مؤشرات أداء الويب الأساسية" في زيادة أرباح الإعلانات لدى شركة Netzwellt بنسبة %18

كما شهدت إعادة إطلاق الموقع الإلكتروني إمكانية عرض الإعلانات لأكثر من 75٪، وانخفضت معدلات الارتداد بنسبة 50٪، ومشاهدات الصفحات بنسبة 27٪.

Martin Schierle

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

التحدي

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

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

تحسين موقع إلكتروني إخباري وفقًا لمؤشرات أداء الويب الأساسية

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

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

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

يمكن تقسيم المشكلة إلى اثنين: إعلان في الجزء المرئي من الصفحة والجزء السفلي غير المرئي من الصفحة.

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

ساعدت البيانات التاريخية واختبارات أ/ب شركة Netzwellt في العثور على الحجم المناسب والموضع المناسب لمختلف الأجهزة وأحجام الشاشات، كما ساعدت أيضًا قواعد وسائط CSS المستخدمة في حجز المساحة.

توفر الإعلانات في الجزء السفلي غير المرئي من الصفحة مجالاً للتحسينات الكبيرة:

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

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

لإجراء المزيد من التحسينات، استخدمت Netzuelt Intersection Monitorer وNetwork Information API للتحكُّم في مواضع الإعلانات وتقليل متغيّرات التصميم. يتمّ استخدام مواضع الإعلانات المختلفة واستراتيجيات التحميل الكسول استنادًا إلى موضع الانتقال وجودة الاتصال بالشبكة، ويمكن أن تتغيّر الإعلانات من أحجام متعدّدة إلى أحجام ثابتة. والهدف من الخوارزمية دائمًا هو زيادة إمكانية عرض الإعلانات إلى أقصى حدّ مع تقليل متغيّرات التصميم. تستخدم المتصفّحات التي لا تتيح واجهة برمجة التطبيقات NetworkInfo قيمة خادم وكيل استنادًا إلى مجموعة من نوع الشبكة المستمدة من الجهاز وعنوان IP. تعمل استراتيجية التحميل التكيُّفي هذه على تقليل متغيّرات التصميم التراكمية (CLS) للمستخدمين الذين لديهم اتصالات إنترنت بطيئة.

تحسين مقياس FID

قد يبدو "مهلة الاستجابة لأوّل إدخال" مشكلةً لناشري الأخبار، لأنّ الإعلانات تصاحب عادةً العديد من مكتبات JavaScript الإضافية. ويبدو أنّ هناك تأثيرًا سلبيًا عند البحث عن بيانات معملية مثل Lighthouse. ومع ذلك، بالنظر إلى البيانات الميدانية في "تقويم الويب لعام 2020"، يتبيّن أنّ العديد من المواقع الإلكترونية لديها استجابة سريعة بما يكفي. ويرجع جزء من ذلك إلى تأخر تحميل JavaScript للإعلان (بعد الإدخال الأول)، أو التخزين المؤقت بشكل جيد (على سبيل المثال، التعامل مع التخزين المؤقت لرموز الإصدار 8) أو التحسين الجيد من قِبل مورّدي الإعلانات. وتحرص أدوات تتبُّع إمكانية عرض المورّدين على تجنُّب المهام التي تستغرق وقتًا طويلاً، لذلك حتى عندما يكون مجموع وقت التشغيل طويلاً، لن يتأثر إجمالي وقت الحظر (TBT) ومهلة الاستجابة الأولى (FID). على الرغم من أنّ مقياس FID لم يشكّل مشكلة كبيرة بالنسبة إلى شركة Netzwellt، إلا أنّه كان لا يزال هناك بعض التحسينات التي يجب إجراؤها:

• تقليل نصوص الإعلانات ومقدّمي الخدمات، مع التركيز على حزمة واحدة إن أمكن
• تحميل جميع النصوص البرمجية من خلال التأجيل أو المزامنة
• استخدام حزمة الويب أو تقنيات مماثلة لاستخراج الأشجار وإلغاء التجميع
• استخدام قواعد CSS بسيطة مثل BEM.
• تجنَّب المهام الطويلة الأمد واستخدام نمط غير نشِط لفترة طويلة.
• استخدام RequestAnimationFrame في أي مكان يتأثر فيه التنسيق.

تحسين سرعة LCP

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

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

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

وبالإضافة إلى هذه التحسينات، اتبعت شركة Netzwellt أفضل الممارسات الأخرى:

• فصل لغة CSS لمسار العرض الحرج ووضعه في العنوان.
• تم تحميل أهم الخطوط والنصوص والصور مسبقًا.
• تم تجنُّب تحميل الصور ذات التحميل الكسول في الجزء المرئي من الصفحة.
• تاريخ الاستخدام: font-display="swap".

الموافقة على "اللائحة العامة لحماية البيانات" و"مؤشرات أداء الويب الأساسية"

غالبًا ما تؤثر مربّعات حوار الموافقة سلبًا في "مؤشرات أداء الويب الأساسية". كما هو الحال مع الإعلانات، هناك طريقتان يمكن أن يؤثر من خلال مربّع حوار الموافقة فيهما في "مؤشرات أداء الويب الأساسية":

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

تعمل Netzwellt مع جهة خارجية للحصول على موافقة، والتي نفذت أيضًا تحسينات. حرصت شركة Netzwellt أولاً على تجنب المخاطر المباشرة:

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

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

نماذج الاشتراك في الأخبار و"مؤشرات أداء الويب الأساسية"

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

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

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

نتائج التحسين

وكانت نتائج تحسينات Netzwellt تعبر عن نفسها. ولا مثيل لنتيجة "إحصاءات PageSpeed" في ناشري الأخبار حول العالم:

أدت التحسينات إلى تحسين تجربة الصفحة، ولكن تم إجراؤها مع وضع النشاط التجاري في الاعتبار، بالإضافة إلى تحسين تجربة الإعلانات وإمكانية عرض الإعلانات والأرباح. بعد إعادة إطلاق الصفحة المحسَّنة، شهدت شركة Netzwellt زيادة في التكلفة لكل ألف ظهور من 20% إلى 30%، وزيادة إمكانية عرض الإعلانات بنسبة تفوق %75. مع ذلك، تفترض شركة Netzwellt أن زيادة الأرباح الإجمالية تكون أعلى. زاد عدد الزيارات منذ إعادة التشغيل، وربما كان ذلك مدفوعًا بارتفاع تفاعل المستخدمين وانخفاض معدلات الارتداد بسبب تحسين تجربة المستخدم. ويصعب قياس هذه التأثيرات وتحديدها في ما يخصّ إعادة الإطلاق، في ظل تقلّبات عدد الزيارات بشكلٍ طبيعي، فضلاً عن تأثيرات من الوباء العالمي. هذه التأثيرات غير المباشرة هي أحد الأسباب التي تجعل Netzwellt تنظر دائمًا إلى جميع الأرقام عند مراجعة موقعها، وليس فقط التكلفة لكل ألف ظهور التي قد تكون مضللة. تقدّم مؤشرات أداء الويب الأساسية ومقاييس تجربة المستخدم الصورة الحقيقية، بالإضافة إلى جميع المقاييس المرتبطة بالإعلانات.

التطلّع إلى المستقبل

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

لذلك، لا يتوقّف Netzwellt عن "مؤشرات أداء الويب الأساسية" فحسب، بل يبذل جهدًا إضافيًا من خلال تنفيذ العديد من إمكانات الويب الحديثة مثل تطبيقات الويب التقدّمية (PWA) والمحتوى بلا إنترنت والوضع الداكن وواجهة برمجة تطبيقات Web Share API وأنشطة الويب الموثوق بها باستخدام واجهة برمجة التطبيقات Digital Goods API الجديدة.