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

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

Addy Osmani
Addy Osmani
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 ثانية وسرعة عرض أكبر محتوى مرئي بمقدار 8.5 ثانية.

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

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

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

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

تجربة LCP في صفحة المشاهدة للويب على الأجهزة الجوّالة تظهر فيه التحكم والتجربة أ (صورة مصغّرة) والتجربة ب (صورة مصغّرة سوداء)
في المختبر، لاحظنا تحسّنًا في سرعة عرض المحتوى على الصفحة (FCP) وسرعة عرض أكبر محتوى مرئي (LCP) من 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 مقارنةً بالماضي.

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

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