لغة CSS في "مؤشرات أداء الويب"

تقنيات مرتبطة بأوراق أنماط CSS لتحسين مؤشرات Web Vitals

Katie Hempenius

Una Kravets

يمكن أن يكون للطريقة التي تكتب بها الأنماط وتصمّم بها التنسيقات تأثير كبير على مؤشرات Core Web Vitals. وينطبق ذلك بشكل خاص على متغيّرات التصميم التراكمية (CLS) وسرعة عرض أكبر محتوى مرئي (LCP).

تتناول هذه المقالة أساليب تحسين مؤشرات Web Vitals ذات الصلة بـ CSS. يتم تقسيم عمليات التحسين هذه حسب الجوانب المختلفة للصفحة: التنسيق والصور والخطوط والصور المتحركة والتحميل. سنستعرض خلال هذه الرحلة كيفية تحسين صفحة مثال:

التنسيق

إدراج محتوى في DOM

يؤدي إدراج محتوى في صفحة بعد تحميل المحتوى المحيط به إلى دفع كل المحتوى الآخر على الصفحة إلى الأسفل. يؤدي ذلك إلى حدوث تغييرات في التنسيق.

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

تحديد

تحدّد عملية التدقيق "تجنُّب متغيّرات التصميم الكبيرة" في Lighthouse عناصر الصفحة التي تم تغيير موضعها. في هذا العرض التوضيحي، تبدو النتائج على النحو التالي:

لا يتم إدراج إشعار ملفات تعريف الارتباط في هذه النتائج لأنّ الإشعار نفسه لا يتغيّر موضعه عند تحميله. بل يؤدي إلى تغيير موضع العناصر التي تظهر أسفله في الصفحة (أي div.hero وarticle). لمزيد من المعلومات حول تحديد عمليات تغيير التنسيق وإصلاحها، يُرجى الاطّلاع على تصحيح أخطاء عمليات تغيير التنسيق.

إصلاح

ضَع إشعار ملفات تعريف الارتباط في أسفل الصفحة باستخدام تحديد الموضع المطلق أو الثابت.

قبل:

.banner {
  position: sticky;
  top: 0;
}

بعد:

.banner {
  position: fixed;
  bottom: 0;
}

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

الصور

الصور ومقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" (LCP)

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

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

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

إصلاح

غيِّر .banner CSS لاستخدام تدرّج CSS بدلاً من صورة:

قبل:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

بعد:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

الصور وتغييرات التصميم

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

تحديد

لتحديد الصور التي لا تحتوي على قيَم width وheight محدَّدة، استخدِم تدقيق "عناصر الصور تحتوي على عرض وارتفاع محدَّدَين" في Lighthouse.

في هذا المثال، لا تتضمّن الصورة الرئيسية وصورة المقالة سمتَي width وheight.

إصلاح

اضبط السمتَين width وheight على هذه الصور لتجنُّب متغيّرات التصميم.

قبل:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

بعد:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

الخطوط

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

عرض النص بتأخير

لن يعرض المتصفّح تلقائيًا عنصرًا نصيًا على الفور إذا لم يتم تحميل خطوط الويب المرتبطة به بعد. يتم ذلك لمنع حدوث "وميض من النص غير المنسّق" (FOUT). في العديد من الحالات، يؤدي ذلك إلى تأخير سرعة عرض المحتوى على الصفحة (FCP). في بعض الحالات، يؤدي ذلك إلى تأخير مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" (LCP).

تغييرات التصميم

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

تحديد

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

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

للاطّلاع على سلسلة الطلبات الخاصة بخط معيّن، انقر على علامة التبويب بادئ التشغيل. بشكل عام، كلما كانت سلسلة الطلبات أقصر، أمكن طلب الخط بشكل أسرع.

إصلاح

يستخدم هذا العرض التوضيحي Google Fonts API. توفّر Google Fonts خيار تحميل الخطوط من خلال علامات <link> أو عبارة @import. يتضمّن مقتطف الرمز <link> تلميحًا بشأن المورد preconnect. من المفترض أن يؤدي ذلك إلى توفير أسرع لملف CSS مقارنةً باستخدام إصدار @import.

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

أزِل عبارة @import التالية من ورقة الأنماط:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

أضِف علامات <link> التالية إلى <head> المستند:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

توجّه علامات الربط هذه المتصفّح إلى إنشاء اتصال مبكر بالمصادر التي تستخدمها Google Fonts وتحميل ورقة الأنماط التي تحتوي على تعريف الخط Montserrat وRoboto. يجب وضع علامات <link> هذه في أقرب موضع ممكن في <head>.

الصور المتحركة

تؤثّر الحركات بشكل أساسي في مؤشرات Web Vitals عندما تؤدي إلى حدوث تغييرات في التصميم. هناك نوعان من الرسوم المتحركة يجب تجنُّب استخدامهما: الرسوم المتحركة التي تؤدي إلى تغيير التصميم والتأثيرات "الشبيهة بالرسوم المتحركة" التي تنقل عناصر الصفحة. يمكن عادةً استبدال هذه الحركات بأخرى أكثر فعالية باستخدام خصائص CSS، مثل transform وopacity وfilter. لمزيد من المعلومات، يُرجى الاطّلاع على كيفية إنشاء رسوم متحركة عالية الأداء باستخدام CSS.

تحديد

قد يكون التدقيق "تجنُّب الصور المتحركة غير المركّبة" في Lighthouse مفيدًا في تحديد الصور المتحركة ذات الأداء الضعيف.

إصلاح

غيِّر تسلسل الحركة slideIn لاستخدام transform: translateX() بدلاً من الانتقال إلى السمة margin-left.

قبل:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

بعد:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

CSS الأساسي

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

الخاتمة

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