ডিবাগিং স্পেকুলেশন নিয়ম

Barry Pollard

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

ডিবাগিং অনুমান নিয়ম চতুর হতে পারে. এটি প্রি-রেন্ডার করা পৃষ্ঠাগুলির জন্য বিশেষভাবে সত্য, কারণ এই পৃষ্ঠাগুলি একটি পৃথক রেন্ডারারে রেন্ডার করা হয় - এটি একটি লুকানো ব্যাকগ্রাউন্ড ট্যাবের মতো যা সক্রিয় করা হলে বর্তমান ট্যাবটিকে প্রতিস্থাপন করে৷ তাই, সাধারণ DevTools বিকল্পগুলি সবসময় সমস্যা ডিবাগ করতে ব্যবহার করা যাবে না।

ফটকা নিয়ম ডিবাগিংয়ের জন্য DevTools সমর্থন বাড়াতে Chrome টিম কঠোর পরিশ্রম করছে। এই পোস্টে, আপনি একটি পৃষ্ঠার অনুমানের নিয়মগুলি বোঝার জন্য এই টুলগুলি ব্যবহার করার বিভিন্ন উপায় দেখতে পাবেন, কেন তারা কাজ করছে না এবং কখন ডেভেলপাররা আরও পরিচিত DevTools বিকল্পগুলি ব্যবহার করতে পারে—এবং কখন নয়৷

পড়ার জন্য ভিডিও পছন্দ করেন? এই নিবন্ধে যা আছে তার সংক্ষিপ্তসারের জন্য দ্রুত পৃষ্ঠা লোডের জন্য নেভিগেশনাল অনুমান ডিবাগ করার জন্য এই DevTools টিপস ভিডিওটি দেখুন।

"প্রাক-" পদের ব্যাখ্যা

অনেকগুলি "প্রাক-" পদ আছে যা সহজেই বিভ্রান্ত হয়, তাই এর একটি ব্যাখ্যা দিয়ে শুরু করা যাক:

• প্রিফেচ : ভবিষ্যত কর্মক্ষমতা উন্নত করতে অগ্রিম একটি সম্পদ বা নথি আনা। এই পোস্টটি অনুরূপ নয় বরং অনুরূপ, কিন্তু পুরানো <link rel="prefetch"> বিকল্পটি প্রায়শই উপ-সম্পদ প্রিফেচ করার জন্য ব্যবহৃত হয়।
• প্রি-রেন্ডার : এটি প্রিফেচিংয়ের বাইরে এক ধাপ এগিয়ে যায় এবং প্রকৃতপক্ষে পুরো পৃষ্ঠাটিকে এমনভাবে রেন্ডার করে যেন ব্যবহারকারী এটিতে নেভিগেট করেছেন, তবে ব্যবহারকারী যদি সেখানে আসলেই নেভিগেট করেন তবে এটিকে একটি লুকানো ব্যাকগ্রাউন্ড রেন্ডারার প্রক্রিয়া ব্যবহার করার জন্য প্রস্তুত রাখে। আবার, এই নথিটি পুরানো <link rel="prerender"> বিকল্পের পরিবর্তে এর নতুন স্পেকুলেশন রুলস API সংস্করণের সাথে সম্পর্কিত (যা আর সম্পূর্ণ প্রিরেন্ডার করে না )।
• ন্যাভিগেশনাল স্পেকুলেশনস : নতুন প্রিফেচ এবং প্রি-রেন্ডার বিকল্পের জন্য সমষ্টিগত শব্দটি অনুমান বিধি দ্বারা ট্রিগার করা হয়।
• প্রিলোড : একটি ওভারলোড করা শব্দ যা <link rel="preload"> , প্রিলোড স্ক্যানার এবং পরিষেবা কর্মী নেভিগেশন প্রিলোড সহ বেশ কয়েকটি প্রযুক্তি এবং প্রক্রিয়াকে উল্লেখ করতে পারে। এই আইটেমগুলি এখানে কভার করা হবে না, তবে শব্দটি "নেভিগেশনাল স্পেকুলেশন" শব্দ থেকে স্পষ্টভাবে আলাদা করার জন্য অন্তর্ভুক্ত করা হয়েছে।

দ্রষ্টব্য: আরও বিশদ বিবরণের জন্য এই প্রিলোডিং টেক ল্যান্ডস্কেপ ডকুমেন্টটি দেখুন।

prefetch জন্য অনুমান নিয়ম

অনুমান নিয়ম পরবর্তী নেভিগেশন এর নথি প্রিফেচ করতে ব্যবহার করা যেতে পারে. উদাহরণস্বরূপ, একটি পৃষ্ঠায় নিম্নলিখিত JSON সন্নিবেশ করার সময়, next.html এবং next2.html প্রিফেচ করা হবে:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

