أفضل الممارسات للخطوط

تحسين خطوط الويب وفقًا لمؤشرات Core Web Vitals

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

جارٍ تحميل الخط

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

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

لقطة شاشة لعلامة التبويب "التوقيت" في "أدوات مطوري البرامج"

فهم @font-face

قبل الاطّلاع على أفضل الممارسات لتحميل الخط، من المهم فهم آلية عمل @font-face ومدى تأثيرها في تحميل الخط.

بيان @font-face هو جزء أساسي من العمل باستخدام أي خط ويب. على الأقل، تعلن عن الاسم الذي سيتم استخدامه للإشارة إلى الخط ويشير إلى موقع ملف الخط المقابل.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

هناك اعتقاد خاطئ شائع بأنه يتم طلب خط عند العثور على تعريف @font-face، وهذا غير صحيح. لا يؤدي تعريف @font-face في حد ذاته إلى تشغيل تنزيل الخط. بدلاً من ذلك، لا يتم تنزيل خط إلا إذا تمت الإشارة إليه من خلال النمط المستخدَم في الصفحة. على سبيل المثال:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

بمعنى آخر، في المثال أعلاه، لن يتم تنزيل Open Sans إلا إذا كانت الصفحة تحتوي على عنصر <h1>.

وبالتالي، عند التفكير في تحسين الخط، من المهم إعطاء أوراق الأنماط نفس القدر من التفكير في ملفات الخطوط نفسها. يمكن أن يكون لتغيير المحتويات أو تسليم أوراق الأنماط تأثير كبير في وقت وصول الخطوط. وبالمثل، يمكن أن تؤدي إزالة صفحات الأنماط المتتالية (CSS) غير المستخدمة وتقسيم أوراق الأنماط إلى تقليل عدد الخطوط التي يتم تحميلها من خلال الصفحة.

إعلانات الخطوط المضمّنة

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

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

قد يكون تضمين CSS الأساسي أسلوبًا أكثر تقدّمًا لن تتمكّن بعض المواقع الإلكترونية من تحقيقه. مزايا الأداء واضحة، لكنّها تتطلّب عمليات وأدوات إنشاء إضافية لضمان تضمين CSS بالضرورة، ومن الأفضل أن تكون خدمة CSS الأساسية فقط مضمَّنة بشكل صحيح، وأن يتم تقديم أي خدمة CSS إضافية بطريقة لا تؤدي إلى حظر العرض.

الاتصال المُسبَق بالمصادر المُهمّة التابعة لجهات خارجية

إذا كان موقعك الإلكتروني يحمِّل خطوطًا من موقع إلكتروني تابع لجهة خارجية، ننصحك بشدة باستخدام تلميح مورد preconnect لإنشاء عمليات ربط مبكرة مع المصدر التابع لجهة خارجية. يجب وضع تلميحات الموارد في <head> من المستند. يعمل تلميح المورد أدناه على إعداد اتصال لتحميل ورقة أنماط الخط.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

للاتصال المُسبَق بالاتصال المُستخدَم لتنزيل ملف الخط، أضِف تلميحًا منفصلاً لمورد preconnect يستخدم السمة crossorigin. على عكس أوراق الأنماط، يجب إرسال ملفات الخطوط عبر اتصال CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

عند استخدام تلميح المورد preconnect، تذكّر أنّه يمكن لموفّر الخط عرض أوراق أنماط وخطوط من مصادر منفصلة. على سبيل المثال، هذه هي الطريقة التي سيتم بها استخدام تلميح المورد preconnect لخطوط Google.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

يُرجى توخّي الحذر عند استخدام preload لتحميل الخطوط.

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

قد يكون تضمين إعلانات الخطوط وتعديل أوراق الأنماط طريقة أكثر فعالية. تقترب هذه التعديلات من معالجة السبب الأساسي للخطوط التي يتم اكتشافها مؤخرًا - بدلاً من مجرد تقديم حل بديل.

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

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

إرسال الخطوط

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

استخدام الخطوط المستضافة ذاتيًا

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

إذا كنت تفكّر في استخدام خطوط مستضافة ذاتيًا، تأكَّد من أنّ موقعك الإلكتروني يستخدم شبكة توصيل المحتوى (CDN) وHTTP/2. وبدون استخدام هذه التقنيات، من غير المرجح أن تقدم الخطوط المستضافة ذاتيًا أداءً أفضل. لمزيد من المعلومات، يُرجى الاطّلاع على شبكات توصيل المحتوى.

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

