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

تحسين خطوط الويب بما يتوافق مع "مؤشرات أداء الويب الأساسية"

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 إضافي بطريقة حظر غير معروضة.

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

إذا كان موقعك الإلكتروني يحمّل خطوطًا من موقع إلكتروني تابع لجهة خارجية، ننصحك بشدة باستخدام تلميح المورد 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 Fonts.

<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، وإذا تم استخدامه بحكمة، يجب استخدامه فقط لتحميل تنسيق خط واحد.

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

عرض الخط

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

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

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

إذا كنت تريد استخدام خطوط مستضافة ذاتيًا، تأكَّد من أنّ موقعك الإلكتروني يستخدم شبكة توصيل المحتوى (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 و1,000 حرف رسومي لكل خط، بينما يمكن أن تضمّ خطوط 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) أو عن طريق تعديل ملفات الخطوط يدويًا ثم الاستضافة الذاتية. تشمل أدوات إنشاء مجموعات فرعية للخطوط subfont وglyphanger. ومع ذلك، تحقَّق من الترخيص للخطوط التي تستخدمها تسمح بالإعداد الفرعي والمضيف الذاتي.

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

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

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

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

font-family: system-ui

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

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

عرض الخط

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

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

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

اختيار استراتيجية 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. وهذه إضافة جديدة جدًا إلى مجموعة أدواتنا، لذلك فهي أكثر تقدمًا وعملية يدوية بعض الشيء في الوقت الحالي. ولكن بالتأكيد واحدة يمكنك تجربتها ومراقبة تحسينات الأدوات في المستقبل!

الخلاصة

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