المستوى المطلوب: متوسط — يفترض إنك تعرف أساسيات CSS وHTTP وLighthouse، ومسموح ما تكونش لمست خطوط الويب من قبل.
لو الـ HTML بتاعك بيوصل في 200ms لكن النصوص بتقفز مكانها لما الخط العربي يخلّص تحميل، Cumulative Layout Shift عندك بيتجاوز 0.1 بسهولة. الحل مش تغيير الخط، الحل ضبط طريقة تحميله بثلاث طبقات بسيطة.
تحميل خطوط الويب بدون CLS
المشكلة باختصار
متوسط حجم خط عربي WOFF2 كامل بين 180KB و 420KB. لما المتصفح يلاقي قاعدة @font-face بدون font-display، بيخفي النص لحد 3 ثواني انتظارًا للخط (Flash of Invisible Text — FOIT). لو الخط نزل بعد كده وأبعاد الحرف اختلفت عن خط النظام، الصفحة بتعيد ترتيب نفسها. النتيجة: CLS بيوصل 0.24 على الموبايل و LCP بيتأخر بمقدار زمن تحميل الخط.
مثال للمبتدئين قبل التعريف العلمي
تخيّل إنك بتطبخ، وفيه وصفتين على ورقتين. الورقة الأولى مكتوبة بخط مكتنز عرضه واسع، التانية بخط أرفع. لو لصقتهم جنب بعض، السطور هتتحرك وأنت بتقرأ لما الخطوط تختلف. ده اللي بيحصل بالظبط لما خط الـ fallback (Tahoma غالبًا) يكون أعرض أو أضيق من الخط النهائي (مثلًا Cairo). كل حرف ياخد عرض مختلف، والصفحة كلها تترتب من جديد لما الخط الحقيقي يوصل.
التعريف العلمي
Cumulative Layout Shift هو مقياس مجموع الحركة الرأسية والأفقية للعناصر المرئية أثناء تحميل الصفحة. الصيغة: impact_fraction × distance_fraction لكل عنصر تحرّك. الانتقال من خط نظام لخط ويب بأبعاد مختلفة بيدخل في الحسبة لو حصل بعد أول رسم للصفحة (FCP). جوجل بتعتبر CLS أقل من 0.1 جيد، فوق 0.25 سيء.
الحل: ثلاث طبقات يجب تطبيقها معًا
الطبقة الأولى — font-display
بتحدد سلوك المتصفح أثناء انتظار الخط. القيم المهمة:
swap: يعرض fallback فورًا، يستبدله لما الخط يجهز. CLS مرتفع لو الأبعاد مختلفة، لكن النص يبان من أول لحظة.optional: يستخدم fallback لو الخط ما وصلش في 100ms. صفر CLS لكن أحيانًا الخط الجديد ما يظهرش أصلًا في الزيارة الأولى.fallback: حل وسط — انتظار 100ms ثم fallback، ومهلة 3 ثواني للاستبدال.
@font-face {
font-family: 'Cairo';
src: url('/fonts/cairo-regular-ar.woff2') format('woff2');
font-weight: 400;
font-display: swap;
size-adjust: 95%;
ascent-override: 90%;
}الخصائص size-adjust و ascent-override بتقرّب أبعاد الـ fallback من أبعاد الخط النهائي قبل ما يوصل، فالقفزة لما يستبدل تكون شبه صفر.