استخدام WOFF2

من بين خطوط الخطوط الحديثة، يُعدّ WOFF2 أحدث الخطوط، ويوفّر أوسع دعمًا للمتصفّح، وهو يقدّم أفضل أنواع الضغط. ولأنه يستخدم Brotli، فإن WOFF2 يضغط بنسبة 30% أفضل من WOFF، مما يؤدي إلى بيانات أقل للتنزيل وبالتالي أداء أسرع.

نظرًا لدعم المتصفح، ينصح الخبراء الآن باستخدام WOFF2 فقط:

في الواقع، نعتقد أن الوقت قد حان أيضًا للإعلان: استخدم WOFF2 فقط وانسى كل شيء آخر.

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

"برام شتاين"، من تقرير Web Almanac لعام 2022

مجموعة فرعية من الخطوط

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

يحدّد واصف unicode-range في بيان @font-face المتصفِّح للأحرف التي يمكن استخدام الخط لها.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

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

وغالبًا ما يتم استخدام unicode-range جنبًا إلى جنب مع أسلوب التقسيم الفرعي. يتضمن خط فرعي جزءًا أصغر من الأشكال الرسومية التي كانت مضمنة في ملف الخط الأصلي. على سبيل المثال، بدلاً من عرض جميع الأحرف لجميع المستخدمين، قد ينشئ الموقع خطوطًا فرعية منفصلة للأحرف اللاتينية والسيريلية. يختلف عدد الأحرف الرسومية لكل خط بشكل كبير: عادةً ما تكون الخطوط اللاتينية بحجم 100 إلى 1000 حرف رسومي لكل خط؛ يمكن أن تتضمّن خطوط CJK أكثر من 10,000 حرف. يمكن أن تؤدي إزالة الرموز الرسومية غير المستخدمة إلى تقليل حجم ملف الخط بشكل كبير.

قد يوفر بعض موفري الخطوط إصدارات مختلفة من ملفات الخطوط مع مجموعات فرعية مختلفة تلقائيًا. على سبيل المثال، تستخدم Google Fonts هذا الإعداد تلقائيًا:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

ومن الممكن أيضًا إضافة مجموعة فرعية من الخطوط يدويًا إذا كان موفِّر الخطوط يسمح بذلك، إما من خلال واجهة برمجة تطبيقات (تتيح Google Fonts هذا الخيار من خلال توفير مَعلمة text)، أو من خلال تعديل ملفات الخطوط يدويًا ثم الاستضافة الذاتية. تتضمن أدوات إنشاء مجموعات فرعية من الخطوط الخط الفرعي والرسم البياني. ومع ذلك، تحقَّق من ترخيص الخطوط التي تستخدمها، بما في ذلك السماح بالخيارات الفرعية والمضيف الذاتي.

استخدام خطوط ويب أقل

أسرع خط لعرضه هو خط لم يتم طلبه في المقام الأول. خطوط النظام والخطوط المتغيّرة هما طريقتان لتقليل عدد خطوط الويب المُستخدَمة على موقعك الإلكتروني.

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

لاستخدام خط النظام في CSS، أدرِج system-ui كمجموعة الخطوط:

font-family: system-ui

تكمن الفكرة وراء الخطوط المتغيّرة في إمكانية استخدام خط متغيّر واحد كبديل لملفات خطوط متعدّدة. تعمل الخطوط المتغيرة من خلال تحديد "default" وتوفير "axes" لمعالجة الخط. على سبيل المثال، يمكن استخدام خط متغيّر مع محور Weight لتطبيق أحرف كانت تتطلّب في السابق خطوطًا منفصلة للّون الفاتح والعادي والغامق والغامق للغاية.

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

عرض الخط

عند مواجهة خط ويب لم يتم تحميله بعد، يواجه المتصفح معضلة: هل يجب أن يتوقف عن عرض النص حتى يصل خط الويب؟ أم هل يجب عرض النص بخط احتياطي إلى أن يصل خط الويب؟

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

