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

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

تحسين خطوط الويب من أجل مؤشرات Core Web Vitals

Katie Hempenius

Barry Pollard

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

تأخُّر عرض النص: إذا لم يتم تحميل خط ويب، عادةً ما تؤخّر المتصفّحات عرض النص. في العديد من الحالات، يؤدي ذلك إلى تأخير سرعة عرض أول محتوى مرئي (FCP). في بعض الحالات، يؤدي ذلك إلى تأخير سرعة عرض أكبر محتوى مرئي (LCP).
تغيّرات التصميم: يمكن أن تؤدي عملية تبديل الخط إلى حدوث تغييرات في التصميم وتؤثر في متغيّرات التصميم التراكمية (CLS). تحدث عمليات تغيير التنسيق هذه عندما يشغل خط الويب وخط النسخ الاحتياطي مساحات مختلفة على الصفحة.

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

تحميل الخط

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

إذا لم تكن متأكدًا مما إذا كان يتم طلب خطوط صفحتك في الوقت المناسب، يمكنك الانتقال إلى علامة التبويب التوقيت ضمن لوحة الشبكة في "أدوات مطوّري البرامج في 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 للاتصال المستخدَم لتنزيل ملف الخط، أضِف تلميحًا منفصلاً للمورد 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. ويعتمد مقدار الجهد المطلوب لتطبيق هذه التحسينات إلى حد ما على اللغات التي يتيحها موقعك الإلكتروني. على وجه الخصوص، يجب الانتباه إلى أنّ تحسين الخطوط للغات الصينية واليابانية والكورية يمكن أن يكون صعبًا بشكل خاص.

استخدام 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. يُستخدَم 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:

font-family: system-ui

تتمثّل فكرة الخطوط المتغيرة في إمكانية استخدام خط متغير واحد كبديل لملفات خطوط متعددة. تعمل الخطوط المتغيرة من خلال تحديد نمط خط "تلقائي" وتوفير محاور لمعالجة الخط. على سبيل المثال، يمكن استخدام خط متغير مع محور 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 للخطوط المستخدَمة في النص الأساسي.

خطوط الرموز

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

بالإضافة إلى ذلك، قد لا يكون استخدام خط احتياطي عمليًا. استبدِل خطوط الرموز بصيغة SVG كلما أمكن ذلك، لأنّها أفضل أيضًا من ناحية تسهيل الاستخدام. تتوافق الإصدارات الأحدث من خطوط الرموز الشائعة عادةً مع SVG. لمزيد من المعلومات حول التبديل إلى ملفات SVG، يُرجى الاطّلاع على صفحة Font Awesome حول SVG Sprites ودليل Material Icons.

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

للحدّ من تأثير CLS، يمكنك استخدام سمات size-adjust.

الخاتمة

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