الخطوط العربية على الويب وسرعة الصفحات: ماذا تحمّل 29 صفحة رئيسية لعلامات تجارية عربية

تكلّف الخطوط العربية بايتات أكثر حين تغطي العائلة الرموز كاملة. في فحصنا لـ29 صفحة رئيسية لعلامات عربية في 2 أكتوبر 2026، كان وسيط حجم الخطوط 134 كيلوبايت، و6 من 24 موقعًا استطعنا قياسها (25%) حمّلت 500 كيلوبايت أو أكثر. التقسيم وتقليل الأوزان وتحميل مسبق لملف أو ملفين تصلح معظم ذلك.

أبرز النقاط

• وسيط حجم خطوط الصفحة الرئيسية: 134 كيلوبايت عبر 24 موقعًا عربيًا قابلًا للقياس (فحص VOCTOS، 2 أكتوبر 2026). ستة مواقع حمّلت من 503 إلى 665 كيلوبايت.
• عدد الرموز يحدد الحجم. تقدّم Google Fonts المجموعة العربية من Noto Sans Arabic بحجم 47.7 كيلوبايت مقابل 10.5 كيلوبايت لمجموعته اللاتينية، بينما المجموعة العربية من Tajawal بحجم 8.7 كيلوبايت.
• 10 من 29 موقعًا حمّلت الخطوط مسبقًا، أربعة منها من 8 إلى 14 ملفًا. وثلاثة من هذه الأربعة حمّلت 647 كيلوبايت أو أكثر.
• ترتيب الإصلاح: قسّم بـunicode-range، وقلّل الأوزان، واضبط font-display، وطابق مقاييس الخط البديل، وحمّل ملفًا أو ملفين مسبقًا، وتحقق من الترخيص.

لماذا الخطوط العربية أثقل من اللاتينية؟

يكون الخط العربي أثقل حين يحمل رموزًا أكثر. معظم الحروف العربية لها حتى أربعة أشكال وصل (منفصل، أول، وسط، آخر)، والعائلات كاملة التغطية تضيف الحروف المركبة وعلامات التشكيل وحروف الفارسية والأردية. هذا يدفع المجموعة العربية الكاملة إلى أكثر من 1,300 رمز، مقابل نحو 210 إلى 260 رمزًا في المجموعة اللاتينية من العائلة نفسها.

وتصف وثيقة W3C متطلبات تخطيط النص العربي والفارسي نموذج الوصل هذا؛ فكل شكل رمز مستقل. ويعرض الجدول التكلفة بالبايت: ملفات woff2 التي تقدّمها واجهة css2 من Google Fonts لمتصفح Chrome على سطح المكتب في 2 أكتوبر 2026، مع عدّ الرموز بأداة fontTools.

تحفّظ واحد يسير عكس العنوان: Tajawal وReadex Pro وCairo، بما بين 190 و393 رمزًا، تقدّم مجموعات عربية أصغر من مجموعاتها اللاتينية.

حتى أثقل عائلة هنا تبقى تحت 50 كيلوبايت للوزن بعد التقسيم، لذا فالصفحة الرئيسية ذات 500 كيلوبايت مشكلتها في عدد الملفات.

ماذا تحمّل 29 صفحة رئيسية لعلامات تجارية عربية

عبر 29 صفحة رئيسية لعلامات تجارية عربية فحصناها في 2 أكتوبر 2026 في السعودية والإمارات ومصر وقطر والكويت، نادرًا ما كانت الخطوط خفيفة. كان الوسيط القابل للقياس 134 كيلوبايت، وتجاوز ربع المواقع 500 كيلوبايت، وحمّلت عشرة مواقع ملفات خطوط مسبقًا، وقدّمت علامتان مصريتان صفحات عربية بخط رئيسي لاتيني فقط.

