إنشاء شبكة ويب أفضل: أداء أسرع على YouTube

دراسة حالة عن التغييرات التي أجراها فريق الويب في YouTube لتحسين الأداء وزيادة معدّلات اجتياز "مؤشرات أداء الويب الأساسية" وتحسين المقاييس الرئيسية للنشاط التجاري

Sriram Krishnan
Sriram Krishnan

يتحدث فريق Chrome كثيرًا عن "إنشاء ويب أفضل"، ولكن ما هو المقصود بهذا؟ يجب أن تكون تجارب الويب سريعة، سهلة الاستخدام، وأن تستخدِم إمكانات الأجهزة في الوقت الذي يحتاج فيه المستخدمون إليها أكثر من أي وقت آخر. يُعدّ استخدام المنتجات الداخلية جزءًا من ثقافة Google، لذلك تعاون فريق Chrome مع YouTube لمشاركة الدروس المستفادة على طول الطريق في سلسلة جديدة بعنوان "إنشاء شبكة ويب أفضل". سيتطرق الجزء الأول من السلسلة إلى كيفية إنشاء YouTube لتجربة ويب سريعة.

أداة "إحصاءات PageSpeed" تعرض بيانات "تقرير تجربة المستخدم في Chrome".
صفحة المشاهدة في YouTube على الويب للأجهزة الجوّالة تستوفي حدود مؤشرات أداء الويب الأساسية

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

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

لتوفير تجربة شاملة لجميع المستخدمين، سعى فريق YouTube إلى تحسين مقاييس الأداء، مثل مؤشرات أداء الويب الأساسية، من خلال ميزة "التحميل غير الفوري" وتطوير الرمز البرمجي.

تحسين "مؤشرات أداء الويب الأساسية"

لتحديد الجوانب التي يمكن تحسينها، استخدَم فريق YouTube تقرير تجربة المستخدمين من Chrome (CrUX) لمعرفة تجربة المستخدمين الفعليين في مشاهدة الفيديوهات وصفحات نتائج البحث على الأجهزة الجوّالة في الحقل. وأدرك الفريق أنّه بإمكانه تحسين مقاييس "مؤشرات أداء الويب الأساسية"، إذ كان مقياس سرعة عرض أكبر محتوى مرئي (LCP) يستغرق في بعض الحالات مدّة تتراوح بين 4 و6 ثوانٍ. وكان ذلك أعلى بكثير من الوقت المستهدَف وهو 2.5 ثانية.

رسوم بيانية لـ FCP وLCP تعرض معدّلات اجتياز صفحة المشاهدة في YouTube بالإضافة إلى مصدر YouTube

لتحديد الجوانب التي يمكن تحسينها، لجأ الفريق إلى أداة Lighthouse لتدقيق صفحات المشاهدة على YouTube، ما أظهر نتيجة منخفضة لأداة Lighthouse (الإصدار التجريبي) مع تسجيل سرعة عرض المحتوى على الصفحة (FCP) التي تبلغ 3.5 ثانية وسرعة عرض أكبر محتوى مرئي (LCP) التي تبلغ 8.5 ثانية.

تقرير Lighthouse الخاص بتطبيق YouTube للأجهزة الجوّالة
يحدِّد Chrome مدة استهداف تبلغ 1.8 ثانية لمقياس FCP و2.5 ثانية لمقياس LCP كحدّ أدنى. كان مقياسا سرعة عرض المحتوى على الصفحة ووقت الاستجابة للعنصر الرئيسي باللون الأصفر والأحمر بوضوح عند 3.5 ثانية و8.5 ثانية على التوالي.

لتحسين FCP وLCL، أجرى فريق YouTube عدة تجارب، مما أدّى إلى اكتشاف أمرين مهمّين.

  1. كان الاكتشاف الأول هو أنّه يمكنهم تحسين الأداء من خلال نقل رمز HTML الخاص بمشغل الفيديو فوق النص البرمجي الذي يجعل مشغل الفيديو تفاعليًا. وأشارت الاختبارات المعملية إلى أنّ هذا الإجراء يمكن أن يُحسِّن كلاً من سرعة عرض المحتوى على الصفحة وسرعة ظهور المحتوى الرئيسي من 4.4 ثانية إلى 1.1 ثانية.

  2. أما الاكتشاف الثاني، فهو أنّ مقياس LCP لا يأخذ في الاعتبار سوى صور الملصقات <video> للعناصر وليس اللقطات من بث الفيديو نفسه. كان فريق YouTube يسعى دائمًا إلى تحسين أسرع وقت ممكن لبدء تشغيل الفيديو، لذا بدأ الفريق أيضًا في تحسين سرعة عرض صورة الملصق لتحسين مقياس LCP. واختبرت الشركة بعض الصيغ المختلفة لصور الملصقات واختارت الصورة التي حققت أفضل نتيجة في اختبار المستخدمين. نتيجةً لهذا العمل، شهدت كلّ من سرعة عرض المحتوى على الصفحة وLCL تحسّنًا ملحوظًا، حيث تحسّنت LCL في الميدان من 4.6 ثانية إلى 2.0 ثانية.

