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

تعلمت في الوحدات السابقة كيفية تحسين 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

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

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

WOFF
مؤشر EOT
WOFF2
TTF

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

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