تحسين الصور من خلال توجيه Angular للصور

Kara Erickson

Leena Sohoni

في أيار (مايو) 2022، أعلن فريقا Aurora وAngular أنّهما سيتعاونان في إنشاء توجيه صور لاستخدامه في Angular. تم إصدار التوجيه مؤخرًا في إصدار المطوّر التجريبي كجزء من الإصدار 14.2 من Angular. تتناول هذه المشاركة كيفية إتاحة توجيه الصورة الجديد، NgOptimizedImage، ميزة تحسين الصور في Angular.

الخلفية

تشكّل الصور عنصرًا شائعًا ومهمًا في تجربة المستخدم على الويب، إذ تُنشئ ‎99.9% من صفحات الويب طلبات للحصول على صورة واحدة أو أكثر. تشكّل الصور أيضًا أكبر مساهم في وزن الصفحة، إذ تبلغ قيمتها المتوسطة 982 كيلوبايت لكل صفحة.

بسبب العدد المتزايد للصور وحجمها، يمكن أن تؤثّر في أداء صفحات الويب وتؤثّر في مقاييس مؤشرات أداء الويب الأساسية. في ‎79.4% من صفحات الكمبيوتر المكتبي، كانت الصورة هي عنصر "سرعة عرض أكبر محتوى مرئي" (LCP) في عام 2021. وبالتالي، أصبح سعينا وراء الصور المحسّنة مسعى مستمرًا لدى الكثيرين منا.

يؤمن فريق Aurora بالاستفادة من إمكانات الإطارات الأساسية لتقديم حلول مضمّنة للتحديات الشائعة التي يواجهها المطوّرون. كانت مكوّن الصور في Next.js أول خطوة اتّخذتها الشركة في مجال تحسين الصور. واعتبر الفريق هذا المكوّن ساحة اختبار لمعرفة ما إذا كان تحسين تجربة المطوّر (DX) لتحسين الصور يمكن أن يؤدي إلى تحسين الأداء في المزيد من التطبيقات التي تستخدم إطارات العمل.

كانت المجموعة الأولى من النتائج التي حصل عليها مستخدم Next.js في Leboncoin مشجّعة. شهدت Leboncoin تحسُّنًا كبيرًا في مقياس LCP (من 2.4 ثانية إلى 1.7 ثانية) بعد أن بدأت في استخدام next/image. وقد لعب اعتماد next/image لاحقًا في المنتدى دورًا في زيادة عدد مصادر Next.js التي تستوفي حدود LCP. سرعان ما تلقّينا طلبات لميزات مشابهة في إطارات عمل أخرى، ومن بينها Angular.

نتيجةً لذلك، استشارت Aurora فريق Angular وNuxt لإنشاء نماذج أولية لمكوّنات الصور في إطارَي العمل هذين. تم إصدار مكوّن صورة Nuxt العام الماضي. تم الآن إصدار توجيه الصور في Angular (NgOptimizedImage) لضبط الإعدادات التلقائية لتحسين الصور في Angular.

الفرصة

‫Angular هي إحدى أطر عمل JavaScript الرائدة التي يستخدمها المطوّرون اليوم. ويستخدمه أكثر من 50 ألف مصدر يزحف إليه HTTPArchive على الأجهزة الجوّالة، ويحقّق تنزيلات أسبوعية تبلغ نحو 3 ملايين على NPM.

بالنظر إلى نتائج "مؤشرات أداء الويب الأساسية"، لا تزال النسبة المئوية لمواقع Angular الأصلية التي تستوفي حدود "الأداء الجيد" لمقياس LCP بحاجة إلى تحسين. في حزيران (يونيو) 2022، سجّلت نسبة 18.74% فقط من المواقع الإلكترونية التي تستخدم Angular قيمة LCP جيّدة على الأجهزة الجوّالة. بما أنّ الصور هي عنصر LCP لأكثر من% 70 من صفحات الويب على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، قد تكون صور LCP غير المحسّنة أحد الأسباب الرئيسية لانخفاض مقياس LCP على المواقع الإلكترونية المستندة إلى Angular.

تم تصميم توجيه الصورة في Angular للمساعدة في تحسين هذه الأرقام.

منتج الحد الأدنى (MVP) لتوجيه NgOptimizedImage

يستند المنتج القابل للعرض من توجيه الصور في Angular إلى الدروس المستفادة من مكونات الصور التي أنشأتها Aurora حتى الآن، مع تعديل التصميم وفقًا لتجربة المعالجة من جهة العميل في Angular. تمّت معالجة العديد من المشاكل الشائعة في تحسين الصور من خلال:

• توفير إعدادات تلقائية قوية
• عرض أخطاء أو تحذيرات لضمان الامتثال لأفضل الممارسات

