تحميل الخطوط

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

ما تحميل الخطوط؟

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

له خياران أساسيان يحملان اسمين مزعجين:

• FOIT (وميض النص غير المرئي): يُخفى النص حتى يصل الخط المخصص، فتبدو مساحته فارغة ثم يظهر.
• FOUT (وميض النص غير المنسق): يظهر خط احتياطي فورًا، ثم يحل محله الخط المخصص بعد تحميله. يظهر النص سريعًا، لكنه قد «يقفز» إذا اختلف حجما الخطين.

لماذا يهم تحسين محركات البحث؟

لكل خيار كلفة. قد يؤخر FOIT ظهور النص الرئيسي، فيضر أكبر محتوى مرئي (LCP). وقد يسبب FOUT تغيّرًا في التخطيط عند تبديل الخط، فيضر تغيّر التخطيط التراكمي (CLS). وكلاهما من مؤشرات أداء الويب الأساسية التي تستخدمها Google ضمن تجربة الصفحة. لذلك فتحميل الخطوط أداة تقنية لتحسين محركات البحث، لا تفصيل تصميم فقط.

الحلول البسيطة

• استخدم خط نظام إن أمكن. فلا تنزيل ولا تأخير ولا تغيّر، وهو الحل الأكثر موثوقية.
• إذا احتجت خطًا مخصصًا، فاضبط font-display. يخبر font-display: swap أو optional المتصفح ألا يترك النص مخفيًا أثناء الانتظار.
• حمّل الخط المهم مسبقًا. تخبر علامة <link rel="preload"> المتصفح بجلبه مبكرًا بدل اكتشافه لاحقًا.

لجدول قيم font-display، والجمع بين preload وoptional، ومطابقة مقاييس الخط الاحتياطي، والمقارنة بين Google والاستضافة الذاتية، انتقل إلى تبويب المتقدم.

الخلاصة — خطوط الويب المخصصة موارد خارجية تؤثر في العرض. تضر LCP حين يؤخر خط حاجب للعرض أكبر عنصر نصي، وتضر CLS حين يعيد تبديل الخط الاحتياطي بخط الويب تدفق التخطيط. يفشل FOIT وFOUT بطريقتين مختلفتين. والرافعة الأساسية هي font-display: يضمن swap حدوث FOUT، بينما يمنح optional نافذة تقارب 100ms ثم يلتزم بالخط المتاح، فيمنع التبديل اللاحق. يعالج preload اكتشاف الخط المتأخر، والجمع بينه وبين font-display: optional هو ما أبرزته هندسة Google لإزالة اضطراب التخطيط. لكن اجتياز فحص Lighthouse لا يصلح CLS؛ إذ يتطلب ذلك خطًا احتياطيًا مطابق المقاييس أو تجاوزات size-adjust وascent-override. وليس أي من هذا عامل ترتيب مباشرًا، بل يغذي CLS وLCP.

لماذا تمثل الخطوط حالة خاصة؟

تتعلق معظم مشكلات الأداء بحجم الملفات أو بحجب الخيط الرئيسي. أما الخطوط فهي مورد خارجي وتغيّر مقاييس النص؛ لذلك قد تؤخر رسمه وتغيّر حجمه وشكله بعد ظهوره، فتضر LCP وCLS معًا.

يستحق سلوكا المتصفح الافتراضيان التسمية لأن الموضوع كله يعتمد عليهما:

• FOIT: يبقى النص غير مرئي حتى تحميل الخط أو انتهاء المهلة، التي بلغت تاريخيًا نحو ثلاث ثوان في معظم المتصفحات.
• FOUT: يظهر الخط الاحتياطي فورًا ثم يُستبدل بخط الويب عند تحميله.

قد يبدو FOIT أنظف لكنه يخاطر بتأخير العرض، ويبدو FOUT أسرع لكنه يخاطر بتغيّر التخطيط. ولا يكون أيهما آمنًا تلقائيًا.

افصل أيضًا مراحل المسار: تصرّح قاعدة @font-face بالخط، لكن المتصفح لا يجلب ملفه إلا عندما يحتاج نص منسق إلى وجه مطابق. ويخضع الجلب لـCORS عند اختلاف الأصل، لذلك لا يضمن نجاح ورقة الأنماط أن استجابة الخط تحمل الإذن الصحيح. وحتى الجلب الناجح لا يضمن ثبات الصفحة؛ فقد تختلف أزمنة الاكتشاف والتبديل بين الذاكرة الباردة والدافئة والخط المخزن سلفًا. لا يكفي إذن تكرار تحميل واحد في DevTools لتمثيل الزائر الجديد.