يمكن ضبط هذا السلوك باستخدام السمة font-display. قد يؤدي هذا الاختيار إلى تداعيات كبيرة، فمن الممكن أن يؤثر font-display في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) وسرعة عرض المحتوى على الصفحة (FCP) وثبات التنسيق.

اختيار استراتيجية font-display مناسبة

يتم من خلال font-display إعلام المتصفّح بكيفية متابعة عرض النص في حال عدم تحميل خط الويب المرتبط. ويتم تحديدها حسب كل خط.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

هناك خمس قيم محتملة للعمود "font-display":

القيمة فترة الحظر فترة التبديل
تلقائي يختلف حسب المتصفح يختلف حسب المتصفح
حظر من ثانيتَين إلى 3 ثوانٍ غير محدد
تبديل 0 ملي ثانية غير محدد
Fallback 100 مللي ثانية 3 ثوانٍ
اختياري 100 مللي ثانية لا ينطبق
  • فترة الحظر: تبدأ فترة الحظر عندما يطلب المتصفّح خطًا من الويب. خلال فترة الحظر، إذا لم يكن خط الويب متاحًا، يتم عرض الخط بخط احتياطي غير مرئي، وبالتالي لن يظهر النص للمستخدم. إذا لم يكن الخط متاحًا في نهاية فترة الحظر، سيتم عرضه بخط احتياطي.
  • فترة التبديل: تبدأ فترة التبديل بعد فترة الحظر. إذا أصبح خط الويب متاحًا أثناء فترة التبديل، سيتم "استبداله" بوصة

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

بالنسبة إلى معظم المواقع، هذه هي الاستراتيجيات الثلاث التي ستكون أكثر قابلية للتطبيق:

  • إذا كان الأداء هو أولوية قصوى: استخدِم font-display: optional. هذا هو الأكثر "أداء" نهج: يتأخر عرض النص لمدة لا تزيد عن 100 ملي ثانية، وثمة ضمان بعدم وجود متغيّرات في التصميم ذات صلة بتبديل الخطوط. ومع ذلك، فإن الجانب السلبي هنا هو أنه لن يتم استخدام خط الويب في حالة وصوله متأخرًا.

  • إذا كان عرض النص سريعًا هو أولوية قصوى، ولكنك لا تزال تريد ضمان استخدام خط الويب: استخدِم font-display: swap ولكن احرص على تقديم الخط في وقت مبكر بما فيه الكفاية لكي لا يتسبب في حدوث متغيّرات في التصميم. والجانب السلبي لهذا الخيار هو التغيير المزعج الذي يحدث عند وصول الخط متأخرًا.

  • إذا كانت أولوية عرض النص بخط ويب هي ضمان عرض النص: استخدِم font-display: block، ولكن احرِص على تقديم الخط في وقت مبكر بما فيه الكفاية لتقليل تأخير النص. ومن الجوانب السلبية لهذا الخيار هو أنّه سيتم تأخير عرض النص الأولي. يُرجى ملاحظة أنّه على الرغم من هذا الإيقاف، لا يزال من الممكن أن يتسبب في حدوث متغيّرات في التصميم، لأنّ النص مرسوم فعليًا غير مرئي، وبالتالي يتم استخدام مساحة الخط الاحتياطية لحجز المساحة. وبعد تحميل خط الويب، قد يتطلب ذلك مساحة مختلفة، وبالتالي تغيير. وقد يكون هذا التغيير أقل إرباكًا من font-display: swap لأنّ النص نفسه لن يتغير.

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

تقليل الانتقال بين الخط الاحتياطي وخط الويب

للحد من تأثير متغيّرات التصميم التراكمية (CLS)، يمكنك استخدام سمات size-adjust الجديدة. لمزيد من المعلومات، يمكنك الاطّلاع على المقالة حول خدمة مقارنة الأسعار (CSS) size-adjust. هذه إضافة جديدة جدًا إلى مجموعة أدواتنا، لذا فهي أكثر تقدمًا ويدويًا بعض الشيء في الوقت الحالي. لكن بالتأكيد واحد للتجربة ومراقبة تحسينات الأدوات في المستقبل!

الخاتمة

لا تزال خطوط الويب مؤثِّرة بشكل سلبي، ولكن لدينا مجموعة متزايدة من الخيارات للسماح لنا بتحسينها للحدّ من هذه المؤثِّرة قدر الإمكان.