قبل أكثر من عام بقليل، أطلق فريق Chrome Aurora توجيه Angular NgOptimizedImage. يركّز هذا التوجيه بشكل أساسي على تحسين الأداء، وذلك وفقًا لمقاييس مؤشرات أداء الويب الأساسية. وهي تجمع بين تحسينات الصور الشائعة وأفضل الممارسات في واجهة برمجة تطبيقات موجّهة للمستخدمين، وهي ليست أكثر تعقيدًا من عنصر <img> عادي.
في عام 2023، تم تحسين التوجيه باستخدام ميزات جديدة. توضّح هذه المشاركة أهم هذه الميزات الجديدة، مع التركيز على سبب اختيارنا لمنح الأولوية لكل ميزة، وعلى كيفية الاستفادة منها في تحسين أداء تطبيقات Angular.
الميزات الجديدة
لقد تحسنت NgOptimizedImage بشكل كبير بمرور الوقت، بما في ذلك الميزات الجديدة التالية.
وضع التعبئة
إنّ تغيير حجم الصور من خلال توفير السمتَين width وheight هو تحسين بالغ الأهمية لتقليل متغيّرات التصميم، لأنّ المتصفّحات تحتاج إلى معرفة نسبة العرض إلى الارتفاع للصورة لتوفير مساحة. ومع ذلك، يعد تغيير حجم الصور عملاً إضافيًا لمطوّري التطبيقات، ولا معنى في بعض حالات استخدام الصور.
وهذه الميزة هي أول ميزة رئيسية تمت إضافتها إلى معاينة ما بعد مرحلة تطوير مكوّنات الصورة، وهي وضع الملء. وتتيح هذه الطريقة للمطوّرين تضمين الصور بدون تغيير حجمها بشكل واضح، وبدون تحمُّل متغيّرات التصميم.
باستخدام وضع الملء، يتم إيقاف متطلبات حجم الصورة، ويتم تصميم نمط الصورة تلقائيًا لملء العنصر الذي تحتوي عليه. يعمل هذا على فصل نسبة العرض إلى الارتفاع للصورة عن المساحة التي تشغلها على الصفحة، ويمنحك تحكمًا أكبر في كيفية ملاءمة الصور لتخطيط صفحتك.
يستخدم وضع التعبئة NgOptimizedImage كبديل أفضل أداءً للسمة background-image css. ضَع صورة داخل <div> أو عنصر آخر كان من المفترض أن يكون النمط background-image، ثم فعِّل وضع التعبئة، كما هو موضّح في مثال الرمز السابق. يمكنك استخدام سمتَي CSS object-fit وobject-position على <div> للتحكّم في كيفية وضع الصورة في الخلفية.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
إنشاء Srcset
من أكثر أساليب تحسين الصور فعالية هو استخدام السمة srcset لضمان تنزيل الصور بالحجم المناسب على أي جهاز يصل إلى تطبيقك. يمكن أن يؤدي استخدام srcset في تطبيقك إلى إهدار معدل نقل البيانات وتحسين أداء LCP Core Web Vital بشكل كبير.
يتمثل الجانب السلبي في السمة srcset في أنّ تنفيذها قد يكون مرهقًا. تعني كتابة قيم srcset يدويًا إضافة أسطر ترميز متعددة إلى كل عنصر صورة في تطبيقك، مع إضافة عناوين URL مخصّصة متعددة لكل srcset. عليك أيضًا تحديد مجموعة من نقاط التوقف، لأنها يمكن أن تمثل كلاً من كثافة الشاشة وأحجام إطار العرض للأجهزة الشائعة.
لهذا السبب، كانت إضافة عملية إنشاء srcset تلقائيًا إلى التوجيه NgOptimizedImage مهمة رئيسية في مرحلة ما بعد الإطلاق. ومن خلال هذه الإضافة، يمكن لأي تطبيق يستخدم شبكة توصيل للمحتوى تتيح تغيير حجم الصور الحصول على ملفات srcsets كاملة وقابلة للتخصيص وتتم إضافتها تلقائيًا إلى كل صورة يتم إنشاؤها باستخدام التوجيه NgOptimizedImage.
أدرجنا واجهة برمجة تطبيقات مبسّطة لإعداد السمة sizes، ويتم استخدام هذه الواجهة لضمان حصول كل صورة على النوع الصحيح من srcset. في حال عدم تضمين السمة sizes، نحن نعلم أنّ الصورة ذات حجم ثابت، ويجب أن تحصل على srcset يعتمد على الكثافة، كما يلي:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
يضمن هذا النوع من srcset عرض الصور بحجم يأخذ في الاعتبار كثافة وحدات البكسل لجهاز المستخدم.
من ناحية أخرى، في حال تضمين السمة sizes، ينشئ NgOptimizedImage مجموعة srcset سريعة الاستجابة تشتمل على نقاط توقف للعديد من أحجام الأجهزة والصور الشائعة، باستخدام القائمة التلقائية هذه لنقاط الإيقاف:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
إنشاء الاتصال المُسبَق
لتحسين مقياس LCP، من المهم تقليل الوقت الذي يقضيه المستخدمون في تنزيل صورة LCP. في القسم السابق، تعرّفت على كيفية الاستفادة من srcset من خلال نقل ملفات صور أصغر حجمًا، مع العِلم بأنّ بدء عملية النقل في أقرب وقت ممكن يأتي تحسينًا مهمًا بنفس القدر. ويمكنك إجراء ذلك من خلال استخدام علامات link rel="preconnect" لبدء الاتصال بنطاق الصورة على الفور.
لقد حذّرت NgOptimizedImage منذ البداية في حال تعذّر الاتصال مسبقًا بنطاق صورة LCP، لكنّ التحذير ليس الحل المثالي، لأنّنا سنساعدك فقط في حلّ المشكلة. وهذا بالضبط ما تفعله NgOptimizedImage الآن، مع إنشاء الاتصال المسبق آليًا.
لتوفير هذه الميزة، نستخدم تحليل الرموز الثابتة لمحاولة اكتشاف نطاقات الصور في أدوات تحميل NgOptimizedImage وإنشاء علامات روابط اتصال مسبق لهذه النطاقات تلقائيًا. قد تكون هناك حالات تتطلّب فيها روابط الاتصال المُسبَق يدويًا، ولكن بالنسبة إلى معظم المستخدِمين، يعني الاتصال المُسبَق التلقائي الحاجة إلى خطوة واحدة أقل للحصول على أداء جيد للصور.
دعم محسَّن لبرامج التحميل المخصّصة
من العناصر الأساسية في NgOptimizedImage بنية برنامج التحميل، والتي تسمح للتوجيه بإنشاء عناوين URL مصممة تلقائيًا لتلائم شبكة توصيل المحتوى (CDN) الخاصة بالصورة الخاصة بالتطبيق. يتم تضمين مجموعة من أدوات التحميل المضمنة مع شبكات توصيل المحتوى (CDN) المستخدمة على نطاق واسع. نوفّر أيضًا استخدام أدوات التحميل المخصّصة، ما يتيح لك دمج NgOptimizedImage مع أي حلّ تقريبًا لاستضافة الصور.
عند إطلاق هذه الأدوات المخصّصة، كانت عمليات التحميل المخصّصة محدودة، ولا يمكنها قراءة سمة width إلا من عنصر الصورة. استجابةً لملاحظات المستخدمين، أضفنا إمكانية استخدام بنية بيانات loaderParams قابلة للتخصيص، ما يتيح تمرير البيانات العشوائية من عنصر الصورة إلى أداة التحميل المخصّصة. مع التوسيع، يمكن أن تكون أدوات التحميل المخصصة بسيطة أو معقدة كما تتطلب البنية التحتية للصور في التطبيق.
يوضّح المثال التالي كيف يمكن لأداة تحميل مخصّصة بسيطة استخدام واجهة برمجة التطبيقات loaderParams للاختيار من بين نطاقَين بديلَين للصور:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
يتوفّر مثال على أداة تحميل مخصّصة أكثر تعقيدًا في مستندات Angular.
إرشادات موسّعة بشأن أداء الصور
حتى الآن، كان كل تنبيه أضفناه بشأن أداء الصور إلى Angular جزءًا من توجيه NgOptimizedImage. وفي حال عدم استخدام التوجيه في التطبيق، لن تحصل على أي إرشادات بشأن مشاكل أداء الصور.
في Angular 17، سنوسّع نطاق إرشادات أداء الصور لتشمل جميع تطبيقات Angular. والآن، إذا رصدنا أنماط صور نعتقد أنّها تؤثر سلبًا في الأداء، مثل التحميل الكسول لصورة مقياس LCP أو تنزيل ملف حجمه كبير جدًا بالنسبة إلى الصفحة، سنُعلمك بذلك حتى في حال عدم استخدام NgOptimizedImage.
يُعدّ أداء الصور مهمًا لجميع التطبيقات، ونحن متحمّسون لمواصلة وضع بعض التدابير لمنع الأخطاء الشائعة في تطبيقات Angular.
التطلّع إلى المستقبل
ونعمل جاهدين على تطوير المجموعة التالية من الميزات في نظام NgOptimizedImage. على الرغم من أنّ أداء الصور يبقى مصدر قلقنا الأساسي، نريد أيضًا إضافة ميزات تحسِّن تجربة المطوّرين، وذلك لضمان إبقاء NgOptimizedImage خيارًا جذابًا لتضمين الصور في تطبيقات Angular.
إحدى الميزات التي تأتي ضمن أولوياتنا هي العناصر النائبة للصور. تُستخدَم هذه الأخطاء بشكل شائع لتحسين مظهر تحميل الصور على تطبيقات الويب، ولكن يمكن أن يؤثر ذلك سلبًا في الأداء في حال تطبيقه بشكل غير صحيح. ونأمل في إنشاء نظام عناصر نائبة للصور مع التركيز على الأداء أولاً في NgOptimizedImage. يُرجى متابعة مدوّنتنا للاطّلاع على المزيد من الأخبار.