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