أهم النصائح لتحسين أداء الويب

استخدِم srcset لاختيار حجم الصورة الصحيح تلقائيًا.

Sam Dutton

وفقًا لـ أرشيف HTTP، تزن صفحة الويب النموذجية على الأجهزة الجوّالة ما يزيد عن 2.6 ميغابايت، ويمثل أكثر من ثلثي هذا الوزن صور. هذه فرصة رائعة للتحسين!

متوسط وحدات بايت الصفحة المتوافقة مع الأجهزة الجوّالة حسب نوع المحتوى

ملخّص

• لا تحفظ صورًا يزيد حجمها عن حجم عرضها.
• احفظ أحجامًا متعددة لكل صورة واستخدِم السمة srcset للسماح للمتصفّح باختيار أصغرها. تحدّد القيمة w للمتصفِّح عرض كل إصدار:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

حفظ الصور بالحجم المناسب

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

ألقِ نظرة على الصور أدناه.

تبدوا متطابقتين تقريبًا، لكن حجم ملف إحداهما أكبر بـ 10 مرات من الأخرى.

عرض محفوظ: 1,000 بكسل، حجم الملف 184 كيلوبايت

عرض محفوظ: 300 بكسل، حجم الملف 16 كيلوبايت

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

بالنسبة إلى العرض الثابت، استخدِم الصور المحفوظة بالأبعاد نفسها المستخدَمة في حجم العرض.

لكن... ماذا لو اختلف حجم الشاشة؟

في عالم متعدد الأجهزة، لا تُعرض الصور دائمًا بحجم واحد ثابت.

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

...وماذا عن الأجهزة التي لا تحتوي على وحدات بكسل مثل شاشات Retina؟

مساعدة المتصفّح في اختيار حجم الصورة المناسب

ألن يكون من الرائع إتاحة كل صورة بأحجام مختلفة، ثم السماح للمتصفح باختيار الحجم الأنسب للجهاز وحجم العرض؟ ولسوء الحظ، هناك سمة catch-22 عندما يتعلق الأمر بتحديد أفضل صورة. ويجب أن يستخدم المتصفح أصغر صورة ممكنة، ولكن لا يمكنه معرفة عرض الصورة بدون تنزيلها للفحص.

يمكنك هنا استخدام srcset. تحفظ الصور بأحجام مختلفة، ثم أخبر المتصفح بعرض كل إصدار:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

توضح قيم w عرض كل صورة بالبكسل. على سبيل المثال، يخبر small.jpg 500w المتصفّح أنّ عرض small.jpg بحجم 500 بكسل. ويتيح ذلك للمتصفح اختيار أصغر صورة ممكنة، بناءً على نوع الشاشة وحجم إطار العرض، بدون الحاجة إلى تنزيل الصور للتحقق من حجمها.

تنبيه: srcset تقدّم معلومات للمتصفح عن العرض المحفوظ لكل ملف صورة. ولا يحدد حجم الصورة لعرض الصورة، وعليك استخدام CSS لعرض تلك الصورة.

يمكنك مشاهدة srcset عمليًا للصورة أدناه. إذا كنت تستخدم كمبيوتر محمول أو كمبيوتر مكتبي، فعليك تغيير حجم نافذة المتصفح وإعادة فتح هذه الصفحة. ثم استخدم لوحة الشبكة الخاصة بأدوات المتصفح لمعرفة الصورة التي تم استخدامها. (ستحتاج إلى إجراء ذلك في نافذة تصفّح متخفٍ أو نافذة خاصة، وإلا سيتم تخزين ملف الصورة الأصلي مؤقتًا).

كيف يمكنني إنشاء أحجام صور متعددة؟

يجب توفير مقاسات متعدّدة لكل صورة تريد استخدامها مع srcset.

بالنسبة إلى الصور لمرة واحدة، مثل صور الجزء الرئيسي، يمكنك حفظ أحجام مختلفة يدويًا. إذا كان لديك الكثير من الصور، مثل صور المنتجات، فستحتاج إلى أتمتتها. هناك نهجان لذلك.

دمج معالجة الصور في عملية التصميم

