٢٬٤٠٠ كلمة تقريباً، مدة القراءة: ١١ دقيقة

معضلة التمدد

حل مشكلة انزياح المحتوى التراكمي CLS بسبب الخطوط العربية

الاهتزاز الذي يراه الجميع ولا يعرف أحد سببه

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

هذا ليس خللاً في اتصالك، ولا مشكلة في متصفحك. إنه ظاهرة تقنية اسمها انزياح المحتوى التراكمي (Cumulative Layout Shift — CLS)، وهي واحدة من أكثر مشاكل الأداء إزعاجاً للمستخدم، وواحدة من المؤشرات التي تهتم بها جوجل عند تقييم جودة الصفحة.

في المواقع العربية تحديداً، الخطوط هي المتهم الأول والأكثر شيوعاً. والسبب ليس أن الخطوط العربية “سيئة” — بل لأنها مختلفة بنيوياً عن الخطوط الإنكليزية، وهذا الاختلاف يُنتج سلوكاً في التحميل يفاجئ كثيراً من المطورين حين يصطدمون به أول مرة.

في هذا المقال سنفهم المشكلة من جذرها، ثم سنكتب معاً الكود الذي يحلّها.

كيف يتعامل المتصفح مع الخطوط؟

لنبدأ من البداية. حين يحمّل المتصفح صفحة ويب، يمر بسلسلة من الخطوات: يقرأ الـ HTML، يبني شجرة العناصر، يطبّق قواعد CSS، ثم يرسم الصفحة على الشاشة. لكن ماذا يحدث حين يصطدم بعنصر نصي يطلب خطاً خارجياً لم يُحمَّل بعد؟

للمتصفح خياران، وكلاهما له ثمن:

• FOIT — وميض النص غير المرئي (Flash of Invisible Text):
  المتصفح يُخفي النص كلياً وينتظر الخط. الصفحة تبدو “فارغة” في مكان النص لثوانٍ. الثمن: المستخدم يرى فراغاً مقلقاً.
• FOUT — وميض النص غير المُنسَّق (Flash of Unstyled Text):
  المتصفح يعرض النص بخط احتياطي (Fallback Font) فوراً، ثم حين يصل الخط الصحيح يستبدله. الثمن: الصفحة “تقفز” — وهذا بالضبط هو الـ CLS.

جوجل يقيس الـ CLS بقيمة رقمية: مجموع مساحات العناصر التي تحركت ضرب المسافة التي قطعتها. القيمة المثلى هي أقل من ٠.١. ما فوق ٠.٢٥ يُصنّفها جوجل كـ”ضعيفة” ويؤثر على ترتيب الصفحة.

المتصفحات الحديثة تميل افتراضياً إلى سلوك وسط: تنتظر ٣ ثوانٍ قبل أن تعرض النص بالخط الاحتياطي (FOUT). هذا يعني: ٣ ثوانٍ من النص المختفي أو شبه المختفي، ثم وميض حين يصل الخط. كلا السيناريوين يُضر بتجربة المستخدم وبمؤشرات الأداء.

لماذا المشكلة أكبر مع الخطوط العربية؟

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

مع الخطوط العربية، القصة مختلفة كلياً، وذلك لأسباب بنيوية:

١ — حجم الملف

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

النتيجة: ملف خط عربي كامل يزن عادةً بين ١٠٠ كيلوبايت و٣٠٠ كيلوبايت أو أكثر. خط إنكليزي بسيط قد يزن ٢٠ كيلوبايت. هذا فارق في وقت التحميل يُرى على الشاشة.

٢ — الفجوة البصرية بين الخط الاحتياطي والخط الأصلي

حين تنتقل من Arial إلى Tajawal، ليس الفارق بضع بكسلات. الفارق في الارتفاع العمودي (line-height)، والعرض الأفقي للكلمة (word-width)، وسُمك الحرف (font-weight visual)، والمسافة بين الكلمات — كل هذا يختلف اختلافاً كبيراً. نتيجةً لذلك، الفقرة التي تشغل ٤ أسطر بالخط الاحتياطي قد تشغل ٣ أسطر أو ٥ أسطر بالخط الأصلي، وهذا يُزحزح كل ما تحتها.

٣ — غياب خطوط احتياطية عربية مناسبة في أنظمة التشغيل

نظام ويندوز يحتوي على “Segoe UI” كخط افتراضي رائع للإنكليزية. لكن الخط الاحتياطي العربي الافتراضي فيه — وفي كثير من الأنظمة — يختلف اختلافاً جذرياً عن أي خط مُصمَّم للويب. هذا يجعل الفجوة البصرية عند التبديل أكبر وأكثر إزعاجاً.

الحل الأول: font-display وخاصية swap

أسرع خطوة يمكن اتخاذها الآن، قبل أي تعديل آخر، هي إخبار المتصفح بكيفية التصرف حين لا يجد الخط جاهزاً. نفعل ذلك بخاصية font-display داخل قاعدة @font-face.

القيم المتاحة وما تعنيه:

