أدّى تحسين "مؤشرات أداء الويب الأساسية" على موقع The Economic Times إلى تحسين تجربة المستخدم بشكل كبير وخفض معدّل الارتداد بشكل كبير على مستوى الموقع الإلكتروني بالكامل.
في ظلّ تحسُّن سرعات الإنترنت يومًا بعد يوم، يتوقّع المستخدمون أن تستجيب المواقع الإلكترونية وأن تعمل بشكل أسرع من أي وقت مضى. تتعامل مجلة The Economic Times مع أكثر من 45 مليون مستخدم نشط شهريًا. من خلال تحسين مؤشرات أداء الويب الأساسية في النطاق، وعلى صفحات AMP والصفحات الأخرى، تمكّنا من خفض معدّلات الارتداد بشكل كبير وتحسين تجربة القراءة.
قياس التأثير
ركّزنا على سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (CLS) لهما أهمية كبرى عندما يتعلق الأمر بتوفير تجربة قراءة رائعة للمستخدمين. وبعد تنفيذ إصلاحات متنوعة في الأداء كما هو موضّح أدناه، تمكّنت صحيفة The Economic Times من تحسين مقاييس تقرير تجارب مستخدمي Chrome (CrUX) بشكلٍ كبير في غضون بضعة أشهر.
بشكل عام، تحسّن متغيّرات التصميم التراكمية (CLS) بنسبة% 250 من 0.25 إلى 0.09. بشكل عام، تحسَّن مقياس LCP بنسبة% 80 من 4.5 ثانية إلى 2.5 ثانية.
بالإضافة إلى ذلك، انخفضت قيم سرعة عرض أكبر محتوى مرئي (LCP) في النطاق "ضعيف" بنسبة% 33 في الفترة من تشرين الأول (أكتوبر) 2020 إلى تموز (يوليو) 2021:
بالإضافة إلى ذلك، انخفضت قيم متغيّرات التصميم التراكمية (CLS) في النطاق "ضعيف" بنسبة %65، وزادت قيم متغيّرات التصميم التراكمية (CLS) في النطاق "جيد" بنسبة% 20 في الإطار الزمني نفسه:
وكانت النتيجة أنّ صحيفة The Economic Times التي لم تستوفِ في السابق حدود "مؤشرات أداء الويب الأساسية" تجاوزت الآن الحدود الدنيا لحدود "مؤشرات أداء الويب الأساسية" في جميع مصادرها واخفضت معدّلات الارتداد بنسبة% 43 بشكل عام.
ما هو مقياس LCP وكيف تم تحسينه؟
أما العنصر الأكبر فهو العنصر الأكثر صلة لتحسين تجربة المستخدم والتعرّف على سرعة التحميل. لا تسجِّل مقاييس الأداء، مثل سرعة عرض المحتوى على الصفحة (FCP) سوى التجربة الأولية للغاية لتحميل الصفحة. من ناحية أخرى، تُبيّن سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) الوقت الذي يستغرقه عرض أكبر قسم صورة أو نص أو فيديو مرئي للمستخدم.
بالإضافة إلى التبديل إلى مزوّد نظام أسماء نطاقات أسرع وتحسين الصور، في ما يلي بعض الأساليب التي تناولناها لتحسين سرعة LCP.
الطلبات المهمة أولاً
ولأنّ جميع المتصفّحات الحديثة تحدّ من العدد المتزامن للطلبات، على المطوّرين إعطاء الأولوية لتحميل المحتوى المهم أولاً. لتحميل صفحة ويب معقدة، يلزمنا تنزيل أصول مثل عناصر العنوان، وCSS، وموارد JavaScript، والصورة الرئيسية، ونص المقالة، والتعليقات، والأخبار الأخرى ذات الصلة، والتذييل، والإعلانات. لقد قيّمنا العناصر المطلوبة لمقياس LCP وقدّمنا الأفضلية لتحميل تلك العناصر أولاً لتحسين سرعة LCP. وتم أيضًا تأجيل الطلبات التي لم تكن جزءًا من العرض الأولي للصفحة.
شكل ظهور النص
لقد جرّبنا السمة font-display لأنّها تؤثر في كلّ من LCP وCLS. لقد جرّبنا font-display: auto; ثم بدّلنا إلى font-display: swap;. ويعرض هذا النص في البداية بأفضل خط متاح وبالخط المتاح، ثم ينتقل إلى الخط عند تنزيله. وأدّى ذلك إلى عرض النص بسرعة بغض النظر عن سرعة الشبكة.
ضغط أفضل
Butli هي خوارزمية ضغط بديلة لبرنامجَي Gzip وDelate التي طورتها Google. وقد استبدلنا الخطوط والأصول لدينا وغيّرنا ضغط الخادم من Gzip إلى Brotli لتقليل حجم البحث:
- تكون ملفات JavaScript أصغر بنسبة 15% من حجم ملفات Gzip.
- تكون ملفات HTML أصغر بنسبة 18% من حجم ملفات Gzip.
- تكون ملفات CSS والخطوط أصغر بنسبة 17% من ملفات Gzip.
الربط المسبق بنطاقات الجهات الخارجية
يجب استخدام preconnect بحرص، لأنّه قد يستهلك وقتًا ثمينًا مع وحدة المعالجة المركزية (CPU) ويؤخّر الوصول إلى موارد مهمة أخرى، خاصةً مع الاتصالات الآمنة.
ومع ذلك، إذا كان من المعلوم أنّ عملية جلب مورد على نطاق تابع لجهة خارجية ستحدث، سيكون استخدام preconnect جيدًا. وفي حال حدوث ذلك من وقت لآخر فقط على موقع إلكتروني يستقبل عددًا كبيرًا من الزيارات، قد يؤدّي preconnect إلى تنفيذ إجراءات غير ضرورية لبروتوكول TCP وTLS. وبالتالي، كانت dns-prefetch أكثر ملاءمةً للموارد الخارجية، مثل وسائل التواصل الاجتماعي والإحصاءات وغيرها، لإجراء عمليات بحث عن نظام أسماء النطاقات مسبقًا.
تقسيم التعليمة البرمجية إلى أجزاء
في رأس الموقع الإلكتروني، تم تحميل فقط الموارد التي تحتوي على جزء أساسي من منطق النشاط التجاري أو التي كانت مهمة لعرض الصفحة في الجزء المرئي من الصفحة. علاوةً على ذلك، نقسّم الرمز البرمجي إلى أجزاء من خلال تقسيم الرمز. وقد ساعدنا ذلك في تحسين سرعة LCP للصفحة بشكل أكبر.
تخزين مؤقت أفضل
بالنسبة إلى جميع المسارات الأمامية، أضفنا طبقة Redis التي تعرض نماذج من ذاكرة التخزين المؤقت. ويؤدي ذلك إلى تقليل وقت الحوسبة على الخادم وإنشاء واجهة المستخدم بأكملها في كل طلب، ما يؤدي بدوره إلى تقليل سرعة عرض أكبر جزء من المحتوى على الصفحة في الطلبات اللاحقة.
تلخيص أهداف LCP وإنجازاتها
قبل البدء في مشروع التحسين، يقيس الفريق نتيجة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) عند 4.5 ثانية (للنسبة المئوية الخامسة والسبعين من المستخدمين، استنادًا إلى بيانات حقل تقرير CrUX). بعد مشروع التحسين، تم تقليل المدة إلى 2.5 ثانية.
ما هي متغيّرات التصميم التراكمية (CLS) وكيف تم تحسينها؟
هل سبق لك أن لاحظت أي تحرك غير متوقع لمحتوى الصفحة أثناء تصفح أحد مواقع الويب؟ ويرجع أحد أسباب ذلك إلى التحميل غير المتزامن للوسائط (الصور والفيديوهات والإعلانات وما إلى ذلك) على الصفحة ذات الأبعاد غير المعروفة. فور تحميل موارد الوسائط، يغيّرون تنسيق الصفحة.
سنتناول الإجراءات التي اتخذناها لتحسين متغيّرات التصميم التراكمية (CLS) على موقع The Economic Times على الويب.
استخدام العناصر النائبة
استخدمنا عنصرًا نائبًا مصمَّمًا للوحدات الإعلانية وعناصر الوسائط ذات الأبعاد المعروفة لتجنّب تغيُّرات التصميم عند تحميل مكتبة الإعلانات لعرض إعلانات الصفحة. ويضمن ذلك التخلص من متغيّرات التصميم من خلال حجز مساحة للإعلان.
أبعاد الحاويات المحدّدة
حدّدنا أبعادًا صريحة لجميع الصور والحاويات حتى لا يحتاج محرك المتصفِّح إلى حساب عرض عناصر DOM وارتفاعها عند توفّرها. أدى ذلك إلى تجنب التحولات غير الضرورية في التصميم وأعمال الطلاء الإضافية.
تلخيص أهداف متغيّرات التصميم التراكمية (CLS) والإنجازات
قبل البدء في مشروع التحسين، قياس الفريق نتيجة متغيّرات التصميم التراكمية (CLS) عند 0.25. وقد استطعنا خفضها بشكل كبير بنسبة 90% إلى 0.09.
ما هو "مهلة الاستجابة الأولى" (FID) وكيف يمكننا تحسينه؟
مهلة الاستجابة الأولى هي المقياس الذي يتتبّع مدى استجابة الموقع الإلكتروني للبيانات التي أدخلها المستخدم. إنّ السبب الرئيسي لانخفاض نتيجة FID هو العمل المكثف في JavaScript الذي يجعل سلسلة التعليمات الرئيسية في المتصفّح مشغولة، ما قد يؤخّر تفاعلات المستخدم. لقد أدخلنا تحسينات على مقياس FID بطرق متعدّدة.
تقسيم مهام JavaScript الطويلة
المهام الطويلة هي مهام تبلغ مدتها 50 ملّي ثانية أو أكثر. تشغل المهام الطويلة سلسلة التعليمات الرئيسية للمتصفّح وتمنعها من الاستجابة للبيانات التي أدخلها المستخدم. لقد قسمنا المهام التي تستغرق وقتًا طويلاً إلى مهام أصغر حيثما كان ذلك ممكنًا بناءً على طلب المستخدم، ما ساعد في الحد من انتفاخ JavaScript.
تأجيل محتوى JavaScript غير المستخدَم
لقد أعطينا الأولوية لمحتوى الصفحة على النصوص البرمجية التابعة لجهات خارجية، مثل الإحصاءات، لإبقاء الصفحة أكثر استجابة. ومع ذلك، هناك قيود معيّنة على بعض المكتبات لأنّه يجب تحميلها في المستند <head> لتتبُّع رحلة المستخدم بدقة.
تقليل رموز polyfill
قلّلنا من اعتمادنا على بعض رموز polyfill والمكتبات المحددة لأنّ المتصفحات تتوافق مع واجهات برمجة التطبيقات الحديثة، وانخفض عدد المستخدمين الذين يستخدمون متصفّحات قديمة مثل Internet Explorer.
إعلانات التحميل الكسول
ساعد التحميل الكسول للإعلانات في الجزء السفلي غير المرئي من الصفحة على تقليل وقت حظر سلسلة التعليمات الرئيسية، وبالتالي تحسين FID.
تلخيص أهداف FID وإنجازاته
من خلال التجارب الروتينية، تمكّنا من خفض مقياس FID من 200 ملي ثانية إلى أقل من 50 مللي ثانية في الوقت الحالي.
منع حالات التراجع
تخطّط مجلة Economics Times لطرح عمليات مبرمَجة للتحقّق من الأداء في مرحلة الإنتاج لتجنّب التراجع في أداء الصفحات. وهي تخطط لتقييم Lighthouse-CI بهدف أتمتة الاختبارات المعملية، ما قد يمنع أي تراجع في فرع الإنتاج.