كجزء من عملية التصميم، يمكنك إضافة خطوات لإنشاء نُسخ مختلفة الأحجام من صورك. راجِع القسم "استخدام Imagemin لضغط الصور" للاطّلاع على مزيد من المعلومات.

استخدام خدمة صور

يمكن برمجة إنشاء الصور وتسليمها باستخدام خدمة تجارية مثل Cloudinary، أو نظيرها مفتوح المصدر، مثل Thumbor الذي تثبِّته وتديره بنفسك.

يمكنك تحميل صور عالية الدقة، وحينئذٍ تنشئ خدمة الصور تلقائيًا تنسيقات وأحجامًا مختلفة للصور وتعرضها استنادًا إلى معلَمات عناوين URL. على سبيل المثال، افتح نموذج الصورة هذا على Cloudinary وجرِّب تغيير القيمة w أو امتداد الملف في شريط عنوان URL.

تشتمل خدمات الصور أيضًا على ميزات أكثر تقدّمًا، مثل القدرة على تشغيل "الاقتصاص الذكي" لأحجام الصور المختلفة وعرض صور WebP تلقائيًا إلى المتصفّحات التي تتوافق مع التنسيق، بدلاً من ملفات JPEG، بدون تغيير إضافة الملف.

ملاحظة: يمكنك التحقّق من التنسيق الذي يتم إرساله باستخدام أدوات المتصفّح. بالنسبة إلى عنوان URL الخاص بالصورة أعلاه، يتم إرسال ملف WebP تلقائيًا إلى المتصفّحات المتوافقة مع WebP، بدون تغيير امتداد الملف .jpg.

ماذا لو كانت الصورة لا تبدو صحيحة بأحجام مختلفة؟

في هذه الحالة، عليك استخدام العنصر <picture> لتنفيذ "اتجاه الرسومات" من خلال توفير صورة أو صورة مختلفة واقتصاصها بأحجام مختلفة. لمزيد من المعلومات، يمكنك الاطّلاع على الدرس التطبيقي حول ترميز "الاتجاه الفني".

ماذا عن كثافة وحدات البكسل؟

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

يمكن أن يؤثر ذلك في الحجم الذي تحتاجه لحفظ صورك. لن ندخل في التفاصيل الدموية هنا، ولكن يمكنك معرفة المزيد من خلال الدرس التطبيقي حول الترميز "Useكاتدرائية" (استخدام أدوات وصف الكثافة).

ماذا عن حجم عرض الصورة؟

يمكنك استخدام sizes لتحسين أداء "srcset".

وبدون إضافة العلامة، يستخدم المتصفّح العرض الكامل لإطار العرض عند اختيار صورة من srcset. تحدّد السمة sizes للمتصفّح بالعرض الذي سيتم عرضه عنصر الصورة، لكي يستطيع المتصفّح اختيار أصغر ملف صورة ممكن، وذلك قبل إجراء أي عمليات حسابية للتنسيق.

في المثال الوارد أدناه، يخبر sizes="50vw" المتصفّح بأنّه سيتم عرض هذه الصورة بنسبة% 50 من عرض إطار العرض.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

يمكنك الاطّلاع على ذلك عمليًا من خلال simpl.info/sizes و"تحديد عرض خانات متعددة".

تنبيه: sizes تقدّم معلومات إلى المتصفّح عن عرض عنصر صورة. وكما هي الحال في srcset، لا يحدد حجم الصورة حجم العرض، بل تحتاج إلى CSS لتنفيذ ذلك.

ماذا عن التوافق مع المتصفّح؟

srcset وsizes متوافقان مع أكثر من 90% من المتصفحات في جميع أنحاء العالم.

إذا لم يتوافق المتصفّح مع السمة srcset أو sizes، سيتم استخدام السمة src فقط.

يؤدي ذلك إلى إجراء تحسينات تدريجية رائعة على srcset وsizes.

مزيد من المعلومات

ألقِ نظرة على قسم "تحسين الصور" في web.dev للاطّلاع على معلومات أكثر تفصيلاً حول تحسين الصور. للحصول على تجربة موجهة بشكل أكبر، فكّر في تجربة دورة "الصور سريعة الاستجابة" التي يقدمها Udacity.

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