كيفية نجاح شركة QuintoAndar في زيادة معدلات الإحالات الناجحة والصفحات لكل جلسة من خلال تحسين أداء الصفحات

أدى مشروع تركّز على تحسين "مؤشرات أداء الويب الأساسية" والانتقال إلى Next.js إلى زيادة في معدلات الإحالات الناجحة بنسبة% 5 وزيادة في عدد الصفحات لكل جلسة بنسبة% 87.

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

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

‎46%

انخفاض في معدّل الارتداد

‎87%

زيادة في عدد الصفحات في الجلسة

‫5%

تحسين الإحالات الناجحة أثناء مرحلة التحقّق

التحديات

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

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

ومع ذلك، واجهنا بعض التحديات في ما يتعلّق بالأداء وتجربة المستخدم في هذه الصفحات:

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

في الوقت نفسه، حدّدنا بعض الفرص التي يمكن أن تحقّق تحسينات في مشاريع أخرى في الشركة، وهي:

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

الطريقة

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

نقل البيانات إلى Next.js

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

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

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

تحسين موارد JavaScript

كانت الخطوة الأولى هي إزالة الرموز غير المستخدَمة. لقد اطّلعنا على تقارير Webpack Bundle Analyzer التي تعرض محتويات كل حِزمة JS، وراجعنا بعناية جميع النصوص البرمجية التابعة لجهات خارجية. نتيجةً لذلك، تمكّنا من إزالة بعض مكتبات التتبّع التي لم يتم استخدامها في هذه الصفحة المحدّدة.

لقد ذهب فريقنا إلى أبعد من ذلك وتقييم تكلفة الأداء للميزات الحالية. على سبيل المثال، كان زر "أعجبني" يتطلّب الكثير من JavaScript لكي يعمل. ومع ذلك، في صفحة الشقة، تفاعل أقل من% 0.5 من المستخدمين مع الزرّ، وهو متاح ويُستخدَم بشكلٍ متكرّر في أجزاء أخرى من تطبيقنا. بعد مناقشة بين فريقَي الهندسة والمنتجات، قرّرنا إزالة هذه الميزة.

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

تمّت تحسينات أخرى على JavaScript، مثل الضغط الثابت باستخدام Brotli، والذي تمّ إجراؤه في وقت التصميم باستخدام BrotliWebpackPlugin، وتمّ تطبيقه أيضًا على أنواع أخرى من الموارد الثابتة. في البداية، كنا نعتمد على ميزة الضغط التي يوفّرها نظام توصيل المحتوى (CDN)، وقد خفضت أداة Brotli حجم JavaScript بنسبة% 18 مقارنةً بـ gzip. ولكن بعد ذلك، انتقلنا إلى استخدام ضغط Brotli في وقت التصميم، وتمكّنا من تحقيق انخفاض بنسبة% 24.

تحسين موارد الصور

هناك صورة رئيسية تشغل معظم المساحة فوق القسم المرئي من الصفحة في إصدار الأجهزة الجوّالة. ويُعدّ هذا العنصر أيضًا سرعة عرض أكبر محتوى مرئي (LCP) للصفحة.

صفحة المسكن المشترَك في Edifício Copan (ساو باولو، البرازيل) صورة تم التقاطها من مستوى الأرض تعرِض منحنيات بنية المبنى
الصورة الرئيسية لصفحة شقة.

في السابق، كانت جميع الصور تتضمّن السمتَين srcset وsizes من أجل عرض صور سريعة الاستجابة. استخدمنا أيضًا Thumbor لتغيير حجم الصور عند الطلب وضبط شبكة توصيل المحتوى (CDN) لتخزين هذه الصور مؤقتًا بكفاءة.

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

في الختام، استخدمنا استراتيجية التحميل المُسبَق لتنزيله وعرضه في أقرب وقت ممكن، ونتطلع إلى تحسين مقياس LCP.

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

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

الحدّ من متغيّرات التصميم

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

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

صورة تعرض منطقة حضرية في &quot;خرائط Google&quot; مع علامة حمراء في المنتصف
أدّى تحديد الأبعاد للعناصر، مثل صورة الخريطة، إلى خفض متغيّرات التصميم التراكمية (CLS).