في ما يلي أهم تفاصيل التصميم:

1. التحميل الكسول الذكي

   من الأفضل تحميل الصور بشكل بطيء إذا كانت غير مرئية للمستخدم عند تحميل الصفحة (مثل الصور التي تظهر أسفل الصفحة أو الصور المخفية في لوحة العرض الدوّارة). يُسهم التحميل البطيء في تحرير موارد المتصفّح لتحميل النصوص أو الوسائط أو النصوص البرمجية الأخرى المهمة. إنّ معظم الصور غير ضرورية ويجب تحميلها بشكل بطيء، ولكن لم تستخدم سوى 7.8% من الصفحات ميزة "التحميل البطيء" الأصلية في عام 2021.

   يُحمِّل توجيه الصور في Angular الصور غير المهمة بشكلٍ بطيء تلقائيًا ولا يحمِّل إلا الصور التي تم وضع علامة priority عليها خصيصًا. يضمن ذلك أن تعرِض معظم الصور سلوك التحميل الأمثل.

2. تحديد أولوية الصور المهمة

   إضافة تلميحات حول الموارد (مثل preload أو preconnect) لمنح الأولوية لتحميل الصور المهمة هي أفضل ممارسة مقترَحة. ومع ذلك، لا تستخدم معظم التطبيقات هذه الميزة. وفقًا لـ "منجم الويب لعام 2021"، لا تستخدم سوى 12.7% من صفحات الأجهزة الجوّالة إشارات الاتصال المُسبَق، ولا تستخدم سوى 22.1% من صفحات الأجهزة الجوّالة إشارات التحميل المُسبَق.

   يعمل توجيه الصور على جبهتَين عند وضع علامة "أولوية" على الصور.

   • ويضبط fetchpriority للصورة على "high" حتى يعرف المتصفّح أنّه يجب تنزيل الصورة بأولوية عالية.
   • في وضع المطوّر، يؤكّد التحقّق من وقت التشغيل أنّه تم تضمين تلميح مورد preconnect يتوافق مع مصدر الصورة.

   في وضع التطوير، يستخدم التوجيه أيضًا PerformanceObserver API للتحقّق من وضع علامة priority على صورة LCP على النحو المتوقّع. إذا لم يتم وضع علامة priority عليها، يتم عرض خطأ يطلب من المطوّر إضافة سمة priority إلى صورة LCP.

   في النهاية، يضمن هذا المزيج من التشغيل الآلي والامتثال أنّ صورة LCP تحتوي على تلميح preconnect، وقيمة سمة fetchpriority هي high، ولا يتم تحميلها بشكل بطيء.

3. إعدادات محسّنة لأدوات الصور الشائعة

   ننصح بأن تستخدم تطبيقات Angular خدمات CDN للصور، والتي غالبًا ما توفّر خدمات تحسين تلقائيًا.

   يشجع التوجيه على استخدام شبكات توصيل المحتوى (CDN) للصور من خلال توفير تجربة مطوّرين (DX) جذابة بشكل خاص لضبطها في التطبيق. وهو يتوافق مع واجهة برمجة تطبيقات أداة التحميل التي تتيح لك تحديد مقدّم شبكة توصيل المحتوى وعنوان URL الأساسي في الإعدادات. بعد الضبط، ما عليك سوى تحديد اسم مادة العرض في الترميز. على سبيل المثال،

   // in module providers:
   provideImgixLoader('https://mysite.net/assets/')
   
   // in markup
   <img ngSrc="image.png" >
   <img ngSrc="image2.png" >
   

   ويعادل ذلك تضمين علامات الصور التالية ويقلل من الترميز الذي يجب أن يُدرِجه المطوّرون لكل صورة.

   <img src="https://mysite.net/assets/image.png">
   <img src="https://mysite.net/assets/image2.png">
   

   توفّر وجهة الصورة أداة تحميل مدمجة مع الإعداد الأمثل لشبكات توصيل المحتوى (CDN) الأكثر رواجًا للصور. ستحدّد أدوات التحميل هذه تنسيق عناوين URL للصور تلقائيًا لضمان استخدام تنسيق الصورة وإعدادات الضغط المقترَحة لكل شبكة توصيل محتوى.

