بهبود عملکرد بار کردن صفحه بعدی

ویژگی‌های وب: قوانین گمانه‌زنی

یکی از مؤثرترین روش‌ها برای بهبود عملکرد بار کردن صفحه برای کاربرانی که در سایت پیمایش می‌کنند، شروع بار کردن صفحه بعدی است که قرار است قبل‌از بازدید از آن، بازدید کنند. این کار را می‌توان ازطریق تکنیکی به‌نام بار کردن حدسی بااستفاده از Speculation Rules API انجام داد.

روش کار

بارگیری گمانه‌زن بااستفاده از قوانین گمانه‌زنی مبتنی بر JSON کار می‌کند تا به مرورگر درباره پیوندهایی که می‌توانند پیش‌واکشی یا پیش‌پرداخت شوند اطلاع دهد و عملکرد بارگیری صفحه را هنگام کلیک کردن کاربر روی آن‌ها بهبود بخشد.

قوانین می‌توانند فهرست نشانی‌های وب کدگذاری‌شده با کلید urls (معروف به قانون فهرست) باشند یا با کلید where حاوی مجموعه‌ای از href و انتخابگرهای CSS که برای پیدا کردن پیوندها در صفحه استفاده می‌شوند (معروف به قانون document).

قوانین همچنین می‌توانند شامل یک ویژگی اختیاری eagerness باشند که مشخص می‌کند چه زمانی صفحه باید پیش‌واکشی یا پیش‌پرداز شود. ویژگی eagerness را می‌توان روی immediate، eager، moderate، یا conservative تنظیم کرد. immediate در اسرع وقت گمانه‌زنی می‌کند، درحالی‌که بقیه منتظر نشانه‌های کاربر می‌مانند، مثلاً نگه داشتن نشانگر برای مدت کوتاه، برای مدت طولانی‌تر، یا شروع کلیک کردن در صفحه.

قوانین را می‌توان با تنظیمات مختلف اشتیاق ترکیب کرد تا پیش‌واکشی مشتاقانه انجام شود و سپس وقتی کاربر تعامل بیشتری برقرار کرد، پیش‌پرداز شود.

زمان استفاده از آن

بار کردن حدسی به‌ویژه برای صفحه‌های ایستا مفید است، جایی که محتوا احتمالاً اغلب تغییر نمی‌کند و تولید صفحه‌ها ارزان‌تر است—به‌ویژه اگر در لبه ذخیره شده باشد. همچنین می‌توان از آن برای صفحه‌های پویا استفاده کرد، اما مهم است که درباره احتمال وجود محتوای قدیمی احتیاط کنید.

بار کردن حدسی معمولاً برای پیوندهای هم‌مبدأ استفاده می‌شود، اگرچه گزینه‌های پیشرفته‌تر امکان حدس میان‌مبدئی را فراهم می‌کنند. این راهنما بر مورد استفاده رایج‌تر هم‌مبدأ تمرکز دارد.

بارگیری گمانه‌زنانه مشتاقانه‌تر انتخاب خوبی برای صفحه‌هایی است که احتمالاً در مرحله بعد بازدید می‌شوند، مثل مقاله سرخط خبرها یا صفحه بعدی در فرایند گام‌به‌گام مانند یادگیری یک دوره.

بار کردن گمانه‌زنانه کمتر مشتاقانه انتخاب خوبی است وقتی که مشخص نیست کاربر در مرحله بعد چه کاری انجام خواهد داد، وقتی که پیوندهای زیادی در صفحه وجود دارد، و احتمال بازدید از هرکدام یکسان است. با منتظر ماندن برای نشان‌های بیشتر، مثل نگه داشتن نشانگر یا شروع کلیک کردن روی صفحه، می‌توانید در صفحه بعدی پیش‌دستی کنید و تجربه کاربری را بهبود ببخشید، حتی اگر صفحه به‌طور کامل پیش‌واکشی یا پیش‌پرداز نشده باشد.

به‌طور مشابه، پیش‌واکشی انتخاب محتاطانه‌تری نسبت‌به پیش‌پرداز است، از منابع کمتری (هم در سمت کارخواه و هم در سمت سرور) استفاده می‌کند اما مزایای کمتری برای کاربر فراهم می‌کند. این گزینه برای پیاده‌سازی اولیه انتخاب خوبی است و بعداً وقتی توسعه‌دهنده صریحاً درخواست کند، به پیش‌پرداز گسترش می‌یابد.

نحوه استفاده از آن

قوانین گمانه‌زنی قالب مبتنی بر JSON دارند و می‌توانند در برچسب <script type="speculationrules"> گنجانده شوند. قوانین می‌توانند در <head> یا <body> سند گنجانده شوند، یا می‌توانند به‌طور پویا بااستفاده از جاوا اسکریپت اضافه شوند.