الصفحات الثقيلة تحمّل مسبقًا بكثافة أيضًا. أربعة من المواقع الستة التي تجاوزت 500 كيلوبايت حمّلت مسبقًا 5 ملفات خطوط أو أكثر: بنك سعودي (9 ملفات، 665 كيلوبايت)، وسلسلة صيدليات سعودية (9، 647 كيلوبايت)، وشركة اتصالات إماراتية (8، 659 كيلوبايت)، ومطوّر عقاري سعودي (5، 503 كيلوبايت). الصفحة ذات الـ16 وجهًا تعود لمتجر إلكترونيات مصري؛ وحمّل متجر مصري آخر 15 وجهًا، وشركة طيران قطرية 14.

أكثر العائلات العربية استخدامًا: Tajawal وNoto Kufi Arabic وIBM Plex Sans Arabic وCairo وAlmarai، لكل منها موقعان.

كيف أجرينا الفحص. حمّل فريق VOCTOS الصفحة الرئيسية العربية لكل علامة (أو صفحتها الافتراضية) مرة واحدة في Chrome على سطح المكتب، دون تسجيل دخول، من اتصال في القاهرة، في 2 أكتوبر 2026. بعد 3 إلى 4.5 ثانية قرأنا ملفات الخطوط من Resource Timing، والأوجه المحمّلة من document.fonts، وكل رابط تحميل مسبق للخطوط. الحدود: صفحة واحدة لكل موقع ونافذة مدتها 4.5 ثانية. خطوط الطرف الثالث بدون ترويسة Timing-Allow-Origin تُظهر 0 بايت، لذا ليس لـ5 مواقع رقم حجم، وقد تخفي الذاكرة المؤقتة بعض البايتات. لم نجمع بيانات ميدانية لـCore Web Vitals، لذا لا توجد أرقام LCP هنا. 8 من 37 صفحة رئيسية (22%) أعادت تحديًا لكشف الروبوتات أو صفحة فارغة واستُبعدت.

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

تقسيم الخطوط العربية بـunicode-range

قسّم كل عائلة إلى ملف عربي وملف لاتيني، ثم أعلن الاثنين تحت اسم font-family واحد مع unicode-range. لا ينزّل المتصفح الملف إلا حين تحتوي الصفحة على حرف ضمن نطاقه. الصفحة العربية التي فيها رموز منتجات إنجليزية تجلب الملفين، والصفحة الإنجليزية تجلب اللاتيني فقط.

تأتي نطاقات الكتل من ملف Unicode Blocks.txt: العربية، والملحق العربي، والعربية الموسعة A وB، وأشكال العرض A وB. أضف من U+200C إلى U+200E (فاصل عدم الوصل، ورابط الوصل، وعلامة الاتجاه من اليسار لليمين)، كما تفعل مجموعة Google العربية نفسها. توثّق MDN هذا الواصف.

/* Arabic subset: one variable file covers weights 300 to 700 */
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-arabic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

/* Latin subset of the same family, same name */
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F,
                 U+20AC, U+2122, U+2212;
}

/* Metric-matched fallback: measure these values for YOUR font */
@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Segoe UI"), local("Tahoma");
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 45%;
  line-gap-override: 0%;
}

html[lang|="ar"] body {
  font-family: "Brand Sans", "Brand Sans Fallback", system-ui, sans-serif;
}

قدّم woff2 فقط؛ يضع web.dev ضغطه أفضل بنحو 30% من WOFF. ولتقسيم الملفات بنفسك، استخدم أداة pyftsubset من fontTools مع --layout-features='*'، لأن حذف خصائص التشكيل يمنع الحروف من الاتصال. والأثر كبير: على ملف TTF المتغير لخط Noto Sans Arabic من مستودع google/fonts، خفّض هذان الأمران الحجم من 825 كيلوبايت إلى ملف عربي بحجم 155 كيلوبايت مع محور الوزن الكامل. وخرجت نسخة Regular وحدها بحجم 42 كيلوبايت.

