قبل عام تقريبًا، أطلق فريق 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 ضمن "مؤشرات أداء الويب الأساسية" بشكل كبير.
الجانب السلبي لسمة srcset هو أنّه قد يكون من الصعب تنفيذها. تعني كتابة قيم srcset يدويًا إضافة عدة أسطر من الترميز إلى كل عنصر صورة في تطبيقك، مع تضمين عناوين URL مخصّصة متعددة لكل srcset. عليك أيضًا تحديد مجموعة من نقاط التوقف، وهي عملية معقدة، لأنّها يمكن أن تمثّل كلّ من كثافة الشاشة وأحجام إطارات العرض للأجهزة الشائعة.
لهذا السبب، كانت إضافة إنشاء مجموعة srcset تلقائيًا إلى توجيه NgOptimizedImage إنجازًا كبيرًا بعد الإطلاق. من خلال هذه الإضافة، يمكن لأي تطبيق يستخدم شبكة توصيل المحتوى (CDN) تتيح تغيير حجم الصور إضافة مجموعات 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 API للاختيار بين نطاقَين بديلَين للصور:
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. يُرجى متابعة مدوّنتنا للاطّلاع على المزيد من الإعلانات.