أداء الويب

تحسين تحميل الخطوط لزيادة السرعة ومؤشرات Core Web Vitals — التقسيم الفرعي، والتحميل المسبق، ومنع FOUT/FOIT، وإصلاح CLS.

الخطوط المتغيّرة للأداء: ملف واحد يحكمها جميعًا

يمكن للخطوط المتغيّرة استبدال أكثر من 6 ملفات خط ثابتة بملف واحد. تبعات الأداء — حجم الملف، وطلبات HTTP، والمعايير الواقعية.

يُظهر FOUT نصًا احتياطيًا، بينما لا يُظهر FOIT شيئًا. كلاهما آثار جانبية لتحميل الخط — إليك ما يسببهما وكيفية إصلاحهما.

تحميل الخط مصدر خفي لانزياح التخطيط التراكمي (CLS). تعرّف على size-adjust، وتجاوز مقاييس الخط، واستراتيجيات القضاء على CLS المرتبط بالخط.

Google Fonts مريحة لكنها قد تبطئ موقعك. حسّن التحميل باستخدام display=swap، وتلميحات preconnect، والاستضافة الذاتية، وتحميل المجموعات الفرعية.

يتحكم واصف font-display في CSS بما يراه المستخدمون أثناء تحميل الخطوط. لكل قيمة مفاضلاتها — إليك كيفية اختيار المناسبة.

استخدم <link rel=preload> لإخبار المتصفح بأهم الخطوط. قلّل FOUT، وحسّن LCP، وافهم متى يساعد التحميل المسبق ومتى يضر.

تحتوي معظم خطوط الويب على آلاف الأحرف غير المستخدمة. تعرّف على كيفية تقسيم الخطوط فرعيًا لتحميل ما تحتاجه فقط — بتقليل جذري في حجم الملف.

كل ما تحتاج معرفته عن أداء الخطوط — حجم الملف، واستراتيجيات التحميل، وحجب العرض، وكيفية تأثير الخطوط على Core Web Vitals.