این codelab به شما نشان می‌دهد که چگونه قلم‌های وب را بااستفاده از rel="preload" پیش‌بارگیری کنید تا
هرگونه چشمک زدن نوشتار بدون سبک (FOUT) را حذف کنید.
اندازه گرفتن
ابتدا عملکرد وب‌سایت را قبل‌از افزودن هرگونه بهینه‌سازی بسنجید.
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید. - برای باز کردن DevTools، کلیدهای `Control+Shift+J` (یا `Command+Option+J` در Mac) را فشار دهید.
- روی برگه Lighthouse کلیک کنید.
- مطمئن شوید چارگوش انتخاب عملکرد در فهرست دسته‌ها انتخاب شده باشد.
- روی دکمه تولید گزارش کلیک کنید.
گزارش 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 را دوباره اجرا کنید. بخش حداکثر تأخیر مسیر اصلی را بررسی کنید.
توجه کنید که چگونه Pacifico-Bold.woff2 از زنجیره درخواست‌های حیاتی حذف شده است. این مورد قبلاً در برنامه واکشی شده است.
با پیش‌بارگیری، مرورگر می‌داند که باید این فایل را زودتر بارگیری کند. توجه به این نکته مهم است که اگر پیش‌بارگیری به‌درستی استفاده نشود، می‌تواند با ایجاد درخواست‌های غیرضروری برای منابعی که استفاده نمی‌شوند، به عملکرد آسیب برساند.