মূল পয়েন্ট: প্রিফেচ স্পেকুলেশন নিয়ম শুধুমাত্র ডকুমেন্ট প্রিফেচ করে, এর সাবরিসোর্স নয়। এটি একটি সম্ভাব্য পরবর্তী নেভিগেশনের সম্পূর্ণ প্রি-রেন্ডারের তুলনায় কম সংস্থান ব্যবহার করে, তবে এর অর্থ হল নেভিগেশনের সময় সাবরিসোর্সগুলি আনতে এবং রেন্ডার করা প্রয়োজন।

নেভিগেশন প্রিফেচের জন্য অনুমান বিধি ব্যবহার করে পুরানো <link rel="prefetch"> সিনট্যাক্সের তুলনায় কিছু সুবিধা রয়েছে, যেমন একটি আরও অভিব্যক্তিপূর্ণ API এবং ফলাফলগুলি HTTP ডিস্ক ক্যাশের পরিবর্তে মেমরি ক্যাশে সংরক্ষণ করা হয়।

ডিবাগিং prefetch স্পেকুলেশন নিয়ম

অনুমান বিধি দ্বারা ট্রিগার করা প্রিফেচগুলি অন্যান্য ফেচগুলির মতোই নেটওয়ার্ক প্যানেলে দেখা যেতে পারে:

লাল রঙে হাইলাইট করা দুটি অনুরোধ হল প্রিফেচড রিসোর্স, যা টাইপ কলাম দ্বারা দেখা যায়। এগুলি Lowest অগ্রাধিকারে আনা হয় কারণ এগুলি ভবিষ্যতের নেভিগেশনের জন্য এবং Chrome বর্তমান পৃষ্ঠার সংস্থানগুলিকে অগ্রাধিকার দেয়৷

সারিগুলির একটিতে ক্লিক করলে Sec-Purpose: prefetch HTTP হেডারও দেখায়, যেভাবে এই অনুরোধগুলি সার্ভারের দিকে চিহ্নিত করা যেতে পারে:

স্পেকুলেটিভ লোড ট্যাবগুলির সাথে ডিবাগিং prefetch

অনুমান সংক্রান্ত নিয়মগুলি ডিবাগ করতে সহায়তা করার জন্য, ব্যাকগ্রাউন্ড পরিষেবা বিভাগের অধীনে Chrome DevTools-এর অ্যাপ্লিকেশন প্যানেলে একটি নতুন অনুমানমূলক লোড বিভাগ যোগ করা হয়েছে:

মূল বিষয়: অনুমানমূলক লোড ট্যাবগুলি ফটকা নিয়ম প্রিফেচিং এবং প্রি-রেন্ডারিং (সম্মিলিতভাবে "নেভিগেশনাল স্পেকুলেশন" নামে পরিচিত) নিয়ে কাজ করার জন্য। এই ট্যাবগুলি <link rel="preload"> ব্যবহার করে সাবরিসোর্স প্রিলোডিং ডিবাগ করতে ব্যবহার করা যাবে না, <link rel="prefetch"> ব্যবহার করে সাবরিসোর্স প্রিফেচিং , বা পুরানো <link rel="prerender"> no-state prefetching ব্যবহার করে ।

এই বিভাগে তিনটি ট্যাব উপলব্ধ রয়েছে:

• অনুমানমূলক লোড যা বর্তমান পৃষ্ঠার পূর্বে উপস্থাপিত স্থিতি তালিকাভুক্ত করে।
• নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সমস্ত নিয়ম সেট তালিকাভুক্ত করে।
• অনুমান যা নিয়ম সেট থেকে সমস্ত প্রিফেচ করা এবং প্রি-রেন্ডার করা URL গুলিকে তালিকাভুক্ত করে৷

স্পেকুলেশন ট্যাবটি আগের স্ক্রিনশটে দেখানো হয়েছে, এবং আমরা দেখতে পাচ্ছি এই উদাহরণ পৃষ্ঠাটিতে 3টি পৃষ্ঠা প্রিফেচ করার জন্য অনুমানের নিয়মের একটি সেট রয়েছে। এই প্রিফেচগুলির মধ্যে দুটি সফল হয়েছে এবং একটি ব্যর্থ হয়েছে৷ এলিমেন্টস প্যানেলে আপনাকে নিয়ম সেটের উৎসে নিয়ে যেতে নিয়ম সেটের পাশের আইকনে ক্লিক করা যেতে পারে। বিকল্পভাবে, স্ট্যাটাস লিঙ্কটিতে ক্লিক করে আপনাকে সেই নিয়মসেটে ফিল্টার করা Speculations ট্যাবে নিয়ে যেতে পারে।

