أفضل تحسين لتحميل الصور

تُظهر الدراسات أن تأخير ثانية واحدة في تحميل الصور يؤدي إلى انخفاض في التحويلات بنسبة 7٪، وعدد المشاهدات بنسبة 11٪، ورضا العملاء بنسبة 16٪.

في Spurtcommerce، وهو حل تجارة إلكترونية مفتوح المصدر مبني على NodeJS وAngular، استخدمنا أفضل المنهجيات لتحسين ميزة تحميل الصور. لقد قمنا بتحسين العملية بالكامل إلى أقصى حد بحيث تصبح عملية تحميل الصور سريعة، دون أن يضطر الزائرون إلى الانتظار طويلاً للحصول على عرض سريع للمنتج.

لقد اتبعنا ثلاث خطوات رئيسية عند تحسين عملية تحميل الصور في Spurtcommerce.

الخطوة 1: تحميل الصور في حاوية Amazon AWS S3

الصورة التي يقوم البائع أو المسؤول بتحميلها من خلال لوحة التحكم الخاصة بهم عند إضافة منتج، يتم استقبالها كما هي من قبل النظام ويتم تخزينها في حاوية S3.

الخطوة 2: وظيفة Lambda لتحديد أبعاد مختلفة لقص الصور عند الطلب.

في الخطوة التالية، قمنا بكتابة وظيفة Lambda، وهي برنامج يحدد أبعادًا مختلفة لقص الصور عند الطلب. من خلال هذا البرنامج، تقوم بتحديد الأبعاد المختلفة التي يجب قص الصور إليها. كما تقوم أيضًا بمنع الأبعاد الأخرى من القص، بخلاف الأبعاد التي قمت بتحديدها. لذلك، يجب أن تكون واضحًا تمامًا عند تحديد الأبعاد هنا.

بناءً على طلبات المستخدمين النهائيين، يتم قص الصور عند الطلب في تلك اللحظة ويتم عرضها.

لماذا نستخدم وظيفة Lambda؟

من أجل الحفاظ على التوازي في الأداء، عندما يكون هناك عدد كبير من الزوار يتصفحون المنصة ويطلبون تحميل صور متعددة، فإن وجود وظيفة Lambda مستقلة تُعرّف أبعاد الصور المختلفة لقصها عند الطلب يعتبر خيارًا مناسبًا.

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

وبالتالي، ستتجنب إضافة صور إضافية لأحجام مختلفة، وبدلاً من ذلك ستحافظ على صورة رئيسية واحدة فقط لكل منتج في حاوية S3، مع إمكانية إعادة تحجيمها عدة مرات من خلال وظيفة Lambda.

الخطوة 3: التكامل مع CloudFront

عند وجود طلب من العميل، يقوم CloudFront بنداء الـ API والاتصال مع S3 وLambda. ثم يتم جلب الصورة المحددة من S3، وقصها وتحجيمها من خلال وظيفة Lambda، ثم تسليمها للمستخدم النهائي عبر طبقة CDN. تقوم طبقة CDN بتخزين النسخة المؤقتة (الكاش) لجميع المواقع في شبكة التوصيل المحددة. وتحتوي شبكة CDN الرئيسية على عدة شبكات فرعية يتم فيها تخزين كاش الصور المختلفة. وعند تكرار الطلب من المستخدم النهائي، بدلاً من تكرار العملية بالكامل، يتم تسليم الصورة المؤقتة من أقرب شبكة توزيع، مما يجعل عملية تسليم الصور أسرع.

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