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

Kara Erickson
Kara Erickson
Leena Sohoni
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 التي تستوفي حدود سرعة عرض أكبر محتوى مرئي. وسرعان ما تم تلقّي طلبات للحصول على ميزات مشابهة في أطر عمل أخرى، أحدها كان Angular.

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

الفرصة

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

مقياس LCP لمواقع Angular الإلكترونية خلال العام الماضي.

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

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

منتج MVP لتوجيه NgOptimizedImage

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

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

في ما يلي النقاط البارزة في التصميم:

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

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

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

  2. إعطاء الأولوية للصور المهمة

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

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

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

    في وضع التطوير، يستخدم التوجيه أيضًا واجهة برمجة تطبيقات PerformanceObserver للتحقّق من وضع علامة على صورة LCP بأنّه تم وضع علامة priority على النحو المتوقَّع. إذا لم يتم وضع علامة 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.

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

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

  1. التلميحات المتعلّقة بالمراجع الداعمة

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

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

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

    في الإصدار الأول من التوجيه، تعمل مجموعة تلميحات preconnect وتلميحات fetchpriority على منح الأولوية للصورة بدلاً من preload. مع ذلك، تعمل أداة Aurora حاليًا مع فريق Angular CLI على تفعيل الإضافة التلقائية للتلميحات المتعلّقة بالموارد في وقت التصميم. لذا، تابِع دومًا أخبارنا.

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

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

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

التأثير

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

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

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

مقارنة شريط الصور: الموقع الإلكتروني الأول الذي يتضمّن علامات صور أصلية مقابل الموقع الإلكتروني الثاني من خلال توجيه الصور Angular.

تعاون الفريق مع شركاء للتحقّق من تأثير أداء توجيه الصورة على تطبيقات 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 لكل صورة. ومع ذلك، قد يكون تحديد هذه الأخطاء لكل صورة أمرًا مرهقًا لبعض المطوّرين. ويمكن تحسين تجربة المطوّر هنا في التكرار التالي على النحو التالي:

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

الخاتمة

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

مع شكر خاص لكاتي هيمبينيوس وقلعة أليكس على مساهمتهما.