الأساليب المتعلّقة بلغة CSS لتحسين مؤشرات Web Vitals
يمكن أن يكون للطريقة التي تكتب بها أنماطك وتُنشئ بها التنسيقات تأثير كبير في مؤشرات أداء الويب الأساسية. وينطبق ذلك بشكل خاص على متغيّرات التصميم التراكمية (CLS) وسرعة عرض أكبر محتوى مرئي (LCP).
تتناول هذه المقالة الأساليب المرتبطة بخدمة CSS لتحسين "مؤشرات أداء الويب". ويتم تقسيم هذه التحسينات حسب أوجه مختلفة للصفحة: التخطيط والصور والخطوط والرسوم المتحركة والتحميل. وسنطّلع على كيفية تحسين مثال على صفحة:
التنسيق
إدراج محتوى في نموذج DOM
يؤدي إدراج المحتوى في صفحة بعد تحميل المحتوى المحيط إلى دفع كل العناصر الأخرى في الصفحة إلى الأسفل. يؤدي ذلك إلى حدوث تغييرات في التصميم.
إشعارات ملفات تعريف الارتباط، خاصةً تلك التي يتم وضعها في أعلى الصفحة، هي مثال شائع على هذه المشكلة. تشمل مكونات الصفحات الأخرى التي غالبًا ما تتسبب في حدوث هذا النوع من التغيُّر في التصميم عند تحميلها الإعلانات والعناصر المضمّنة.
تعريف
تحدِّد عملية تدقيق "تجنُّب متغيّرات التصميم الكبيرة" عناصر الصفحة التي تغيّرت. بالنسبة لهذا العرض التوضيحي، ستبدو النتائج على النحو التالي:
لم يتم إدراج إشعار ملف تعريف الارتباط في هذه النتائج لأن إشعار ملف تعريف الارتباط نفسه
لا يتغير عند تحميله. بدلاً من ذلك، يؤدي ذلك إلى تغيير العناصر التي تليه في
الصفحة (أي div.hero وarticle). لمزيد من المعلومات عن تحديد متغيّرات التصميم وإصلاحها، يُرجى الاطّلاع على المقالة تصحيح أخطاء متغيّرات التصميم.
إصلاح
ضع إشعار ملف تعريف الارتباط أسفل الصفحة باستخدام تحديد الموضع المطلق أو الثابت.
قبل:
.banner {
position: sticky;
top: 0;
}
بعد:
.banner {
position: fixed;
bottom: 0;
}
هناك طريقة أخرى لحلّ مشكلة تغيُّر التنسيق هذه، وهي حجز مساحة لإشعار ملف تعريف الارتباط في أعلى الشاشة. وهذا الأسلوب فعّال بالقدر نفسه. لمزيد من المعلومات، راجِع أفضل الممارسات المتعلقة بإشعارات ملفات تعريف الارتباط.
الصور
الصور وسرعة عرض أكبر محتوى مرئي (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.
في هذا المثال، لا تتضمّن كلّ من صورة العنصر الرئيسي وصورة المقالة السمتَين 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. ومن المفترض أن يؤدي ذلك إلى إرسال ورقة أنماط
أسرع مقارنةً باستخدام إصدار @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 مفيدًا في تحديد الصور المتحركة غير المؤثِّرة.
إصلاح
يمكنك تغيير تسلسل الصور المتحركة 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 غير المهمة.
الخاتمة
على الرغم من أنّه لا يزال هناك مجال لإجراء المزيد من التحسينات (على سبيل المثال، استخدام ضغط الصور لعرض الصور بشكل أسرع)، أدّت هذه التغييرات إلى تحسين "مؤشرات أداء الويب" لهذا الموقع الإلكتروني بشكل كبير. إذا كان هذا موقعًا إلكترونيًا حقيقيًا، ستكون الخطوة التالية هي جمع بيانات الأداء من مستخدمين حقيقيين لتقييم ما إذا كان يستوفي حدود "مؤشرات أداء الويب" لمعظم المستخدِمين. لمزيد من المعلومات عن "مؤشرات أداء الويب"، اطّلِع على مقالة التعرّف على "مؤشرات أداء الويب".