fonttools varLib.instancer NotoSansArabic[wdth,wght].ttf wdth=100 -o arabic-wght.ttf
pyftsubset arabic-wght.ttf \
  --unicodes="U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E" \
  --layout-features='*' --flavor=woff2 --output-file=brand-sans-arabic.woff2

متغير أم ثابت: كم وزنًا يحتاج الموقع العربي؟

معظم المواقع العربية تحتاج وزنين، Regular وBold، ونادرًا وزنًا ثالثًا. والملف المتغير لا يُجدي إلا بدءًا من الوزن الثالث تقريبًا. على Google Fonts، يبلغ الملف العربي كامل المحور لخط Noto Kufi Arabic حجم 120.8 كيلوبايت مقابل 42.9 كيلوبايت لـRegular وحده، لذا يبقى وزنان ثابتان أخف.

واجهة css2 من Google Fonts، بالاستعلام في 2 أكتوبر 2026، تقدّم Noto Kufi Arabic وNoto Sans Arabic وCairo وReadex Pro وNoto Naskh Arabic كخطوط متغيرة. أما IBM Plex Sans Arabic (سبعة أوزان) وTajawal (سبعة) وAlmarai (أربعة) فثابتة فقط. وباستخدام أحجام Regular وBold العربية، تكون نقطة التعادل ثلاثة أوزان لـNoto Kufi Arabic وCairo وReadex Pro، وأربعة لـNoto Sans Arabic.

دليل الخطوط في web.dev يتفق على أن الملفات المتغيرة لا تفيد إلا المواقع التي تستخدم عدة أوزان. ولمعرفة الأوزان التي يستخدمها التصميم فعلًا، اضبط font-synthesis: none على بيئة الاختبار وابحث عن نص بالوزن الخاطئ.

ما قيمة font-display التي ينبغي أن يستخدمها الموقع العربي؟

استخدم swap للوجه العربي الذي يحمل العناوين ونص المحتوى، واقرنه بخط بديل مطابق المقاييس حتى لا يحرّك التبديل التخطيط. واستخدم optional إذا كنت تفضّل الإبقاء على خط النظام على قبول أي إزاحة. ولا تتركها دون ضبط أبدًا، لأن Chromium وFirefox يخفيان النص حينها حتى 3 ثوانٍ.

ويضيف دليل الخطوط في web.dev أن Safari يحجب النص إلى أجل غير مسمى. ويقول دليله لـLCP إن أي قيمة غير auto أو block تُبقي النص ظاهرًا، فلا ينتظر LCP الخط. والثمن هو إزاحة التخطيط، التي يعزوها دليل CLS إلى اختلاف المساحة التي يشغلها الخط البديل عن خط الويب.

طابق الخط البديل بـsize-adjust وascent-override

الخط البديل هو أي خط نظام موجود لدى الزائر. تذكر Microsoft دعم العربية في Segoe UI و Tahoma، وتتضمن قائمة خطوط النظام من Apple خط Geeza Pro على iOS وmacOS، ويربط ملف Android المسمى fonts.xml العربية بخط Noto Naskh Arabic. ويمكن لمصنّعي الهواتف تغيير ذلك، ولم تكن الأجهزة ضمن هذا الفحص.

تُظهر بيانات التوافق في MDN (1 أكتوبر 2026) دعم size-adjust في Chrome 92 وFirefox 92 وSafari 17، بينما ascent-override مدعومة فقط في Safari Technology Preview، لذا لا تلتزم أجهزة iPhone إلا بـsize-adjust. وتحسب Next.js next/font وFontaine وCapsize هذه القيم (دليل Chrome للخطوط البديلة)؛ واستخدمت بوابة عقارية إماراتية في فحصنا next/font وحمّلت 84 كيلوبايت.

‏ html[lang|="ar"] أعلاه يحتاج إلى خاصية lang صحيحة، وهو ما افتقدته 3 من 27 صفحة عربية في الفحص نفسه. ويغطي تدقيقنا لـlang وdir وhreflang في المواقع العربية هذا الإصلاح.

