في الوحدات السابقة، تعلّمت كيفية تحسين موارد 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)؟
ما هو التنسيق الوحيد (والأكثر فعالية) الضروري لعرض خطوط الويب على جميع المتصفحات الحديثة؟
التالي: تقسيم رمز JavaScript
بعد فهم كيفية تحسين الخطوط، يمكنك الانتقال إلى الوحدة التالية التي تتناول موضوعًا يمكن أن يحسّن بشكل كبير سرعة تحميل الصفحة الأوّلية للمستخدمين، وهو تأجيل تحميل JavaScript من خلال تقسيم الرموز. من خلال إجراء ذلك، يمكنك الحفاظ على الحد الأدنى من استخدام النطاق الترددي ووحدة المعالجة المركزية خلال مرحلة بدء تشغيل الصفحة، وهي الفترة الزمنية التي من المرجّح أن يتفاعل فيها المستخدمون مع الصفحة.