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