غالبًا رأيت هذا من قبل دون أن تعرف اسمه: تفتح صفحة، يختفي النص لجزء من الثانية، ثم يظهر فجأة بمجرد تحميل الخط. هذه هي ظاهرة "Flash of Invisible Text" أو FOIT، وهي واحدة من أكثر الطرق خفاءً التي تضر بجهودك في تحسين سرعة الموقع.
الخبر الجيد أن هذه المشكلة قابلة للحل تمامًا. بمجرد أن تفهم سبب حدوثها، يستغرق الحل دقائق فقط لا أيامًا.
ما الذي يسبب فعليًا ظاهرة النص الخفي
الخطوط المخصصة على الويب لا تأتي مدمجة في المتصفح. يجب تحميلها، تمامًا مثل أي صورة أو سكريبت. بشكل افتراضي، تخفي كثير من المتصفحات النص حتى ينتهي تحميل ملف الخط. إذا كان اتصالك بطيئًا، أو كان حجم ملف الخط كبيرًا، فقد يظل هذا النص مخفيًا لثانية أو ثانيتين أو حتى ثلاث ثوانٍ.
خلال هذه الفترة، يرى الزائر صفحة فارغة، أو صفحة ينقصها النص في أماكن العناوين والفقرات. يشعر الأمر وكأن هناك خللًا، حتى لو تم تحميل بقية الصفحة بشكل طبيعي. وهذا يؤثر مباشرة على نتيجة Largest Contentful Paint (LCP)، لأن النص غالبًا ما يكون أكبر عنصر مرئي في الصفحة.
الفرق بين FOIT و FOUT
هناك مشكلة مشابهة تسمى Flash of Unstyled Text، أو FOUT. بدلًا من إخفاء النص، يعرضه المتصفح فورًا بخط احتياطي افتراضي، ثم يستبدله بالخط المخصص بمجرد جاهزيته. تتسبب FOUT في قفزة مرئية أثناء إعادة ترتيب النص، مما قد يؤدي إلى تحول في تخطيط الصفحة (layout shift). أما FOIT فتخفي المشكلة لكنها تؤخر ظهور المحتوى. لا أحدهما مثالي بمفرده، لكن FOUT غالبًا الخيار الأكثر أمانًا كإعداد افتراضي لأن الزائر يستطيع قراءة شيء ما فورًا.
خاصية font-display هي أول حل لديك
أكثر حل فعّال لمشكلة FOIT هو خاصية CSS المسماة font-display. فهي تخبر المتصفح بالضبط كيف يتصرف أثناء تحميل الخط.
@font-face { font-family: 'YourFont'; src: url('yourfont.woff2') format('woff2'); font-display: swap; }إليك ما تفعله القيم الشائعة فعليًا:
- auto - يترك القرار للمتصفح، وهذا يعني غالبًا حدوث FOIT في المتصفحات القديمة
- block - يخفي النص لمدة تصل إلى 3 ثوانٍ، ثم يستخدم خطًا احتياطيًا إذا لم يكن الخط جاهزًا (هذا ما يسبب FOIT)
- swap - يعرض النص الاحتياطي فورًا، ثم يستبدله بالخط المخصص بمجرد وصوله، دون أي فترة اختفاء على الإطلاق
- fallback - فترة اختفاء قصيرة مدتها 100 ميلي ثانية، ثم خط احتياطي، مع نافذة صغيرة للاستبدال
- optional - يقرر المتصفح ما إذا كان سيستخدم الخط المخصص أصلًا بناءً على سرعة الاتصال، وهو ممتاز للزوار المتكررين
بالنسبة لمعظم المواقع، تُعد قيمة swap الخيار العملي. فهي تضحي بقفزة بصرية بسيطة مقابل ضمان ظهور نص قابل للقراءة منذ أول عرض للصفحة.
التحميل المسبق للخطوط لضمان وصولها بشكل أسرع
ضبط font-display: swap يوقف اختفاء النص، لكنه لا يجعل خطك يصل بشكل أسرع. هنا يأتي دور التحميل المسبق (preloading). تكتشف المتصفحات الخطوط المشار إليها في ملف CSS في وقت متأخر نسبيًا من عملية تحميل الصفحة، غالبًا بعد تحليل ملف CSS نفسه. يخبر تلميح التحميل المسبق المتصفح بجلب ملف الخط فورًا، بالتوازي مع كل شيء آخر.
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>بعض القواعد الأساسية هنا:
- حمّل مسبقًا فقط الخطوط المستخدمة في الجزء الظاهر أعلى الصفحة. التحميل المسبق لكل خط في موقعك يؤخر موارد أخرى مهمة.
- احرص دائمًا على تضمين crossorigin، حتى للخطوط من نفس النطاق، وإلا فقد يفشل التحميل المسبق بصمت في بعض المتصفحات.
- التزم بصيغة WOFF2. فهي أصغر حجمًا من WOFF أو TTF ومدعومة في كل المتصفحات الحديثة.
إذا كنت تستخدم WordPress، فهذا النوع من التحميل المسبق للخطوط يمكن أن يتولاه إضافة أو إعداد لوحة تحكم جيدة تلقائيًا كجزء من ضبط LCP، فلا تضطر لتعديل وسوم head يدويًا كل مرة تغيّر فيها القالب.
تقليل حجم ملف الخط قبل تحميله أصلًا
حتى مع تفعيل swap والتحميل المسبق، يظل ملف الخط الكبير عبئًا يبطئ الأمور. تحتوي معظم عائلات الخطوط على أحرف أكثر بكثير مما يستخدمه موقعك فعليًا. عملية "التقسيم الفرعي" (subsetting) تزيل كل ما لا تحتاجه.
- استخدم أدوات مثل glyphhanger أو خيار subsetting في Google Fonts للاحتفاظ فقط بمجموعات الأحرف التي تستخدمها فعلًا (عادة اللاتينية فقط، ما لم تدعم لغات أخرى)
- قلّل عدد أوزان الخط التي تحمّلها. تحميل 6 أوزان من خط ما بينما تستخدم وزنين فقط في تصميمك هدر شائع وسهل التجنب
- استضف الخطوط بنفسك بدلًا من جلبها من شبكات CDN خارجية عند الإمكان، لأن ذلك يزيل عملية بحث DNS إضافية وإعداد اتصال جديد، وكلاهما يضيف تأخيرًا ملموسًا
يمكن لملف WOFF2 مُقسّم جيدًا أن يتقلص من 150 كيلوبايت إلى 20-30 كيلوبايت فقط، وهذا غالبًا الفرق بين انتهاء تحميل الخط قبل أول عرض للصفحة أو بعده.
تجميع كل شيء معًا: تسلسل تحميل واقعي
استراتيجية خطوط محسّنة بشكل جيد تبدو تقريبًا كالتالي:
- حمّل مسبقًا ملف أو ملفين من الخطوط الأساسية المطلوبة في الجزء الظاهر أعلى الصفحة
- اضبط font-display: swap على جميع تعريفات @font-face
- قدّم ملفات WOFF2 مُقسّمة، مستضافة ذاتيًا حيثما أمكن
- استخدم font-display: optional للخطوط الزخرفية أو الثانوية غير الضرورية لسهولة القراءة
هذا المزيج عادة يزيل ظاهرة FOIT تمامًا ويحسّن بشكل ملموس كلًا من LCP و Cumulative Layout Shift، لأن النص يظهر مبكرًا ولا يقفز كثيرًا بمجرد حدوث الاستبدال.
لقد تناولنا مشكلات مرتبطة بعملية العرض في مقال كيف يجعل تحسين مسار العرض الحرج صفحتك تظهر أسرع، وهو يستحق القراءة إذا أردت رؤية الصورة الأكبر بعيدًا عن الخطوط فقط. وإذا كانت نتائج LCP لا تزال محيرة بالنسبة لك، فمقال كيف تكشف نتائج Largest Contentful Paint عن الاختناقات الحقيقية في إعداد استضافتك يشرح ما الذي يتم قياسه فعليًا.
الخلاصة
ظاهرة النص الخفي تفصيل تقني صغير لكن تأثيره كبير على مدى سرعة موقعك من وجهة نظر الزائر. إصلاحها لا يتطلب إعادة تصميم أو خطة استضافة جديدة، فقط بضعة أسطر من CSS وبعض الاهتمام بالخطوط التي تحمّلها فعليًا. إذا كنت تسعى لتحسين نتائج تحسين سرعة الموقع في أدوات مثل PageSpeed Insights أو GTmetrix، فإن التحقق من قيم font-display هو أحد أسرع المكاسب المتاحة، ويمكنك إنجازه هذا العصر.
للاطلاع على نظرة أوسع حول تشخيص سرعة الصفحة بعيدًا عن الخطوط، راجع نظرة عامة على تحليل سرعة الصفحة لدينا، وإذا كنت تدير هذا الأمر عبر مواقع متعددة، فإن أدوات تحسين WordPress لدينا يمكنها التعامل مع التحميل المسبق وضبط الموارد دون تعديلات يدوية.