كيف تؤثر الخطوط في LCP؟

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

تقول صفحة تحسين Largest Contentful Paint:

“If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won’t be blocked on an additional network request.” (ترجمة) «إذا ضبطت font-display على قيمة غير auto أو block، يبقى النص مرئيًا أثناء التحميل ولا يحجبه طلب شبكة إضافي عن LCP». — web.dev

أي إن swap وfallback وoptional تبقي النص ظاهرًا فلا يصبح LCP رهينة طلب الخط.

كيف تؤثر الخطوط في CLS؟

ينشأ CLS من التبديل. فنادرًا ما تتطابق عروض الحروف وارتفاعات الأسطر في الخط الاحتياطي وخط الويب؛ وعند الاستبدال يعاد تدفق النص ويتحرك ما تحته.

والمفاجأة أن FOIT يسبب CLS أيضًا. فالنص غير المرئي يُنسق بمقاييس الخط الاحتياطي، ولذلك يستمر التبديل في تحريك العناصر. تقول صفحة تحسين CLS:

“Both approaches can cause layout shifts. Even if the text is invisible, it’s still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift” (ترجمة) «قد يسبب النهجان تغيّر التخطيط. وحتى إن كان النص غير مرئي، فإنه يُنسق بالخط الاحتياطي؛ وعند تحميل خط الويب يتحرك قالب النص والمحتوى المحيط». — web.dev

وتلخص الصفحة السلوكين:

“The fallback font is swapped with the web font, incurring a Flash of Unstyled Text (FOUT). ‘Invisible’ text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).” (ترجمة) «يُستبدل الخط الاحتياطي بخط الويب فيحدث FOUT. ويُعرض النص غير المرئي بمقاييس الخط الاحتياطي حتى يتاح خط الويب ويصبح النص ظاهرًا، أي FOIT». — web.dev

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

خاصية font-display

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

يصف مرجع MDN swap بأنه يمنح فترة حجب بالغة القصر وفترة تبديل غير محدودة، وoptional بأنه يمنح فترة حجب بالغة القصر ولا يمنح فترة تبديل. وهذا هو جوهر optional: بعد إغلاق النافذة يبقى الخط المستخدم ولا يحدث تبديل لاحق.

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

تقترح web.dev المزج: استخدم swap للعلامة والعناصر المميزة حيث يهم ظهور الخط، وoptional للنص الأساسي حيث يتقدم ثبات CLS. لا تطبق قيمة واحدة على الموقع كله تلقائيًا.

التحميل المسبق للخطوط

تُكتشف طلبات الخطوط متأخرة، بعد تحليل CSS ومطابقة @font-face بعنصر ظاهر. تختصر <link rel="preload"> ذلك، ويعالج preload مرحلة الاكتشاف:

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

تجعل العلامة المتصفح يبدأ الجلب فورًا وبالتوازي. وتصف هندسة Bing هذا على صفحات البحث: تبدأ علامات preload في <head> التنزيل مباشرة، بينما ينتظر المتصفح من دونها تحليل CSS والعثور على العناصر المطابقة.

أقوى تركيبة وفق Google هي <link rel="preload"> + font-display: optional. تصف web.dev في منع تغيّر التخطيط وFOIT بتحميل الخطوط الاختيارية مسبقًا هذا الجمع بأنه الأكثر فاعلية لضمان عدم اضطراب التخطيط، وتذكر أن Chrome منذ الإصدار 83 أزال التغيّر الذي كان يحدث عند تحميل الخطوط الاختيارية مسبقًا. يمنح preload الخط فرصة للوصول خلال نافذة نحو 100ms، ويضمن optional ألا تدفع ثمن التأخر بتغيّر التخطيط.

متى لا تستخدم preload؟ يستهلك التحميل المسبق موارد المتصفح من موارد أخرى. حمّل خطًا أو خطين حرجين فوق الطية، لا كل وزن؛ فقد يؤدي الإفراط إلى تجويع موارد أهم وإبطاء الصفحة.

تأكد من إعادة استخدام الطلب. يجب أن تتطابق قيم href وas="font" وtype ووضع crossorigin مع الطلب الفعلي في @font-face. وإلا يظهر تحذير preload غير مستخدم وتنزيل ثان مهدور. وقد يتجاوز preload اختيار unicode-range فينزل مجموعة لا تحتاجها الصفحة. تحقق في Network من طلب واحد بدأه preload، لا طلبين.

