كيف خفضت شركة QuintoAndar مؤشر INP بنسبة %80، ما أدّى إلى زيادة الإحالات الناجحة بنسبة %36

Mari Viana

Daniel Ericeira

Luciano Holanda

تاريخ النشر: 22 كانون الثاني (يناير) 2025

حسّنت شركة QuintoAndar أداء موقعها الإلكتروني بشكل كبير من خلال خفض مدى استجابة الصفحة لتفاعلات المستخدم (INP) بنسبة %80، ما أدّى إلى زيادة في الإحالات الناجحة بنسبة% 36 مقارنةً بالعام السابق. وإدراكًا منا لأهمية المواقع الإلكترونية السريعة الاستجابة لتعزيز تفاعل المستخدمين، نفّذنا "رمزًا أصفر" لمنح الأولوية للأداء في جميع الفِرق.

باستخدام أدوات مثل مراقبة المستخدِمين الفعليين (RUM) وأساليب مثل async/await لتحسين المهام الطويلة وعمليات النقل في React، تمكّنت شركة QuintoAndar من تقليل أوقات التفاعل وتحسين تجربة المستخدِم. أدّت التغييرات، بما في ذلك إزالة وحدات البكسل التابعة لجهات خارجية وتحسينات العرض، إلى تحسين مقاييس الأداء، حيث ارتفعت النسبة من% 42 إلى% 78 من الصفحات التي تستوفي الآن الحدّ الأدنى "الجيد" لمقياس INP‏، وهو 200 ملي ثانية أو أقل، وأصبحت نسبة% 6.9 فقط من الصفحات تقدّم تجربة سيئة مقارنةً بنسبة% 32 عند بدء هذه العملية.

المشكلة

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

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

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

نعرض هنا قصة QuintoAndar التي تمكّنت من تقليل معدّل إيقاف الصفحة بنسبة%80، ما أدّى إلى زيادة كبيرة في الإحالات الناجحة وتحسينات في تجربة المستخدِم. في دراسة الحالة هذه، سيتم استكشاف الاستراتيجيات التي تم تنفيذها والتحديات التي تم مواجهتها والنتائج التي تم تحقيقها.

الرمز البرتقالي: منح الأولوية لأداء الويب

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

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

في QuintoAndar، كان "الرمز الأصفر" بمثابة نظام تنبيه داخلي مصمّم لإعطاء الأولوية لتحسينات أداء الويب داخل المؤسسة. عند إعلان "الرمز الأصفر"، تم اتخاذ إجراء فوري ومنسق من فِرق مختلفة داخل الشركة لمعالجة المشاكل المتعلّقة بالأداء وحلّها.

كيف حدّدت شركة QuintoAndar الفرص الرئيسية وطبّقت التحسينات

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

ومع ذلك، يتطلّب تحسين هذا المقياس إجراء تحليل معمّق للتفاصيل. بالنسبة إلى QuintoAndar، كانت الخطوة الأولى هي تحديد المراحل والعناصر في تجربة المستخدم التي كانت مسؤولة عن بطء التفاعلات. ويمكن إجراء ذلك باستخدام تقنيات مراقبة المستخدِمين الفعليين (RUM) التي تتيح تتبُّع مفصّل للتفاعلات البطيئة. ويشمل ذلك تقسيم مقياس INP إلى أجزاء فرعية، مثل وقت استجابة الإدخال ووقت المعالجة ووقت استجابة العرض، بالإضافة إلى تحليل اللقطات الطويلة للحركة (LoAF).

من خلال هذه العملية، كان من الممكن تحديد، على سبيل المثال، أنّ عناصر معيّنة من تجربة البحث عن الفندق كانت تتسبب في وقت تفاعل يبلغ 4 ثوانٍ في الشريحة المئوية الـ 75 (تؤثّر في% 25 من المستخدمين). من خلال تحسين المهام الطويلة، تم تحقيق تحسينات كبيرة في العديد من التفاعلات البطيئة التي تؤثّر في INP. تمّ ذلك من خلال استخدام async/await لإنشاء نقاط العائد في رمز JavaScript الخاص بـ QuintoAndar:

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

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