مشاهدة تجربة سرعة عرض أكبر محتوى مرئي للصفحة على الويب المتوافق مع الأجهزة الجوّالة والتي تعرض السعر الأساسي والتجربة &quot;أ&quot; (الصورة المصغّرة) والتجربة &quot;ب&quot; (الصورة المصغّرة السوداء)
في المختبر، لاحظنا تحسُّنًا في وقت ظهور المحتوى الأولي وسرعة عرض أكبر محتوى مرئي من 4.4 ثانية إلى 1.1 ثانية بعد تطبيق هذا التغيير. التجربة "أ": يؤدي استخدام الصورة المصغّرة الفعلية للفيديو إلى تحقيق أداء جيد في الصفحات التي يبدأ فيها الفيديو متوقفًا مؤقتًا، ولكنّه يؤدي إلى تحقيق أداء ضعيف في صفحات الفيديوهات التي يتم تشغيلها تلقائيًا، مثل صفحة المشاهدة، وذلك وفقًا لدراسات المستخدمين. وقد أدّى ذلك أيضًا إلى انخفاض في عدد المستخدمين النشطين. التجربة "ب": أظهرت أفضل النتائج في دراسات المستخدمين عند استخدام صورة ملصق سوداء بالكامل. وجد المستخدمون أنّ الانتقال من اللون الأسود الخالص إلى أول لقطة من الفيديو يمنح تجربة أقلّ حدة للفيديوهات التي يتم تشغيلها تلقائيًا.
تمّ نشر الصورة المصغّرة السوداء في مرحلة الإنتاج لجميع مستخدمي الويب على الأجهزة الجوّالة في تموز (يوليو) 2021، ما أدى إلى تحسّن ملحوظ في FCP وLCL، كما هو موضّح في تحليل RUM أعلاه.
تمّ نشر الصورة المصغّرة السوداء في مرحلة الإنتاج لجميع مستخدمي الويب على الأجهزة الجوّالة في تموز (يوليو) 2021، ما أدى إلى تحسّن ملحوظ في سرعة عرض المحتوى على الصفحة ووقت الاستجابة إلى العنصر الرئيسي، كما هو موضّح في تحليل RUM أعلاه.

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

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

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

استخدام أسلوب "التحميل الكسول" مع ميزة "التجميع في وحدات"

كانت صفحات YouTube تحتوي على العديد من الوحدات التي تم تحميلها بسرعة. لتحسين كيفية عرض أكثر من 50 مكوّنًا، أنشأ الفريق خريطة وحدات JS للمكوّنات التي كانت بدورها تُعلم العميل بالوحدات التي يجب تحميلها. من خلال وضع علامة "التحميل الكسول" على المكوّنات، سيتم تحميل وحدات JS لاحقًا، ما يقلل من مدة التحميل الأولي للصفحة ومقدار JS غير المستخدَمة المُرسَلة إلى العميل.

ومع ذلك، بعد تنفيذ ميزة "التحميل غير الفوري"، لاحظ الفريق تأثيرًا متسلسلًا يؤدي إلى تحميل المكوّنات التي يتم تحميلها بشكل غير فوري ومكوّنات الاعتماد عليها في أوقات غير مثالية.

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

إدارة الحالة في جميع المكوّنات

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

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

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

حدث مدته 21.17 ملي ثانية معروض على المخطط الزمني للأداء
أداة Chrome DevTools مع خفض أداء وحدة المعالجة المركزية بمقدار 4 مرات

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

وقت أقل في الأحداث المعروضة على المخطط الزمني للأداء

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

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

نتيجةً لجهود YouTube في تحسين الأداء، يتم تحميل صفحات المشاهدة بشكل أسرع بكثير، حيث تجتاز الآن نسبة% 76 من عناوين URL لمواقع YouTube الإلكترونية المتوافقة مع الأجهزة الجوّالة الحدود الدنيا لمقاييس "مؤشرات أداء الويب الأساسية". على أجهزة الكمبيوتر المكتبي، انخفضت سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لصفحة المشاهدة من 4.6 ثانية تقريبًا إلى 1.6 ثانية. إنّ سرعة التفاعل وعرض الموقع الإلكتروني، لا سيما في مشغّل فيديوهات YouTube، تنخفض بنسبة تصل إلى% 75 مقارنةً بالماضي، وذلك بسبب سرعة تنفيذ JavaScript.

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

نشكر بشكل خاص كلّ من جيلبرتو كوتشي ولورانس أوسوي وبنجي بير وبو آي وبودغن بالاس وكينيث تران وماثيو سميث وفيل هارنيش ولينا ساهوني وجيريمي واغنر وفيليب والتون وهارلين باترة وفريقَي YouTube وChrome على مساهماتهم في هذا العمل.