الخطوط العربية وسرعة الموقع: اختر ما تقيسه قبل تغيير الخط

الخلاصة: راجع ملفات الخطوط التي تستخدمها الصفحة فعلًا، ووقت طلبها، وما يحدث للنص قبل وصولها وبعده. قارن بدائل تؤدي الوظيفة نفسها، ثم اختبر القراءة والحروف المختلطة، لا حجم التنزيل وحده. هذه خطة مراجعة مقترحة مبنية على الوثائق، وليست قياسًا أجريناه لخطوط أو موقع، ولا وعدًا بسرعة أو درجة أداء محددة.

سجّل المشكلة التي يراها القارئ

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

توضح إرشادات web.dev للخطوط، في النسخة المسترجعة في 1 نوفمبر 2026 والمحدّثة في 4 أكتوبر 2022، أن تأخر الخط قد يؤخر رسم النص، وأن استبدال خط بديل بآخر يختلف في المقاسات قد يسبب تغيرًا في التخطيط. لا تثبت الوثيقة أن الخط سبب كل بطء في صفحة بعينها.

ابدأ بصفحة تمثل الاستخدام الحقيقي: عنوان، وفقرة عربية، وزر، ونموذج، واسم لاتيني أو رقم حين تتطلبه الخدمة. استخدم نصوصًا اصطناعية أو عامة مسموحًا بها، لا بيانات عملاء أو مواد سرية عن جهة العمل.

ابنِ جردًا للملفات المطلوبة، لا لأسماء الخطوط فقط

اطلب مراجعة شبكة التحميل والأنماط المستخدمة، وسجّل لكل ملف: العائلة، والوزن، والصيغة، والصفحة أو العنصر الذي يحتاجه، ومصدره، ووقت بدء الطلب. وفرّق بين حجم النقل وحجم الملف وأثر التخزين المؤقت عند المقارنة.

تشرح web.dev أن وجود @font-face وحده لا يبدأ تنزيل الخط؛ يرتبط الطلب باستخدامه في أنماط تطبق على الصفحة. وقد يؤخر اكتشاف ملف الأنماط طلب الخط نفسه. لذلك ليس عدد أسماء الخطوط في لوحة التصميم قياسًا لعدد الملفات المنزلة.

لا توجد هنا قائمة أحجام مقاسة لتجوال أو القاهرة أو غيرهما. ملف CSS يذكر رابط خط لا يثبت أننا نزلنا ذلك الملف أو قسنا حجمه، كما أن الاستجابة التي يتلقاها عميل معين لا تكفي لوصف ما يتلقاه كل متصفح.

قارن بدائل متكافئة في الحروف والأوزان

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

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

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

افهم ما يفعله unicode-range وما لا يفعله

توضح وثائق MDN للخاصية أنها تحدد نطاق الحروف الذي يمكن استخدام مورد الخط له. إذا لم تستخدم الصفحة حرفًا من النطاق فلا ينزل الملف عبر هذا الاختيار، وإذا استخدمت حرفًا منه فقد ينزل الملف كله.

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

وإذا وُجد تحميل مسبق، فلا تستخدم القاعدة السابقة بوصفها ضمانًا لعدم التنزيل: تنبه web.dev إلى أن preload يتجاهل unicode-range. لذلك لا تحمّل كل الأجزاء مسبقًا ثم تتوقع أن يوفر التقسيم التنزيل نفسه.

اختر سلوك الانتظار بدل وصفة واحدة لكل الصفحات

بحسب MDN عن font-display:

القيمة	السلوك الموصوف	ما تراجعه في موقعك
`swap`	فترة حجب صغيرة جدًا، ثم إمكان استبدال الخط البديل دون حد زمني لفترة الاستبدال	ظهور النص مبكرًا واحتمال تغير الأسطر عند وصول الخط
`optional`	فترة حجب صغيرة جدًا دون فترة استبدال	هل يظل المحتوى واضحًا ومقبولًا إذا لم يُستخدم خط الويب؟
`block`	فترة حجب قصيرة ثم فترة استبدال غير محدودة	أثر تأخر ظهور النص، لا الشكل النهائي وحده

لا تفترض مدة مطابقة في كل متصفح؛ تشير MDN إلى إعدادات خاصة بالمتصفح تحدد بعض هذه الفترات. ولا تعني optional غياب كل أسباب تغير التخطيط في الصفحة. ويمكن أن يساعد تقريب مقاسات الخط البديل، لكن قيمة size-adjust ليست رقمًا عامًا يصلح لكل خط.

لا تضف التحميل المبكر قبل معرفة سبب التأخر

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

أما preload فيستهلك موارد قد تحتاجها عناصر أخرى. استخدمه لملف مهم ثبتت الحاجة إليه في الصفحة، ثم قارن الأثر. والاستضافة الذاتية لا تضمن التفوق على مزود خارجي؛ توصي الوثيقة بالمقارنة الفعلية مع احتساب إنشاء الاتصال وظروف التوصيل. لم تُجرَ هذه المقارنة هنا.

حافظ على العربية مقروءة عند التغيير

تنبه MDN في شرح letter-spacing إلى أن العربية تتوقع بقاء الحروف المتصلة متصلة بصريًا، وأن إضافة تباعد قد تجعل النص يبدو مفككًا. لا تنقل إعداد التباعد من عنوان لاتيني إلى الفقرة العربية دون مراجعة.

راجع النقاط والتشكيل والتفاف الأسطر والأزرار والنص المختلط عند حجم شاشة صغير. وفي شرح W3C لمعيار تباعد النص 1.4.12، المطلوب ألا تضيع معلومات أو وظائف عند تطبيق تعديلات المستخدم المحددة، ومنها ارتفاع سطر لا يقل عن 1.5 من حجم الخط. ليس المطلوب فرض هذه القيم بوصفها التصميم الافتراضي، ويوجد استثناء للخصائص التي لا تستخدمها اللغة ونظام الكتابة. اجتياز هذا الجانب لا يثبت مطابقة الموقع لكل متطلبات الإتاحة.

سلّم قرارًا ونتيجة قابلة للمراجعة

احتفظ بالإعداد السابق والمقترح، والصفحة والنص المستخدمين، والمتصفح والجهاز، وحالة التخزين المؤقت، والملفات المطلوبة، والملاحظة قبل التغيير وبعده. لا تسجل نتيجة متوقعة بوصفها اختبارًا ناجحًا.

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

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