متى ينبغي تحميل ملف خط مسبقًا؟

حمّل مسبقًا الملف أو الملفين اللذين يعرضان النص فوق الجزء المرئي فقط، وعادةً ما يكونان Regular العربي وربما Bold العربي. لا شيء غير ذلك. فالتحميل المسبق يتجاهل unicode-range، لذا يُنزّل كل ملف محمّل مسبقًا سواء احتاجته الصفحة أم لا، ويحذّر web.dev من أن التحميل المسبق يأخذ من عرض النطاق المخصص لموارد أخرى، منها الصورة الرئيسية.

وجد فحصنا 14 و9 و9 و8 ملفات خطوط محمّلة مسبقًا على أربع صفحات رئيسية، وثلاث منها حمّلت 647 كيلوبايت أو أكثر. والحل الجذري لدى web.dev للاكتشاف المتأخر هو تضمين قواعد @font-face مباشرة داخل <head>. وعند استخدام التحميل المسبق، أضف crossorigin حتى على نطاقك الخاص: يشير web.dev إلى أن الخط المحمّل مسبقًا بدونها يُجلب مرتين.

<link rel="preload" href="/fonts/brand-sans-arabic.woff2"
      as="font" type="font/woff2" crossorigin>

الاستضافة الذاتية مقابل Google Fonts

استضف الخطوط ذاتيًا على المواقع العربية في معظم الحالات. منذ Chrome 86 تُقسّم ذاكرة HTTP المؤقتة حسب الموقع الرئيسي، فلم تعد النسخة المخزّنة من ملف Google Fonts على موقع آخر تفيد موقعك. كما تزيل الاستضافة الذاتية الاتصال الإضافي بـfonts.gstatic.com، بشرط أن تقسّم وتضغط بالعناية نفسها التي تفعلها Google.

‏ منشور Chrome عن تقسيم الذاكرة المؤقتة يشرح مفتاح التخزين المؤقت. والرأي المقابل موجود في دليل الخطوط في web.dev: وجد Web Almanac لعام 2020 أن المواقع التي تستخدم خطوطًا من طرف ثالث عُرضت أسرع، وأن الاستضافة الذاتية لا تفوز إلا مع CDN وHTTP/2. معظم العلامات في فحصنا استضافت خطوطها ذاتيًا؛ و8 من 29 حمّلت ورقة أنماط من Google Fonts.

تقع العائلات السبع في الجدول الأول كلها في مجلد ofl في مستودع google/fonts، الذي يمنح الإذن بإعادة التوزيع. وإن بقيت على Google، فاستخدم preconnect مع fonts.googleapis.com وfonts.gstatic.com. وبالنسبة للشعار، تتيح واجهة Google Fonts API text= ، وهو معامل لا يُرجع إلا الأحرف التي تحددها، وتقول Google إنه قد يقلّص الملف بنسبة تصل إلى 90%.

كيف تصلح الخطوط العربية في ووردبريس؟

سجّل الخطوط العربية المستضافة ذاتيًا في theme.json عبر مصفوفة fontFace، ثم أوقف كل إضافة أو أداة بناء صفحات تضيف طلب Google Fonts خاصًا بها. الخلل الذي يجب البحث عنه هو التكرار: القالب يقدّم العائلة محليًا بينما تجلب أداة البناء العائلة نفسها مرة أخرى من Google، فينزّلها الزوار مرتين.

يغطي دليل إعدادات الطباعة في ووردبريس مصفوفة fontFace والمسار file:./ ، ويقبل مخطط theme.json الخصائص fontDisplay وunicodeRange وsizeAdjust وascentOverride.