إصلاح التغيّر نفسه: مطابقة مقاييس الخط الاحتياطي

اجتياز فحص Lighthouse لـfont-display لا يصلح CLS. توضح وثائق Lighthouse أن FOIT وFOUT يتركان الأثر نفسه في CLS عندما يستبدل الخط المخصص خط النظام المؤقت. يجعل swap النص مرئيًا، لكنه يبقي تغيّر التبديل، لذلك يظل font-display جزءًا واحدًا من الحل.

لمنع التغيّر عند حدوث التبديل، اجعل الخطين يشغلان المساحة نفسها:

1. اختر خط نظام قريب المقاييس في مكدس font-family بدل اسم خط مخصص بلا بديل مناسب.
2. تجاوز مقاييس خط الويب باستخدام size-adjust وascent-override وdescent-override وline-gap-override في @font-face كي يطابق صندوق الخط الاحتياطي. تذكر web.dev هذه الواصفات، وتشرحها Smashing Magazine بالتفصيل.

يضبط كل واصف مقياسًا مختلفًا، ويختلف دعم المتصفحات؛ تحقق من التوافق ومن الأوزان والأنماط والنصوص الفعلية. نجاح الوزن العادي باللاتينية لا يضمن نجاح العريض أو المائل أو نص غير لاتيني.

يقدم DebugBear في إصلاح تغيّرات التخطيط التي تسببها خطوط الويب مسارًا كاملًا: القياس، وتحديد الخط، وتطبيق font-display، واختيار بديل أفضل، ثم ضبط المقاييس.

Google Fonts أم الاستضافة الذاتية؟

لا يلزم أن تستضيف الخط ذاتيًا للتحكم في font-display. تقبل واجهة Google Fonts CSS2 معامل display؛ فالعنوان https://fonts.googleapis.com/css2?family=Roboto&display=swap يضبط الواصف في قواعد @font-face. يشرح Addy Osmani هذا التغيير الذي أزال الحاجة السابقة إلى الاستضافة الذاتية لهذا الغرض.

تزيل الاستضافة الذاتية طلب DNS والاتصال الإضافيين إلى fonts.googleapis.com وfonts.gstatic.com. وهذه كلفة حقيقية، ولهذا يساعد تلميح preconnect عند استخدام Google Fonts. لكن تضمين Google المنسوخ يظل ورقة أنماط حاجبة ثم طلب خط، وقد تخلو التضمينات القديمة من display.

لا يوجد فائز عام؛ فالقرار يعتمد على النصوص والأوزان التي تقدمها، وإعداد التخزين المؤقت، وشروط الترخيص. قارن على صفحاتك بدل اتباع توصية درس آليًا.

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

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

تقليل الملف نفسه

تدير الحلول السابقة متى يحمل الخط، ويمكن أيضًا تقليل ما يُحمّل. يزيل تقسيم الخط المحارف غير المستخدمة، وتوفر WOFF2 ضغطًا جيدًا. يزيد الملف الأصغر احتمال وصوله داخل نافذة optional ويقل احتمال حجبه LCP؛ فالتقسيم والضغط مكملان لـfont-display وpreload.

لكن لا توجد مجموعة فرعية صحيحة أو نسبة توفير عالمية؛ يعتمد الأمر على النصوص والمحارف والأوزان التي يحتاجها جمهورك. قس طلباتك قبل التغيير وبعده ولا تعامل دراسة حالة بوصفها وعدًا.

هل هو عامل ترتيب؟

تحميل الخطوط ليس عامل ترتيب مباشرًا. إنه يؤثر في CLS وLCP، وهما من مؤشرات أداء الويب الأساسية وإشارات تجربة الصفحة. وتجربة الصفحة إشارة خفيفة أشبه بكسر التعادل؛ تتقدم عليها الصلة والجودة. أصلح الخطوط لأنها مشكلة حقيقية للمستخدم وتغذي مدخلين للترتيب، لا لأن قيمة font-display سترفع النتيجة وحدها.

رأيي

في دليلي Ahrefs عن CLS وLCP استقر ترتيب الأولويات نفسه: استخدم خط نظام إن استطعت. وإن كان الخط المخصص ضروريًا، فاجمع <link rel="preload"> لجلبه مبكرًا مع font-display: optional لمنحه نافذة قصيرة؛ وإن تأخر تعرض الصفحة خطًا افتراضيًا ويُخزّن المخصص للزيارات اللاحقة. preload ثم optional، والأفضل عدم استخدام خط مخصص أصلًا.

