این لبه کد به شما نشان می دهد که چگونه فونت های وب را با استفاده از rel="preload" از قبل بارگیری کنید تا هر فلش متن بدون استایل (FOUT) را حذف کنید.
اندازه گیری کنید
ابتدا نحوه عملکرد وب سایت را قبل از افزودن هر گونه بهینه سازی اندازه گیری کنید.
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
. - «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
گزارش Lighthouse که ایجاد می‌شود، دنباله واکشی منابع را تحت حداکثر تأخیر مسیر بحرانی به شما نشان می‌دهد.
در ممیزی فوق، فونت های وب بخشی از زنجیره درخواست حیاتی هستند و آخرین بار واکشی می شوند. زنجیره درخواست بحرانی نشان دهنده ترتیب منابعی است که اولویت بندی شده و توسط مرورگر واکشی می شوند. در این نرم افزار، فونت های وب (Pacfico و Pacifico-Bold) با استفاده از قانون font-face@ تعریف می شوند و آخرین منبعی هستند که توسط مرورگر در زنجیره درخواست بحرانی واکشی شده است. به طور معمول، فونت های وب تنبل بارگذاری می شوند، به این معنی که تا زمانی که منابع حیاتی بارگیری نشده اند (CSS، JS) بارگذاری نمی شوند.
در اینجا دنباله منابع واکشی شده در برنامه آمده است:
پیش بارگذاری فونت های وب
برای جلوگیری از FOUT، می‌توانید فونت‌های وب را که فوراً مورد نیاز هستند، از قبل بارگذاری کنید. عنصر Link را برای این برنامه در سر سند اضافه کنید:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
ویژگی‌های as="font" type="font/woff2" به مرورگر می‌گوید که این منبع را به صورت فونت دانلود کند و به اولویت‌بندی صف منابع کمک می‌کند.
مشخصه crossorigin نشان می‌دهد که آیا منبع باید با درخواست CORS واکشی شود، زیرا ممکن است قلم از دامنه دیگری آمده باشد. بدون این ویژگی، فونت از پیش بارگذاری شده توسط مرورگر نادیده گرفته می شود.
از آنجایی که Pacifico-Bold در هدر صفحه استفاده می‌شود، ما یک تگ پیش‌بارگذاری اضافه کردیم تا آن را زودتر واکشی کنیم. مهم نیست که فونت Pacifico.woff2 را از قبل بارگذاری کنید زیرا به متنی که در زیر صفحه است استایل می دهد.
برنامه را دوباره بارگیری کنید و دوباره Lighthouse را اجرا کنید. بخش Maximum Critical path Latency را بررسی کنید.
توجه کنید که چگونه Pacifico-Bold.woff2 از زنجیره درخواست بحرانی حذف می شود. قبلاً در برنامه واکشی شده است.
با پیش بارگذاری، مرورگر می داند که باید این فایل را زودتر دانلود کند. توجه به این نکته مهم است که در صورت عدم استفاده صحیح، پیش بارگذاری می تواند با درخواست های غیر ضروری برای منابعی که استفاده نمی شوند، به عملکرد آسیب برساند.