همچنین می‌توان از tag در سطح جهانی یا براساس هر قانون استفاده کرد. وقتی این برچسب تنظیم شود، در سرصفحه Sec-Speculation-Tags گنجانده می‌شود و به شما امکان می‌دهد گمانه‌زنی‌های انجام‌شده را در سمت سرور شناسایی کنید.

نمونه‌ای از قانون فهرست نشانی وب ساده برای واکشی پیشاپیش نشانی‌های وب ازپیش تعریف‌شده

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>
<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>
<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

نمونه‌ای از مجموعه قوانین مختلط

این مثال مجموعه قانونی را نشان می‌دهد که همه پیوندها را با اشتیاق پیش‌واکشی می‌کند و سپس وقتی سیگنال‌های بیشتری با اشتیاق moderate دریافت می‌کند، فراتر از این می‌رود و همان پیوندها را پیش‌پرداز می‌کند.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

روال‌های مطلوب

  • باید از قوانین فرضیه برای واکشی اولیه و پیش‌پرداززنی صفحاتی که احتمالاً کاربر در مرحله بعد از آن‌ها بازدید می‌کند استفاده کنید.
  • باید از قوانین گمانه‌زنی برای سایت‌های ایستا استفاده کنید، جایی که محتوا احتمالاً اغلب تغییر نمی‌کند و تولید صفحه‌ها ارزان‌تر است—به‌ویژه اگر در لبه ذخیره شده باشد.
  • باید هنگام استفاده از قوانین گمانه‌زنی برای صفحات پویا، که در آن‌ها محتوا بیشتر احتمال دارد تغییر کند، ممکن است قدیمی شود، و تولید صفحات هزینه بیشتری دارد، بیشتر دقت کنید.
  • توصیه می‌شود قوانین سند را به قوانین فهرست ترجیح دهید، زیرا انعطاف‌پذیرتر هستند، اجازه می‌دهند قانون یکسانی در چندین صفحه هم‌رسانی شود، و می‌توان از آن‌ها برای واکشی اولیه و پیش‌پرداززنی صفحاتی که ازقبل شناخته‌شده نیستند استفاده کرد.
  • باید تفاوت‌های بین پیش‌واکشی و پیش‌پرداز را درنظر بگیرید و گزینه مناسب را برای مورد استفاده خود انتخاب کنید. پیش‌پرداز از پیش‌واکشی گران‌تر است و می‌تواند عوارض جانبی ناخواسته بیشتری در برنامه‌های پیچیده‌ای که حالت پویا را نمایش می‌دهند ایجاد کند، اما تجربه کاربری بهتری ارائه می‌دهد. اگر مطمئن نیستید، از توسعه‌دهنده بپرسید کدام را ترجیح می‌دهد.
  • باید موازنه‌های بین سطوح مختلف eagerness را درنظر بگیرید و سطح مناسب را برای مورد استفاده خود انتخاب کنید. پیش‌بینی مشتاقانه‌تر تجربه کاربری بهتری ارائه می‌دهد اما از منابع بیشتری استفاده می‌کند و می‌تواند عوارض جانبی ناخواسته بیشتری در برنامه‌های پیچیده‌ای که وضعیت پویا را نمایش می‌دهند ایجاد کند. اگر مطمئن نیستید، از توسعه‌دهنده بپرسید کدام را ترجیح می‌دهد.
  • از قوانین فرضیه بیش‌ازحد استفاده نکنید، برای مثال، برای فرضیه‌سازی هر پیوند در صفحه. مرورگرها محدودیت‌هایی دارند (۲ گمانه‌زنی برای گمانه‌زنی‌های غیرمشتاق). ‫immediate باید فقط برای تعداد بسیار کمی از پیوندها استفاده شود.
  • نشانی‌های وبی را که احتمالاً باعث تغییر وضعیت می‌شوند، مانند /logout یا /add-to-cart، پیش‌بینی نکنید و اگر احتمال دارد در قوانین سند گنجانده شوند، آن‌ها را به‌طور صریح از قوانین پیش‌بینی خود مستثنی کنید.
  • از قوانین گمانه‌زنی در «برنامه‌های تک‌صفحه‌ای» (SPA) استفاده نکنید. قوانین گمانه‌زنی برای برنامه‌های چندصفحه‌ای (MPA) طراحی شده‌اند که در آن‌ها مرورگر در هر پیمایش به سند جدیدی پیمایش می‌کند. در برنامه‌های تک‌صفحه‌ای، مرورگر در هر پیمایش به سند جدیدی پیمایش نمی‌کند، بنابراین قوانین گمانه‌زنی طبق انتظار کار نخواهند کرد.

پشتیبانی مرورگر و راهبردهای جایگزین

بااین‌حال، بار کردن حدسی یک ارتقای پیش‌رو است. استفاده از آن به‌عنوان بهبود کاملاً ایمن است و با توجه به مزایای عملکردی بالقوه، به‌شدت توصیه می‌شود. اگر مرورگری از قوانین فرضیه پشتیبانی نکند، به‌سادگی آن‌ها را نادیده می‌گیرد.