الأساليب المتعلّقة بلغة CSS لتحسين مؤشرات Web Vitals
يمكن أن يكون للطريقة التي تكتب بها أنماطك وتُنشئ بها التنسيقات تأثير كبير في مؤشرات أداء الويب الأساسية. وينطبق ذلك بشكل خاص على متغيّرات التصميم التراكمية (CLS) وسرعة عرض أكبر محتوى مرئي (LCP).
تتناول هذه المقالة الأساليب المتعلّقة بخدمة مقارنة الأسعار (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 بدلاً من تحميل صورة لإنشاء التأثير.
إصلاح
غيِّر ملف 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 غير المهم.
الخاتمة
على الرغم من أنّه لا يزال هناك مجال لإجراء المزيد من التحسينات (على سبيل المثال، استخدام ضغط الصور لعرض الصور بشكل أسرع)، أدّت هذه التغييرات إلى تحسين "مؤشرات أداء الويب" لهذا الموقع الإلكتروني بشكل كبير. إذا كان هذا موقعًا إلكترونيًا حقيقيًا، ستكون الخطوة التالية هي جمع بيانات الأداء من مستخدمين حقيقيين لتقييم ما إذا كان يستوفي حدود "مؤشرات أداء الويب" لمعظم المستخدِمين. لمزيد من المعلومات عن "مؤشرات أداء الويب"، اطّلِع على مقالة التعرّف على "مؤشرات أداء الويب".