ملخص الذكاء الاصطناعي

خلاصة مكثفة للنسخة المتقدمة:

• تحميل الخط هو ما يعرضه المتصفح أثناء تنزيل الخط المخصص. والخط مورد خارجي يغيّر مقاييس النص، فيؤثر في مؤشرين معًا.
• LCP: يخفي FOIT أكبر عنصر نصي ويؤخر LCP. وتبقي أي قيمة غير auto وblock النص ظاهرًا.
• CLS: يعيد تبديل الخط تدفق التخطيط، ويحدث ذلك مع FOIT أيضًا لأن النص غير المرئي يُنسق بمقاييس البديل.
• font-display هو الرافعة الأساسية: يعني swap نصًا سريعًا مع تبديل لاحق، بينما يمنح font-display: optional نافذة نحو 100ms ثم يمنع التبديل المتأخر. امزجهما حسب العنصر.
• preload يعالج الاكتشاف المتأخر، والجمع بينه وبين optional وswap المقصودين ضمن سياسة font-display هو تركيبة Google لإزالة الاضطراب في Chrome 83 فما بعد. ويبقى optional هو خيار منع التبديل المتأخر. لا تفرط فيه.
• اجتياز تدقيق font-display في Lighthouse لا يعني إصلاح CLS. طابق الخط الاحتياطي أو استخدم size-adjust وascent-override وdescent-override وline-gap-override.
• تستطيع Google Fonts ضبط الواصف بمعامل &display=، بينما تزيل الاستضافة الذاتية الاتصال الإضافي.
• ليس عامل ترتيب مباشرًا؛ بل يغذي CLS وLCP. وأفضل حل هو خط النظام.

الوثائق الرسمية

وثائق أولية من Google وBing.

Google

• أفضل ممارسات الخطوط: جدول قيم font-display ونصيحة المزج.
• تحسين CLS: شرح FOIT وFOUT وسبب تسبب كليهما في التغيّر.
• تحسين LCP: متى يكون الخط مورد LCP وكيف يبقي font-display النص ظاهرًا.
• منع تغيّر التخطيط وFOIT: الجمع بين preload وfont-display: optional وإصلاح Chrome 83.
• تحسين تحميل WebFont وعرضه ودرس تحسين خطوط الويب.
• إبقاء النص مرئيًا أثناء التحميل: تدقيق Lighthouse لـfont-display الذي انتقل في الإصدار 13 إلى لوحة Font display insight.
• واجهة Google Fonts CSS2: معامل display.
• MDN: font-display: مرجع التعريفات.

Bing / Microsoft

• أداء الواجهة الأمامية السريع في Microsoft Bing: توثيق preload في نتائج Bing الإنتاجية، لا موقفًا من font-display أو CLS أو LCP.

اقتباسات من المصادر

هذه تصريحات مسجلة من وثائق Chrome وweb.dev ومن هندسة Bing. لا يوجد تصريح لفريق البحث يسمي font-display موضوع ترتيب، ولن أفترض واحدًا.

Google — web.dev

• “Both approaches can cause layout shifts. Even if the text is invisible, it’s still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift”
  (ترجمة) «قد يسبب النهجان تغيّر التخطيط حتى مع النص غير المرئي؛ إذ يبقى منسقًا بالخط الاحتياطي ثم يتحرك عند تحميل خط الويب».
  — web.dev. انتقل إلى الاقتباس
• “The fallback font is swapped with the web font, incurring a Flash of Unstyled Text (FOUT). ‘Invisible’ text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).”
  (ترجمة) «يُستبدل الخط الاحتياطي بخط الويب فيحدث FOUT، ويظل النص غير المرئي بالخط الاحتياطي حتى يتاح خط الويب فيحدث FOIT».
  — web.dev. انتقل إلى الاقتباس
• “If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won’t be blocked on an additional network request.”
  (ترجمة) «إذا كانت قيمة font-display غير auto أو block، يبقى النص ظاهرًا أثناء التحميل ولا يُحجب LCP بطلب شبكة إضافي».
  — web.dev. انتقل إلى الاقتباس

Bing: التحميل المسبق في الإنتاج

• تصف هندسة Bing علامات preload في <head> التي تبدأ تنزيل الخطوط فورًا؛ ومن دونها لا يجلبها المتصفح حتى يحلل CSS ويجد العناصر المطابقة. اقرأ المقال

قائمة تحقق لتحميل الخطوط

