في أيار (مايو) 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 التي تستوفي حدود سرعة عرض أكبر محتوى مرئي. وسرعان ما تم تلقّي طلبات للحصول على ميزات مشابهة في أطر عمل أخرى، أحدها كان Angular.
نتيجةً لذلك، استشارت Aurora مع Angular وNuxt لوضع نماذج أوّلية لمكوّنات الصور لإطارَي العمل هذين. تم إصدار مكوِّن صورة Nuxt العام الماضي. تم الآن طرح توجيه الصور Angular (NgOptimizedImage) لضبط الإعدادات التلقائية لتحسين الصور على Angular.
الفرصة
Angular هو أحد أطر عمل JavaScript الرائدة التي يستخدمها المطوّرون اليوم. ويتم استخدامه من قِبل أكثر من 50 ألف من المصادر التي يتم الزحف إليها من خلال HTTPArchive على الأجهزة الجوّالة، ويتم تنزيل ما يقرب من 3 مليون أسبوعيًا على NPM.
استنادًا إلى نتائج "مؤشرات أداء الويب الأساسية"، لا تزال النسبة المئوية لأصول Angular التي تستوفي حدودًا "جيدة" لسرعة عرض أكبر محتوى مرئي (LCP) بحاجة إلى بعض الإجراءات. سجّلت 18.74% فقط من مواقع Angular الإلكترونية سرعة عرض LCP جيدة على الأجهزة الجوّالة في حزيران (يونيو) 2022. بما أنّ الصور هي عنصر LCP في أكثر من% 70 من صفحات الويب على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، قد تكون صور LCP غير المحسَّنة إحدى الأسباب الرئيسية لانخفاض سرعة عرض أكبر محتوى مرئي على مواقع Angular الإلكترونية.
وقد تم تصميم توجيه صور Angular للمساعدة في تحسين هذه الأرقام.
منتج MVP لتوجيه NgOptimizedImage
يعتمد الحد الأدنى القابل للتطبيق في توجيه الصور Angular على الدروس المستفادة من مكونات الصور التي صممتها Aurora حتى الآن، مع تكييف التصميم مع تجربة العرض من جهة العميل في Angular. تم حلّ العديد من المشاكل العادية المتعلّقة بتحسين الصور من خلال أحد الخيارَين التاليَين:
- استخدام إعدادات تلقائية قوية
- عرض الأخطاء أو التحذيرات لضمان الامتثال لأفضل الممارسات
في ما يلي النقاط البارزة في التصميم:
التحميل الكسول الذكي
يجب أن تكون الصور غير المرئية للمستخدم عند تحميل الصفحة (على سبيل المثال، صور الجزء السفلي غير المرئي من الصفحة أو صور لوحة العرض الدوّارة المخفية) بالتحميل الكسول. يساعد "التحميل الكسول" على توفير موارد المتصفّح لتحميل النصوص أو الوسائط أو النصوص البرمجية الأخرى المهمة. معظم الصور غير بالغة الأهمية ويجب تحميلها ببطء، ولكن فقط 7.8% من الصفحات استخدمت التحميل الكسول المحلي في عام 2021.
يعمل التوجيه الكسول للصور في Angular على تحميل الصور غير المهمة تلقائيًا، ولا يحمّل سوى الصور التي تم وضع علامة
priorityعليها بشكل خاص. وهذا يضمن أن معظم الصور تعرض سلوك التحميل الأمثل.إعطاء الأولوية للصور المهمة
يمكن أن تساعد إضافة تلميحات في الموارد (على سبيل المثال،
preloadأوpreconnect) لتحديد أولوية تحميل الصور المهمة هي إحدى أفضل الممارسات المقترَحة. ومع ذلك، لا تستخدمها معظم التطبيقات. وفقًا لـ "تقويم الويب" لعام 2021، تستخدم 12.7% فقط من الصفحات المتوافقة مع الأجهزة الجوّالة تلميحات الاتصال المسبق، و22.1% فقط من الصفحات المتوافقة مع الأجهزة الجوّالة تستخدم تلميحات التحميل المسبق.يعمل توجيه الصورة على واجهتين عندما يتم وضع علامة على الصور كأولوية.
- وهي تضبط أولوية جلب الصورة على "
"high"" كي يعرف المتصفّح أنّه يجب تنزيل الصورة بأولوية عالية. - في وضع التطوير، يؤكّد فحص بيئة التشغيل أنّه تم تضمين تلميح مورد
preconnectبما يتوافق مع مصدر الصورة.
في وضع التطوير، يستخدم التوجيه أيضًا واجهة برمجة تطبيقات PerformanceObserver للتحقّق من وضع علامة على صورة LCP بأنّه تم وضع علامة
priorityعلى النحو المتوقَّع. إذا لم يتم وضع علامةpriority، يتم عرض خطأ يطلب من المطوّر إضافة سمةpriorityإلى صورة مقياس LCP.في نهاية المطاف، تضمن هذه التركيبة للأساليب المبرمَجة والتوافق احتواء صورة LCP على تلميح
preconnectوقيمة سمةfetchpriorityبقيمةhighوألا يتم تحميلها باستخدام طريقة التحميل الكسول.- وهي تضبط أولوية جلب الصورة على "
الإعداد المحسَّن لأدوات الصور الشائعة
ننصح تطبيقات Angular بأن تستخدم شبكات توصيل محتوى (CDN) للصور، والتي غالبًا ما توفّر خدمات تحسين بشكل تلقائي.
يشجِّع التوجيه على استخدام شبكات توصيل المحتوى (CDN) للصور من خلال توفير تجربة جذابة خاصة للمطوّرين لإعدادها في التطبيق. وتتوافق هذه السياسة مع واجهة برمجة تطبيقات التحميل التي تتيح لك تحديد مزوّد شبكة توصيل المحتوى (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.
تم تصميم توجيه الصورة بالكامل لتتماشى مع حالة الاستخدام المعتادة في تطبيقات 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. هناك العديد من الميزات الأخرى التي تم التخطيط لإصدارها في المستقبل، ومنها:
دعم أفضل للصور المتجاوبة مع مختلف الأجهزة:
يمكن حاليًا استخدام
srcsetفيNgOptimizedImage، ولكن يجب تقديم السمتَينsrcsetوsizesيدويًا لكل صورة. وفي المستقبل، قد ينشئ هذا التوجيه السمتَينsrcsetوsizesتلقائيًا.الإدخال التلقائي لتلميحات الموارد
قد يكون من الممكن الدمج مع واجهة سطر الأوامر Angular لإنشاء علامات اتصال مسبق وتحميل علامات مسبقًا للصور ذات LCP المهمة.
دعم Angular SSR
تم تصميم إصدار MVP مع مراعاة قيود Angular CSR، ولكن سيكون من المهم أيضًا استكشاف حلول تحسين الصور في Angular SSR (الزاوية/العالمية).
تحسينات في تجربة المطوِّر
تتطلّب خدمة
NgOptimizedImageتحديد السمتَينwidthوheightلكل صورة. ومع ذلك، قد يكون تحديد هذه الأخطاء لكل صورة أمرًا مرهقًا لبعض المطوّرين. ويمكن تحسين تجربة المطوّر هنا في التكرار التالي على النحو التالي:- إتاحة وضع إضافي (على غرار خيار تنسيق الصورة "
fill" في Next.js) الذي لا يتطلب تحديد عرض/ارتفاع صريح. - استخدام دمج واجهة سطر الأوامر لضبط عرض وارتفاع الصور المحلية تلقائيًا عن طريق تحديد الأبعاد الفعلية للصورة.
- إتاحة وضع إضافي (على غرار خيار تنسيق الصورة "
الخلاصة
سيتم توفير توجيه صور Angular للمطوّرين على مراحل، بدءًا من إصدار معاينة المطوّر في الإصدار 14.2.0. يُرجى تجربة "NgOptimizedImage" وإرسال ملاحظات.
نشكر "كاتي هيمبينيوس" و"قلعة أليكس" على مساهماتهما.