في أيار (مايو) 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.
نتيجةً لذلك، تشاورت "أورورا" مع 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. تمت معالجة العديد من مشاكل تحسين الصور العادية من خلال أي مما يلي:
- توفير إعدادات افتراضية قوية.
- عرض الأخطاء أو التحذيرات لضمان الامتثال لأفضل الممارسات
أبرز ما في التصميم هي كما يلي:
التحميل الكسول الذكي
يجب أن تكون الصور غير المرئية للمستخدم عند تحميل الصفحة (على سبيل المثال، الصور في الجزء السفلي غير المرئي من الصفحة أو صور لوحة العرض الدوّارة المخفية) بالتحميل الكسول. تؤدي عملية "التحميل الكسول" إلى توفير موارد المتصفّح لتحميل نصوص أو وسائط أو نصوص برمجية مهمة أخرى. معظم الصور ليست أساسية ويجب أن يتم تحميلها ببطء، ولكن في عام 2021، استخدمت 7.8% من الصفحات طريقة "التحميل الكسول" الأصلية.
عند استخدام التوجيه الكسول للصور في Angular، يتم تحميل الصور غير المهمة تلقائيًا، كما يحمِّل الصور التي تم وضع علامة
priorityعليها في الحالتَين التاليتَين. ويضمن ذلك أن تعرض معظم الصور سلوكًا مثاليًا للتحميل.تحديد أولوية الصور المهمة
إضافة تلميحات الموارد (مثل،
preloadأوpreconnect) لمنح الأولوية لتحميل الصور المهمة، ما مِن أفضل الممارسات المقترَحة. ومع ذلك، لا تستخدمها معظم التطبيقات. وفقًا لمؤشرات أداء الويب لعام 2021، تستخدم 12.7% فقط من الصفحات المتوافقة مع الأجهزة الجوّالة تلميحات الاتصال المسبق في حين تستخدم 22.1% فقط من الصفحات المتوافقة مع الأجهزة الجوّالة تلميحات التحميل المسبق.يعمل توجيه الصورة على جبهتَين عند وضع علامة على الصور بأنّها ذات أولوية.
- وتضبط هذه السياسة أولوية جلب الصورة على
"high"بحيث يعرف المتصفّح أنّه يجب تنزيل الصورة بأولوية عالية. - في وضع التطوير، تؤكّد عملية التحقّق في وقت التشغيل أنّه تم تضمين تلميح لمورد
preconnectبما يتوافق مع أصل الصورة.
في وضع التطوير، يستخدم التوجيه أيضًا واجهة برمجة تطبيقات PerformanceMonitorer للتحقّق من أنّه تم وضع علامة
priorityعلى صورة LCP على النحو المتوقّع. وإذا لم يتم وضع العلامةpriority، سيظهر خطأ يطلب من المطوّر إضافة سمةpriorityإلى صورة LCP.وفي نهاية الأمر، تضمن عملية التشغيل الآلي والتوافق هذه أن تحتوي صورة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) على تلميح
preconnect، وقيمة سمةfetchpriorityتساويhigh، وألا يتم التحميل الكسول.- وتضبط هذه السياسة أولوية جلب الصورة على
ضبط محسَّن لأدوات الصور الشائعة
يوصى بأن تستخدم تطبيقات Angular شبكات توصيل المحتوى (CDN) للصور، والتي غالبًا ما توفّر خدمات تحسين بشكل تلقائي.
يشجع هذا التوجيه على استخدام شبكات توصيل المحتوى (CDN) للصور من خلال توفير تجربة مطوّر برامج (DX) جذابة بشكل خاص لإعدادها في التطبيق. وهو يتوافق مع واجهة برمجة تطبيقات أداة التحميل التي تتيح لك تحديد موفر شبكة توصيل المحتوى (CDN) وعنوان 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 للصور تلقائيًا لضمان استخدام إعدادات تنسيق الصورة وتنسيقها المقترحة لكل شبكة توصيل للمحتوى.
الأخطاء والتحذيرات المضمَّنة
بالإضافة إلى التحسينات المضمّنة أعلاه، يتضمّن هذا التوجيه أيضًا عمليات تحقُّق مضمَّنة للتأكّد من أنّ المطوِّرين قد اتّبعوا أفضل الممارسات المقترَحة في ترميز الصور. يُجري توجيه الصورة عمليات الفحص التالية.
صور بلا حجم: يعرض توجيه الصورة خطأ إذا لم يحدد ترميز الصورة عرضًا وارتفاعًا صريحين. يمكن أن تتسبب الصور التي لا يتم تغيير حجمها في متغيّرات التصميم، ما يؤثر في مقياس "متغيّرات التصميم التراكمية" (CLS) للصفحة. لتجنّب ذلك، ننصح بتحديد السمتَين
widthوheightفي الصور.نسبة العرض إلى الارتفاع: يعرض توجيه الصورة خطأ لإعلام المطوّرين بما إذا كانت نسبة العرض إلى الارتفاع
width:heightالمحدّدة في HTML لا قريبة من نسبة العرض إلى الارتفاع الفعلية للصورة المعروضة. قد يتسبب هذا في أن تبدو الصورة مشوهة على الشاشة. يمكن أن يحدث هذا إذا- تحديد الأبعاد الخاطئة (العرض أو الارتفاع) عن طريق الخطأ أو
- في حال تحديد سمة واحدة حسب النسبة المئوية في خدمة مقارنة الأسعار (CSS) بدون الأخرى (على سبيل المثال، تحتاج السمة
width: 100%إلى السمةheight: autoلضمان نمو الصورة في كلتا السمتَين).
الصور الكبيرة الحجم: إذا لم تحدِّد الصورة
srcsetوكانت الصورة الأساسية أكبر بكثير من الصورة المعروضة، ستعرض التوجيه تحذيرًا يشير إلى استخدام السمتَينsrcsetوsizes.كثافة الصورة: سيحصل التوجيه على خطأ إذا حاولت تضمين صورة في
srcsetبكثافة وحدات بكسل تزيد عن3x. لا ننصح عادةً باستخدام أدوات الوصف التي يزيد حجمها عن2xلأنّها تؤدي إلى إجبار الأجهزة الجوّالة العالية الدقة على تنزيل صور كبيرة الحجم. علاوةً على ذلك، لا يمكن للعين البشرية معرفة الكثير من الفارق الذي يزيد عن الضعف.
التحديات
شكّلت تكييف استراتيجيات تحسين الصور للعمل ضمن إطار عمل من جهة العميل تحدّيًا أساسيًا عند تصميم "NgOptimizedImage". تكون تجربة العرض التلقائية في Next.js هي العرض من جهة الخادم (SSR) أو إنشاء المواقع الثابتة (SSG)، بينما في Angular هو العرض من جهة العميل (CSR). على الرغم من أن Angular يتوافق مع مكتبة SSR - angular/universal - معظم تطبيقات Angular (%60 تقريبًا) تستخدم CSR.
تم تصميم توجيه الصورة بالكامل من أجل CSR لكي يتوافق مع حالة الاستخدام المعتادة في تطبيقات Angular. وضع ذلك قيودًا إضافية، وكان على الفريق إعادة التفكير في كيفية إنشاء تحسينات محددة لتطبيقات CSR.
في ما يلي بعض التحديات التي واجهتها:
تقديم تلميحات عن المراجع
إنّ التحميل المُسبق لمواد العرض المهمة يساعد المتصفّح في رصدها في مرحلة مبكرة. ومع ذلك، فإن تضمين تلميحات الموارد في تطبيقات Angular معقد للأسباب التالية:
الإضافة اليدوية: من الصعب على المطوّرين إضافة تلميح مرجع
preloadيدويًا. يستخدم Angular ملف index.html مشتركًا واحدًا للمشروع بأكمله أو لجميع المسارات في موقع الويب. وبالتالي، تكون السمة<head>في المستند هي نفسها لكل مسار (على الأقل في وقت العرض). وتعني إضافة أي تلميحpreloadإلى<head>أنّه سيتم تحميل المورد مسبقًا لجميع المسارات حتى عندما لا يكون مطلوبًا. وبالتالي، لا يُنصح بإضافة تلميحاتpreloadيدويًا.الإضافة التلقائية أثناء العرض: لن يساعد استخدام إطار العمل في إضافة تلميحات عن التحميل المُسبق إلى رأس المستند أثناء العرض في تطبيق CSR. وبما أنّ العرض يحدث بعد تنزيل JavaScript وتنفيذها، سيتم عرض
<head>متأخرًا جدًا عن أي قيمة.في الإصدار الأول من التوجيه، تعمل مجموعة من تلميحات
preconnectوتلميحاتfetchpriorityعلى منح الأولوية للصورة بدلاً منpreload. ومع ذلك، تعمل Aurora حاليًا مع فريق Angular CLI لتفعيل ميزة إدخال تلميحات الموارد تلقائيًا في وقت الإنشاء، لذا تابِع أخبارنا.تحسين حجم الصور وتنسيقها على الخادم
بما أنّ تطبيقات Angular يتم عرضها عادةً من جهة العميل، لا يمكن ضغط الصور في نظام الملفات في وقت الطلب وعرضها كما هي. لهذا السبب، يُنصح باستخدام شبكات توصيل الصور (CDN) لضغط الصور وتحويلها إلى تنسيقات حديثة مثل WebP أو AVIF عند الطلب.
وعلى الرغم من أنّ التوجيه لا يفرض استخدام شبكات توصيل المحتوى (CDN) للصور، فإنّنا ننصح بشدة باستخدامها مع التوجيه، وستضمن برامج التحميل المضمّنة فيه استخدام خيارات الضبط الصحيحة.
التأثير
يوضح العرض التوضيحي التالي الفرق الذي يمكن أن يحدثه توجيه الصور Angular في أداء الصور. يقارن بين موقعين إلكترونيين:
الموقع الإلكتروني الأول: يستخدم عناصر <img> الأصلية مع الصور التي يتم عرضها من خلال Imgix CDN (بخيارات الإعداد التلقائية).
الموقع الإلكتروني الثاني: استخدِم توجيه الصور في جميع الصور. ويشمل أيضًا التحسينات المقترَحة مباشرةً من خلال التحذيرات أو الأخطاء الناتجة عن التوجيه.
وقد تعاون الفريق مع الشركاء للتحقّق من صحة تأثير أداء توجيه الصور في تطبيقات Angular الحقيقية للمؤسسات.
وكان أحد هؤلاء الشركاء Land's End. وكان من المتوقع أن يكون الموقع حالة اختبار جيدة للنتائج التي قد تطلعها التطبيقات الحقيقية.
تم إجراء اختبار Lighthouse المعملي على بيئة ضمان الجودة قبل استخدام توجيه الصورة وبعده. على أجهزة الكمبيوتر المكتبي، انخفض متوسط سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) من 12.0 ثانية إلى 3.0 ثانية، ما ساهم في تحسُّن بنسبة% 75 في سرعة LCP. أمّا على الأجهزة الجوّالة، فقد انخفض متوسط قيمة LCP من 20.2 ثانية إلى 12.0 ثانية (تحسن بنسبة% 40.6).
خارطة الطريق للمستقبل
هذه هي النسخة الأولى فقط من التصميم لتوجيه الصور Angular. هناك العديد من الميزات الأخرى المُخطط لها في الإصدارات المستقبلية، بما في ذلك:
دعم أفضل للصور المتجاوبة:
يتيح
NgOptimizedImageحاليًا استخدامsrcset، ولكن يجب تقديم السمتَينsrcsetوsizesيدويًا لكل صورة. في المستقبل، قد ينشئ التوجيه السمتَينsrcsetوsizesتلقائيًا.الإدخال التلقائي لتلميحات الموارد
قد يكون من الممكن الدمج مع Angular CLI لإنشاء علامات الربط المسبق والتحميل المُسبق لصور LCP المهمة.
دعم Angular SSR
تم تصميم نسخة MVP مع مراعاة قيود Angular CSR، ولكن سيكون من المهم أيضًا استكشاف حلول تحسين الصور لنظام Angular SSR (الزاوي/العالمي).
تحسينات على تجربة المطوّرين
تتطلّب ميزة
NgOptimizedImageتحديد السمتَينwidthوheightلكل صورة. مع ذلك، قد يكون تحديد هذه التفاصيل لكل صورة أمرًا مرهقًا لبعض المطوّرين. هناك إمكانية لتحسين تجربة المطوّر هنا في التكرار التالي على النحو التالي:- دعم وضع إضافي (يشبه خيار تنسيق الصورة "
fill" في Next.js) الذي لا يتطلب تحديد عرض/ارتفاع صريح. - استخدام دمج واجهة سطر الأوامر لضبط العرض والارتفاع للصور المحلية تلقائيًا من خلال تحديد الأبعاد الفعلية للصورة.
- دعم وضع إضافي (يشبه خيار تنسيق الصورة "
الخلاصة
سيتوفّر توجيه الصور Angular للمطوّرين على مراحل، بدءًا بإصدار معاينة المطوّرين في الإصدار 14.2.0. ننصحك بتجربة "NgOptimizedImage" وتقديم ملاحظاتك وآرائك.
شكر خاص لـ "كاتي هيمبينيوس" و"أليكس كاسل" على مساهماتهما.