"fontFamilies": [{
  "name": "Brand Sans",
  "slug": "brand-sans",
  "fontFamily": "\"Brand Sans\", \"Segoe UI\", Tahoma, system-ui, sans-serif",
  "fontFace": [{
    "fontFamily": "Brand Sans",
    "fontWeight": "300 700",
    "fontStyle": "normal",
    "fontDisplay": "swap",
    "unicodeRange": "U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E",
    "src": ["file:./assets/fonts/brand-sans-arabic.woff2"]
  }]
}]

في Elementor يكون المفتاح في Elementor ثم Editor ثم Settings ثم Advanced ثم Google Fonts ثم Disable (مركز مساعدة Elementor). وفي غيره، صفِّ لوحة Network حسب “fonts.g” وتتبّع كل طلب إلى إضافته. وتحتاج المتاجر الإلكترونية إلى الفحص نفسه؛ راجع تدقيقنا لسيو متاجر سلة وزد.

هل هذا الخط مرخّص للاستخدام الفعلي؟

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

العائلات التجارية مثل Neo Sans Arabic وGraphik Arabic تحتاج إلى ترخيص ويب من المسبك يسمح أيضًا بالتقسيم والاستضافة الذاتية. نفّذ ttx -t name brand.woff2 لقراءة بيانات الترخيص في الملف. أي شيء باسم Trial أو Demo أو Eval مكانه بيئة الاختبار.

روتين من 10 دقائق بـDevTools وLighthouse

أجرِ ستة فحوصات على صفحتك الرئيسية العربية في ملف Chrome نظيف: لوحة Network، وحجم الخطوط، وعدد التحميل المسبق، والأوجه المحمّلة، وإزاحة التخطيط أثناء التبديل، ونتائج Lighthouse الخاصة بالخطوط. أسطر وحدة التحكم أدناه هي نفس القراءات التي استخدمناها في الفحص، لتقارن صفحتك بالوسيط 134 كيلوبايت.

1. لوحة Network: فعّل Disable cache، وصفِّ حسب Font، وأعد التحميل. أشر إلى ملفات ttf أو otf والعائلات المجلوبة مرتين.
2. حجم الخطوط (ملفات الطرف الثالث بدون ترويسة Timing-Allow-Origin تُظهر 0):

   performance.getEntriesByType("resource")
     .filter(r => /\.(woff2?|ttf|otf)(\?|$)/.test(r.name))
     .map(r => [r.name.split("/").pop(), Math.round(r.transferSize / 1024) + " KB"]);

3. التحميل المسبق: document.querySelectorAll('link[rel=preload][as=font]').length. ما يزيد على 2 يحتاج إلى مبرر.
4. الأوجه المحمّلة: [...document.fonts].filter(f => f.status === "loaded").map(f => f.family + " " + f.weight).
5. علامة Rendering: فعّل Layout Shift Regions، واضبط السرعة على Slow 4G، وأعد التحميل. تومض المناطق المزاحة باللون البنفسجي.
6. Lighthouse 13: اقرأ ملاحظة Font display (سابقًا “Ensure text remains visible during webfont load”) و“Avoid enormous network payloads”.

رأينا

الصفحات الثقيلة في هذا الفحص وصلت إلى ذلك بسبب قرارات تخص الملفات. مجموعات Google تُبقي حتى العائلات العربية كاملة التغطية تحت 50 كيلوبايت للوزن، ومع ذلك حمّل ربع الصفحات الرئيسية التي قسناها 500 كيلوبايت أو أكثر. هذه المواقع لم تختر عائلات ثقيلة بشكل غير عادي؛ بل حمّلت ملفات كثيرة جدًا وحمّلت معظمها مسبقًا.

قاعدتنا العملية للصفحة الرئيسية العربية: عائلة عربية واحدة، ووزنان، وwoff2 فقط، ومجموعتان عربية ولاتينية، وswap مع خط بديل مطابق، وتحميل مسبق لملف أو ملفين. خصّص نحو 120 كيلوبايت، وهو ما يغطي Regular وBold من Noto Sans Arabic (96.8 كيلوبايت للعربية) إضافة إلى المجموعتين اللاتينيتين (20.9 كيلوبايت).

