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