مبادرة Chrome Aurora هي عبارة عن تعاون بين Chrome وأُطر عمل وأدوات JavaScript مفتوحة المصدر لتحسين تجربة المستخدم على الويب. إذا كنت لا تعرف تطبيق Aurora، يمكنك الاطّلاع على المشاركة التعريفية لمعرفة المزيد عن مهمتنا ومنهجيتنا.
بما أنّنا لم ننشر خريطة طريق منذ عام 2021، نريد مشاركة ما كنا نعمل عليه وبعض المشاريع المشوّقة التي نخطّط لها في عام 2023.
أبرز ميزات المشاريع الأخيرة
خلال السنوات القليلة الماضية، عقدنا شراكات مع إطارات عمل مثل Next.js وAngular وNuxt لتحسين مؤشرات أداء الويب الأساسية. في ما يلي بعض الميزات الجديدة التي أضفناها منذ آخر تحديث.
الصور
غالبًا ما تكون الصور مصدرًا لمشاكل الأداء. في ما يلي بعض الطرق التي اتّبعناها مع الجهات المعنية بالإطارات الأساسية لضمان توفّر أفضل الممارسات بشكل تلقائي، حتى يتمكّن المطوّرون من إرسال الصور على النحو الأمثل تلقائيًا عند استخدام الأطر الأساسية التي نتعاون معها.
توجيه الصور ذات الزوايا
لقد نشرنا توجيه صورة ثابتًا لإطار عمل Angular، وهو متوفّر في Angular 15 وتم نقله إلى الإصدارَين 13.4 و14.3 خصيصًا. يفعّل هذا التوجيه التحميل البطيء المضمّن تلقائيًا، ويضيف إشارات fetchpriority إلى الصور ذات الأولوية، وينشئ تلقائيًا سمات srcset المناسبة للصور المتوافقة مع الأجهزة الجوّالة.
التأثير: تم إجراء اختبار Lighthouse في المختبر على بيئة ضمان الجودة في Land's End قبل استخدام توجيه الصور وبعده. على أجهزة الكمبيوتر المكتبي، انخفض متوسّط سرعة عرض أكبر محتوى مرئي (LCP) من 12.0 ثانية إلى 3.0 ثانية، ما يمثّل تحسّنًا بنسبة% 75 في مقياس LCP.
يمكنك الاطّلاع على مزيد من المعلومات عن التوجيه في مشاركة المدونة تحسين الصور باستخدام توجيه الصور في Angular.
تم تجديده next/image
تعاونّا أيضًا مع فريق Next.js لتعديل مكوّن الصورة لاستخدام ميزات المتصفّح الجديدة، مثل التحميل البطيء الأصلي وسمة HTML fetchpriority. يتوفّر الإصدار الجديد تلقائيًا من Next 13.
التأثير : تمكّن شريكنا Leboncoin من تحسين مقياس LCP لبعض الصفحات بنسبة تصل إلى% 60 من خلال التبديل إلى الإصدار الجديد من next/image.
خطوط الويب
قد يكون من الصعب تحسين خطوط الويب بشكل صحيح، لأنّ هناك جوانب أخرى مُهمّة أكثر من تقليل حجم نقل موارد الخطوط. يمكن أن تساهم خطوط الويب أيضًا بشكل كبير في مقياس متغيّرات التصميم التراكمية (CLS) للصفحة، ويتطلّب تقليل متغيّرات التصميم بسبب عمليات تبديل الخطوط جهدًا كبيرًا. لحسن الحظ، عقدنا شراكة مع إطارات عمل لتسهيل هذه المهمة على مطوّري الويب.
أدوات لتحسين الخطوط الاحتياطية في Next.js وNuxt وVite
لقد طرحنا ميزة في Next 13 تعمل على تعديل سمات الخط الاحتياطي للصفحة لمواءمته بشكل أفضل مع خط الويب عند تحميله. ويؤدي ذلك إلى تقليل مقياس CLS المرتبط بالخط. شاركنا منهجيتنا مع فريق Nuxt، وأصبح مصدر إلهام لوحدة nuxtjs/fontaine ومكوّن fontaine الإضافي Vite، وكلاهما يستخدم الخوارزمية الأساسية نفسها.
التأثير: تمكّن شريكنا Vox Media من خفض مقياس سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في The Verge إلى 0 في مرحلة الإنتاج على بعض الصفحات باستخدام هذه الميزة.
يمكنك الاطّلاع على المزيد من المعلومات في مشاركات مدونتنا حول إنشاء خطوط احتياطية محسّنة وأدوات إطار عمل الخطوط الاحتياطية.
وحدة nuxtjs/google-fonts
عقدنا شراكة مع فريق Nuxt لإصدار وحدة لتحسين أداء "Google Font". تعمل الوحدة تلقائيًا على تنزيل خطوط Google واستضافتها ذاتيًا لتجنُّب إجراء جولة إضافية على الخادم، كما تتيح خيارات تضمين الخطوط.
النصوص البرمجية التابعة لجهات خارجية
إنّ JavaScript التابع لجهات خارجية هو مصدر محتمل لمشاكل الأداء، وقد يؤثر في مقاييس مثل مدى استجابة الصفحة لتفاعلات المستخدم (INP)، لأنّ العمل الذي تحدّده النصوص البرمجية قد يؤخّر تنفيذ تفاعلات المستخدم.
مكوّن next/script للنصوص البرمجية التابعة لجهات خارجية
لقد أنشأنا مكوّن نص برمجي لإصدار Next 12 والإصدارات الأحدث، وهو يُحمِّل النصوص البرمجية تلقائيًا بعد معالجتها لمنع حظر المسار الحرج أثناء التحميل. ويتضمن أيضًا وضع web worker الذي يدمج Partytown لنقل النصوص البرمجية بالكامل خارج سلسلة التعليمات الرئيسية.
التأثير: في الاختبارات التجريبية لخدمة Lighthouse، شهد موقع CareerKarma انخفاضًا في LCP بنسبة% 24 باستخدام next/script component مع تفعيل وضع Worker.
يمكنك الاطّلاع على مزيد من المعلومات في مشاركة المدوّنة تحسين تحميل النصوص البرمجية التابعة لجهات خارجية في Next.js.
خيارات متنوعة
لا تنتهي شراكاتنا مع مطوّري الإطارات الأساسية عند تحسين "مؤشرات أداء الويب الأساسية". نحن نعمل أيضًا على الاستفادة بشكل أكبر من الميزات الجديدة وتسهيل بدء المطوّرين في استخدام أحدث ميزات منصّة الويب.
polyfill لاستعلامات الحاوية
عدّلنا العنصر البديل لطلبات البحث عن الحاويات لإتاحة مجموعة أكبر من ميزات CSS وتحسين أدائه، ونعمل على إصدار الإصدار 1.0.
يمكنك الاطّلاع على مزيد من المعلومات في مشاركة المدوّنة Inside the Container Query Polyfill.
ما هي الخطوة التالية التي ستتّخذها Aurora؟
في الفترة من 2023 إلى 2024، سنطرح عددًا من المشاريع المشوّقة لتحسين "مؤشرات أداء الويب الأساسية" لمطوّري الإطارات الأساسية.
في العام المقبل، سنركّز على ما يلي:
مكوّنات الحِزم الخارجية التابعة لجهات خارجية في Next.js وNuxt: يمكن أن تسهِّل مكوّنات الحِزم الخارجية تحميل المكتبات الشائعة التابعة لجهات خارجية بطريقة مثالية لـ LCP وINP. يمكنك إسقاط علامة مكوّن في نموذج DOM لتحميل المحتوى التابع لجهة خارجية بدلاً من علامة نص برمجي، وسيختار إطار العمل أفضل استراتيجية تحميل. يمكنك الاطّلاع على الطلب المقدَّم إلى فريق عمل هندسة الإنترنت (RFC) للحصول على مزيد من التفاصيل.
تجربة مطوّري تطبيقات Angular في معالجة البيانات في مرحلة الاستجابة (SSR) ومعالجة البيانات في مرحلة الربط (hydration): لقد عملنا عن كثب مع فريق Angular في مشروع معالجة البيانات في مرحلة الاستجابة (SSR) ومعالجة البيانات في مرحلة الربط (hydration). لقد ركّزنا على تحسين تجربة المطوّرين في استخدام ميزة SSR، ما يتيح للمزيد من التطبيقات الاستفادة من مزايا LCP. يُرجى متابعتنا للحصول على طلب رسمي من مطوّري البرامج (RFC) حول ميزات التلاعب بعناصر DOM في صفحات SSR.
توجيهات الصور في Angular وميزات
nuxt/image: لدينا عدد من الميزات المشوّقة المخطّط لها في Angular، مثل إنشاء إشارات الربط المُسبَق التلقائية وأدوات نقل البيانات لمساعدة عملية النقل من عناصر<img>الأساسية وتوفير عنصر<picture>وعناصر نائبة. سنستشير أيضًا فريق Nuxt بشأن عدد من الميزات الجديدة فيnuxt/image.أبحاث "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) (على مستوى جميع الإطارات): بما أنّ مدى استجابة الصفحة لتفاعلات المستخدم (INP) سيحلّ محلّ مهلة الاستجابة الأولى (FID) في عام 2024، نحن بصدد تعزيز الدعم لتحسين INP في جميع الإطارات. وسيشمل ذلك تحليل الأسباب الأساسية لمشاكل INP في إطارات العمل وإنشاء حلول مضمّنة لمستخدمي إطارات العمل كلما أمكن ذلك.
Speedometer 3: نساعد أيضًا في تنفيذ الجيل التالي من أداة قياس الأداء Speedometer لتمثيل المشهد الحديث لإطار عمل الويب لعام 2023.
البقاء على اطّلاع
يمكنك وضع إشارة على صفحتنا المقصودة للاطّلاع على آخر الأخبار والمحادثات التقنية ومشاركات المدوّنة من فريق Aurora. يمكنك أيضًا متابعتنا على Twitter:
- كارا إريكسون - karaforthewin@
- حسين جيرديه - hdjirdeh@
- كاثي هامبينيوس - katiehempenius@
- أليكس كاسل - atcastle@
- جيرالد موناكو - devknoll@
- Janicklas Ralph James - janicklas@
- Thorsten Kober - tckober@