راهنمای کامل لودینگ احتمالی در وردپرس (Speculative Loading)
وردپرس 6.8 یک ویژگی پرطرفدار را معرفی کرد: بارگذاری پیش‌بینی‌شده. اما دقیقاً چیست و چگونه بر وب‌سایت شما تاثیر می‌گذارد؟ به زبان ساده، و به طور خاص در وردپرس، این یک تکنیک است که با پیش‌بینی صفحاتی که بازدیدکننده احتمالاً در مرحله بعد مشاهده می‌کند و پیش‌بارگذاری آنها، سایت شما را سریع‌تر می‌کند.
در این راهنما، همه نکاتی که باید درباره بارگذاری پیش‌بینی‌شده بدانید را مرور خواهیم کرد، به خصوص در مواردی که به وردپرس مربوط می‌شود. در پایان، می‌توانید تصمیم بگیرید که آیا آن را نگه دارید (به صورت پیش‌فرض فعال است) یا غیرفعال کنید.
راهنمای مطالعه:
بارگذاری پیش‌بینی‌کننده چیست؟
بارگذاری پیش‌بینی شده تکنیکی است که در آن مرورگر منابعی مانند تصاویر، اسکریپت‌ها، فونت‌ها و حتی صفحات کامل را قبل از اینکه کاربر واقعاً آنها را درخواست کند، بارگذاری می‌کند. این اقدامات بر اساس پیش‌بینی‌هایی درباره این است که کاربر احتمالاً به کدام صفحات بعدی خواهد رفت یا بر اساس راهنمایی‌هایی در کد صورت می‌گیرد. این می‌تواند شامل جستجوهای DNS، دریافت منابع یا حتی رندر کردن اسناد در پس‌زمینه باشد.
پیش‌بینی‌ها می‌توانند توسط توسعه‌دهندگان تأمین شوند (مانند اینکه به مرورگر بگویند کدام صفحات بیشترین بازدید را دارند) یا توسط الگوریتم‌های مرورگر تعیین شوند، همانند الگوهایی در تاریخچه مرور کاربر. وقتی که این قابلیت به خوبی عمل کند، بارگذاری پیش‌بینی‌کننده می‌تواند صفحات شما را به طور قابل ملاحظه‌ای سریع‌تر بارگذاری کند یا حتی حس لود صفحات لحظه‌ای ایجاد کند.
اگر از فونت‌های گوگل استفاده می‌کنید، ممکن است کدی مانند این را در تگ <head> سایت خود دیده باشید.
<link rel='dns-prefetch' href='//fonts.googleapis.com' />این کد که توسط تابع wp_resource_hints() در هسته وردپرس اضافه می‌شود، به مرورگر می‌گوید که برای API فونت‌های گوگل، از پیش یک جستجوی DNS انجام دهد. به همین دلیل، وقتی فونت واقعاً نیاز است، سریع‌تر بارگذاری می‌شود چون مرحله DNS از قبل انجام شده است.
هر بار که صفحه بارگذاری می‌شود، وردپرس دارایی‌های صف‌کشیده را بررسی می‌کند. اگر دارایی‌هایی از دامنه‌های خارجی (مثل فونت‌های گوگل) را شناسایی کند، تگ های dns-prefetch یا preconnect مناسب را اضافه می‌کند.
این یک مثال ساده است، اما بارگذاری حدسی فراتر از این هم می‌رود. فراتر از فقط اشاره به این که کدام دارایی‌ها را پیش‌بارگذاری کند، حالا می‌توانید به مرورگر بگویید که URLها را پیش‌بارگذاری یا حتی پیش‌نمایش کند. این دقیقاً همان چیزی است که در وردپرس 6.8 معرفی شد.
برای کسانی که به دنبال درک فنی عمیق‌تری هستند، مستندات موزیلا در مورد بارگذاری حدسی منبع عالی‌ای است.
بارگذاری احتمالی در وردپرس
در اعلامیه انتشار وردپرس نسخه 6.8، بارگذاری احتمالی به عنوان یک ویژگی جدید معرفی شد. اما قبلاً از طریق API راهنمای منابع (مثل مثالی که در بالا به اشتراک گذاشته شد) وجود داشت. نکته جدید این است که وردپرس اکنون شامل پیش‌بارگذاری احتمالی واقعی با استفاده از API قوانین احتمالی است.
برای حفظ یکنواختی، از این به بعد، وقتی به بارگذاری احتمالی اشاره می‌کنم، منظورم مشخصاً عملکرد جدیدی است که در وردپرس نسخه 6.8 معرفی شد. این ویژگی از API قوانین احتمالی استفاده می‌کند تا آدرس‌های کامل URL را براساس پیش‌بینی مرورگر از حرکت بعدی کاربر پیش‌بارگذاری کند.
به عنوان مثال، اگر کسی به صفحه اصلی شما بیاید، وردپرس ممکن است پیش‌بینی کند که لینک وبلاگ را بعدی کلیک خواهد کرد. در حالی که کاربر هنوز در صفحه اصلی است، وردپرس شروع به پیش‌بارگذاری صفحه وبلاگ در پس‌زمینه می‌کند. بنابراین وقتی کاربر کلیک می‌کند، صفحه تقریباً فوری ظاهر می‌شود.
API قوانین گمانه‌زنی
طبق API قوانین گمانه‌زنی، این یک زبان انعطاف‌پذیر برای تعیین لینک‌هایی است که می‌توان قبل از هدایت به‌طور احتمالی آماده کرد. بنابراین به‌جای اینکه مرورگر همه چیز را حدس بزند، توسعه‌دهندگان می‌توانند کدی به وب‌سایت خود اضافه کنند و به‌صراحت بگویند:
هی مرورگر، کاربر ممکن است به زودی روی این لینک کلیک کند، پس برو جلو و شروع به آماده‌سازی آن صفحه در پس‌زمینه کن.
برای استفاده از API قوانین گمانه‌زنی، فقط کافی است مقداری کد JSON به سایت خود اضافه کنید که قوانینی را تعریف کند که مرورگر باید دنبال کند. خود API در مرورگر وجود دارد و نیازی به اضافه کردن و لود کردن آن توسط سایت شما نیست.
استراتژی‌ها
دو استراتژی اصلی وجود دارد که می‌توان با API قوانین حدس به کار برد:
۱. پیش‌بارگیری
- HTML صفحه هدف را دانلود می‌کند.
- مرورگر صفحه را اجرا یا نمایش نمی‌دهد، بلکه آن را برای دسترسی سریع‌تر ذخیره می‌کند.
- استراتژی ایده‌آل برای پیش‌بینی‌های با «اعتماد متوسط» (ممکن است کاربر روی چیزی کلیک کند).
۲. پیش‌رندر
- صفحه هدف را به طور کامل در پس‌زمینه بارگیری و اجرا می‌کند.
- صفحه به محض کلیک کاربر آماده نمایش است.
- بهترین حالت برای پیش‌بینی‌های با «اعتماد بالا»، اما از حافظه بیشتری استفاده می‌کند.
وب‌سایت شما می‌تواند برای هر دو استراتژی قوانین ایجاد کند. در حال حاضر، قوانین پیش‌فرض اضافه‌شده توسط وردپرس از استراتژی پیش‌بارگیری استفاده می‌کنند.
پشتیبانی مرورگر
از سال ۲۰۲۵، API قوانین گمانه‌زنی در مرورگرهای مبتنی بر کرومیوم پشتیبانی می‌شود، اما هنوز در فایرفاکس یا سافاری موجود نیست. می‌توانید برای مشاهده پشتیبانی مرورگر از قوانین گمانه‌زنی به سایت محبوب caniuse.com مراجعه کنید.
این به این معنی است که در زمان نوشتن این پست، بازدیدکنندگان سایت شما باید از نسخه به‌روز شده کروم، اج یا اپرا استفاده کنند تا از این ویژگی بهره‌مند شوند. کد هنوز روی سایت شما برای مرورگرهای پشتیبانی‌نشده قابل دسترسی است، اما چون API قوانین گمانه‌زنی یک پیشرفت تدریجی است، باعث ایجاد خطا یا مشکل نمی‌شود (بلکه توسط مرورگر نادیده گرفته می‌شود).
قوانین پیش‌فرض گمانه‌زنی در وردپرس
وردپرس برای کاربرانی که وارد نشده‌اند، قوانین پیش‌فرض گمانه‌زنی را اضافه می‌کند که به این شکل هستند:
<script type="speculationrules">
{
"prefetch": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "/*"
},
{
"not": {
"href_matches": [
"/wp-*.php",
"/wp-admin/*",
"/wp-content/uploads/*",
"/wp-content/*",
"/wp-content/plugins/*",
"/wp-content/themes/twentytwentyfive/*",
"/*\?(.+)"
]
}
},
{
"not": {
"selector_matches": "a[rel~="nofollow"]"
}
},
{
"not": {
"selector_matches": ".no-prefetch, .no-prefetch a"
}
}
]
},
"eagerness": "conservative"
}
]
}
</script>
در اینجا یک مرور کلی از کد وجود دارد:
prefetchبه مرورگر می‌گوید که HTML را پیش‌بارگیری کند ولی نمایش ندهد.source:"document"به مرورگر می‌گوید که سند فعلی را برای لینک‌های<a>اسکن کند و قوانین را به آنها اعمال کند.href_matches: "/*"پیش‌بارگذاری هر لینکی که با ریشه سایت مطابقت داشته باشد (لینک‌های داخلی سایت).not:این‌ها استثناها هستند (لینک‌هایی که باید نادیده گرفته شوند).- صفحات مدیریت و ورود را نادیده بگیرد.
- افزونه‌ها، بارگذاری‌ها، تم‌ها: لینک‌های رسانه‌ای و ثابت را رد کند.
- لینک‌هایی با کوئری استرینگ (مثلاً
/page?foo=bar) نادیده بگیرد. - لینک‌هایی با ویژگی
re="nofollow"نادیده بگیرد. - لینک‌های با کلاس .no-prefetch یا لینک‌های فرزند این کلاس را نادیده بگیرد.
eagerness: "conservative": به مرورگر می‌گوید محتاط باشد و تنها زمانی پیش‌بارگذاری کند که “مطمئن” باشد کاربر ممکن است کلیک کند (مثل زمانی که موس روی لینک است). گزینه‌های دیگر moderate یا eager هستند که بیشتر “تهاجمی” هستند.
این قوانین به مرورگر می‌گویند که در پیش‌بارگذاری لینک‌های داخلی صفحات با احتیاط برخورد کند، صفحه‌های مدیریت، افزونه‌ها، بارگذاری‌ها، و دایرکتوری‌های محتوایی، و همچنین لینک‌های دارای کوئری استرینگ، لینک‌های با rel=”nofollow”، و هر لینکی که شامل کلاس .no-prefetch باشد را استثناء کند.
چگونه قوانین حدس و گمان وردپرس را سفارشی کنیم
چون وردپرس نمی‌داند که بازدیدکنندگان سایت شما چگونه از آن استفاده می‌کنند، قوانین کلی‌ای را اعمال می‌کند (که برای بیشتر سایت‌ها کار می‌کند). خوشبختانه می‌توانید با استفاده از چند هوک آنها را تا حدی سفارشی کنید.
wp_speculation_rules_configuration(فیلتر)wp_speculation_rules_href_exclude_paths(فیلتر)wp_load_speculation_rules(اکشن)
این هوک‌ها در حال حاضر در Codex رسمی مستند نشده‌اند. من آنها را با جستجو در مخزن GitHub وردپرس پیدا کردم. ممکن است هوک‌های مفید دیگری نیز وجود داشته باشد که من از آنها اطلاع ندارم (یا در آینده اضافه شود)، اما این‌ها احتمالاً تمام چیزی است که برای ویرایش‌های خود به آن نیاز دارید.
چگونه می‌توان تنظیمات قوانین پیش‌فرض را تغییر داد
شما می‌توانید از فیلتر wp_speculation_rules_configuration برای تنظیم پیکربندی پیش‌فرض قوانین پیش‌فرض، از جمله تغییر حالت و میزان تمایل، استفاده کنید. این فیلتر همچنین به شما اجازه می‌دهد که قوانین پیش‌فرض را به‌طور کامل غیرفعال کنید.
در اینجا یک نمونه کد وجود دارد که از این فیلتر برای تغییر پیکربندی پیش‌فرض استفاده می‌کند:
/**
* Modify the default Speculation Rules configuration in WordPress.
*
* Changes the mode from 'prefetch' to 'prerender' and sets the eagerness to 'moderate'.
*
* @param array $config Existing configuration for speculative loading.
* @return array Modified configuration.
*/
function my_custom_speculation_rules_config( $config ) {
if ( is_array( $config ) ) {
$config['mode'] = 'prerender'; // prerender or prefetch
$config['eagerness'] = 'moderate'; // conservative, moderate, or eager
}
return $config;
}
add_filter( 'wp_speculation_rules_configuration', 'my_custom_speculation_rules_config' );در این مثال، یک بررسی is_array() اضافه می‌کنیم. این مهم است زیرا متغیر $config گاهی می‌تواند null باشد (به این صورت می‌توانید ویژگی را به طور کامل غیرفعال کنید).
چگونه URL خاصی را از بارگیری پیش‌بینی‌شده حذف کنیم
فیلتر wp_speculation_rules_href_exclude_paths به شما اجازه می‌دهد یک لیست از الگوهای مسیر URL برای حذف از بارگیری پیش‌بینی‌شده تعریف کنید.
در اینجا یک نمونه کد نشان داده شده که چگونه یک نوع پست سفارشی را از بارگیری پیش‌بینی‌شده حذف کنید. این فرض می‌کند که از پیوندهای یکتا استفاده می‌کنید که در آن URLهای نوع پست شما شامل /custom-post-type/ در اسلاگ هستند:
/**
* Exclude specific URL paths from speculative loading in WordPress.
*
* @param string[] $exclude_paths Array of regex patterns for paths to exclude.
* @return string[] Modified array of exclude path patterns.
*/
function my_excluded_speculation_paths( $exclude_paths ) {
// Exclude custom paths (e.g., anything starting with /custom-post-type/)
$exclude_paths[] = '/custom-post-type/.*';
return $exclude_paths;
}
add_filter( 'wp_speculation_rules_href_exclude_paths', 'my_excluded_speculation_paths' );
من فکر می‌کنم نام فیلتر می‌تواند واضح‌تر باشد، زیرا به نظر می‌رسد که باید بتوانید محرومیت‌های فعلی را تغییر دهید. اما، تنها به شما اجازه می‌دهد که موارد جدید اضافه کنید، زیرا مقدار پیش‌فرضی که به فیلتر ارسال می‌شود یک آرایه خالی است.
چگونه قوانین حدس جدید اضافه کنیم
می‌توانید از wp_load_speculation_rules اکشن هوک برای تغییر قوانین حدس وقتی که بارگذاری می‌شوند استفاده کنید، با استفاده از کلاس WP_Speculation_Rules. این اکشن هوک به شما امکان می‌دهد قوانین سفارشی خود را اضافه کنید.
در اینجا مثالی از چگونگی اضافه کردن یک قانون جدید آمده است:
/**
* Add custom prerender rules for specific URLs using the Speculation Rules API.
*
* @param WP_Speculation_Rules $speculation_rules The rules object provided by WordPress.
*/
function my_add_custom_speculation_rules( $speculation_rules ) {
if ( ! is_a( $speculation_rules, 'WP_Speculation_Rules' ) ) {
return;
}
// Add a custom rule for our "special-offer" page
$speculation_rules->add_rule(
'prerender', // Rule type: either prerender or prefetch
'custom-prerender-rule', // A unique key/ID for this rule
[
'source' => 'list', // 'list' means we are explicitly listing URLs ur 'document' to scan the document for links
'urls' => [
'/black-friday-sale/',
],
'eagerness' => 'eager', // Mode: conservative, moderate, or eager
// Optional metadata
'priority' => 1, // Priority of the rule (1-10) - lower number means higher priority
'referrer_policy' => 'strict-origin-when-cross-origin', // Referrer policy for the request
'options' => [
'allow-credentials' => true, // Whether to send cookies/auth with request
'allow-redirects' => true, // Whether to allow following redirects
],
],
);
}
add_action( 'wp_load_speculation_rules', 'my_add_custom_speculation_rules' );
فرض کنید یک حراج بزرگ جمعه سیاه دارید و انتظار دارید بازدیدکنندگان زیادی روی بنر فروش شما کلیک کنند. اضافه کردن یک قانون مخصوص برای این صفحه با اولویت بالاتر و اشتیاق بیشتر منطقی است. مثال بالا به این نتیجه می‌رسد.
چگونه حذف یا تغییر استثناهای پیش‌فرض را انجام دهیم
وردپرس سه فیلتر مفید برای کنترل قوانین بارگذاری احتمالی در سایت شما ارائه می‌کند. با این حال، کلاس WP_Speculation_Rules روش‌هایی برای تغییر یا حذف قوانین موجود ارائه نمی‌دهد (این ممکن است در آینده تغییر کند).
برای مثال، اگر می‌خواهید بارگذاری احتمالی برای آیتم‌های موجود در پوشه /wp-content/ را مجاز کنید، در حال حاضر هیچ روشی برای حذف این مسیر از پارامتر پیش‌فرض “ندارد” وجود ندارد.
اگر به کنترل کامل بر روی قوانین بارگذاری احتمالی نیاز دارید، می‌توانید قوانین داخلی وردپرس را غیرفعال کرده و اسکریپت JSON خود را وارد کنید.
چگونه بررسی کنیم که بارگذاری پیش‌بینی‌شده کار می‌کند
برای اطمینان از اینکه بارگذاری پیش‌بینی‌شده کار می‌کند، با استفاده از ابزارهای توسعه‌دهنده مرورگرتان سایت خود را بررسی کنید. در اینجا نحوه انجام این کار در کروم را توضیح می‌دهم:
- کروم را باز کنید و به صفحه اصلی سایت خود بروید.
- مطمئن شوید که از حساب کاربری خود خارج شده‌اید (بارگذاری پیش‌بینی‌شده برای کاربران وارد شده غیرفعال است).
- روی هر جایی از صفحه راست‌کلیک کنید و “Inspect” را انتخاب کنید.
- وقتی پنل ابزارهای توسعه‌دهنده باز شد، روی “Application” کلیک کنید.
- در سمت راست، زیر “Background Services”، “Speculative Loads” را خواهید دید.
اگر سایت شما به درستی بارگذاری پیش‌بینی شده را اجرا می‌کند، باید قوانین را در این بخش مشاهده کنید. با کلیک بر روی برگه «پیش‌بینی‌ها» همه URLهایی که می‌توان پیش‌بارگذاری کرد، به همراه وضعیت فعلی آنها نمایش داده می‌شوند.
در تجربه من، وضعیت یک صفحه فقط با قرار گرفتن نشانگر روی پیوندها تغییر نمی‌کند. اما کلیک کردن روی یک پیوند به نظر می‌رسد که پیش‌بارگذاری را فعال می‌کند. بعد از کلیک روی پیوندی که در برگه «پیش‌بینی‌ها» فهرست شده است و سپس فشردن دکمه بازگشت، وضعیت تغییر خواهد کرد.
وردپرس رویکرد محافظه‌کارانه‌تری نسبت به بارگذاری پیش‌بینی شده دارد، بنابراین تغییر تنظیمات برای تنظیم میزان تمایل به «زیاد» در طول آزمایش می‌تواند مفید باشد.
مشکلات و نگرانی‌ها با بارگذاری حدسی
وردپرس به‌صورت پیش‌فرض بارگذاری حدسی را در همه سایت‌ها فعال می‌کند، اما راه ساده‌ای برای غیرفعال کردن آن از طریق رابط مدیریت ارائه نمی‌دهد. به‌نظر می‌رسد اگر وردپرس آن را فعال کرده، پس حتماً به آن نیاز دارید… درست است؟
خب، بارگذاری حدسی معایبی دارد. من آنها را توضیح می‌دهم تا شما بتوانید تصمیم بگیرید که آیا باید آن را در سایت خود غیرفعال کنید یا نه.
استفاده غیرضروری از سرور
این احتمالاً بزرگترین نگرانی برای اکثر کاربران وردپرس است. ممکن است سرور شما درخواست‌هایی برای صفحاتی دریافت کند که کاربران واقعاً به آنها سر نمی‌زنند. در سایت‌های با ترافیک بالا، این می‌تواند منجر به افزایش استفاده از منابع و تأثیر بر عملکرد و هزینه‌های میزبانی شود. از آنجا که بارگذاری پیش‌بینانه به پیش‌بینی‌ها متکی است، ممکن است به درخواست برای صفحات و منابعی منجر شود که کاربران واقعاً به آنها سر نمی‌زنند.
امکان ارائه محتوای قدیمی
اگر سایت شما مرتباً به‌روزرسانی می‌شود، بارگذاری پیش‌بینی‌شده می‌تواند محتوای قدیمی را نمایش دهد. به‌عنوان‌مثال، یک سایت خبری به‌صورت لحظه‌ای ممکن است با مشکلاتی روبه‌رو شود وقتی که مقالاتی با اطلاعات جدید به‌روز می‌شوند. اگر کاربری روی مقاله‌ای که پیش‌بارگذاری شده کلیک کند، ممکن است نسخه قدیمی را ببیند، نه نسخه به‌روز شده.
پشتیبانی مرورگر
همان‌طور که قبلاً گفتم، بارگذاری احتمالی در Safari یا Firefox کار نمی‌کند. این دلیل موجهی برای غیر فعال کردن آن نیست، اما یک نقطه ضعف محسوب می‌شود. اگر بیشتر کاربران شما از این مرورگرها استفاده می‌کنند، از بارگذاری احتمالی بهره‌مند نخواهند شد.
تداخل‌های احتمالی افزونه‌ها
برخی افزونه‌ها به اسکریپت‌هایی وابسته‌اند که فقط پس از بارگذاری صفحه اجرا می‌شوند (مثل آغاز جلسه، بررسی کوکی‌ها، یا ریدایرکت‌های سفارشی). بارگذاری حدسی ممکن است با این افزونه‌ها تداخل داشته باشد. از آنجا که بارگذاری حدسی بخشی از هسته وردپرس است، توسعه‌دهندگان افزونه باید افزونه‌های خود را به‌روزرسانی کنند تا به‌طور مناسب بارگذاری حدسی را در صورت لزوم حذف کنند.
ممکن است زمان ببرد تا توسعه‌دهندگان افزونه با ویژگی‌های جدید هسته هماهنگ شوند و به‌روزرسانی‌های لازم را منتشر کنند. اگر یک افزونه مشکلی ایجاد کرد، شاید نیاز باشد موقتاً بارگذاری حدسی را غیرفعال کنید تا به‌طور کامل پشتیبانی شود.
چگونه بارگذاری پیش‌بینی را در وردپرس غیرفعال کنیم
اگر متوجه شدید که بارگذاری پیش‌بینی برای سایت شما مناسب نیست، می‌توانید به‌راحتی آن را غیرفعال کنید. اگرچه وردپرس گزینه ساده‌ای برای خاموش کردن آن در پنل مدیریت ندارد، اما می‌توانید با افزودن کد زیر آن را غیرفعال کنید:
// Disable Speculative Loading Completely
add_filter( 'wp_speculation_rules_configuration', '__return_null' );این را در فایل functions.php قالب فرزند خود قرار دهید، یا از افزونه‌ای مانند Code Snippets استفاده کنید.
جمع بندی
لودینگ احتمالی در وردپرس برای بهبود عملکرد ظاهری با پیش‌بارگذاری صفحات قبل از کلیک کاربر طراحی شده است. در بسیاری از موارد، این یک بهبود ارزشمند است. اما، دارای معاوضه‌هایی است، به‌خصوص برای سایت‌های با ترافیک بالا، محتوای بلادرنگ، یا مشکلات سازگاری پلاگین.
نگرانی اصلی من این است که وردپرس این ویژگی را به‌طور پیش‌فرض فعال کرده بدون اینکه یک تنظیم ساده در پنل مدیریت ارائه دهد. کاربران غیرتوسعه‌دهنده ممکن است حتی ندانند که این ویژگی فعال است یا چگونه بر سایتشان تأثیر می‌گذارد.
چه بخواهید آن را فعال نگه دارید، قوانین را سفارشی‌سازی کنید یا به‌طور کامل غیرفعال کنید، امیدوارم این مقاله برای شما مفید بوده باشد. اگر بود، خوشحال می‌شوم آن را به اشتراک بگذارید!
دیدگاه و پرسش