في الوحدات السابقة، تعلمت كيفية تحسين موارد HTML وCSS وJavaScript والوسائط. في هذه الوحدة، اكتشف بعض الطرق لتحسين خطوط الويب.
يمكن أن تؤثر خطوط الويب في أداء الصفحة في كل من وقت التحميل ووقت العرض.
قد تستغرق ملفات الخطوط الكبيرة بعض الوقت حتى يتم تنزيلها وتؤثر سلبًا في سرعة عرض المحتوى على الصفحة (FCP)، في حين قد تؤدي القيمة font-display غير الصحيحة إلى متغيّرات غير مرغوب فيها في التصميم تؤدي إلى متغيّرات التصميم التراكمية (CLS) للصفحة.
قبل تحسين خطوط الويب، قد يكون من المفيد معرفة كيفية اكتشافها من خلال المتصفّح، بحيث يمكنك فهم كيف تمنع 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 فقط
تتمتع WOFF2 بالتوافق مع المتصفحات العريضة وأفضل طريقة ضغط، وهي أفضل بنسبة تصل إلى% 30 من WOFF. ويؤدي تقليل حجم الملف إلى تقليص وقت التنزيل. غالبًا ما يكون تنسيق WOFF2 هو التنسيق الوحيد المطلوب لتحقيق التوافق الكامل عبر المتصفحات الحديثة.
الضبط الفرعي لخطوط الويب
تشتمل خطوط الويب عادةً على مجموعة كبيرة من الأحرف الرسومية المختلفة، والتي تكون مطلوبة لتمثيل مجموعة متنوعة من الأحرف المستخدمة في لغات مختلفة. إذا كانت صفحتك تعرض محتوى بلغة واحدة فقط أو تستخدم أحرفًا أبجدية واحدة، يمكنك عندئذٍ تقليل حجم خطوط الويب من خلال إعدادات فرعية. ويتم ذلك غالبًا من خلال تحديد عدد أو نطاق من نقاط رمز يونيكود.
المجموعة الفرعية هي مجموعة مصغرة من الأحرف الرسومية التي تم تضمينها في ملف خطوط الويب الأصلي. على سبيل المثال، بدلاً من عرض كل الأحرف الرسومية، قد تعرض صفحتك مجموعة فرعية محددة للأحرف اللاتينية. اعتمادًا على المجموعة الفرعية المطلوبة، يمكن أن تؤدي إزالة الأحرف الرسومية إلى تقليل حجم ملف الخط بشكل كبير.
يقدّم بعض موفِّري خطوط الويب، مثل Google Fonts، مجموعات فرعية تلقائيًا من خلال استخدام مَعلمة سلسلة طلب بحث. على سبيل المثال، يعرض عنوان URL
https://fonts.googleapis.com/css?family=Roboto&subset=latin ورقة أنماط بخط الويب Roboto الذي يستخدم الأحرف الأبجدية اللاتينية فقط.
إذا قررت إجراء استضافة ذاتية لخطوط الويب، فالخطوة التالية هي إنشاء هذه المجموعات الفرعية واستضافتها بنفسك باستخدام أدوات مثل glyphanger أو الخط الفرعي.
وإذا لم تكن لديك القدرة على الاستضافة الذاتية لخطوط الويب الخاصة بك، يمكنك
ضبط فرعي لخطوط الويب التي توفّرها خدمة Google Fonts من خلال تحديد مَعلمة سلسلة طلب بحث 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) لموقعك الإلكتروني إذا
لم تحرص على استخدام التلميح preload لتحميل مورد خطوط على الويب في أقرب وقت
ممكن، أو إذا كنت لا تفكر في استخدام قيم font-display أخرى.
fallback
القيمة fallback لـ font-display هي بمثابة حل وسط بين block وswap. وعلى عكس swap، يحظر المتصفّح عرض أي خط، ولكن
يستبدل النص الاحتياطي لفترة زمنية قصيرة جدًا. على عكس block،
تكون فترة الحظر قصيرة للغاية.
وإنّ استخدام القيمة fallback يمكن أن يعمل بشكل جيد على الشبكات السريعة، حيث يكون خط الويب هو الخط المستخدَم على الفور في العرض الأوّلي للصفحة إذا تم تنزيل الخط على الويب بسرعة. ومع ذلك، إذا كانت الشبكات بطيئة، سيظهر النص الاحتياطي أولاً بعد انقضاء فترة الحظر، ثم يتم تبديله عند وصول خط الويب.
optional
optional هي قيمة font-display الأكثر صرامة، ولا تستخدم مورد الخط على الويب إلا إذا تم تنزيله خلال 100 مللي ثانية. إذا استغرق تحميل خط ويب وقتًا أطول من ذلك، لن يتم استخدامه على الصفحة، وسيستخدم المتصفح الخط الطباعي الاحتياطي للانتقال الحالي أثناء تنزيل خط الويب في الخلفية ووضعه في ذاكرة التخزين المؤقت للمتصفح.
ونتيجة لذلك، يمكن أن تستخدم عمليات التنقّل اللاحقة في الصفحات خط الويب على الفور، لأنّه سبق أن تم تنزيله. يتجنّب font-display: optional متغيّرات التصميم المرصودة في swap، إلا أنّ بعض المستخدمين لا يرون خط الويب إذا وصل متأخرًا جدًا في التنقّل الأولي للصفحة.
إصدارات تجريبية للخطوط
اختبِر معلوماتك
متى ينزّل المتصفّح مورد خطوط على الويب (بافتراض أنّه لم يتم جلبه من خلال توجيه preload)؟
ما هو التنسيق الوحيد (والأكثر فعالية) اللازم لعرض خطوط الويب على جميع المتصفحات الحديثة؟
المقالة التالية: JavaScript المقسّمة للترميز
بعد فهمك لميزة تحسين الخطوط، يمكنك الآن الانتقال إلى الوحدة التالية التي تتناول موضوعًا لديه احتمال كبير أن يحسّن سرعة التحميل الأولية للصفحة للمستخدمين، وهي تأجيل تحميل JavaScript من خلال تقسيم الرمز. ومن خلال القيام بذلك، يمكنك الحفاظ على انخفاض معدل نقل البيانات وتزايد سرعة وحدة المعالجة المركزية (CPU) قدر الإمكان خلال مرحلة بدء تشغيل الصفحة، وهي الفترة الزمنية التي من المرجح جدًا أن يتفاعل فيها المستخدمون معها.