طرح التغييرات تدريجيًا

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

  1. في المرحلة الأولى، تم نشر الإصدار الجديد لعدد قليل من عناوين URL التي تم اختيارها يدويًا، بحيث لا يظهر للمستخدمين سوى بضع مئات من المستخدمين يوميًا.
  2. في المرحلة الثانية، تم نشره لعدد أكبر من الصفحات، ما يمثّل بضعة آلاف من المستخدمين يوميًا.
  3. في المرحلة الثالثة والأخيرة، تم نشرها لجميع الصفحات، وتم إكمال عملية الطرح لجميع المستخدمين.

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

النتائج

استخدَم الفريق SpeedCurve لإجراء التجارب الاختبارية باستمرار على صفحة الشقة. في ما يلي نتائج الإصدار المتوافق مع الأجهزة الجوّالة:

مقياس المختبر قبل بعد الفرق
سرعة عرض أكبر محتوى مرئي (LCP) 2.41 ثانية 1.48 ثانية ‫-39%
سرعة الاستعداد للتفاعل (TTI) 12.16 ثانية 7.48 ثانية ‫-39%
إجمالي وقت الحظر (TBT) 1124 مللي ثانية 1056 مللي ثانية ‫-4%
متغيّرات التصميم التراكمية (CLS) 0.0402 0.0093 ‫-77%
نتائج المقاييس في المختبر التي تم جمعها باستخدام SpeedCurve

أردنا أيضًا التحقّق من تأثير هذه التغييرات على المستخدمين الفعليين. باستخدام البيانات الميدانية التي تم جمعها من خلال Instana Website Monitoring، اطّلعنا على فترة شهر واحد قبل الطرح وبعده. عند مقارنة القيمة المئوية التسعون لمستخدمي الأجهزة الجوّالة، تبيّن لنا أنّ مقياس LCP انخفض بنسبة %26، ومقياس FID انخفض بنسبة %72.

رسم بياني خطي يعرض قيم LCP التي تقارن بين الإصدار الجديد والإصدار السابق خلال الشهر الحالي والشهر الماضي يتراوح منحنى الإصدار الجديد بين ثانيتَين و4 ثوانٍ، ويظلّ أقل من منحنى الإصدار السابق معظم الوقت.
رسم بياني خطي يحتوي على قيم FID التي تقارن بين الإصدار الجديد والإصدار السابق خلال الشهر الحالي والشهر السابق يظلّ منحنى الإصدار الجديد أقل من 100 ملي ثانية معظم الوقت، في حين يتضمّن منحنى الإصدار السابق بعض الارتفاعات التي تتجاوز 250 ملي ثانية.
نتائج مقاييس الحقول التي تم جمعها باستخدام Instana

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

لقطة شاشة لتقرير &quot;إحصاءات PageSpeed&quot; تركّز على قسم &quot;بيانات الحقول&quot; جميع مقاييس &quot;مؤشرات أداء الويب الأساسية&quot; (FCP وFID وLCP وCLS) ضمن المجموعة &quot;جيّد&quot;
توضِّح "إحصاءات PageSpeed" أنّ مستخدمي الأجهزة الجوّالة يحصلون على تجربة جيّدة في صفحة الشقة الأكثر زيارة.

خلال عملية الطرح التدريجي، لاحظنا انخفاضًا في معدّلات الارتداد. بحلول الوقت الذي انتهينا فيه من طرح الإصدار لجميع الصفحات، أظهرت إحصاءات Google انخفاضًا بنسبة% 46 في معدّل الارتداد، وزيادةً بنسبة% 87 في عدد الصفحات لكلّ جلسة، وزيادةً بنسبة% 49 في متوسّط مدّة الجلسة. وكان انخفاض معدّل الارتداد أكبر في نتائج البحث المدفوعة، حيث وصل إلى 59%، ما يشكّل علامة إيجابية في ما يتعلق باستثمارات الإعلانات التي تستخدِم نموذج الدفع لكل نقرة.

لقطة شاشة لرسم بياني من &quot;إحصاءات Google&quot; تقارن هذه السمة معدّلات الارتداد بين فترتين مختلفتَين في آذار (مارس) 2021. بدءًا من 17 آذار (مارس)، هناك انخفاض طفيف في معدّل الارتداد. وسنلاحظ انخفاضًا حادًا في عدد العروض في 24 آذار (مارس).
توضِّح "إحصاءات Google" انخفاض معدّل الارتداد أثناء طرح الإصدار الجديد في المزيد من الصفحات.

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

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

الخاتمة

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

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

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