async function handleFilterClick () {
  showLoadingSpinner();
  await yieldToMain(); // Yield point
  await loadFilterData();
  showModal();
}

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

هناك أسلوب آخر شائع الاستخدام، وهو أساسي لأولئك الذين يبنون التطبيقات باستخدام React، وهو استخدام الانتقالات. بما أنّ React تتيح الآن الانتقالات، تمكّنت شركة QuintoAndar من استخدام useTransition hook لتعديل حالة التطبيق بدون حظر واجهة المستخدم.

import React, { useState, useTransition } from 'react';

function App() {
    const [isPending, startTransition] = useTransition();
    const [value, setValue] = useState('');

    const onInputChange = event => {
      setValue(event.target.value) // high-priority

      startTransition(() => {
          // Time-consuming task—for example, filter and update the list...
      });
    }

    return (
      <div className="App">
        <input
          value={value}
          onChange={onInputChange}
          placeholder='Start typing...'
        />
      </div>
    );
}

export default App;

بالإضافة إلى الأساليب المذكورة، نفّذت شركة QuintoAndar تحسينات أخرى، مثل استخدام الترميز وإزالة الالتباس وعناصر التحكّم في الإيقاف وتعليق، ما أدّى إلى تحسينات في INP.

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

useEffect(() => {
  const handler = setTimeout(() => {
    setDebouncedValue(value);
  }, 300); // Adjust debounce delay as needed

  return () => clearTimeout(handler);
}, [value]);

بالإضافة إلى ذلك، سمح استخدام Total Blocking Time (TBT) كعامل بديل لمقياس INP لشركة QuintoAndar بتقدير تأثير التغييرات الهيكلية الكبيرة التي تم إجراؤها، مثل:

• إزالة وحدات البكسل التابعة لجهات خارجية من العميل
• إزالة CSS-in-JS
• تحسينات العرض

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

إدارة أداء الويب لمنع حدوث تراجعات

لا يكفي تحديد أولويات مشاكل الأداء وحلّها إذا تعذّر منع حدوث تراجعات. عندما واجهت شركة QuintoAndar تراجعًا في الأداء في الماضي، أدركت أهمية إنشاء آلية إدارة فعّالة لمنع تراجع جهود تحسين الأداء.

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

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

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

أخيرًا، لمنع مشاكل INP من الوصول إلى مرحلة الإنتاج، نفّذت شركة QuintoAndar نظام إصدار تجريبي يقدّم إصدارًا جديدًا للمستخدمين على مراحل (على سبيل المثال، بشكل تدريجي من %1 و%10 و%65 وأخيرًا إلى %100). في كل مرحلة من مراحل إعادة التوازن، يتم التحقّق من الإصدار التجريبي لمعرفة ما إذا كان يؤدي إلى أداء أسوأ للمستخدم. وفي هذه الحالة، يتمّ التراجع تلقائيًا عن التغييرات، ما يمنع طرح الميزات غير المحسَّنة بالكامل في قناة الإصدار العلني.

للتلخيص، في ما يلي الإجراءات الرئيسية التي تم اتخاذها:

• تنبيهات محدّدة بوضوح (ثابتة ومتغيّرة) مع لجان كل أسبوعَين لتحسين الحدود الدنيا
• إجراءات التعامل مع الحوادث باستخدام دفاتر التشغيل التفصيلية
• إصدارات Canary التي تتضمّن عمليات التحقّق من الأداء للحدّ من تأثير التراجعات المحتملة في الأداء

النتائج

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

وقد انعكست هذه التحسينات أيضًا في لوحة بيانات CrUX، حيث يحقّق QuintoAndar الآن مؤشر INP أقل من 200 ملي ثانية في الشريحة المئوية الـ 75، مع أداء 78% من صفحاته أقل من هذا الحدّ الأدنى، و6.9% فقط من الصفحات تقدّم تجربة سيئة، وهو رقم ينخفض تدريجيًا شهرًا بعد شهر.

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

الخاتمة

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