قصة نجاح "منصة إدارة الموافقة" من PubTech ' في تقليل INP على مواقع عملائها بنسبة تصل إلى 64% وتحسين إمكانية عرض الإعلانات بنسبة تصل إلى 1.5%

كيفية خفض منصّة إدارة الموافقة (CMP) من PubConsent لمعدّل INP لدى عملائها بنسبة تصل إلى% 64 باستخدام استراتيجية تحقيق الربح التي تستخدِم واجهات برمجة تطبيقات "جدولة المهام" للمتصفّح لحلّ مشاكل الاستجابة التي تم تحديدها باستخدام "أدوات مطوّري برامج Chrome"

Marco Prontera
Marco Prontera
Gilberto Cocchi
Gilberto Cocchi

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

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

من خلال استخدام مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)، تمكّنت شركة PubTech من اكتشاف مشاكل في استجابة منصّة إدارة الموافقة. في هذه الدراسة الحالة، توضّح شركة PubTech كيفية حلّ المشاكل المتعلّقة بالاستجابة في منصّة إدارة الموافقة PubConsent، وكيفية تحسين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" قبل أن يصبح أحد مؤشرات Core Web Vitals في آذار (مارس) 2024، ما يُظهر التزامًا ثابتًا بتقديم أفضل أداء ممكن في منتج إدارة الموافقة.

لماذا تهتم PubTech بالأداء؟

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

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

نظرًا لأهمية الوظائف التي يوفّرها منصّة إدارة الموافقة والتأثير الذي يمكن أن تحدثه في الأداء، وضعت PubTech الأهداف التالية:

  1. الحدّ من تأثير منتج منصّة إدارة الموافقة من الناشر على INP
  2. تقليل المهام الطويلة التي يمكن أن يُنسَب سببها إلى منتج منصّة إدارة الموافقة
  3. قلِّل إجمالي وقت الحظر (TBT)، الذي يمكن أن يؤثر سلبًا في مقياس INP للصفحة.

كيفية قياس INP

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

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

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

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

لتحسين INP، تمّ اعتماد استراتيجيات مختلفة لتحقيق الأرباح في منصّة إدارة الموافقة PubConsent.

إنجاز المهام ذات الأولوية العالية

تم تصميم طريقة yieldToMainUiBlocking الموضّحة في مقتطف الرمز البرمجي التالي لتحسين مهام JavaScript ذات الأولوية العالية من خلال عرض scheduler.yield إذا كان متاحًا، ولكن الرجوع إلى postTask بأولوية user-blocking (عالية) إذا كان postTask متاحًا، ثم الرجوع إلى أيّ عنصر آخر.

تم تجنُّب setTimeout هنا لأنّ طريقة yieldToMainUiBlocking مصمّمة للتعامل مع عمليات إعدادات منصّة إدارة الموافقة الداخلية والعمل ذي الأولوية العالية الذي يجب أن يحتفظ بهذه الأولوية أثناء تحقيق النتائج. يعني ذلك أنّ المتصفّحات التي تُنفِّذ واجهات برمجة تطبيقات تحديد الموعد هذه فقط هي التي تستفيد من التحسينات الموضّحة بالتفصيل في هذه الدراسة. ولا تتوفّر هذه الواجهات حاليًا إلا في المتصفّحات المستندة إلى Chromium. ومع ذلك، تم اعتبار هذا النهج تحسينًا تدريجيًا مقبولًا لهذه المهام ذات الأولوية العالية.

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

العائد من المهام المتوسطة والمهام التي تعمل في الخلفية

تُستخدَم طريقة yieldToMainBackground الموضّحة في مقتطف الرمز البرمجي التالي لتقسيم المهام الطويلة التي لها الأولوية user-visible (متوسطة) أو background. ينفِّذ المنطق scheduler.yield() إذا كان متاحًا، ولكنّه يختلف عن طريق استخدام postTask بأولوية متوسطة، ثم الرجوع أخيرًا إلى setTimeout على المتصفّحات غير المستندة إلى Chromium.

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};
مسار يوضّح كيفية تحسين المهمة الطويلة التي منعت واجهة المستخدم من التحديث بعد أن نقر المستخدم على الزر "قبول الكل" في منصّة إدارة الموافقة PubConsent CMP يتم الآن تنفيذ الخطوات الخمس كلما أمكن ذلك، ما يتيح لواجهة المستخدم تعديل العرض بشكل أسرع.
توضيح مرئي لكيفية مساعدة yieldToMainBackground المتصفّح في عرض اللوحة التالية (إغلاق واجهة مستخدِم منصّة إدارة الموافقة في هذه الحالة) في وقت أقرب.

كيف خفضت شركة PubTech وقت عرض الإعلانات بشكلٍ أكبر من خلال تحسين تصميم العرض

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