স্পেকুলেশন ট্যাবে সমস্ত টার্গেট ইউআরএল তালিকাভুক্ত করে, অ্যাকশন সহ (প্রিফেচ বা প্রিরেন্ডার), কোন নিয়ম থেকে তারা এসেছে (যেমন একটি পৃষ্ঠায় একাধিক হতে পারে), এবং প্রতিটি অনুমানের স্থিতি:

ইউআরএলের উপরে, একটি ড্রপ ডাউন ব্যবহার করা যেতে পারে সমস্ত নিয়ম সেট থেকে ইউআরএল দেখানোর জন্য, অথবা শুধুমাত্র একটি নির্দিষ্ট নিয়ম সেট থেকে ইউআরএল দেখানোর জন্য। তার নীচে, সমস্ত URL তালিকাভুক্ত করা হয়েছে। একটি URL-এ ক্লিক করা আপনাকে আরও বিস্তারিত তথ্য দেয়।

এই স্ক্রিনশটে, আমরা next3.html পৃষ্ঠার ব্যর্থতার কারণ দেখতে পাচ্ছি (যা বিদ্যমান নেই এবং তাই একটি 404 প্রদান করে, যা একটি নন-2xx HTTP স্ট্যাটাস কোড)।

সারাংশ ট্যাব, অনুমানমূলক লোড , এই পৃষ্ঠার প্রতিবেদনের জন্য একটি অনুমানমূলক লোডিং অবস্থা দেখায় যে এই পৃষ্ঠাটির জন্য একটি প্রিফেচ বা প্রি-রেন্ডার ব্যবহার করা হয়েছে কিনা তা দেখাতে।

একটি প্রিফেচ করা পৃষ্ঠার জন্য, যখন সেই পৃষ্ঠাটিতে নেভিগেট করা হয় তখন আপনি একটি সফল বার্তা দেখতে পাবেন:

অতুলনীয় জল্পনা

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

উদাহরণ স্বরূপ, এখানে আমরা next4.html এ নেভিগেট করেছি, কিন্তু শুধুমাত্র next.html , next2.html , বা next3.html হল প্রিফেচ, তাই আমরা দেখতে পাচ্ছি যে এই তিনটি নিয়মের কোনোটির সাথে পুরোপুরি মেলে না।

দ্রষ্টব্য: যেহেতু এই প্রতিক্রিয়াটি প্রাথমিকভাবে অনুমানের নিয়মগুলি ডিবাগ করার উদ্দেশ্যে করা হয়েছে, তাই এই ইউআরএল ম্যাচিংটি সম্পূর্ণ ভিন্ন পৃষ্ঠায় নেভিগেট করার সময় একটু বিভ্রান্তিকর দেখাতে পারে যা অনুমানের নিয়মে অন্তর্ভুক্ত নয়, এবং তাই প্রিফেচড বা প্রি-রেন্ডার করা হবে বলে আশা করা যায় না:

এই ক্ষেত্রে ব্যবহারকারী ইন্টারফেস উন্নত করার জন্য Chrome টিম এই বৈশিষ্ট্যটি পুনরাবৃত্তি করে চলেছে ৷

স্পেকুলেটিভ লোড ট্যাবগুলি ফটকা নিয়মগুলিকে ডিবাগ করার জন্য এবং JSON-এ যেকোন সিনট্যাক্স ত্রুটি খুঁজে পেতে খুব কার্যকর।

নিজেদের প্রিফেচগুলির জন্য, নেটওয়ার্ক প্যানেল সম্ভবত একটি আরও পরিচিত জায়গা। প্রিফেচ ব্যর্থতার উদাহরণের জন্য, আপনি এখানে প্রিফেচের জন্য 404 দেখতে পারেন:

যাইহোক, স্পেকুলেটিভ লোড ট্যাবগুলি প্রি-রেন্ডারিং স্পেকুলেশন নিয়মের জন্য অনেক বেশি উপযোগী হয়ে ওঠে, যা পরবর্তীতে কভার করা হয়েছে।

prerender জন্য অনুমান নিয়ম

প্রি-রেন্ডার স্পেকুলেশন নিয়ম প্রিফেচ স্পেকুলেশন নিয়মের মতো একই সিনট্যাক্স অনুসরণ করে। উদাহরণ স্বরূপ:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