مراجعة سريعة للتأكد من أن الخطوط لا تضر مؤشرات أداء الويب الأساسية بصمت:

• لكل @font-face مخصص أو عنوان Google Fonts قيمة font-display مقصودة.
• يستخدم النص الأساسي font-display: optional أو swap مع بديل مطابق المقاييس.
• يُحمّل خط أو خطان حرجان مسبقًا باستخدام <link rel="preload" as="font" type="font/woff2" crossorigin>.
• لا تُحمّل كل الأوزان مسبقًا.
• تتطابق href وas="font" وtype وcrossorigin مع طلب @font-face الحقيقي، بلا تنزيل مكرر.
• يتضمن مكدس font-family بديل نظام مناسبًا.
• تُطابق المقاييس باستخدام size-adjust وascent-override وdescent-override وline-gap-override عند الحاجة.
• تُقدم الخطوط بصيغة WOFF2 ومقسمة إلى المحارف والأوزان المستخدمة.
• يتضمن Google Fonts معامل display وpreconnect إلى fonts.gstatic.com.
• لا تستخدم الخط المتغير إلا عند عرض أشكال متعددة.
• يؤكد PageSpeed Insights أو Lighthouse أن الخط ليس عنصر LCP أو سبب CLS.

النماذج الذهنية

1. تضرب الخطوط مؤشرين بآليتين. يؤخر الخط الحاجب النص الأكبر فيضر LCP، ويغير التبديل المقاييس فيضر CLS. يعالج swap الأولى لا الثانية.

2. يفشل FOIT وFOUT بشكل مختلف. يخاطر الأول بتأخير العرض، والثاني بتغيّر التخطيط. اختر ثم خفف الخطر.

3. قرار font-display. يمنح font-display: optional نحو 100ms ثم يلتزم من دون تبديل لاحق، ويناسب النص الحساس لـCLS. يعرض swap النص فورًا ويضمن الخط النهائي، ويناسب العلامة مع قبول التغيّر.

4. الاكتشاف مقابل العرض. يعالج preload الاكتشاف، ويعالج font-display سلوك العرض، وتعالج مطابقة المقاييس التغيّر نفسه. وهي روافع مستقلة.

5. سلم الجيد والأفضل. جيد: preload. أفضل: optional معه. الأفضل: خط نظام لا يحمل شيئًا.

ورقة غش لتحميل الخطوط

قيم font-display وفترتا الحجب والتبديل وفق web.dev:

الأرقام سلوك Chromium موثق في web.dev؛ أما CSS فتحدد فئات الفترات وتترك الزمن للمتصفح.

نمطان للفشل: FOIT نص غير مرئي قد يؤخر LCP؛ وFOUT بديل ثم تبديل قد يسبب CLS. وقد يسبب كلاهما CLS عند حدوث التبديل. وتظل قيم fallback وoptional جزءًا من القرار.

الأولوية: خط نظام، ثم preload للخط الحرج باستخدام as="font" type="font/woff2" crossorigin، ثم optional للنص وswap للعلامة، ثم مطابقة المقاييس عبر size-adjust وascent-override وdescent-override وline-gap-override، ثم التقسيم وWOFF2.

Google Fonts: أضف &display=swap أو optional إلى عنوان CSS2 لضبط font-display. ويظل font-display هو الواصف المقصود. واستخدم preconnect إلى fonts.gstatic.com. تزيل الاستضافة الذاتية اتصالًا إضافيًا.

التشخيص: لوحة Font display insight في PageSpeed Insights/Lighthouse، ولوحتا Performance وNetwork في DevTools.

خرافات وأخطاء تحميل الخطوط

كل مما يأتي نتيجة تدقيق شائعة، مع سبب خطئها وما ينبغي فعله بدلًا منها.

«يحل font-display: swap مشكلة CLS كاملة». غير صحيح؛ فهو يصلح FOIT لكنه يضمن swap وFOUT، وقد يحرّك التخطيط. استخدم بديلًا مطابق المقاييس أو font-display: optional.

«preload يسرع الصفحة دائمًا». يأخذ موارد من طلبات أخرى. حمّل فقط الخط أو الخطين اللازمين للرسم الأول.

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

«اجتزت فحص font-display للنص غير المرئي، إذن انتهيت». فحص التبديل وCLS مستقل؛ طابق المقاييس بعد اجتياز التدقيق.

