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

Demián Renzulli

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

المتطلبات الأساسية

يفترض هذا الدليل أنّك على دراية بأدوات مطوري البرامج في Chrome. يمكنك بدلاً من ذلك استخدام أدوات مطوّري البرامج في متصفّح آخر إذا كنت تفضّل ذلك. ستحتاج فقط إلى ربط لقطات الشاشة من "أدوات مطوري البرامج في Chrome" في هذا الدليل بالميزات ذات الصلة في متصفّحك الذي تختاره.

فهم صور الخلفية المتجاوبة مع مختلف الأجهزة

أولاً، حلِّل حركة بيانات الشبكة في العرض التوضيحي غير المُحسَّن:

1. افتح العرض التوضيحي غير المحسَّن في علامة تبويب جديدة في Chrome.
2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
3. انقر على علامة التبويب الشبكة.
4. إعادة تحميل الصفحة

سيظهر لك أنّ الصورة الوحيدة المطلوبة هي background-desktop.jpg، والتي يبلغ حجمها 1006 كيلوبايت:

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

يمكنك الاطّلاع على الأنماط التي تتحكّم في صورة الخلفية في style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

في ما يلي معنى كل سمة من الخصائص المستخدمة:

• background-position: center center: توسيط الصورة عموديًا وأفقيًا.
• background-repeat: no-repeat: عرض الصورة مرة واحدة فقط
• background-attachment: fixed: تجنَّب أن يتم تمرير صورة الخلفية.
• background-size: cover: غيِّر حجم الصورة بحيث تغطي الحاوية بالكامل.
• background-image: url(images/background-desktop.jpg): عنوان URL للصورة

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

هناك بعض القيود على استخدام صورة خلفية واحدة لجميع أحجام الشاشة:

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

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

استخدام الاستعلامات عن الوسائط

يعد استخدام الاستعلامات عن الوسائط أسلوبًا شائعًا للإعلان عن أوراق الأنماط التي لن يتم تطبيقها إلا على أنواع معينة من الوسائط أو الأجهزة. ويتم تنفيذها باستخدام قواعد@media، ما يتيح لك تحديد مجموعة من نقاط التوقف حيث يتم تحديد أنماط معيّنة. عند استيفاء الشروط التي تحدّدها القاعدة @media (مثل عرض شاشة معيّن)، سيتم تطبيق مجموعة الأنماط المحدّدة داخل نقطة الإيقاف.

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

• في style.css، أزِل السطر الذي يحتوي على عنوان URL لصورة الخلفية:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• بعد ذلك، أنشئ نقطة توقف لكل عرض شاشة، بناءً على الأبعاد الشائعة بالبكسل التي عادةً ما تحتوي عليها شاشات الأجهزة المحمولة والأجهزة اللوحية وسطح المكتب:

بالنسبة إلى الأجهزة الجوّالة:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

للأجهزة اللوحية:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

بالنسبة إلى أجهزة الكمبيوتر المكتبي:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

افتح الإصدار المُحسَّن من style.css في متصفحك للاطّلاع على التغييرات التي تم إجراؤها.

القياس للأجهزة المختلفة

بعد ذلك، يمكنك تصور الموقع الناتج بأحجام شاشات مختلفة وفي أجهزة الجوّال التي تمت محاكاتها:

1. افتح الموقع الإلكتروني المحسَّن في علامة تبويب جديدة في Chrome.
2. جعل إطار العرض ضيّق (أقل من 480px)
3. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
4. انقر على علامة التبويب الشبكة.
5. إعادة تحميل الصفحة لاحظ كيف تم طلب صورة background-mobile.jpg.
6. تكبير إطار العرض بعد أن يصبح العرض أكبر من 480px، يُرجى ملاحظة كيف تم طلب "background-tablet.jpg". بعد أن يصبح العرض أكبر من 1025px، يُرجى ملاحظة كيف تم طلب "background-desktop.jpg".

وعند تغيير عرض شاشة المتصفّح، يتم طلب صور جديدة.

وبالتحديد عندما يكون العرض أقل من القيمة المحددة في نقطة إيقاف الجوال (480 بكسل)، سيظهر لك سجل الشبكة التالي:

حجم الخلفية الجديدة للأجهزة الجوّالة أصغر بنسبة 67% من حجم خلفية سطح المكتب.

التأثير على سرعة عرض أكبر محتوى مرئي (LCP)

تُعد العناصر التي تتضمّن صور خلفية CSS عناصر مرشحة لمقياس سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، ومع ذلك، لا يمكن لأداة فحص التحميل المسبق في المتصفّح اكتشاف صور خلفية CSS، ما يعني أنك قد تؤخّر سرعة LCP لموقعك الإلكتروني إذا لم تكُن حذرًا.

الخيار الأول الذي يجب مراعاته هو ما إذا كان يمكن استخدام صورة المرشّح لمقياس LCP في عنصر <img> مع السمتَين srcset وsizes للاستجابة. سيكتشف فاحص التحميل المسبق في المتصفح عناصر <img> ويرسل طلبات لها أثناء حظر المحلل اللغوي عند العرض.

إذا لم يكن بإمكانك (أو لا تريد) تجنُّب استخدام صورة خلفية CSS، سيكون الخيار الثاني هو تحميل الصور المتجاوبة مسبقًا لضمان تحميل الصورة الصحيحة مسبقًا لحجم إطار العرض المناسب. تشير السمات <link> وmedia وimagesrcset وimagesizes إلى المتصفّح بأنّ تلميحًا معيّنًا للموارد لا يتم تطبيقه إلا في حالات معيّنة ضمن إطار العرض، ما يؤدي إلى تجنُّب عمليات التحميل المُسبقة المهدرة عندما تريد فقط تحميل مورد واحد يناسب إطار العرض الحالي.

ملخّص

لقد تعلمت في هذا الدليل تطبيق استعلامات الوسائط لطلب صور خلفية مصممة لتناسب أحجام شاشات محددة وتوفير وحدات البايت عند الدخول إلى الموقع على أجهزة أصغر، مثل الهواتف الجوّالة. لقد استخدمت القاعدة @media لتنفيذ خلفية متجاوبة. هذا الأسلوب معتمد على نطاق واسع في جميع المتصفحات. يمكن استخدام ميزة CSS جديدة: image-set() للغرض نفسه مع عدد أقل من الأسطر من الرمز. في وقت كتابة هذا التقرير، هذه الميزة غير معتمدة في جميع المتصفحات، ولكن قد ترغب في مراقبة كيفية تطور هذا الاستخدام، حيث يمكن أن تمثل بديلاً مثيرًا للاهتمام لهذا الأسلوب.