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

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

Sam Dutton

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

ملخّص

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

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

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

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

اطّلِع على الصور أدناه.

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

حجم ملف الصورة الأولى أكبر بكثير لأنّه تم حفظه بأبعاد أكبر بكثير من حجم الشاشة. يتم عرض كلتا الصورتين بعرض ثابت يبلغ 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 في الصورة أدناه. إذا كنت تستخدم كمبيوترًا محمولًا أو كمبيوتر مكتبيًا، غيِّر حجم نافذة المتصفّح وأعِد فتح هذه الصفحة. بعد ذلك، استخدِم لوحة "الشبكة" في أدوات المتصفّح لمعرفة الصورة التي تم استخدامها. (ستحتاج إلى إجراء ذلك في نافذة التصفح المتخفي أو نافذة خاصة، وإلا سيتم تخزين ملف الصورة الأصلي مؤقتًا).

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

عليك توفير أحجام متعددة لكل صورة تريد استخدامها مع srcset.

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

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

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

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

يمكن إنشاء الصور وتسليمها تلقائيًا باستخدام خدمة تجارية مثل Cloudinary أو خدمة مماثلة مفتوحة المصدر مثل Thumbor يمكنك تثبيتها وتشغيلها بنفسك.

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

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

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

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

ماذا عن كثافة البكسل؟

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

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

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

يمكنك استخدام 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 والدرس التطبيقي "تحديد عروض خانات متعددة".

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

تتوافق srcset وsizes مع أكثر من %90 من المتصفّحات على مستوى العالم.

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

وهذا يجعل srcset وsizes تحسينات تدريجية رائعة.

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

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