لمعظم المواقع العربية، swap هو الخيار الصحيح: المستخدم يقرأ النص فوراً، والخط الجميل يصل حين يصل دون أن يحجب المحتوى. إليك كيفية تطبيقه:

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* ← هذا السطر هو المفتاح */
  src: url('/fonts/tajawal-regular.woff2') format('woff2');
}

إذا كنت تستخدم Google Fonts عبر <link> في الـ HTML، يمكن إضافة display=swap مباشرة في رابط الخط:

<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">

هذا السطر وحده يُحسّن تجربة التحميل ويُقلل من وقت FOIT. لكنه لا يحل مشكلة الاهتزاز بالكامل — لأن الفجوة بين الخط الاحتياطي والخط الأصلي ما زالت موجودة. هنا يأتي الحل الثاني.

الحل الثاني: معايرة الخطوط الاحتياطية (Fallback Font Calibration)

الفكرة بسيطة وذكية: إذا كان الاهتزاز يحدث لأن الخط الاحتياطي يختلف في أبعاده عن الخط الأصلي، لماذا لا نُعدّل الخط الاحتياطي ليُشابه الأصلي قدر الإمكان؟

CSS يتيح لنا ذلك عبر خصائص @font-face الخاصة بالخطوط الافتراضية، تحديداً:

• size-adjust — تصغير أو تكبير حجم الخط الاحتياطي نسبياً
• ascent-override — ضبط المسافة فوق خط الأساس
• descent-override — ضبط المسافة أسفل خط الأساس
• line-gap-override — ضبط الفراغ بين الأسطر

إليك مثالاً عملياً لمعايرة خط احتياطي ليُقارب Tajawal:

/* الخط الأصلي */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-regular.woff2') format('woff2');
}

/* خط احتياطي مُعاير يُشابه Tajawal في الأبعاد */
@font-face {
  font-family: 'Tajawal-Fallback';
  src: local('Arial');
  ascent-override: 98%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

/* التطبيق: الخط الأصلي أولاً، الاحتياطي المُعاير ثانياً */
body {
  font-family: 'Tajawal', 'Tajawal-Fallback', sans-serif;
}

ما يحدث هنا: المتصفح يعرض النص بـ Tajawal-Fallback (وهو في الواقع Arial مُعدَّل الأبعاد) بينما يُحمَّل Tajawal الحقيقي. حين يصل Tajawal ويحل محله، الفجوة البصرية بين الشكلين تكاد لا تُذكر — وبالتالي الاهتزاز يختفي أو يصبح طفيفاً جداً.

قيم ascent-override وsize-adjust تختلف من خط إلى آخر ولا توجد قيم عالمية. الطريقة الأدق هي قياسها بأداة مثل Automatic Font Matching أو Font Style Matcher — وهي أدوات تُقارن الخطين بصرياً وتقترح القيم المناسبة.

الحل الثالث: استضافة الخطوط محلياً

الخطوات السابقة تُحسّن سلوك التحميل. لكن المشكلة الجذرية ما زالت قائمة: الخط يُحمَّل من خادم خارجي (Google Fonts أو غيره)، وهذا يعني:

• طلب DNS إضافي لخادم خارجي
• تأخير في إنشاء الاتصال (TCP Handshake)
• احتمال أن يكون خادم Google أبطأ من خادمك في بعض المناطق الجغرافية
• اعتماد على طرف ثالث — إذا تعطل، تعطّل خطك معه

الحل: تحميل ملفات الخط مرة واحدة واستضافتها على خادمك المباشر. صيغة WOFF2 هي الأمثل — مضغوطة، مدعومة من جميع المتصفحات الحديثة، وتصغر حجم الملف بنسبة تصل إلى ٣٠٪ مقارنة بـ WOFF العادية.

كيف تحصل على ملف WOFF2 لخط جوجل؟ أداة Google Webfonts Helper تتيح تحميل الخطوط جاهزة للاستضافة الذاتية مع الكود المرفق.

بعد تحميل الملف، ضعه في مجلد /fonts/ على خادمك وأضف هذا في CSS:

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-v29-arabic-regular.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

لاحظ خاصية unicode-range: هي تُخبر المتصفح بأن هذا الخط مخصص للنطاق العربي فقط. بهذا لن يُحمَّل الخط إلا حين تكون هناك حروف عربية على الصفحة — وهذا يوفّر تحميلاً كاملاً غير ضروري في الصفحات التي لا تحتوي على عربية.

الحل الرابع: الخطوط المتغيرة (Variable Fonts)

تقليدياً، كل ثقل (weight) من الخط ملف مستقل: regular في ملف، bold في ملف، medium في ملف ثالث. إذا كان موقعك يستخدم ثلاثة أوزان من Tajawal، فهذا ثلاثة طلبات تحميل.

الخطوط المتغيرة (Variable Fonts) تحل هذه المشكلة بأناقة: ملف واحد يحتوي على جميع الأوزان والأنماط. المتصفح يستطيع الاستيفاء (interpolation) بين القيم لإنتاج أي وزن تريده، حتى قيم كـ font-weight: 450 لم تكن ممكنة قبلاً.

/* ملف واحد يغني عن ثلاثة أو أربعة */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 200 900; /* نطاق من ٢٠٠ إلى ٩٠٠ */
  font-display: swap;
  src: url('/fonts/tajawal-variable.woff2') format('woff2-variations');
}