لقطة شاشة للوحة "الأداء" في Chrome DevTools، تعرِض قسمًا من التتبُّع يتضمّن تسلسل استدعاءات النشاط لإغلاق مربّع حوار واجهة مستخدِم في منصّة إدارة الموافقة PubConsent CMP تؤدي مهمة إغلاق مربّع حوار واجهة المستخدم نفسها إلى إزالة عقد DOM التي تزيد من تأخّر عرض التفاعل.

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

لقطة شاشة للوحة "الأداء" في "أدوات مطوّري البرامج في Chrome"، تعرض التتبّع نفسه كما في السابق، ولكن محسّنًا عند إغلاق مربّع حوار منصّة إدارة الموافقة من PubConsent، يكون الإجراء الأوّلي هو إخفاءه باستخدام قاعدة CSS display: none. بعد ذلك، عندما يكون المتصفّح غير نشط لاحقًا، تتم إزالة عقدة DOM.
لقطة شاشة من "أدوات مطوّري البرامج" تُبرز تحسين INP من خلال نقل مهمة إزالة DOM

كيفية خفض PubTech بشكلٍ أكبر لنسبة INP من خلال تحسين مكتبة "إطار الشفافية والموافقة" الصادر عن مكتب IAB

بعد حلّ معظم مشاكل استجابة منصّة إدارة الموافقة بنجاح، تم تحديد فرص إضافية للتحسين في إحدى التبعيات الرئيسية لها: مكتبة إطار الشفافية والموافقة الصادر عن مكتب IAB‏ (TCF).

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

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

وقد أدّى التحسين الأول من هذه التحسينات إلى تقليل الوقت الذي تقضيه منصّة إدارة الموافقة على كلّ طلب استدعاء تابع لجهة خارجية يتم ربطه بمكتبة إطار الشفافية والموافقة الصادر عن Interactive Advertising Bureau. قلّل التحسين الثاني من مدة المعالجة التي يتحملها المكوّن "إنشاء سلاسل". في الواقع، سمح هذا التحسين بخفض ما يصل إلى% 60 من عمليات التكرار التي تم تنفيذها في كل مرة يُعرب فيها المستخدم عن موافقته.

النتائج

بعد تطبيق الاستراتيجيات التي حقّقت نتائج جيدة في السابق وتحسينات تنسيق العرض الجديدة، تحسّنت نسبة INP في منصّة إدارة الموافقة بنسبة تصل إلى%65. نتيجةً لذلك، تحسّنت سرعة استجابة تجربة المستخدم في منصّة إدارة الموافقة PubConsent CMP بشكلٍ كبير، وبالنسبة إلى بعض الإعلانات، تحسّنت إمكانية المشاهدة بنسبة% 1.5 من خلال تحسين وقت طلب الإعلانات.

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

تحسّن عدد مصادر البيانات التي تجتاز اختبار INP عند استخدام منصّة PubConsent لإدارة الموافقة بنسبة تزيد عن %400، من% 13 إلى% 55 على الأجهزة الجوّالة. بالنسبة إلى بعض العملاء، انخفضت مدة عرض الصفحة (INP) بأكثر من النصف، من 470 ملي ثانية إلى 230 ملي ثانية، وذلك بسبب تحسينات حِزم تطوير البرامج (SDK) في PubTech التي تم إجراؤها.

لقطة شاشة لنسب اجتياز اختبار INP للمحتوى الأصلي للمواقع الإلكترونية التي تستخدم منصّة إدارة الموافقة PubTech CMP على أجهزة الكمبيوتر المكتبي، تحسّنت معدّلات النجاح إلى% 99.12 من %84 تقريبًا. على الأجهزة الجوّالة، تحسّنت معدّلات النجاح إلى% 55.46 من %22 تقريبًا.
معدّل اجتياز اختبار INP للموقع الإلكتروني المصدر للمواقع الإلكترونية التي تستخدم منصّة إدارة الموافقة من PubTech وفقًا لما ورد في أرشيف HTTP وتقرير تجربة مستخدِم Chrome (CrUX).
لقطة شاشة لواجهة تحكم تعرِض INP من بيانات RUM في الشريحة المئوية الخامسة والسبعين من تموز (يوليو) أو آب (أغسطس) 2023، كان مقياس INP أقل بقليل من 500 ملي ثانية، ولكن بحلول منتصف شباط (فبراير) 2024، كان مقياس INP أقل بقليل من 200 ملي ثانية، ما جعله ضمن الحدّ الأدنى لمستوى "جيد".
مؤشر تحسين بيانات INP للعملاء على الأجهزة الجوّالة في PubConsent، والذي يرتبط بتغييرات حزمة SDK الموضّحة في هذه الدراسة الحالة

الخاتمة

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

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

نشكر بشكل خاص "لوكا كوبولا"، رئيس التكنولوجيا في PubTech، على دعمه لهذا العمل المبتكِر، ونشكر "جيريمي واغنر" و"ميكال مونكي" و"ريك فيسكومي" من Google.