پیشبارگذاری فونتها در وردپرس (Preload Fonts)
کد زیر را با تغییر مسیر فونت به functions.php اضافه کنید تا فونت اصلی سایت بلافاصله در بالاترین اولویت لود شود.
مشخصات فنی و شناسنامه کد (Code Information)
بازبینی: 1405/06/29<?php
/**
* پیشبارگذاری فونتهای اصلی قالب جهت بهبود زمان LCP و جلوگیری از FOUT/CLS
*/
function bisco_preload_critical_fonts() {
$font_url = get_stylesheet_directory_uri() . '/assets/fonts/iranyekan-web-regular.woff2';
echo '<link rel="preload" href="' . esc_url( $font_url ) . '" as="font" type="font/woff2" crossorigin="anonymous">' . "
";
}
add_action( 'wp_head', 'bisco_preload_critical_fonts', 1 );
کد را کجا قرار دهیم؟ (Placement Guide)
کد را در functions.php قرار داده و متغیر $font_url را به آدرس فایل فونت woff2 پوسته خود تغییر دهید.
این کد چگونه کار میکند؟ (How it Works)
مرورگر به محض خواندن هدر HTML، با دستور rel=preload کانکشن دانلود فونت را با بالاترین اولویت پیش از حتی دانلود فایلهای CSS آغاز میکند.
چه زمانی از این کد استفاده کنیم؟ (Use Cases)
برای فونتهای اصلی و متن بدنه سایت جهت حل مشکل پرش متن و رفع خطای Preload Key Requests در گوگل پیجاسپید.
چه زمانی نباید از این کد استفاده کنیم؟ (Anti-patterns)
برای تمام وزنهای فونت! فقط ۱ یا حداکثر ۲ فایل فونت پرکاربرد (مثلاً Regular) را پریلود کنید، پریلود زیاد باعث قفل شدن پهنای باند میشود.
پیشنیازهای اجرا
فایل فونت با فرمت بهینه woff2 و ویژگی crossorigin='anonymous'.
نحوه تست و اطمینان از عملکرد
در تب Network مرورگر بررسی کنید؛ اولویت فونت باید روی High یا Very High قرار گرفته و در ثانیههای اول لود شود.
نحوه بازگردانی سریع (Rollback)
تابع را از functions.php بردارید.
خطاهای رایج و راهحل رفع
فراموش کردن صفت crossorigin='anonymous' که باعث میشود مرورگر فونت را دو بار دانلود کند!
ملاحظات و نکات امنیتی
اطمینان یابید آدرس فونت با esc_url ایمن شده باشد.
تاثیر بر سرعت و پرفورمنس
کاهش چشمگیر Cumulative Layout Shift (CLS) و نمایش آنی تایپوگرافی فارسی برای کاربر.