/* الاستخدام: أي وزن بين ٢٠٠ و ٩٠٠ */
h1 { font-weight: 700; }
p  { font-weight: 400; }
.light { font-weight: 300; }

ليست كل الخطوط العربية متاحة كنسخة متغيرة حتى الآن، لكن الدعم يتوسع. IBM Plex Arabic وبعض إصدارات Noto Arabic المتغيرة متاحة ومستقرة ومناسبة للإنتاج.

قياس التأثير: كيف نتحقق أن المشكلة حُلّت؟

بعد تطبيق أي من هذه الحلول، لا تكتفِ بالنظر إلى الصفحة وتقول “يبدو أفضل”. قِس التغيير بأرقام.

أداة ١: Google PageSpeed Insights

أدخل رابط صفحتك في pagespeed.web.dev. ستجد قيمة CLS مع تقرير مرئي يُظهر أي العناصر تحركت وكم تحركت. قارن القيمة قبل التعديل وبعده.

أداة ٢: Chrome DevTools — مسجّل الأداء

افتح المتصفح، اضغط F12، انتقل إلى تبويب Performance، واضغط Record ثم أعد تحميل الصفحة. ستجد مقياس CLS مدمجاً في التقرير مع خط زمني يُظهر بالضبط متى حدث كل انزياح وما سببه.

أداة ٣: Web Vitals Extension

إضافة متصفح من جوجل (Web Vitals) تعرض قيم CLS وLCP وINP مباشرة أثناء تصفحك للصفحة — مفيدة جداً للمقارنة السريعة.

الهدف: قيمة CLS أقل من ٠.١ على اتصال إنترنت محاكَى بسرعة ٤G متوسطة (يمكن ضبط ذلك من DevTools). إذا حققت ذلك، فأنت في المنطقة الجيدة من منظور جوجل.

ملاحظة لمستخدمي ووردبريس

إذا كان موقعك على ووردبريس، لديك مسارات مُختصرة:

• إضافة Perfmatters أو WP Rocket: تتيح ضبط font-display: swap تلقائياً لجميع الخطوط المُحمَّلة من Google Fonts أو من القوالب، دون تعديل يدوي.
• دالة wp_enqueue_style: إذا كنت تُحمّل الخطوط يدوياً عبر القالب، أضف display=swap إلى رابط Google Fonts في دالة الـ enqueue مباشرة.
• القوالب الحديثة (مثل GeneratePress وAstra): تحتوي على خيار “تحسين الخطوط” في لوحة التحكم يفعّل swap بنقرة واحدة.

تحذير مهم: إضافات الأداء مفيدة، لكن لا تعتمد عليها وحدها دون فهم ما تفعله. كود CSS الذي فهمته بنفسك أكثر موثوقية من إعداد تلقائي لا تعرف كيف يعمل — لأنك ستعرف كيف تُشخّص المشكلة حين تعود.

الخاتمة: كل بكسل يتحرك له ثمن

الاهتزاز البصري ليس مجرد إزعاج جمالي. هو رسالة غير مقصودة للمستخدم تقول: “هذا الموقع لم يُصمَّم بعناية.” وهو إشارة لجوجل تقول: “هذه الصفحة لم تنتهِ من التحميل حين وصل المستخدم.”

الخبر الجيد: المشكلة قابلة للحل تماماً، وبكود لا يتجاوز عشرات الأسطر. الخطوات التي مررنا عليها اليوم — من font-display: swap إلى معايرة الخطوط الاحتياطية إلى الاستضافة الذاتية — ليست خيارات متقدمة للمتخصصين. هي ممارسات أساسية لأي موقع عربي يأخذ أداءه على محمل الجد.

في المقال القادم ننتقل إلى المشكلة الثانية في السلسلة: الروابط العربية التي تتحول إلى سلاسل مشفرة لا يفهمها لا المستخدم ولا الزاحف — وكيف نهندس بنية روابط تخدم الجميع.

— الطبوغرافيا الرقمية وتأثيرها على السيو التقني —

المقال السابق: ١- ما وراء لغة الضاد: المدخل إلى توطين المواقع

المقال الحالي: ٢- معضلة التمدد: السيطرة على انزياح المحتوى التراكمي

المقال التالي: ٣- هندسة الروابط: فك شفرة الرموز المئوية في العناوين العربية

سلاسل مشابهة:
دليل هندسة واجهات اليمين | دليل معالجة النصوص الهجينة | دليل معايرة البيانات المالية | ورشة التوطين لتطبيقات الويب ٣.٠

منصة ذي يزن © ٢٠٢٦