أدّى تحسين "مؤشرات أداء الويب الأساسية" على موقع 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:
![توزيعات سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) مجمّعة حسب الشهر، بدءًا من تشرين الأول (أكتوبر) 2020 وانتهاءً في تموز (يوليو) 2021. انخفضت قيمة قيم LCP المُصنفة على أنها "ضعيفة" من 15.03% إلى 10.08%.](https://web.dev/static/case-studies/economic-times-cwv/image/lcp-distributions-grouped-1665cedb8a1c1.png?hl=ar)
بالإضافة إلى ذلك، انخفضت قيم متغيّرات التصميم التراكمية (CLS) في النطاق "ضعيف" بنسبة %65، وزادت قيم متغيّرات التصميم التراكمية (CLS) في النطاق "جيد" بنسبة% 20 في الإطار الزمني نفسه:
![توزيعات متغيّرات التصميم التراكمية (CLS) مجمّعة حسب الشهر، بدءًا من تشرين الأول (أكتوبر) 2020 وانتهاءً في تموز (يوليو) 2021. انخفضت قيمة قيم متغيّرات التصميم التراكمية (CLS) المُصنَّفة على أنّها "ضعيفة" من% 25.92 إلى %9، وزادت قيمة قيم متغيّرات التصميم التراكمية (CLS) المصنّفة على أنّها "جيدة" من% 62.62 إلى %76.5.](https://web.dev/static/case-studies/economic-times-cwv/image/cls-distributions-grouped-8c9f113c949f8.png?hl=ar)
وكانت النتيجة أنّ صحيفة 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 ثانية.
![توزيعات LCP من سبتمبر 2020 إلى حزيران (يونيو) 2021. بشكل عام، أظهرت النسبة المئوية الخامسة والسبعين من قيم سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) التي تم رصدها في تقرير تجربة مستخدم Chrome انخفاضًا بنسبة% 8.97 في قيم سرعة عرض أكبر جزء من المحتوى على الصفحة "ضعيفة". كان الانخفاض الإجمالي في وقت سرعة LCP عند الشريحة المئوية الخامسة والسبعين هو 200 ملي ثانية، وتندرج نسبة 77.63% من قيم سرعة عرض أكبر محتوى مرئي ضمن النطاق "جيد".](https://web.dev/static/case-studies/economic-times-cwv/image/lcp-distributions-septem-dba1967fe2b85.png?hl=ar)
ما هي متغيّرات التصميم التراكمية (CLS) وكيف تم تحسينها؟
هل سبق لك أن لاحظت أي تحرك غير متوقع لمحتوى الصفحة أثناء تصفح أحد مواقع الويب؟ ويرجع أحد أسباب ذلك إلى التحميل غير المتزامن للوسائط (الصور والفيديوهات والإعلانات وما إلى ذلك) على الصفحة ذات الأبعاد غير المعروفة. فور تحميل موارد الوسائط، يغيّرون تنسيق الصفحة.
سنتناول الإجراءات التي اتخذناها لتحسين متغيّرات التصميم التراكمية (CLS) على موقع The Economic Times على الويب.
استخدام العناصر النائبة
استخدمنا عنصرًا نائبًا مصمَّمًا للوحدات الإعلانية وعناصر الوسائط ذات الأبعاد المعروفة لتجنّب تغيُّرات التصميم عند تحميل مكتبة الإعلانات لعرض إعلانات الصفحة. ويضمن ذلك التخلص من متغيّرات التصميم من خلال حجز مساحة للإعلان.
![مقارنة جنبًا إلى جنب لموقع صحيفة The Economic Times كما هو موضّح على هاتف جوّال. على اليسار، يوجد عنصر نائب رمادي محجوز لصورة الجزء الرئيسي للمقالة. على يسار الصفحة، يتم استبدال العنصر النائب بالصورة التي تم تحميلها.](https://web.dev/static/case-studies/economic-times-cwv/image/a-side-side-comparison-7fa833805779e.jpg?hl=ar)
أبعاد الحاويات المحدّدة
حدّدنا أبعادًا صريحة لجميع الصور والحاويات حتى لا يحتاج محرك المتصفِّح إلى حساب عرض عناصر DOM وارتفاعها عند توفّرها. أدى ذلك إلى تجنب التحولات غير الضرورية في التصميم وأعمال الطلاء الإضافية.
تلخيص أهداف متغيّرات التصميم التراكمية (CLS) والإنجازات
قبل البدء في مشروع التحسين، قياس الفريق نتيجة متغيّرات التصميم التراكمية (CLS) عند 0.25. وقد استطعنا خفضها بشكل كبير بنسبة 90% إلى 0.09.
![توزيعات متغيّرات التصميم التراكمية (CLS) المعروضة في تقرير تجربة المستخدم على Chrome %76 من قيم متغيّرات التصميم التراكمية (CLS) هي "جيدة"، و% 15 من قيم "مقبولة"، و9% منها "ضعيفة". بلغت الشريحة المئوية الخامسة والسبعين من تجارب المستخدم على موقع The Economic Times عمومًا قيمة CLS تبلغ 0.09.](https://web.dev/static/case-studies/economic-times-cwv/image/cls-distributions-shown-24bb04e5f1222.png?hl=ar)
ما هو "مهلة الاستجابة الأولى" (FID) وكيف يمكننا تحسينه؟
مهلة الاستجابة الأولى هي المقياس الذي يتتبّع مدى استجابة الموقع الإلكتروني للبيانات التي أدخلها المستخدم. إنّ السبب الرئيسي لانخفاض نتيجة FID هو العمل المكثف في JavaScript الذي يجعل سلسلة التعليمات الرئيسية في المتصفّح مشغولة، ما قد يؤخّر تفاعلات المستخدم. لقد أدخلنا تحسينات على مقياس FID بطرق متعدّدة.
تقسيم مهام JavaScript الطويلة
المهام الطويلة هي مهام تبلغ مدتها 50 ملّي ثانية أو أكثر. تشغل المهام الطويلة سلسلة التعليمات الرئيسية للمتصفّح وتمنعها من الاستجابة للبيانات التي أدخلها المستخدم. لقد قسمنا المهام التي تستغرق وقتًا طويلاً إلى مهام أصغر حيثما كان ذلك ممكنًا بناءً على طلب المستخدم، ما ساعد في الحد من انتفاخ JavaScript.
![وقت وحدة المعالجة المركزية (CPU) مقسَّم حسب نوع النشاط في لوحة الأداء في "أدوات مطوري البرامج في Chrome" تم استغراق 143 مللي ثانية في جدولة تحميل الموارد. تم استخدام 4553 مللي ثانية على JavaScript. تم استغراق 961 مللي ثانية في عرض العمل. تم قضاء 191 مللي ثانية في عمليات الطلاء. 1488 ملي ثانية على مهام النظام، و3877 ميلي ثانية من وقت عدم النشاط. كان الإطار الزمني الإجمالي هو 11212 مللي ثانية.](https://web.dev/static/case-studies/economic-times-cwv/image/cpu-broken-down-activit-755810742b7d6.png?hl=ar)
تأجيل محتوى JavaScript غير المستخدَم
لقد أعطينا الأولوية لمحتوى الصفحة على النصوص البرمجية التابعة لجهات خارجية، مثل الإحصاءات، لإبقاء الصفحة أكثر استجابة. ومع ذلك، هناك قيود معيّنة على بعض المكتبات لأنّه يجب تحميلها في المستند <head>
لتتبُّع رحلة المستخدم بدقة.
تقليل رموز polyfill
قلّلنا من اعتمادنا على بعض رموز polyfill والمكتبات المحددة لأنّ المتصفحات تتوافق مع واجهات برمجة التطبيقات الحديثة، وانخفض عدد المستخدمين الذين يستخدمون متصفّحات قديمة مثل Internet Explorer.
إعلانات التحميل الكسول
ساعد التحميل الكسول للإعلانات في الجزء السفلي غير المرئي من الصفحة على تقليل وقت حظر سلسلة التعليمات الرئيسية، وبالتالي تحسين FID.
تلخيص أهداف FID وإنجازاته
من خلال التجارب الروتينية، تمكّنا من خفض مقياس FID من 200 ملي ثانية إلى أقل من 50 مللي ثانية في الوقت الحالي.
![توزيعات FID المعروضة في تقرير تجربة المستخدم على Chrome تمثّل% 86 من متغيّرات التصميم التراكمية (CLS) "جيدة"، و% 10 من قيم "مقبولة"، و4% منها "ضعيفة". شهدت الشريحة المئوية الخامسة والسبعين من تجارب المستخدم على موقع The Economic Times عمومًا مهلة FID مقدارها 44 مللي ثانية.](https://web.dev/static/case-studies/economic-times-cwv/image/fid-distributions-shown-aef0cbd6725b6.png?hl=ar)
منع حالات التراجع
تخطّط مجلة Economics Times لطرح عمليات مبرمَجة للتحقّق من الأداء في مرحلة الإنتاج لتجنّب التراجع في أداء الصفحات. وهي تخطط لتقييم Lighthouse-CI بهدف أتمتة الاختبارات المعملية، ما قد يمنع أي تراجع في فرع الإنتاج.