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