পরবর্তী পৃষ্ঠা লোড হওয়ার পারফর্ম্যান্স উন্নত করুন

কোনও সাইট নেভিগেট করা ব্যবহারকারীদের জন্য পৃষ্ঠা লোড হওয়ার পারফর্ম্যান্স উন্নত করার অন্যতম সবচেয়ে কার্যকর উপায় হল, তারা যে পৃষ্ঠায় যেতে চলেছেন সেটি ভিজিট করার আগেই লোড করা শুরু করে দেওয়া। Speculation Rules API ব্যবহার করে স্পেকুলেটিভ লোডিং নামক টেকনিকের মাধ্যমে এটি করা যেতে পারে।

এটি কীভাবে কাজ করে

JSON-ভিত্তিক অনুমান সংক্রান্ত নিয়ম ব্যবহার করে স্পেকুলেটিভ লোডিং কাজ করে। এর মাধ্যমে ব্রাউজারকে এমন লিঙ্ক সম্পর্কে জানানো হয় যা আগে থেকে ফেচ বা রেন্ডার করা যেতে পারে। এর ফলে ব্যবহারকারী লিঙ্কে ক্লিক করলে পৃষ্ঠা লোড হওয়ার পারফর্ম্যান্স উন্নত হয়।

নিয়মগুলি হয় urls কী (তালিকা নিয়ম হিসেবে পরিচিত) সহ URL-এর হার্ডকোড করা তালিকা হতে পারে অথবা where কী সহ href ও CSS সিলেক্টরের সেট হতে পারে যা পৃষ্ঠায় লিঙ্ক খুঁজতে ব্যবহার করা হয় (document নিয়ম হিসেবে পরিচিত)।

এছাড়াও, নিয়মে ঐচ্ছিক eagerness প্রপার্টি অন্তর্ভুক্ত থাকতে পারে যা পৃষ্ঠা কখন প্রিফেচ বা প্রিরেন্ডার করা উচিত তা নির্দিষ্ট করে। eagerness প্রপার্টি immediate, eager, moderate বা conservative-এ সেট করা যেতে পারে। immediate যত তাড়াতাড়ি সম্ভব অনুমান করে, যেখানে অন্যরা ব্যবহারকারীর সিগন্যালের জন্য অপেক্ষা করে, যেমন অল্প সময়ের জন্য, দীর্ঘ সময়ের জন্য হোভার করা বা যথাক্রমে পৃষ্ঠায় ক্লিক করা শুরু করা।

প্রিফেচ করার জন্য বিভিন্ন আগ্রহের সেটিংসের সাথে নিয়মগুলি একত্রিত করা যেতে পারে এবং ব্যবহারকারী আরও ইন্টার‍্যাক্ট করলে প্রিরেন্ডার করা যেতে পারে।

কখন ব্যবহার করবেন

স্পেকুলেটিভ লোডিং বিশেষত স্ট্যাটিক পৃষ্ঠার জন্য উপযোগী, যেখানে কন্টেন্ট ঘন ঘন পরিবর্তন হওয়ার সম্ভাবনা থাকে না এবং যেখানে পৃষ্ঠা তৈরি করা সস্তা—বিশেষত যদি এজ-এ ক্যাশে করা হয়। এটি ডায়নামিক পৃষ্ঠার জন্যও ব্যবহার করা যেতে পারে, তবে পুরনো কন্টেন্ট সম্পর্কে সতর্ক থাকা গুরুত্বপূর্ণ।

স্পেকুলেটিভ লোডিং সাধারণত একই-অরিজিন লিঙ্কের জন্য ব্যবহার করা হয়, যদিও আরও উন্নত বিকল্পগুলি কিছু ক্রস-অরিজিন স্পেকুলেশনের অনুমতি দেয়। এই নির্দেশিকাটি আরও সাধারণ একই-উৎসের ব্যবহারের ক্ষেত্রে মনোযোগ দেয়।

পরবর্তীকালে ভিজিট করা হতে পারে এমন পৃষ্ঠার জন্য আরও বেশি স্পেকুলেটিভ লোডিং একটি ভালো বিকল্প, যেমন কোনও হেডলাইন নিবন্ধ বা কোনও কোর্স শেখার মতো ধাপে ধাপে প্রসেসের পরবর্তী পৃষ্ঠা।