ارتكبت العلامتان المصريتان ذواتا الخطوط اللاتينية فقط الخطأ المعاكس: يُعرض نصهما العربي بأي خط موجود على الجهاز. وتضيف وسوم الطرف الثالث وزنها فوق ذلك، وهو ما يغطيه مقالنا عن Consent Mode والتتبع في المواقع العربية .

ما الخطوة التالية

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

إذا رأيت من ملفين إلى أربعة ملفات woff2 بأقل من نحو 120 كيلوبايت، فالخطوط ليست عنق الزجاجة، فانتقل إلى الصور والسكربتات. وإذا رأيت ثمانية ملفات أو أكثر، أو أي ملف ttf، أو عائلة محمّلة مرتين، فابدأ بالتقسيم والتحميل المسبق. وللمساعدة، أريد أن تصلح VOCTOS تحميل الخطوط في موقعي العربي، أو للصورة الأشمل، أريد مراجعة سيو تقنية كاملة لصفحاتي العربية.

الأسئلة الشائعة

لماذا موقعي العربي بطيء رغم تحسين الصور؟

افحص الخطوط بعد ذلك. في فحصنا بتاريخ 2 أكتوبر 2026 لـ29 صفحة رئيسية لعلامات عربية، كان وسيط حجم الخطوط 134 كيلوبايت، و6 من 24 موقعًا قابلًا للقياس حمّلت 500 كيلوبايت أو أكثر. افتح DevTools، وصفِّ لوحة Network حسب Font، وعُدّ الملفات. إذا تجاوزت أربعة، فابحث عن ملفات غير مقسّمة وملفات ttf وأوزان غير مستخدمة.

ما خطوط Google العربية المتاحة كخطوط متغيرة؟

بالتحقق عبر Google Fonts API في 2 أكتوبر 2026: خطوط Noto Kufi Arabic وNoto Sans Arabic (من 100 إلى 900) وCairo (من 200 إلى 1000) وReadex Pro (من 160 إلى 700) وNoto Naskh Arabic (من 400 إلى 700) متغيرة. أما IBM Plex Sans Arabic وTajawal وAlmarai فتأتي بأوزان ثابتة فقط، لذا فكل وزن ملف مستقل.

هل أستخدم font-display بقيمة swap أم optional للنص العربي؟

استخدم swap لعناوين العلامة ونص المحتوى، مع خط بديل مضبوط عبر size-adjust حتى لا يكاد التبديل يحرّك التخطيط. واستخدم optional حيث يهمّ ثبات التخطيط أكثر من خط العلامة، لأنه يتخطى خط الويب إذا تأخر وصوله. وترك القيمة دون ضبط يتيح لـChromium إخفاء النص حتى 3 ثوانٍ.

هل ما زال تحميل الخطوط العربية من Google Fonts مفيدًا بفضل التخزين المؤقت؟

ليس عبر المواقع. يقسّم Chrome ذاكرة HTTP المؤقتة حسب الموقع الرئيسي منذ الإصدار 86، لذا يُعاد تنزيل ملف Google Fonts المخزّن من موقع آخر لموقعك. ما زالت Google Fonts تقسّم الخطوط وتضغطها جيدًا، لكن استضافة ملفات woff2 نفسها ذاتيًا على CDN تزيل اتصالًا بطرف ثالث من المسار الحرج.

ما قيمة unicode-range التي أستخدمها لمجموعة خط عربية؟

استخدم U+0600-06FF وU+0750-077F وU+0870-08FF وU+FB50-FDFF وU+FE70-FEFF للكتل العربية، إضافة إلى U+200C-200E لرابط الوصل وفاصل عدم الوصل وعلامة الاتجاه من اليسار لليمين. ضع الأحرف اللاتينية في ملف ثانٍ تحت اسم font-family نفسه، حتى لا تنزّل الصفحات الإنجليزية الرموز العربية أبدًا.