الخطوط الفارسية وسرعة الموقع

لماذا يكلف الخط الفارسي أكثر

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

والرقم الحقيقي من ملفات هذا الموقع: الخط الأساسي بالوزن العادي يحمل ٧٢٦ جليفا و٦٥٢ كدبوينت وحجمه ٤١.٧ كيلوبايت. ونسخته المصغّرة تحمل ٥٩٩ جليفا و٥٢٧ كدبوينت وحجمها ٢٤.٧ كيلوبايت.

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

وما نتناوله هنا سؤال آخر يُسأل أقل: بعد أن يخف ملفك، كم من تلك الملفات عليك أن ترسل فعلا؟ وعلى هذا الموقع وفّر جواب ذلك السؤال أكثر مما وفّر الساب ست.

كم وزنا تحتاج فعلا؟

هنا تفقد أكثر المواقع الفارسية بايتات، والعلاج ليس ضبطا: بل قاعدة داخل CSS نفسه لا يكاد أحد يستعملها.

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

والآن هذا الموقع. في ورقة الأنماط الرئيسية خمسة أوزان مكتوبة، ويمكنك عدّها بنفسك:

grep -ohE 'font-weight:[[:space:]]*[0-9]{3}' style.css | tr -d ' ' | cut -d: -f2 | sort -un

وناتجها خمسة أرقام: ٤٠٠ و٥٠٠ و٦٠٠ و٧٠٠ و٨٠٠. لكن في HTML الذي يقدمه هذا الموقع فعلا ثلاث كتل font-face فقط: ٤٠٠ و٧٠٠ و٨٠٠. فالوزن ٥٠٠ يُحَل إلى ٤٠٠ والوزن ٦٠٠ إلى ٧٠٠، لأن القاعدة أعلاه تقول ذلك، ولا يرى أحد الفرق على الصفحة.

احسب التوفير. فالملفات الثلاثة المرسلة ٢٤.٧ و٢٤.٩ و٢٥.٠ كيلوبايت، مجموعها ٧٤.٦ كيلوبايت؛ والأوزان الثلاثة نفسها كاملة ٤١.٧ و٤١.٨ و٤٢.٠ كيلوبايت. ولو أُرسلت الأوزان الخمسة كاملة بلا ساب ست لكانت ٢٠٨.٦ كيلوبايت. أي إن قرارين معا أزالا أكثر من ثلثي وزن الخط، وكان الثاني وحده، أي عدم إرسال وزنين، نحو ٥٠ كيلوبايت: أكثر مما يوفره الساب ست على ملف واحد.

وأمر آخر متصل بالقاعدة نفسها: لأن ٧٠٠ و٨٠٠ لكليهما ملف، لا يُضطر المتصفح أبدا إلى افتعال خط عريض. والعريض المفتعل يبدو على الخط الفارسي أسوأ منه على اللاتيني، ودرس التايبوغرافيا الفارسية يشرح السبب.

واعتراف صغير من ترتيبنا غير المكتمل: في مجلد خطوط هذا الموقع وزن سادس يشغل ٤١.٥ كيلوبايت ولا يشير إليه شيء في الكود. وهو لا يُرسل إلى زائر فلا يكلف سرعة، لكنه يستحق الحذف مثله مثل غيره.

font-display: لماذا اخترنا optional لا swap

حتى يصل ملف الخط، على المتصفح أن يقرر ما يفعل بالنص، وfont-display يكتب ذلك القرار. وكل درس تقريبا يوصي باستعمال swap. أما نحن فاخترنا optional ونكتب السبب، لأن هذا من المواضع التي تعمل فيها النصيحة الشائعة أسوأ مع الفارسية.

مع swap يرسم المتصفح النص فورا بخط بديل ويبدله لحظة وصول الخط الحقيقي. فالنص لا يكون خفيا أبدا، وهذا مكسب هذا الخيار. وثمنه في تلك اللحظة بالذات: تتغير عروض الحروف وتُعاد قسمة السطور وتهتز الصفحة كلها. وتلك الهزة هي انزياح التخطيط الذي يُقاس في درس Core Web Vitals.

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

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

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

ابدأ الخط أبكر: preload وEarly Hints

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

الخطوة الأولى preload: سطر في الرأس يقول للمتصفح ابدأ هذا الملف الآن. والقاعدة الأكثر إهمالا هنا أن تسبق تحميل خطوط المنظر الأول وحدها. فإن سبقت تحميل الأوزان الخمسة بدأ المتصفح خمسة تنزيلات متزامنة، وذهب عرض النطاق الذي كان ينبغي أن يذهب إلى صورة الصفحة الرئيسية إلى خط يلزم في أسفلها. ولهذا الموقع ثلاثة خطوط ويسبق تحميل اثنين فقط: الوزن العادي للمتن وأثقل وزن للعنوان الرئيسي.

والخطوة الثانية تُرى أقل وأثرها حقيقي. فبإمكان الخادم أن يرسل توجيه preload نفسه ترويسة استجابة، وبعض شبكات توزيع المحتوى تمرره إلى المتصفح استجابةً تمهيدية بالرمز ١٠٣، قبل أن يجهز HTML نفسه. أي إن المتصفح يستطيع تنزيل الخط في المدة التي يقضيها الخادم في بناء الصفحة.

وعلى هذا الموقع يعمل ذلك ويُرى من الخارج: فالطلب إلى الصفحة الأولى يعيد أولا استجابة 103 تحمل الخطين نفسيهما، ثم استجابة 200 بالصفحة ذاتها. ولتجربته على موقعك خذ الترويسات بأداة سطر أوامر وابحث عن سطر يبدأ بالرقم ١٠٣؛ فالمتصفح لا يعرض هذه الاستجابة في أدوات المطور.

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

مجموعة بدائل لا تقفز

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

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

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

وأمر يستحق الفعل ويُفعل أقل: اختبر المجموعة فعلا. احذف في أدوات مطور متصفحك اسم الخط الحقيقي من القاعدة وانظر إلى الصفحة. فإن بقيت مقروءة سهُل قرار optional؛ وإن بدت صفحة مكسورة فغيّر مجموعتك لا font-display.

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