এই নিয়ম সেটটি নির্দিষ্ট পৃষ্ঠাগুলির সম্পূর্ণ লোড এবং রেন্ডারকে ট্রিগার করে (নির্দিষ্ট সীমাবদ্ধতা সাপেক্ষে)। এটি একটি তাত্ক্ষণিক লোডিং অভিজ্ঞতা প্রদান করতে পারে-যদিও অতিরিক্ত সম্পদ খরচ সহ।

যদিও প্রিফেচগুলির বিপরীতে, এগুলি নেটওয়ার্ক প্যানেলে দেখার জন্য উপলব্ধ নয়, কারণ এগুলি Chrome-এ একটি পৃথক রেন্ডারিং প্রক্রিয়ায় আনা এবং রেন্ডার করা হয়৷ এটি অনুমানমূলক লোড ট্যাবগুলিকে প্রি-রেন্ডার স্পেকুলেশন নিয়মগুলি ডিবাগ করতে আরও গুরুত্বপূর্ণ করে তোলে৷

স্পেকুলেটিভ লোড ট্যাবগুলির সাথে ডিবাগিং prerender

একই অনুমানমূলক লোড স্ক্রিনগুলি প্রি-রেন্ডার স্পেকুলেশন নিয়মগুলির জন্য ব্যবহার করা যেতে পারে যেমনটি একটি অনুরূপ ডেমো পৃষ্ঠার সাথে প্রদর্শিত হয় যা তিনটি পৃষ্ঠা প্রিফেচ করার পরিবর্তে প্রি-রেন্ডার করার চেষ্টা করে:

এখানে আমরা আবার দেখতে পাচ্ছি যে তিনটি ইউআরএলের মধ্যে একটি প্রি-রেন্ডার করতে ব্যর্থ হয়েছে এবং ডেভেলপাররা 2 রেডি, 1 ব্যর্থতা লিঙ্কে ক্লিক করে স্পেকুলেশন ট্যাবে প্রতি ইউআরএলের বিবরণ পেতে পারেন।

Chrome 121-এ আমরা নথির নিয়ম সমর্থন চালু করেছি । এটি ব্রাউজারটিকে URL-এর একটি নির্দিষ্ট সেট তালিকাভুক্ত করার পরিবর্তে পৃষ্ঠায় একই মূল লিঙ্কগুলি থেকে এগুলি বাছাই করার অনুমতি দেয়:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

এই উদাহরণটি প্রি-রেন্ডার প্রার্থী হিসাবে /not-safe-to-prerender দিয়ে শুরু হওয়া ব্যতীত সমস্ত একই অরিজিন লিঙ্ক নির্বাচন করে।

এটি প্রি-রেন্ডারের eagerness moderate সেট করে যার মানে লিঙ্কটি হোভার করা হলে বা ক্লিক করা হলে নেভিগেশনগুলি প্রি-রেন্ডার করা হয়।

এই ডেমো সাইটে এই ধরনের অনুরূপ নিয়ম রয়েছে, এবং এই সাইটের নতুন অনুমানমূলক লোড বিভাগটি ব্যবহার করে এই নতুন ট্যাবের উপযোগিতা দেখায় কারণ পৃষ্ঠায় ব্রাউজারটি পাওয়া সমস্ত যোগ্য URL তালিকাভুক্ত করা হয়েছে:

স্ট্যাটাসটি ট্রিগার করা হয়নি কারণ এগুলোর জন্য প্রি-রেন্ডার প্রক্রিয়া শুরু হয়নি। যাইহোক, যখন আমরা লিঙ্কগুলির উপর ঘোরাঘুরি করি, আমরা দেখতে পাই যে প্রতিটি ইউআরএল প্রি-রেন্ডার করা হয়েছে বলে স্ট্যাটাস পরিবর্তন হয়েছে:

ক্রোম প্রি-রেন্ডারের সীমা নির্ধারণ করেছে , moderate আগ্রহের জন্য সর্বাধিক 2টি প্রি-রেন্ডার সহ, তাই 3য় লিঙ্কে হোভার করার পরে, আমরা সেই URLটির ব্যর্থতার কারণ দেখতে পাই:

অন্যান্য DevTools প্যানেলের সাথে ডিবাগিং prerender

প্রিফেচের বিপরীতে, যে পৃষ্ঠাগুলি আগে থেকে রেন্ডার করা হয়েছে সেগুলি নেটওয়ার্ক প্যানেলের মতো DevTools প্যানেলে বর্তমান রেন্ডারিং প্রক্রিয়াগুলিতে প্রদর্শিত হবে না, কারণ সেগুলি তাদের নিজস্ব আড়ালে রেন্ডারারে রেন্ডার করা হয়৷