«Google Fonts محسّنة تلقائيًا ولا تضر CWV». يظل التضمين ورقة أنماط حاجبة وطلب خط ما لم تضبط &display=، أي display، وتلميح preconnect أو preload إلى fonts.gstatic.com. اضبط preconnect وحمّل الوزن الحرج فقط.

«تحميل الخط مسألة UX بلا صلة بـSEO». يؤثر في CLS وLCP ضمن تجربة الصفحة. عالجه ضمن CWV من دون تضخيم وزنه، فتجربة الصفحة كاسر تعادل لا عاملًا أساسيًا.

اعثر على الخطوط المحملة

مقتطف في Console يسرد أوجه الخط وحالتها:

Chrome DevTools Console

// List loaded font faces and their status
[...document.fonts].map(f => ({
  family: f.family,
  weight: f.weight,
  style: f.style,
  status: f.status,          // "loaded", "loading", "unloaded", "error"
  display: f.display,        // the font-display value in effect
}));

// When did fonts finish loading? (relative to navigation start)
document.fonts.ready.then(() =>
  console.log("All fonts ready at", performance.now().toFixed(0), "ms")
);

راقب تغيّرات التخطيط الناتجة من الخط

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

Chrome DevTools Console

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log("Layout shift", entry.value.toFixed(4),
        entry.sources?.map(s => s.node));
    }
  }
}).observe({ type: "layout-shift", buffered: true });

تحقق من WOFF2 وحجم الملف

ينبغي تقديم الخطوط بصيغة WOFF2 وتقسيمها. وجّه الأوامر إلى عنوان ملف خط لفحص نوعه وحجمه.

macOS / Linux

curl -sI https://example.com/fonts/brand.woff2 \
  | grep -iE "content-type|content-length"

Windows / PowerShell

$r = Invoke-WebRequest -Method Head https://example.com/fonts/brand.woff2
$r.Headers["Content-Type"]; $r.Headers["Content-Length"]

يشير content-length يبلغ مئات KB لوزن واحد إلى فرصة للتقسيم أو الضغط.

ما استراتيجية تحميل الخط المناسبة؟

أثبت نجاح تغيير تحميل الخط

اختبار preload للخط الحرج

الاختبار: أعد التحميل مع تعطيل الذاكرة وافحص بادئ طلب الخط ووقت بدئه في Network. المتوقع: يبدأ الخط المقصود مبكرًا وتعاد الاستفادة منه في CSS بلا تنزيل مكرر. تفسير الفشل: لا تطابق سمات preload الطلب أو ليس الخط حرجًا. النافذة: فورية. دافع التراجع: طلبات مكررة أو أخطاء Console أو مزاحمة تؤخر موارد أهم.

اختبار ثبات تبديل الخط

الاختبار: اخنق التحميل وسجل مسار Layout Shifts في Performance. المتوقع: يبقى البديل ظاهرًا ولا يسبب الخط النهائي تغيّرًا قابلًا للقياس. تفسير الفشل: تختلف المقاييس أو يتأخر التبديل. النافذة: فورية عبر نقاط التوقف المدعومة. دافع التراجع: نص مخفي أو مقتطع أو CLS أسوأ.

اختبار المؤشرات الميدانية

الاختبار: قارن LCP وCLS بعد الإصدار بخط أساس RUM السابق للقالب. المتوقع: يتحسن المؤشر المستهدف بلا إضرار بالآخر. تفسير الفشل: لم يكن الخط عنق الزجاجة أو استبدلت السرعة بعدم الثبات. النافذة: RUM مع الزيارات وCrUX خلال نافذته المتحركة. دافع التراجع: تدهور ثابت لأي مؤشر.

موارد مفيدة

كتاباتي

• دليل CLS: preload مع font-display: optional.
• دليل LCP: سلم حلول font-display للخطوط.
• دليل Core Web Vitals: موقع CLS وLCP في الصورة الكبرى.
• Patrick Stox على Ahrefs.

من المجال

• Fixing Layout Shifts Caused by Web Fonts: القياس ثم الخط ثم font-display والبديل والمقاييس.
• Ensure text remains visible during webfont load: استخدام size-adjust وascent-override وdescent-override وline-gap-override.
• How to avoid layout shifts caused by web fonts.
• FOUT, FOIT, FOFT.
• CSS Font Descriptors.
• Reduce Layout Reflow.
• We shipped font-display to Google Fonts: معامل display في عنوان الخدمة.

اختبر نفسك: تحميل الخطوط

خمسة أسئلة سريعة عن تأثير خطوط الويب في مؤشرات أداء الويب الأساسية.

سجل التغييرات