الأساليب المتعلقة بلغة CSS لتحسين "مؤشرات أداء الويب"
قد تؤثر طريقة كتابة الأنماط وإنشاء التنسيقات بشكل كبير في مؤشرات أداء الويب الأساسية. وينطبق ذلك بشكل خاص على متغيّرات التصميم التراكمية (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، يمكنك بدلاً من ذلك رسم التدرج في 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. توفر خدمة Google Fonts خيار تحميل الخطوط
عبر علامات <link> أو عبارة @import. يتضمّن مقتطف الرمز <link>
تلميحًا لمورد preconnect. ومن المفترض أن يؤدي ذلك إلى عرض ورقة أنماط بشكل أسرع
مقارنةً باستخدام إصدار @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 وتحميل ورقة الأنماط التي تحتوي على تعريف الخط الخاص بـ "مونتسيرات" و"روبوت". يجب وضع علامات <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 غير المهمة.
الخلاصة
على الرغم من أنّه لا يزال هناك مجال لإجراء المزيد من التحسينات (على سبيل المثال، من خلال استخدام ضغط الصور لعرض الصور بسرعة أكبر)، فإنّ هذه التغييرات قد حسّنت بشكل كبير "مؤشرات أداء الويب" لهذا الموقع الإلكتروني. إذا كان هذا الموقع الإلكتروني حقيقيًا، ستكون الخطوة التالية هي جمع بيانات الأداء من مستخدمين حقيقيين لتقييم ما إذا كان الموقع يستوفي حدود "مؤشرات أداء الويب" لمعظم المستخدمين. ولمزيد من المعلومات حول "مؤشرات أداء الويب"، اطّلِع على المقالة التعرّف على مؤشرات أداء الويب.