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

استخدِم 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.