4. الأخطاء والتحذيرات المضمّنة

   بالإضافة إلى التحسينات المضمّنة أعلاه، يتضمّن التوجيه أيضًا عمليات تحقّق مضمّنة لضمان اتّباع المطوّرين لأفضل الممارسات المقترَحة في ترميز الصور. تُجري توجيهات الصور عمليات التحقّق التالية.

   1. الصور غير المحدّدة الحجم: يُرسِل توجيه الصورة خطأً إذا لم يحدِّد ترميز الصورة عرضًا وارتفاعًا واضحَين. يمكن أن تؤدي الصور غير المحدّدة الحجم إلى حدوث تغيّرات في التصميم، ما يؤثّر في مقياس "متغيّرات التصميم التراكمية" (CLS) للصفحة. وأفضل الممارسات المقترَحة لتجنُّب حدوث ذلك هي أن تحتوي الصور على سمتَي width وheight المحدّدتَين.

   2. نسبة العرض إلى الارتفاع: تُرسِل وجهة الصورة خطأ لإعلام المطوّرين إذا كانت نسبة العرض إلى الارتفاع width:height المحدّدة في HTML غير قريبة من نسبة العرض إلى الارتفاع الفعلية للصورة المعروضة. وقد يؤدي ذلك إلى ظهور الصورة بشكل مشوّه على الشاشة. يمكن أن يحدث ذلك في الحالات التالية:

      1. تحديد الأبعاد (العرض أو الارتفاع) غير الصحيحة عن طريق الخطأ
      2. إذا حدّدت سمة واحدة بنسبة مئوية في CSS، ولكن ليس السمة الأخرى (على سبيل المثال، يحتاج width: 100% إلى height: auto لضمان نمو الصورة في كلا السمتَين).

   3. الصور الكبيرة جدًا: إذا لم تحدّد الصورة قيمة لسمة srcset وكانت الصورة الأساسية أكبر بكثير من الصورة المعروضة، سيعرض التوجيه تحذيرًا يقترح استخدام السمتَين srcset وsizes.

   4. كثافة الصورة: سيُظهر التوجيه خطأً إذا حاولت تضمين صورة في srcset بكثافة بكسل تزيد عن 3x. لا يُنصح بشكل عام باستخدام أوصاف أعلى من 2x لأنّ ذلك يؤدي إلى نتيجة غير مقصودة تتمثل في إجبار الأجهزة الجوّالة العالية الدقة على تنزيل صور ضخمة. بالإضافة إلى ذلك، لا يمكن للعين البشرية تمييز فرق كبير في السرعة التي تزيد عن ضعف السرعة العادية.

التحديات

كان تكييف استراتيجيات تحسين الصور للعمل ضمن إطار عمل من جهة العميل هو التحدي الأساسي عند تصميم NgOptimizedImage. تجربة العرض التلقائية في Next.js هي العرض من جهة الخادم (SSR) أو إنشاء المواقع الإلكترونية الثابتة (SSG)، في حين أنّ تجربة العرض في Angular هي العرض من جهة العميل (CSR). على الرغم من أنّ Angular تتيح استخدام مكتبة العرض من جهة الخادم (SSR)‏ - angular/universal - تستخدم معظم تطبيقات Angular (حوالي %60) أسلوب العرض من جهة العميل (CSR).

تم إنشاء توجيه الصورة بالكامل لطلبات CSR من أجل التوافق مع حالة الاستخدام النموذجية في تطبيقات Angular. وقد فرض ذلك قيودًا إضافية، واضطر الفريق إلى إعادة التفكير في كيفية إنشاء تحسينات محدّدة لتطبيقات CSR.

في ما يلي بعض التحديات التي واجهناها:

1. ملاحظات حول الموارد الداعمة

   يساعد التحميل المُسبَق لمواد العرض المهمة المتصفّح في اكتشافها في وقت أبكر. ومع ذلك، فإنّ تضمين نصائح الموارد في تطبيقات Angular أمر معقّد للأسباب التالية:

   الإضافة اليدوية: يصعب على المطوّرين إضافة تلميح المرجع preload يدويًا. تستخدِم Angular ملف index.html مشترَكًا واحدًا للمشروع بأكمله أو لجميع المسارات في الموقع الإلكتروني. وبالتالي، يكون <head> للمستند هو نفسه لكل مسار (على الأقل في وقت العرض). ستؤدي إضافة أي تلميح preload إلى <head> إلى تحميل المورد مسبقًا لجميع المسارات حتى في الحالات التي لا يكون فيها ذلك مطلوبًا. وبالتالي، لا يُنصح بإضافة نصائح preload يدويًا.

   الإضافة التلقائية أثناء العرض: لا يساعد استخدام إطار العمل لإضافة إشارات التحميل المُسبَق إلى رأس المستند أثناء العرض في تطبيق CSR. وبما أنّ العرض يحدث بعد تنزيل JavaScript وتنفيذه، سيتم عرض <head> بعد فوات الأوان ولن يكون له أي قيمة.

   في الإصدار الأول من التوجيه، تُستخدَم مجموعة من التلميحَين preconnect وfetchpriority لمنح الأولوية للصورة بدلاً من preload. ومع ذلك، تعمل "أورورا" حاليًا مع فريق Angular CLI لتفعيل الحقن التلقائي لملاحظات الموارد في وقت الإنشاء. يُرجى متابعتنا للحصول على آخر الأخبار.

