قبل عام تقريبًا، أطلق فريق Chrome Aurora توجيه Angular NgOptimizedImage. يركّز هذا التوجيه بشكل أساسي على تحسين الأداء، وذلك وفقًا لمقاييس مؤشرات أداء الويب الأساسية. وهي تُجمِّع تحسينات الصور الشائعة وأفضل الممارسات في واجهة برمجة تطبيقات موجّهة للمستخدمين ليست أكثر تعقيدًا من عنصر <img> العادي.
في عام 2023، حسّنا directive من خلال إضافة ميزات جديدة. توضّح هذه المشاركة أهم هذه الميزات الجديدة، مع التركيز على سبب اختيارنا منح الأولوية لكل ميزة، وكيف يمكن أن تساعد في تحسين أداء تطبيقات 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 ضمن "مؤشرات أداء الويب الأساسية" بشكل كبير.
الجانب السلبي لسمة 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. يُرجى متابعة مدوّنتنا للاطّلاع على المزيد من الأخبار.