تشارك شركة جوجل Google، ست طرق لجعل موقع الويب الخاص بك يقوم بتحميل الصور بشكل أسرع وأكثر كفاءة. في فيديو جديد من Google .

بينما يستهدف الفيديو تحديدًا مواقع التجارة الإلكترونية ، فإن النصيحة تنطبق على أي موقع ويب يقدم عددًا كبيرًا من الصور. تسجيل الفيديو بأكثر من 14 دقيقة ، يعد مقطع فيديو Google الكثير الذي يجب استيعابه إذا كنت مشغولاً بالعمل على مواقع الويب.

إليك خلاصة أكثر قبولا يمكنك تناولها في أقل من خمس دقائق.

هذه هي نصائح جوجل Google لجعل تحميل الصور أسرع وأكثر كفاءة.

•  القضاء على إزاحة التخطيط التراكمي للصور (CLS)

يشير CLS إلى الحالات التي يتحرك فيها المحتوى على الصفحة بصريًا ، أو ينتقل ، من مكان إلى آخر أثناء تحميله.

في حين أن هذه المشكلة لا تنتج حصريًا عن الصور ، إلا أنها يمكن أن تساهم في المشكلة إذا تم استخدامها بشكل غير صحيح.

في معظم الحالات ، من السهل تحديد CLS من خلال البحث عن الحركة على الصفحة أثناء التحميل ، ولكن هناك العديد من الأدوات لقياسها.

لمزيد من المعلومات حول CLS ، وكيفية قياسه ، وكيفية إصلاحه ، راجع دليلنا الشامل:

راجع : تغيير التخطيط التراكمي – نظرة عامة على عامل تصنيف Google لعام 2021

•  حجم صورك بشكل صحيح 

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

إذا قام المستعرض بقص الصورة من تلقاء نفسه ، فسيصبح حجم التنزيل أطول من المطلوب ، مما يؤدي فقط إلى سحب الأشياء لأسفل. تتمثل إحدى الطرق السهلة لاكتشاف الصور ذات الحجم غير الصحيح في استخدام قسم الصور ذات الحجم المناسب ضمن “الفرص” في تقرير PageSpeed ​​Insights .

بمجرد تحديد الصور الأكبر من اللازم ، يمكنك حل المشكلة بالحلول مثل الصور المتجاوبة.

• استخدم أفضل تنسيق ملف صورة

فكر في تنسيق ملف صورك ، مثل استخدام ملفات PNG أو JPEG أو webP.

يؤثر تنسيق الملف على حجم الملف ، لذا يتطلب اختيار التنسيق المناسب دراسة متأنية.

هناك إيجابيات وسلبيات يجب تقييمها لكل تنسيق. على سبيل المثال ، تميل ملفات JPEG و webP إلى أن تكون ذات أحجام ملفات أقل ، على الرغم من أن الحجم الأصغر يتحقق على حساب جودة الصورة.

ومع ذلك ، قد لا يلاحظ المتسوقون تدهور جودة الصورة ، وقد تكون فائدة السرعة كبيرة.

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

• ضغط الصور بشكل مناسب

استخدم عامل الجودة المناسب لصورك لترميزها بكفاءة مع الحفاظ على جودة الصورة المطلوبة.

يمكن استخدام قسم تشفير الصور بكفاءة في تقرير PageSpeed ​​Insights لتحديد الصور التي تعد مرشحة جيدًا لتحسين الضغط. يعرض التقرير أيضًا التوفير المحتمل في حجم الملف. للعثور على عامل جودة أنت راضٍ عنه ، استخدم اختيارك لأداة تحويل الصور على عدة صور باستخدام قيم جودة مختلفة وقارن بين ما قبلها وبعدها.

توصي Google بموقع Squoosh.app كطريقة سهلة لمقارنة الصور مع وبدون ضغط.

•  تخزين الصور في المتصفح

أخبر المتصفح عن المدة التي يمكنه خلالها تخزين الصور مؤقتًا بأمان. عند إرجاع صورة ، يمكنك إرجاع رأس استجابة HTTP مع إرشادات التخزين المؤقت ، مثل المدة التي يوصى بها للمتصفح لتخزين صورة مؤقتًا.

مرة أخرى ، يمكنك استخدام تقرير PageSpeed ​​Insights لاكتشاف ما إذا كانت رؤوس ذاكرة التخزين المؤقت لاستجابة HTTP قد تم تعيينها بشكل صحيح على موقعك.

تحدد مواد العرض الثابتة مع قسم سياسة ذاكرة التخزين المؤقت الفعال الصور التي قد تستفيد من تحسينات التخزين المؤقت.

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

إذا لم تقم بتغيير الصور بشكل متكرر ، فيمكنك تعيين عمر طويل لذاكرة التخزين المؤقت.

• الترتيب الصحيح لتنزيلات الصور الخاصة بك

كنصيحة أكثر تقدمًا ، توصي Google بالتسلسل الصحيح لتنزيل موارد صفحة الويب.

يُنصح بترتيب التنزيل التالي:

1. صور البطل في الجزء العلوي من الصفحة.
2. صور أخرى في الجزء المرئي من الصفحة.
3. الصور فقط أسفل الطية.

يمكن تحميل بقية الصور الموجودة على صفحة الويب ببطء. لاكتشاف ما إذا كان موقعك يقوم بتحميل الصور بكفاءة ، يمكنك الرجوع إلى تقرير PageSpeed ​​Insights. في قسم ” تأجيل الصور خارج الشاشة ” من التقرير ، سترى قائمة بالصور التي يمكن تحميلها بعد الصور الأخرى.