আগের পোস্টে বিস্তারিতভাবে যেমন বলা হয়েছে, পরবর্তী পৃষ্ঠার নেভিগেশন প্রিফেচ ও প্রিরেন্ডার করার জন্য স্পেকুলেশন রুল ব্যবহার করা যেতে পারে। এর ফলে অনেক দ্রুত—এমনকি সাথে সাথে—পৃষ্ঠা লোড হতে পারে, যা এইসব অতিরিক্ত পৃষ্ঠা নেভিগেশনের জন্য Core Web Vitals-কে অনেক উন্নত করে।
স্পেকুলেশন রুল ডিবাগ করা কঠিন হতে পারে। এটি বিশেষ করে প্রিরেন্ডার করা পৃষ্ঠার ক্ষেত্রে প্রযোজ্য, কারণ এই পৃষ্ঠাগুলি একটি আলাদা রেন্ডারারে রেন্ডার করা হয়—এক ধরনের লুকানো ব্যাকগ্রাউন্ড ট্যাবের মতো যা চালু হলে বর্তমান ট্যাবকে প্রতিস্থাপন করে। তাই, সমস্যা ডিবাগ করার জন্য সাধারণ DevTools বিকল্প সবসময় ব্যবহার করা যায় না।
Chrome টিম স্পেকুলেশন রুল ডিবাগিংয়ের জন্য DevTools সহায়তা উন্নত করতে কঠোর পরিশ্রম করছে। এই পোস্টে, আপনি কোনও পৃষ্ঠার স্পেকুলেশন রুল বোঝার জন্য এইসব টুল ব্যবহার করার বিভিন্ন উপায় দেখতে পাবেন, কেন সেগুলি কাজ নাও করতে পারে এবং কখন ডেভেলপাররা আরও পরিচিত DevTools বিকল্পগুলি ব্যবহার করতে পারবেন—এবং কখন পারবেন না।
"প্রি-" শব্দের ব্যাখ্যা
"প্রি-" দিয়ে শুরু হওয়া অনেক শব্দ আছে যা বিভ্রান্তিকর, তাই আমরা এগুলির ব্যাখ্যা দিয়ে শুরু করব:
- প্রিফেচ: ভবিষ্যতে পারফর্ম্যান্স উন্নত করার জন্য আগে থেকেই কোনও রিসোর্স বা ডকুমেন্ট ফেচ করা। এই পোস্টে Speculation Rules API ব্যবহার করে ডকুমেন্ট প্রিফেচ করার বিষয়ে আলোচনা করা হয়েছে, যা একই রকম হলেও পুরনো
<link rel="prefetch">বিকল্পের থেকে আলাদা। এই বিকল্পটি প্রায়শই সাবরিসোর্স প্রিফেচ করার জন্য ব্যবহার করা হয়। - প্রিরেন্ডার: এটি প্রিফেচিংয়ের থেকে এক ধাপ এগিয়ে এবং ব্যবহারকারী যেন পৃষ্ঠাটি নেভিগেট করেছেন এমনভাবে পুরো পৃষ্ঠাটি রেন্ডার করে, তবে ব্যবহারকারী যদি সত্যিই সেখানে নেভিগেট করেন তাহলে ব্যবহার করার জন্য প্রস্তুত একটি লুকানো ব্যাকগ্রাউন্ড রেন্ডারার প্রসেসে এটি রাখে। আবার, এই ডকুমেন্টটি পুরনো
<link rel="prerender">বিকল্পের (যা আর সম্পূর্ণ প্রিরেন্ডার করে না) পরিবর্তে এর নতুন Speculation Rules API ভার্সনের সাথে সম্পর্কিত। - স্পেকুলেটিভ নেভিগেশন: স্পেকুলেশন রুল দ্বারা ট্রিগার করা নতুন প্রিফেচ ও প্রিরেন্ডার বিকল্পের জন্য সম্মিলিত শব্দ।
- প্রিলোড: একটি ওভারলোড করা শব্দ যা
<link rel="preload">, প্রিলোড স্ক্যানার এবং সার্ভিস ওয়ার্কার নেভিগেশন প্রিলোড সহ একাধিক প্রযুক্তি এবং প্রসেসকে বোঝাতে পারে। এই আইটেমগুলি এখানে কভার করা হবে না, তবে "স্পেকুলেটিভ নেভিগেশন" শব্দ থেকে স্পষ্টভাবে আলাদা করার জন্য শব্দটি অন্তর্ভুক্ত করা হয়েছে।
prefetch-এর জন্য স্পেকুলেশন রুল
পরবর্তী নেভিগেশনের ডকুমেন্ট প্রিফেচ করার জন্য স্পেকুলেশন রুল ব্যবহার করা যেতে পারে। যেমন, কোনও পৃষ্ঠায় নিম্নলিখিত JSON যোগ করার সময়, next.html এবং next2.html প্রিফেচ করা হবে:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
নেভিগেশন প্রিফেচের জন্য স্পেকুলেশন রুল ব্যবহার করার কিছু সুবিধা আছে, যা পুরনো <link rel="prefetch"> সিনট্যাক্সে নেই। যেমন, আরও বেশি এক্সপ্রেসিভ API এবং HTTP ডিস্ক ক্যাশের পরিবর্তে মেমরি ক্যাশেতে ফলাফল সেভ করা।
prefetchটি স্পেকুলেশন রুল ডিবাগ করুন
স্পেকুলেশন রুলের মাধ্যমে ট্রিগার করা প্রিফেচ অন্যান্য ফেচের মতোই নেটওয়ার্ক প্যানেলে দেখা যেতে পারে:
লাল রঙে হাইলাইট করা দুটি অনুরোধ হল প্রিফেচ করা রিসোর্স, যা ধরন কলামে দেখা যাবে। এগুলি Lowest অগ্রাধিকারের ভিত্তিতে ফেচ করা হয় কারণ এগুলি ভবিষ্যতের নেভিগেশনের জন্য এবং Chrome বর্তমান পৃষ্ঠার রিসোর্সকে অগ্রাধিকার দেয়।
কোনও একটি সারিতে ক্লিক করলে Sec-Purpose: prefetch HTTP হেডারও দেখা যায়, যার মাধ্যমে সার্ভার-সাইডে এইসব অনুরোধ শনাক্ত করা যায়:
স্পেকুলেটিভ লোড ট্যাবের মাধ্যমে prefetch ডিবাগ করুন
Chrome DevTools-এর অ্যাপ্লিকেশন প্যানেলে, ব্যাকগ্রাউন্ড পরিষেবা বিভাগের অধীনে, একটি নতুন স্পেকুলেটিভ লোড বিভাগ যোগ করা হয়েছে, যা স্পেকুলেশন সংক্রান্ত নিয়ম ডিবাগ করতে সাহায্য করে:
এই বিভাগে তিনটি ট্যাব উপলভ্য:
- স্পেকুলেটিভ লোড যা বর্তমান পৃষ্ঠার প্রিরেন্ডার করা স্ট্যাটাস তালিকাভুক্ত করে।
- নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সব নিয়মের সেট তালিকাভুক্ত করে, URL বা নিয়ম ট্যাগ হিসেবে চিহ্নিত, যদি কিছু থাকে।
- Speculations যা রুল সেট থেকে প্রিফেচ ও প্রিরেন্ডার করা সব URL-এর তালিকা দেখায়।
আগের স্ক্রিনশটে স্পেকুলেশন ট্যাব দেখানো হয়েছে এবং আমরা দেখতে পাচ্ছি যে এই উদাহরণ পৃষ্ঠায় ৩টি পৃষ্ঠা প্রিফেচ করার জন্য স্পেকুলেশন রুলের একটি সেট আছে। এর মধ্যে দুটি প্রিফেচ করা গেছে এবং একটি যায়নি। রুল সেট-এর পাশে থাকা আইকনে ক্লিক করে আপনি এলিমেন্ট প্যানেলে রুল সেটের সোর্সে যেতে পারবেন। অন্যথায়, স্ট্যাটাস লিঙ্কে ক্লিক করে আপনি অনুমান ট্যাবে যেতে পারেন, যেখানে সেই রুলসেট অনুযায়ী ফিল্টার করা থাকে।
Speculations ট্যাবে সব টার্গেট URL-এর তালিকা থাকে, এর সাথে অ্যাকশন (প্রিফেচ বা প্রিরেন্ডার), কোন রুল সেট থেকে সেগুলি এসেছে (কারণ একটি পৃষ্ঠায় একাধিক থাকতে পারে) এবং প্রতিটি Speculation-এর স্ট্যাটাস থাকে:
URL-এর উপরে, সব নিয়মের সেট থেকে URL বা শুধুমাত্র নির্দিষ্ট নিয়মের সেট থেকে URL দেখানোর জন্য ড্রপ-ডাউন ব্যবহার করা যেতে পারে। তার নিচে, সব URL তালিকাভুক্ত করা আছে। URL-এ ক্লিক করলে আপনি আরও বিস্তারিত তথ্য পাবেন।
এই স্ক্রিনশটে, আমরা next3.html পৃষ্ঠার (যা নেই এবং তাই 404 দেখায়, যা একটি নন-2xx HTTP স্ট্যাটাস কোড) ব্যর্থতার কারণ দেখতে পাচ্ছি।
সারসংক্ষেপ ট্যাব, স্পেকুলেটিভ লোড, একটি এই পৃষ্ঠার জন্য স্পেকুলেটিভ লোডিং স্ট্যাটাস রিপোর্ট দেখায় যাতে এই পৃষ্ঠার জন্য প্রিফেচ বা প্রিরেন্ডার ব্যবহার করা হয়েছে কিনা তা দেখানো হয়।
প্রিফেচ করা পেজের ক্ষেত্রে, সেই পেজে নেভিগেট করা হলে আপনি একটি সফল মেসেজ দেখতে পাবেন:
ম্যাচ না করা স্পেকুলেশন
স্পেকুলেশন রুল সহ কোনও পৃষ্ঠা থেকে নেভিগেশন হলে এবং তার ফলে প্রিফেচ বা প্রিরেন্ডার ব্যবহার করা না হলে, ট্যাবের একটি অতিরিক্ত বিভাগে আরও বিস্তারিতভাবে দেখানো হবে যে কেন URL-টি কোনও স্পেকুলেশন URL-এর সাথে মেলেনি। আপনার স্পেকুলেশন রুলে টাইপো খুঁজে বের করার জন্য এটি উপযোগী।
যেমন, এখানে আমরা next4.html-এ নেভিগেট করেছি, কিন্তু শুধু next.html, next2.html বা next3.html প্রিফেচ করা হয়েছে, তাই আমরা দেখতে পাচ্ছি যে এটি ওই তিনটি নিয়মের কোনওটির সাথেই মিলছে না।
স্পেকুলেটিভ লোড ট্যাবটি স্পেকুলেশন সংক্রান্ত নিয়ম ডিবাগ করা এবং JSON-এ সিনট্যাক্স সংক্রান্ত কোনও ভুল খুঁজে বের করার জন্য খুবই উপযোগী।
প্রিফেচ সম্পর্কে জানতে, নেটওয়ার্ক প্যানেল আরও পরিচিত জায়গা হতে পারে। প্রিফেচ ব্যর্থ হওয়ার উদাহরণ হিসেবে, আপনি এখানে প্রিফেচের জন্য ৪০৪ দেখতে পাবেন:
তবে, স্পেকুলেটিভ লোড ট্যাব প্রিরেন্ডারিং স্পেকুলেশন রুলের জন্য অনেক বেশি উপযোগী হয়ে ওঠে, যা পরে কভার করা হয়েছে।
prerender-এর জন্য স্পেকুলেশন রুল
প্রিরেন্ডার স্পেকুলেশন রুল, প্রিফেচ স্পেকুলেশন রুলের মতো একই সিনট্যাক্স অনুসরণ করে। যেমন:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
এই নিয়ম সেট নির্দিষ্ট পৃষ্ঠা সম্পূর্ণ লোড ও রেন্ডার করে (কিছু বিধিনিষেধ সাপেক্ষে)। এটি ঝটপট লোড হওয়ার অভিজ্ঞতা প্রদান করতে পারে—যদিও এর জন্য অতিরিক্ত রিসোর্স খরচ হয়।
তবে, প্রিফেচের মতো এগুলি নেটওয়ার্ক প্যানেলে দেখা যায় না, কারণ Chrome-এ আলাদা রেন্ডারিং প্রসেসে এগুলি ফেচ ও রেন্ডার করা হয়। এর ফলে প্রিরেন্ডার স্পেকুলেশন রুল ডিবাগ করার জন্য স্পেকুলেটিভ লোড ট্যাব আরও গুরুত্বপূর্ণ হয়ে ওঠে।
স্পেকুলেটিভ লোড ট্যাবের মাধ্যমে prerender ডিবাগ করুন
প্রিরেন্ডার স্পেকুলেশন রুলের জন্য একই স্পেকুলেটিভ লোড স্ক্রিন ব্যবহার করা যেতে পারে, যেমনটি তিনটি পৃষ্ঠা প্রিফেচ করার পরিবর্তে প্রিরেন্ডার করার চেষ্টা করে এমন একটি অনুরূপ ডেমো পৃষ্ঠার মাধ্যমে দেখানো হয়েছে:
এখানে আমরা আবার দেখতে পাচ্ছি যে তিনটি URL-এর মধ্যে একটি প্রিরেন্ডার করতে পারেনি এবং ডেভেলপাররা ২টি রেডি, ১টি ব্যর্থ লিঙ্কে ক্লিক করে Speculations ট্যাবে প্রতিটি URL-এর বিবরণ পেতে পারেন।
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 খুঁজে পেয়েছে সেগুলি তালিকাভুক্ত করা হয়েছে:
স্ট্যাটাস হল ট্রিগার করা হয়নি কারণ এগুলির জন্য প্রিরেন্ডার প্রসেস শুরু হয়নি। তবে, আমরা লিঙ্কের উপর পয়েন্টার রাখলে, প্রতিটি URL প্রিরেন্ডার হওয়ার সাথে সাথে স্ট্যাটাস পরিবর্তন হতে দেখি:
Chrome প্রিরেন্ডারের উপর সীমা সেট করেছে, যার মধ্যে moderate আগ্রহের জন্য সর্বাধিক ২টি প্রিরেন্ডার অন্তর্ভুক্ত, তাই ৩য় লিঙ্কের উপর মাউস নিয়ে যাওয়ার পরে, আমরা সেই URL-এর জন্য ব্যর্থতার কারণ দেখতে পাই:
অন্য DevTools প্যানেলের মাধ্যমে prerender ডিবাগ করুন
প্রিফেচের মতো, প্রিরেন্ডার করা পৃষ্ঠাগুলি নেটওয়ার্ক প্যানেলের মতো DevTools প্যানেলের বর্তমান রেন্ডারিং প্রসেসে দেখা যাবে না, কারণ সেগুলি তাদের নিজস্ব ব্যাকগ্রাউন্ড রেন্ডারারে রেন্ডার করা হয়।
তবে, এখন DevTools প্যানেল দ্বারা ব্যবহৃত রেন্ডারারকে উপরে ডানদিকে ড্রপ-ডাউন মেনু থেকে অথবা প্যানেলের উপরের অংশে কোনও URL বেছে নিয়ে এবং পরীক্ষা করুন বিকল্প বেছে নিয়ে পরিবর্তন করা সম্ভব:
এই ড্রপ-ডাউন (এবং বেছে নেওয়া ভ্যালু) অন্যান্য সব প্যানেল জুড়েও শেয়ার করা হয়, যেমন নেটওয়ার্ক প্যানেল, যেখানে আপনি দেখতে পাবেন যে প্রিরেন্ডার করা পেজের জন্য অনুরোধ করা হচ্ছে:
এইসব রিসোর্সের HTTP হেডার দেখলে আমরা বুঝতে পারব যে সেগুলি Sec-Purpose: prefetch;prerender হেডারের সাথে সেট করা হবে:
অথবা এলিমেন্ট প্যানেল, যেখানে আপনি পৃষ্ঠার কন্টেন্ট দেখতে পাবেন, যেমন নিচের স্ক্রিনশটে আমরা দেখতে পাচ্ছি যে <h1> এলিমেন্টটি প্রিরেন্ডার করা পৃষ্ঠার জন্য:
অথবা কনসোল প্যানেল, যেখানে আপনি প্রিরেন্ডার করা পৃষ্ঠার মাধ্যমে নির্গত কনসোল লগ দেখতে পাবেন:
প্রিরেন্ডার করা পেজে স্পেকুলেশন রুল ডিবাগ করুন
প্রিরেন্ডারিং শুরু করে এমন পৃষ্ঠায় প্রিরেন্ডার করা পৃষ্ঠা কীভাবে ডিবাগ করতে হয় তা আগের বিভাগে আলোচনা করা হয়েছে। তবে, প্রিরেন্ডার করা পৃষ্ঠাগুলিও ডিবাগিং তথ্য প্রদান করতে পারে, হয় অ্যানালিটিক্স কল করে বা কনসোলে লগ করে (যা আগের বিভাগে বর্ণিত হিসাবে দেখা যায়)।
এছাড়াও, ব্যবহারকারী কোনও প্রিরেন্ডার করা পৃষ্ঠায় নেভিগেট করে সেটি অ্যাক্টিভেট করলে, স্পেকুলেটিভ লোড ট্যাবে এই স্ট্যাটাস এবং সেটি সফলভাবে প্রিরেন্ডার করা হয়েছে কিনা তা দেখানো হবে। এটি প্রিরেন্ডার করা না গেলে, কেন তা করা যায়নি তার ব্যাখ্যা দেওয়া হয়েছে:
এছাড়াও—প্রিফেচের ক্ষেত্রে যেমন হয়—স্পেকুলেশন রুল সহ কোনও পৃষ্ঠা থেকে নেভিগেট করা যা বর্তমান পৃষ্ঠার সাথে মেলে না, তা আপনাকে দেখানোর চেষ্টা করবে যে কেন URLগুলি আগের পৃষ্ঠার স্পেকুলেশন রুলের সাথে মেলেনি, যা স্পেকুলেটিভ লোড ট্যাবে কভার করা হয়েছে:
উপসংহার
এই পোস্টে, আমরা বিভিন্ন উপায় দেখিয়েছি যার মাধ্যমে ডেভেলপাররা প্রিফেচ এবং প্রিরেন্ডার স্পেকুলেশন রুল ডিবাগ করতে পারেন। টিম স্পেকুলেশন রুলের জন্য টুলিংয়ের উপর কাজ করা চালিয়ে যাচ্ছে এবং ডেভেলপারদের থেকে আমরা সাজেশন শুনতে চাই যে এই নতুন API ডিবাগ করার জন্য আর কোন কোন উপায় সহায়ক হতে পারে। কোনও ফিচার রিকোয়েস্ট বা বাগ শনাক্ত করার জন্য আমরা ডেভেলপারদের Chrome ইস্যু ট্র্যাকারে সমস্যাটি জানাতে উৎসাহিত করি।
স্বীকৃতি
Unsplash-এ Nubelson Fernandes-এর থাম্বনেল ছবি।