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