تحسين الخطوط

82% من صفحات الويب لأجهزة الكمبيوتر تستخدم خطوط الويب. تعتبر الخطوط المخصصة مهمة للعلامة التجارية والتصميم واتساق الموقع عبر المتصفحات والأجهزة المختلفة. ومع ذلك، لا ينبغي أن يكون استخدام خط الويب على حساب الأداء.

يحتوي Next.js على ميزة مدمجة لتحسين خطوط الويب تلقائيًا تضمن تضمين CSS للخطوط أثناء وقت البناء، مما يلغي الحاجة إلى جولة إضافية لجلب تعريفات الخطوط. يؤدي هذا إلى تحسينات في مؤشر First Contentful Paint (FCP) و Largest Contentful Paint (LCP).

على سبيل المثال، إليك المقارنة قبل وبعد تحسين Next.js للخط الخاص بك.

قبل التحسين، هناك حاجة إلى طلب شبكة إضافي:

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

بعد التحسين، يقوم Next.js بتضمين CSS للخط تلقائيًا:

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal; }
</style>