2. تحسين حجم الصورة وتنسيقها على الخادم

   بما أنّ تطبيقات Angular يتم عرضها عادةً من جهة العميل، لا يمكن ضغط الصور في نظام الملفات في وقت الطلب ويتم عرضها كما هي. لهذا السبب، ننصحك باستخدام خدمات CDN للصور لضغط الصور وتحويلها إلى تنسيقات حديثة مثل WebP أو AVIF عند الطلب.

   على الرغم من أنّ التوجيه لا يفرض استخدام خدمات CDN للصور، إلا أنّنا ننصح بشدة باستخدامها مع التوجيه وأدوات التحميل المدمجة فيه لضمان استخدام خيارات الضبط الصحيحة.

التأثير

يوضّح العرض التوضيحي التالي الفرق الذي يمكن أن يحدثه توجيه الصور في Angular في أداء الصور. تقارن هذه الميزة بين موقعَين إلكترونيَين:

الموقع الإلكتروني الأول: يستخدم عناصر <img> الأصلية مع الصور التي يتم عرضها من خلال شبكة Imgix CDN (مع خيارات الإعداد التلقائية).

الموقع الإلكتروني الثاني: استخدِم توجيه image لجميع الصور. ويشمل أيضًا التحسينات التي ينصح بها مباشرةً التحذيرات أو الأخطاء التي تطلقها التعليمات.

تعاون الفريق مع الشركاء للتحقّق من تأثير توجيه الصور على أداء تطبيقات Angular الفعلية للمؤسسات.

وكان أحد هؤلاء الشركاء هو Land's End. كان من المتوقّع أن يكون موقعه الإلكتروني نموذج اختبار جيدًا للنتائج التي قد تظهر للتطبيقات الحقيقية.

تم إجراء اختبارات Lighthouse التجريبية في بيئة تأكيد الجودة قبل استخدام توجيه الصور وبعده. على أجهزة الكمبيوتر المكتبي، انخفض متوسّط سرعة عرض أكبر محتوى مرئي من 12.0 ثانية إلى 3.0 ثانية، ما يمثّل تحسّنًا بنسبة% 75 في سرعة عرض أكبر محتوى مرئي. على الأجهزة الجوّالة، انخفض متوسّط سرعة عرض أكبر محتوى مرئي من 20.2 ثانية إلى 12.0 ثانية (تحسّن بنسبة% 40.6).

خارطة الطريق المستقبلية

هذه هي الدفعة الأولى فقط من تصميم توجيه الصور في Angular. هناك العديد من الميزات الأخرى المخطَّط لها في الإصدارات المستقبلية، بما في ذلك:

• دعم أفضل للصور المتجاوبة:

  يتيح NgOptimizedImage حاليًا استخدام srcset، ولكن يجب تقديم السمتَين srcset وsizes يدويًا لكل صورة. في المستقبل، يمكن أن تنشئ التوجيه سمتَي srcset وsizes تلقائيًا.

• الإدراج التلقائي لمعلومات حول الموارد

  قد يكون من الممكن الدمج مع Angular CLI لإنشاء علامات الربط المُسبَق والتحميل المُسبَق للصور المهمة في مقياس LCP.

• إتاحة Angular SSR

  تم تصميم إصدار المنتج النموذجي مع مراعاة قيود Angular CSR، ولكن سيكون من المهم أيضًا استكشاف حلول تحسين الصور لـ Angular SSR (angular/universal).

• تحسينات على تجربة المطوّرين

  يتطلّب NgOptimizedImage تحديد سمتَي width وheight لكل صورة. ومع ذلك، قد يكون تحديد هذه العناصر لكل صورة أمرًا مرهقًا لبعض المطوّرين. من الممكن تحسين تجربة المطوّر هنا في النسخة التالية على النحو التالي:

  1. أن تتيح وضعًا إضافيًا (يشبه خيار تنسيق الصورة "fill" في Next.js) لا يتطلّب تحديد عرض أو ارتفاع واضحَين
  2. استخدام دمج سطر الأوامر لضبط العرض والارتفاع تلقائيًا للصور المتوفرة على الجهاز من خلال تحديد الأبعاد الفعلية للصورة

الخاتمة

سيتوفّر توجيه الصور في Angular للمطوّرين على مراحل، بدءًا من إصدار معاينة المطوّرين في الإصدار 14.2.0. ننصحك بتجربة NgOptimizedImage وتقديم ملاحظاتك.

مع جزيل الشكر إلى "كاتي هامبينييس" و"أليكس كاسل" على مساهمتهما.