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

في الوحدات السابقة، تعلّمت كيفية تحسين ملفات HTML وCSS وJavaScript وموارد الوسائط. في هذه الوحدة، سنتعرّف على بعض الطرق لتحسين خطوط الويب.

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

قبل مناقشة تحسين خطوط الويب، من المفيد معرفة الطريقة التي يكتشف بها المتصفّح هذه الخطوط، ما يساعدك في فهم كيف تمنع CSS استرداد خطوط الويب غير الضرورية في حالات معيّنة.

استكشاف المحتوى

يتم تحديد خطوط الويب الخاصة بالصفحة في ورقة أنماط باستخدام تعريف @font-face:

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

يحدّد مقتطف الرمز البرمجي السابق font-family باسم "Open Sans"، ويخبر المتصفّح بمكان العثور على مورد خط الويب المعنيّ. للحفاظ على النطاق الترددي، لا ينزّل المتصفّح خط الويب إلا بعد التأكّد من أنّ تنسيق الصفحة الحالية يحتاج إليه.

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

في مقتطف CSS السابق، ينزّل المتصفّح ملف الخط "Open Sans" أثناء تحليله للعنصر <h1> في ترميز HTML الخاص بالصفحة.

preload

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

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

<!-- The `crossorigin` attribute is required for fonts-even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

بيانات @font-face المضمّنة

يمكنك إتاحة العثور على الخطوط في وقت مبكر أثناء تحميل الصفحة من خلال تضمين CSS الذي يحظر العرض، بما في ذلك تعريفات @font-face، في <head> من HTML باستخدام العنصر <style>. في هذه الحالة، يكتشف المتصفّح خطوط الويب في وقت مبكر من عملية تحميل الصفحة، لأنّه لا يحتاج إلى انتظار تنزيل ورقة أنماط خارجية.

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

تنزيل

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

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

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

يمكن تقليل هذا الحمل الزائد باستخدام تلميح المورد preconnect. باستخدام preconnect، يمكنك إخبار المتصفّح بفتح اتصال بمصدر خارجي في وقت أقرب من المعتاد:

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

تلمّح مقتطفة HTML السابقة إلى المتصفّح لإنشاء اتصال بـ fonts.googleapis.com واتصال CORS بـ fonts.gstatic.com. تقدّم بعض الجهات التي توفّر الخطوط، مثل Google Fonts، ملفات CSS وموارد الخطوط من مصادر مختلفة.

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

استخدام WOFF2 فقط

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

إنشاء مجموعة فرعية من خطوط الويب

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

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

يقدّم بعض موفّري خطوط الويب، مثل Google Fonts، مجموعات فرعية تلقائيًا من خلال استخدام مَعلمة سلسلة طلب بحث. على سبيل المثال، يعرض عنوان URL الخاص بـ https://fonts.googleapis.com/css?family=Roboto&subset=latin ورقة أنماط بخط Roboto على الويب لا يستخدم سوى الأبجدية اللاتينية.

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

ومع ذلك، إذا لم يكن لديك القدرة على استضافة خطوط الويب بنفسك، يمكنك إنشاء مجموعة فرعية من خطوط الويب التي توفّرها Google Fonts من خلال تحديد مَعلمة سلسلة طلب بحث إضافية تحتوي فقط على نقاط رمز Unicode اللازمة لموقعك الإلكتروني.text على سبيل المثال، إذا كان لديك خط ويب معروض على موقعك الإلكتروني لا يحتاج إلا إلى عدد صغير من الأحرف اللازمة لعبارة "مرحبًا"، يمكنك طلب هذه المجموعة الفرعية من خلال Google Fonts باستخدام عنوان URL التالي: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. يمكن أن يؤدي ذلك إلى تقليل مقدار بيانات خطوط الويب المطلوبة لنوع خط واحد على موقعك الإلكتروني بشكل كبير، إذا كان هذا التقسيم الفرعي الشديد مفيدًا على موقعك الإلكتروني.

عرض الخط

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

block

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

swap

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

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

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

fallback

تمثل قيمة fallback الخاصة بـ font-display حلاً وسطًا بين block وswap. على عكس swap، يحظر المتصفّح عرض الخط، ولكنّه يستبدله بنص احتياطي لفترة قصيرة جدًا. على عكس block، تكون فترة الحظر قصيرة للغاية.

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

optional

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

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

العروض التوضيحية للخطوط

اختبِر معلوماتك

متى ينزّل المتصفّح مورد خط ويب (بافتراض أنّه لم يتم استرجاعه باستخدام توجيه preload)؟

فور اكتشاف المرجع في ورقة الأنماط
يُرجى إعادة المحاولة.
عند إنشاء CSSOM للصفحة وتحديد أنّ خط الويب مطلوب للتصميم الحالي.
إجابة صحيحة.

ما هو التنسيق الوحيد (والأكثر فعالية) الضروري لعرض خطوط الويب على جميع المتصفحات الحديثة؟

WOFF2
إجابة صحيحة.
WOFF
يُرجى إعادة المحاولة.
TTF
يُرجى إعادة المحاولة.
EOT
يُرجى إعادة المحاولة.

التالي: تقسيم رمز JavaScript

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