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

الأساليب المتعلّقة بلغة CSS لتحسين مؤشرات Web Vitals

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

تتناول هذه المقالة الأساليب المتعلّقة بخدمة مقارنة الأسعار (CSS) لتحسين مؤشرات أداء الويب. يتم تقسيم هذه التحسينات حسب الجوانب المختلفة للصفحة: التنسيق والصور والخطوط والصور المتحركة ومدة التحميل. وسنطّلع على كيفية تحسين مثال على صفحة:

لقطة شاشة لمثال على موقع إلكتروني

التنسيق

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

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

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

تعريف

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

عملية تدقيق "تجنُّب متغيّرات التصميم الكبيرة" في Lighthouse

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

إصلاح

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

إشعار ملفات تعريف الارتباط معروض في أسفل الصفحة

قبل:

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

بعد:

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

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

الصور

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

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

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

رسم بياني يُبرز عنصر LCP للصفحة في سيناريوهات مختلفة

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

إصلاح

غيِّر ملف CSS الخاص بعنصر .banner لاستخدام تدرج 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.

تدقيق "عناصر الصورة تحتوي على عرض وارتفاع محدَّدَين" في 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).

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

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

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

تعريف

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

لقطة شاشة لخط معروض في DevTools

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

لقطة شاشة لعلامة التبويب &quot;التوقيت&quot; في &quot;أدوات مطوّري البرامج&quot;

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

لقطة شاشة لعلامة التبويب &quot;المشغِّل&quot; في &quot;أدوات مطوّري البرامج&quot;

إصلاح

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

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

أزِل بيان @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>.

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

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

تعريف

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

عملية تدقيق &quot;تجنُّب الصور المتحركة غير المركّبة&quot; في 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 غير المهم.

الخاتمة

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