افزایش سرعت و پرفورمنس Action Hook پلتفرم: wordpress متوسط (Medium) سطح ریسک: پایین و بی‌خطر (Low Risk)

پیش‌بارگذاری فونت‌ها در وردپرس (Preload Fonts)

تست‌شده و بازبینی‌شده در 1405/06/29 ۶۲ بار کپی ۲۰۵۴ مشاهده
پاسخ سریع و خلاصه کاربردی (Quick Answer)

کد زیر را با تغییر مسیر فونت به functions.php اضافه کنید تا فونت اصلی سایت بلافاصله در بالاترین اولویت لود شود.

مشخصات فنی و شناسنامه کد (Code Information)

بازبینی: 1405/06/29
پلتفرم اجرایی (Platform) wordpress
نوع کد (Code Type) Action Hook
محل قرارگیری فایل (Location) functions.php
سطح دشواری (Difficulty) متوسط (Medium)
سطح ریسک (Risk Level) پایین و بی‌خطر (Low Risk)
نیاز به بکاپ اولیه؟ خیر (کم‌ریسک)
سازگاری با وردپرس تمامی نسخه‌ها
سازگاری با ووکامرس و HPOS سازگار
|
<?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 پوسته خود تغییر دهید.

مسیر فایل: functions.php

این کد چگونه کار می‌کند؟ (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) و نمایش آنی تایپوگرافی فارسی برای کاربر.

پرسش‌های متداول پیرامون این کد (FAQ)

بر اساس استاندارد W3C دانلود فونت‌ها حتی اگر از همان دامنه باشند، باید به عنوان درخواست ناشناس CORS مدیریت شوند و بدون این صفت پریلود لغو می‌گردد.
منابع و مستندات رسمی بررسی‌شده (Official Sources):

سبد خرید شما

0 افزونه

سبد خرید شما خالی است

هنوز محصولی را به سبد خرید اضافه نکرده‌اید. می‌توانید از افزونه‌های اختصاصی ما دیدن فرمایید.

مشاهده فروشگاه افزونه‌ها

ثبت درخواست مشاوره

با تکمیل فرم زیر، کارشناسان فنی بیسکو وب در سریع‌ترین زمان ممکن با شما تماس می‌گیرند.

مشاور
پشتیبانی و مشاوره تخصصی
پاسخگویی سریع کارشناسان
09903336117