ব্যবহারকারী এর পরে কী করবেন তা যখন স্পষ্ট নয়, পৃষ্ঠায় অনেক লিঙ্ক আছে এবং প্রতিটি লিঙ্কে ভিজিট করার সম্ভাবনা সমান, তখন কম আগ্রহের স্পেকুলেটিভ লোডিং একটি ভালো বিকল্প। আরও সিগন্যালের জন্য অপেক্ষা করে, যেমন হোভার করা বা পৃষ্ঠায় ক্লিক করা শুরু করা, আপনি পরবর্তী পৃষ্ঠায় হেড-স্টার্ট পেতে পারেন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন, এমনকি এটি সম্পূর্ণভাবে প্রিফেচ বা প্রিরেন্ডার করা না হলেও।

একইভাবে, প্রিরেন্ডারের তুলনায় প্রিফেচ আরও রক্ষণশীল বিকল্প, যা কম রিসোর্স ব্যবহার করে (ক্লায়েন্ট ও সার্ভার, দু'দিকেই) কিন্তু ব্যবহারকারীকে কম সুবিধা প্রদান করে। প্রাথমিক প্রয়োগের জন্য এটি একটি ভালো বিকল্প, পরে ডেভেলপার স্পষ্টভাবে অনুরোধ করলে প্রিরেন্ডার করার জন্য এটি প্রসারিত করা হয়।

এটি কীভাবে ব্যবহার করবেন

স্পেকুলেশন নিয়মের JSON-ভিত্তিক ফর্ম্যাট আছে এবং এটি <script type="speculationrules"> ট্যাগে অন্তর্ভুক্ত করা যেতে পারে। নিয়মগুলি ডকুমেন্টের <head> বা <body>-এ অন্তর্ভুক্ত করা যেতে পারে অথবা জাভাস্ক্রিপ্ট ব্যবহার করে ডায়নামিকভাবে যোগ করা যেতে পারে।

এছাড়াও, গ্লোবাল লেভেলে বা প্রতি-নিয়ম ভিত্তিতে tag ব্যবহার করা যেতে পারে। সেট করা হলে, এই ট্যাগ Sec-Speculation-Tags হেডারে অন্তর্ভুক্ত করা হবে এবং কোন অনুমান করা হয়েছে তা সার্ভার-সাইডে শনাক্ত করতে আপনাকে অনুমতি দেবে।

আগে থেকে নির্ধারিত URL প্রিফেচ করার জন্য সহজ URL তালিকার নিয়মের উদাহরণ

<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-এর মতো স্ট্যাটাস পরিবর্তন ট্রিগার করতে পারে এমন URL অনুমান করবেন না এবং সেগুলি ডকুমেন্ট নিয়মে অন্তর্ভুক্ত হওয়ার সম্ভাবনা থাকলে আপনার অনুমান সংক্রান্ত নিয়ম থেকে স্পষ্টভাবে বাদ দিন।
• সিঙ্গেল পেজ অ্যাপ্লিকেশনে (SPA) স্পেকুলেশন রুল ব্যবহার করবেন না। স্পেকুলেশন রুল মাল্টি-পেজ অ্যাপ্লিকেশনের (MPA) জন্য ডিজাইন করা হয়েছে যেখানে ব্রাউজার প্রতিটি নেভিগেশনে নতুন ডকুমেন্টে নেভিগেট করে। SPA-তে, প্রতিটি নেভিগেশনে ব্রাউজার নতুন ডকুমেন্টে নেভিগেট করে না, তাই স্পেকুলেশন রুল প্রত্যাশা অনুযায়ী কাজ করবে না।

ব্রাউজার সাপোর্ট ও ফলব্যাক স্ট্র্যাটেজি

তবে, স্পেকুলেটিভ লোডিং হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। এটি এনহ্যান্সমেন্ট হিসেবে ব্যবহার করা সম্পূর্ণ নিরাপদ এবং সম্ভাব্য পারফর্ম্যান্সের সুবিধা পাওয়ার জন্য এটি ব্যবহার করার জন্য বিশেষভাবে সাজেস্ট করা হয়। কোনও ব্রাউজারে স্পেকুলেশন রুল কাজ না করলে, সেটি এটিকে উপেক্ষা করবে।