دراسة حالة عن التغييرات التي أجراها فريق الويب في YouTube لتحسين الأداء وزيادة معدّلات اجتياز "مؤشرات أداء الويب الأساسية" وتحسين المقاييس الرئيسية للنشاط التجاري
يتحدث فريق Chrome كثيرًا عن "إنشاء ويب أفضل"، ولكن ما هو المقصود بهذا؟ يجب أن تكون تجارب الويب سريعة، سهلة الاستخدام، وأن تستخدِم إمكانات الأجهزة في الوقت الذي يحتاج فيه المستخدمون إليها أكثر من أي وقت آخر. يُعدّ استخدام المنتجات الداخلية جزءًا من ثقافة Google، لذلك تعاون فريق Chrome مع YouTube لمشاركة الدروس المستفادة على طول الطريق في سلسلة جديدة بعنوان "إنشاء شبكة ويب أفضل". سيتطرق الجزء الأول من السلسلة إلى كيفية إنشاء YouTube لتجربة ويب سريعة.
في YouTube، يرتبط الأداء بسرعة تحميل الفيديوهات والمحتوى الآخر، مثل الاقتراحات والتعليقات، على صفحات الويب. يتم قياس الأداء أيضًا من خلال سرعة استجابة YouTube لتفاعلات المستخدمين، مثل عمليات البحث وعناصر التحكّم في المشغّل والمشاركات والمعجبات.
إنّ الأسواق النامية التي تشهد نموًا، مثل البرازيل والهند وإندونيسيا، مهمة لإصدار الويب المتوافق مع الأجهزة الجوّالة من YouTube. وبما أنّ العديد من المستخدمين في هذه المناطق يستخدمون أجهزة بطيئة ومعدل نقل بيانات محدودًا على الشبكة، فإنّ ضمان توفير تجربة سريعة وسلسة هو هدف مهم.
لتوفير تجربة شاملة لجميع المستخدمين، سعى فريق YouTube إلى تحسين مقاييس الأداء، مثل مؤشرات أداء الويب الأساسية، من خلال ميزة "التحميل غير الفوري" وتطوير الرمز البرمجي.
تحسين "مؤشرات أداء الويب الأساسية"
لتحديد الجوانب التي يمكن تحسينها، استخدَم فريق YouTube تقرير تجربة المستخدمين من Chrome (CrUX) لمعرفة تجربة المستخدمين الفعليين في مشاهدة الفيديوهات وصفحات نتائج البحث على الأجهزة الجوّالة في الحقل. وأدرك الفريق أنّه بإمكانه تحسين مقاييس "مؤشرات أداء الويب الأساسية"، إذ كان مقياس سرعة عرض أكبر محتوى مرئي (LCP) يستغرق في بعض الحالات مدّة تتراوح بين 4 و6 ثوانٍ. وكان ذلك أعلى بكثير من الوقت المستهدَف وهو 2.5 ثانية.
لتحديد الجوانب التي يمكن تحسينها، لجأ الفريق إلى أداة Lighthouse لتدقيق صفحات المشاهدة على YouTube، ما أظهر نتيجة منخفضة لأداة Lighthouse (الإصدار التجريبي) مع تسجيل سرعة عرض المحتوى على الصفحة (FCP) التي تبلغ 3.5 ثانية وسرعة عرض أكبر محتوى مرئي (LCP) التي تبلغ 8.5 ثانية.
لتحسين FCP وLCL، أجرى فريق YouTube عدة تجارب، مما أدّى إلى اكتشاف أمرين مهمّين.
كان الاكتشاف الأول هو أنّه يمكنهم تحسين الأداء من خلال نقل رمز HTML الخاص بمشغل الفيديو فوق النص البرمجي الذي يجعل مشغل الفيديو تفاعليًا. وأشارت الاختبارات المعملية إلى أنّ هذا الإجراء يمكن أن يُحسِّن كلاً من سرعة عرض المحتوى على الصفحة وسرعة ظهور المحتوى الرئيسي من 4.4 ثانية إلى 1.1 ثانية.
أما الاكتشاف الثاني، فهو أنّ مقياس LCP لا يأخذ في الاعتبار سوى صور الملصقات
<video>
للعناصر وليس اللقطات من بث الفيديو نفسه. كان فريق YouTube يسعى دائمًا إلى تحسين أسرع وقت ممكن لبدء تشغيل الفيديو، لذا بدأ الفريق أيضًا في تحسين سرعة عرض صورة الملصق لتحسين مقياس LCP. واختبرت الشركة بعض الصيغ المختلفة لصور الملصقات واختارت الصورة التي حققت أفضل نتيجة في اختبار المستخدمين. نتيجةً لهذا العمل، شهدت كلّ من سرعة عرض المحتوى على الصفحة وLCL تحسّنًا ملحوظًا، حيث تحسّنت LCL في الميدان من 4.6 ثانية إلى 2.0 ثانية.
على الرغم من أنّ هذه التحسينات أدّت إلى تحسين مقياس LCP، رأى الفريق أنّ التعريف الحالي لمقياس LCP لا يرصد بشكل كامل، من منظور المستخدم، وقت تحميل "المحتوى الرئيسي" للصفحة، وهو الهدف من مقياس LCP.
لحلّ هذه المشاكل، تعاون أعضاء فريق YouTube مع أعضاء فريق Chrome لاستكشاف طرق تحسين مقياس LCP لحلّ حالات الاستخدام هذه. بعد النظر في مدى جدوى بعض الخيارات وتأثيرها، توصلت الفِرق إلى اقتراح يقضي بالنظر في وقت عرض اللقطة الأولى لعنصر الفيديو كأحد مَعلمات LCP.
بعد طرح هذا التغيير في Chrome، سيواصل فريق YouTube عمله على تحسين سرعة عرض أكبر محتوى مرئي (LCP). وسيؤدي الإصدار المعدَّل من المقياس إلى أن يكون لهذه التحسينات تأثير مباشر أكثر في تجارب المستخدمين الفعلية.
استخدام أسلوب "التحميل الكسول" مع ميزة "التجميع في وحدات"
كانت صفحات YouTube تحتوي على العديد من الوحدات التي تم تحميلها بسرعة. لتحسين كيفية عرض أكثر من 50 مكوّنًا، أنشأ الفريق خريطة وحدات JS للمكوّنات التي كانت بدورها تُعلم العميل بالوحدات التي يجب تحميلها. من خلال وضع علامة "التحميل الكسول" على المكوّنات، سيتم تحميل وحدات JS لاحقًا، ما يقلل من مدة التحميل الأولي للصفحة ومقدار JS غير المستخدَمة المُرسَلة إلى العميل.
ومع ذلك، بعد تنفيذ ميزة "التحميل غير الفوري"، لاحظ الفريق تأثيرًا متسلسلًا يؤدي إلى تحميل المكوّنات التي يتم تحميلها بشكل غير فوري ومكوّنات الاعتماد عليها في أوقات غير مثالية.
لحلّ هذه المشكلة، حدّد الفريق الحدّ الأدنى من المكونات المطلوبة في عرض معيّن وجمعها في طلب شبكة واحد. وكانت النتائج هي تحسين سرعة الصفحة وتقليل وقت تحليل JavaScript، وفي النهاية تحسين أوقات العرض الأولية.
إدارة الحالة في جميع المكوّنات
كانت منصة YouTube تواجه مشاكل في الأداء بسبب عناصر التحكّم في المشغّل، وخصوصًا على الأجهزة القديمة. أظهر تحليل الرموز البرمجية أنّ مشغّل الوسائط الذي يتيح للمستخدمين التحكّم في ميزات مثل سرعة التشغيل والتقدّم أصبح مكوّنًا بشكل مفرط بمرور الوقت.
أدّى كل حدث لمس أو حركة في شريط التقدّم إلى إجراء مجرّدَين إضافيَّين لإعادة احتساب التصميم واستغرقا 21.17 ملي ثانية أثناء عمليات تنفيذ اختبارات الأداء في المختبر. مع إضافة عناصر تحكّم جديدة بمرور الوقت، كان نمط التحكّم اللامركزي يؤدي غالبًا إلى حدوث تداخلات دائرية وتسرُّب للذاكرة، ما يؤثّر سلبًا في أداء صفحة المشاهدة.
لحلّ المشاكل الناتجة عن التحكّم اللامركزي، عدّل الفريق واجهة مستخدم المشغّل لمزامنة جميع التعديلات، وأعاد هندسة المشغّل بشكل أساسي ليصبح عنصرًا واحدًا من المستوى الأعلى ينقل البيانات إلى العناصر الفرعية. وقد ضمن ذلك دورة واحدة فقط لتعديل (عرض) واجهة المستخدم عند حدوث أي تغيير في الحالة، ما أدى إلى إيقاف التعديلات المتسلسلة. لا يتطلّب الحدث الجديد للمس والتنقّل في شريط تقدّم المشغّل إعادة احتساب الأنماط أثناء تنفيذ JavaScript، ولا يستغرق الآن سوى 25% من الوقت الذي كان يستغرقه المشغّل القديم.
أدّى هذا التطوير إلى تحسينات إضافية في الأداء، مثل تقليل أوقات تحميل المشاهدة على الأجهزة القديمة وعدد عمليات التشغيل التي تم إيقافها والخطأ غير القاتل.
النتائج والتحسينات
نتيجةً لجهود YouTube في تحسين الأداء، يتم تحميل صفحات المشاهدة بشكل أسرع بكثير، حيث تجتاز الآن نسبة% 76 من عناوين URL لمواقع YouTube الإلكترونية المتوافقة مع الأجهزة الجوّالة الحدود الدنيا لمقاييس "مؤشرات أداء الويب الأساسية". على أجهزة الكمبيوتر المكتبي، انخفضت سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لصفحة المشاهدة من 4.6 ثانية تقريبًا إلى 1.6 ثانية. إنّ سرعة التفاعل وعرض الموقع الإلكتروني، لا سيما في مشغّل فيديوهات YouTube، تنخفض بنسبة تصل إلى% 75 مقارنةً بالماضي، وذلك بسبب سرعة تنفيذ JavaScript.
أدّت التحسينات التي أجريناها على أداء الموقع الإلكتروني لمنصة YouTube خلال العام الماضي إلى تحسين مقاييس النشاط التجاري أيضًا، بما في ذلك وقت المشاهدة والمستخدمون النشطون يوميًا. استنادًا إلى نجاح هذه الجهود، نخطّط لمواصلة استكشاف المزيد من الطرق لتحسين الأداء في المستقبل.
نشكر بشكل خاص كلّ من جيلبرتو كوتشي ولورانس أوسوي وبنجي بير وبو آي وبودغن بالاس وكينيث تران وماثيو سميث وفيل هارنيش ولينا ساهوني وجيريمي واغنر وفيليب والتون وهارلين باترة وفريقَي YouTube وChrome على مساهماتهم في هذا العمل.