যাইহোক, এখন উপরের ডানদিকের ড্রপ ডাউন মেনু দিয়ে, অথবা প্যানেলের উপরের অংশে একটি URL নির্বাচন করে এবং পরিদর্শন নির্বাচন করে DevTools প্যানেল দ্বারা ব্যবহৃত রেন্ডারারটি পরিবর্তন করা সম্ভব:

এই ড্রপ ডাউন (এবং নির্বাচিত মান) অন্যান্য সমস্ত প্যানেল জুড়েও ভাগ করা হয়েছে, যেমন নেটওয়ার্ক প্যানেল, যেখানে আপনি দেখতে পাচ্ছেন যে পৃষ্ঠাটি অনুরোধ করা হচ্ছে সেটি পূর্ব-প্রস্তুত করা হয়েছে:

এই সংস্থানগুলির জন্য HTTP শিরোনামগুলির দিকে তাকালে আমরা দেখতে পাব যে সেগুলি Sec-Purpose: prefetch;prerender header এর সাথে সেট করা হবে:

অথবা এলিমেন্টস প্যানেল, যেখানে আপনি পৃষ্ঠার বিষয়বস্তু দেখতে পারেন, যেমন নিচের স্ক্রিনশটে আমরা দেখতে পাই যে <h1> উপাদানটি প্রি-রেন্ডার করা পৃষ্ঠার জন্য:

অথবা কনসোল প্যানেল , যেখানে আপনি আগে থেকে রেন্ডার করা পৃষ্ঠা দ্বারা নির্গত কনসোল লগ দেখতে পাবেন:

আগে থেকে রেন্ডার করা পৃষ্ঠায় অনুমান সংক্রান্ত নিয়মগুলি ডিবাগ করুন৷

পূর্ববর্তী বিভাগগুলিতে আলোচনা করা হয়েছে যে পৃষ্ঠায় প্রি-রেন্ডার করা পৃষ্ঠাগুলি কীভাবে ডিবাগ করা যায় যা প্রি-রেন্ডারিং শুরু করে। যাইহোক, প্রি-রেন্ডার করা পৃষ্ঠাগুলির পক্ষেও ডিবাগিং তথ্য প্রদান করা সম্ভব, হয় বিশ্লেষণ কল করে বা কনসোলে লগিং করে (যা পূর্ববর্তী বিভাগে বর্ণিত হিসাবে দেখা যায়)।

অতিরিক্তভাবে, একবার একটি প্রি-রেন্ডার করা পৃষ্ঠা সক্রিয় হয়ে গেলে ব্যবহারকারী এটিতে নেভিগেট করে, স্পেকুলেটিভ লোড ট্যাবটি এই স্থিতি দেখাবে এবং এটি সফলভাবে প্রি-রেন্ডার করা হয়েছে কি না। যদি এটি পূর্ব-প্রস্তুত করা না যায় তবে কেন এটি করা হয়েছিল তার একটি ব্যাখ্যা প্রদান করা হয়েছে:

অতিরিক্তভাবে— যেমনটি প্রিফেচের ক্ষেত্রে হয় — বর্তমান পৃষ্ঠার সাথে মেলে না এমন অনুমানের নিয়ম সহ একটি পৃষ্ঠা থেকে নেভিগেট করা আপনাকে দেখানোর চেষ্টা করবে কেন ইউআরএলগুলি পূর্ববর্তী পৃষ্ঠার অনুমানমূলক লোড ট্যাবে কভার করা নিয়মগুলির সাথে মেলেনি:

উপসংহার

এই পোস্টে, আমরা বিভিন্ন উপায় দেখিয়েছি যেগুলি বিকাশকারীরা প্রিফেচ ডিবাগ করতে পারে এবং অনুমানের নিয়মগুলি প্রি-রেন্ডার করতে পারে৷ দলটি অনুমানের নিয়মগুলির জন্য টুলিংয়ের উপর কাজ চালিয়ে যাচ্ছে, এবং আমরা এই উত্তেজনাপূর্ণ নতুন API ডিবাগ করার জন্য অন্য কোন উপায়গুলি সহায়ক হবে সে সম্পর্কে বিকাশকারীদের কাছ থেকে পরামর্শ শুনতে চাই৷ আমরা ডেভেলপারদের উৎসাহ দিই ক্রোম ইস্যু ট্র্যাকারে কোনো ফিচারের অনুরোধ বা বাগ দেখা দেওয়ার জন্য একটি সমস্যা উত্থাপন করতে।

স্বীকৃতি

আনস্প্ল্যাশে নুবেলসন ফার্নান্দেসের থামবেইল চিত্র।