প্রকাশিত: ২৩ জানুয়ারি, ২০২৬
ক্রোম ১৪৪ থেকে স্পেকুলেশন রুলস এপিআই- তে prerender until script সংযোজনের জন্য একটি নতুন অরিজিন ট্রায়াল চালু করছে ক্রোম। এই অরিজিন ট্রায়ালটি সাইটগুলোকে প্রকৃত ব্যবহারকারীদের সাথে নতুন সংযোজনটি পরীক্ষা করার সুযোগ দেবে। এর উদ্দেশ্য হলো ফিচারটির ফিল্ড টেস্ট করা এবং ক্রোম টিমকে ফিডব্যাক প্রদান করা, যা এটিকে আরও উন্নত করতে এবং ওয়েব প্ল্যাটফর্মে এটি যুক্ত করা উচিত কিনা সে বিষয়ে সিদ্ধান্ত নিতে সাহায্য করবে।
এর মাধ্যমে কোন সমস্যার সমাধান করা হচ্ছে?
স্পেকুলেশন রুলস এপিআই ব্যবহারকারীদের পেজে নেভিগেট করার আগেই পেজ লোড শুরু করার সুযোগ দেয়। এটি সময়ের আগেই কিছু বা সমস্ত কাজ সম্পন্ন করে ভবিষ্যতের পেজ লোডকে উন্নত করতে পারে। এখন পর্যন্ত এটি দুই ধরনের স্পেকুলেশন সমর্থন করেছে: প্রিফেচ এবং প্রিরেন্ডার।
প্রিফেচ শুধুমাত্র এইচটিএমএল ডকুমেন্টটি ফেচ করে। এর ফলে গুরুত্বপূর্ণ প্রথম রিসোর্সটি আগে থেকেই পাওয়া যায়, যা পরবর্তীতে কোনো ইউআরএল-এ নেভিগেট করার সময় পারফরম্যান্স বাড়িয়ে দেয়। এটি কোনো সাব-রিসোর্স (যেমন, সিএসএস, জাভাস্ক্রিপ্ট বা ইমেজ) লোড করে না, বা জাভাস্ক্রিপ্টও এক্সিকিউট করে না। ফলে, পেজ লোড হওয়ার সময় ব্রাউজারকে তখনও বেশ কিছু কাজ করতে হতে পারে।
প্রি-রেন্ডার আরও অনেক কিছু করে। এটি সাব-রিসোর্সগুলো ফেচ করে এবং পেজটি রেন্ডার ও জাভাস্ক্রিপ্ট এক্সিকিউট করা শুরু করে, অনেকটা যেন পেজটি একটি লুকানো ব্যাকগ্রাউন্ড ট্যাবে খোলা হয়েছে। ব্যবহারকারী যখন লিঙ্কে ক্লিক করেন, তখন যদি ব্রাউজার পেজটি রেন্ডার করার জন্য প্রয়োজনীয় সমস্ত কাজ সম্পন্ন করে ফেলে, তবে তিনি তাৎক্ষণিক নেভিগেশন পেতে পারেন।
প্রি-রেন্ডার অপশনটি ব্যবহার করা পারফরম্যান্সের জন্য সম্ভাব্যভাবে অনেক ভালো, কিন্তু এর জন্য অতিরিক্ত বাস্তবায়ন খরচ এবং অতিরিক্ত রিসোর্স খরচ হয়। যদি সতর্কতার সাথে বিবেচনা না করা হয়, তবে কোনো ব্যবহারকারী পেজটিতে নেভিগেট করার আগেই সেটিকে সম্পূর্ণরূপে প্রি-রেন্ডার করলে অপ্রত্যাশিত পার্শ্বপ্রতিক্রিয়াও দেখা দিতে পারে। উদাহরণস্বরূপ, যদি অ্যানালিটিক্স প্রদানকারী অনুমানগুলোকে আমলে না নেয়, তাহলে ব্যবহারকারী নেভিগেট করার আগেই অ্যানালিটিক্স চালু হয়ে যেতে পারে—যা পরিসংখ্যানকে বিকৃত করে।
যেসব সাইট প্রি-রেন্ডার ব্যবহার করে, তাদেরও সতর্ক থাকতে হবে যেন ব্যবহারকারীকে কোনো পুরোনো বা অচল পেজ দেখানো না হয়। উদাহরণস্বরূপ, যদি আপনি কোনো ই-কমার্স সাইটে একটি পেজ স্পেকুলেট করেন, তারপর আপনার বাস্কেটে কিছু যোগ করেন এবং এরপর পূর্বে স্পেকুলেট করা পেজটি লোড করেন, তাহলে আপনি বাস্কেটের পুরোনো পরিমাণটি দেখতে পারেন, যদি সাইটটি এটি আপডেট করার জন্য অতিরিক্ত যত্ন না নেয়।
এই স্টেট ম্যানেজমেন্টের কিছু অংশ সার্ভার-সাইডে হলে প্রিফেচের ক্ষেত্রেও এই জটিলতাগুলো দেখা দেয়, কিন্তু প্রি-রেন্ডারের জন্য এটি প্রায়শই একটি বড় সমস্যা। অধিক জটিল সাইটগুলোতে প্রি-রেন্ডার ব্যবহার করা আরও জটিল হতে পারে।
তবে, আমরা ডেভেলপারদের কাছ থেকে শুনছি যে তারা ইতিমধ্যেই পেজ প্রিফেচ করার ফলে পারফরম্যান্সের উন্নতি দেখতে পাচ্ছেন এবং আরও বেশি সুবিধা পাওয়ার জন্য স্পেকুলেশন রুলস নিয়ে আরও এগিয়ে যেতে চান। এখানেই prerender until script কাজে আসে।
prerender until script বলতে কী বোঝায়?
prerender until script হলো prefetch এবং prerender-এর মাঝামাঝি একটি নতুন পদ্ধতি। এটি HTML ডকুমেন্ট প্রিফেচ করে (যেমনটি prefetch করে), এবং তারপর সমস্ত সাবরিসোর্স ফেচ করা সহ পেজটি রেন্ডার করা শুরু করে (যেমনটি prerender করে)। তবে গুরুত্বপূর্ণ বিষয় হলো, ব্রাউজার <script> এলিমেন্টগুলো (ইনলাইন স্ক্রিপ্ট এবং src স্ক্রিপ্ট উভয়ের ক্ষেত্রেই) এক্সিকিউট করা এড়িয়ে চলে। যখন এটি কোনো ব্লকিং <script> ট্যাগের সম্মুখীন হয়, তখন এটি পার্সারকে থামিয়ে দেয় এবং ব্যবহারকারী পেজটিতে নেভিগেট না করা পর্যন্ত অপেক্ষা করে। এই সময়ের মধ্যে প্রিলোড স্ক্যানার পেজটির জন্য প্রয়োজনীয় সাবরিসোর্সগুলো ফেচ করে নিতে পারে, যাতে পেজটি লোড হওয়া শুরু করলে সেগুলো ব্যবহারের জন্য প্রস্তুত থাকে।
যেকোনো ব্লকিং <script> এলিমেন্টকে আটকে রাখার মাধ্যমে বাস্তবায়নের অনেক জটিলতা এড়ানো যায়। একই সাথে, রেন্ডারিং প্রক্রিয়া শুরু করে এবং সাবরিসোর্সগুলো ফেচ করার ফলে প্রিফেচের তুলনায় একটি বিশাল সুবিধা পাওয়া যায়—সম্ভাব্যভাবে যা একটি সম্পূর্ণ প্রি-রেন্ডারের সুবিধার প্রায় সমান।
সবচেয়ে ভালো পরিস্থিতিতে (যখন পেজে কোনো স্ক্রিপ্টই থাকে না), এই অপশনটি পুরো পেজটিকে প্রি-রেন্ডার করবে। অথবা, যখন কোনো পেজের ফুটার অংশে শুধু স্ক্রিপ্ট এলিমেন্ট থাকে কিংবা শুধু async বা defer অ্যাট্রিবিউটযুক্ত স্ক্রিপ্ট থাকে , তখন সেই জাভাস্ক্রিপ্ট ছাড়াই পেজটি সম্পূর্ণরূপে প্রি-রেন্ডার হয়ে যাবে। এমনকি সবচেয়ে খারাপ পরিস্থিতিতেও (যেখানে <head> ট্যাগে কোনো ব্লকিং স্ক্রিপ্ট থাকে), পেজ রেন্ডার শুরু হওয়া, এবং বিশেষ করে সাবরিসোর্সগুলো প্রি-ফেচ করার ফলে পেজ লোডের গতি অনেক উন্নত হওয়া উচিত।
prerender until script কীভাবে ব্যবহার করবেন?
প্রথমে, ফিচারটি সক্রিয় করুন , তারপর অন্যান্য Speculation Rules API অপশনগুলোর মতোই একটি নতুন prerender_until_script কী ব্যবহার করে prerender until script ব্যবহার করুন (লক্ষ্য করুন, এটিকে একটি বৈধ JSON কী নাম বানানোর জন্য আন্ডারস্কোর ব্যবহার করা হয়েছে)।
এটি স্ট্যাটিক ইউআরএল-এর তালিকা নিয়মের সাথে ব্যবহার করা যেতে পারে:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
এটি ডকুমেন্ট রুলসের সাথেও ব্যবহার করা যেতে পারে, যেখানে অনুমান করার জন্য URL-গুলো পেজে লিঙ্ক হিসেবে উপলব্ধ থাকে:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
এরপর prerender until script সাধারণ Speculation Rules API অপশনগুলোর সাথে ব্যবহার করা যাবে, যার মধ্যে বিভিন্ন eagerness ভ্যালুও অন্তর্ভুক্ত।
যেহেতু জাভাস্ক্রিপ্ট এক্সিকিউট হবে না, তাই document.prerendering এবং prerenderingchange ইভেন্ট কোনোটিই পড়া যাবে না। তবে activationStart সময় শূন্য হবে না।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে যেসব ব্রাউজার prerender_until_script সমর্থন করে না, তাদের জন্য prefetch-এ ফলব্যাক সহ পূর্ববর্তী উদাহরণটি স্থাপন করতে হয়:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
ক্রোম এই পুনরাবৃত্তিটি কোনো সমস্যা ছাড়াই সামলে নেবে এবং প্রতিটি ইগারনেস সেটিংয়ের জন্য সবচেয়ে উপযুক্ত নিয়মটি কার্যকর করবে।
বিকল্পভাবে, আপনি এগুলিকে বিভিন্ন ইগারনেস লেভেলের সাথে ব্যবহার করতে পারেন, যাতে আগ্রহের সাথে প্রিফেচ করা যায়, এবং তারপরে প্রিফেচ/প্রিরেন্ডারের সাথে পূর্বে প্রস্তাবিত পরামর্শ অনুযায়ী আরও সিগন্যাল সহ prerender until script আপগ্রেড করতে পারেন:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
মনে রাখবেন, আপনি এই পদ্ধতিতে একটি prerender until script একটি সম্পূর্ণ প্রি-রেন্ডারে আপগ্রেড করতে পারবেন না, কিন্তু আপনি যদি চান যে ক্রোম এই প্যাটার্নটি সমর্থন করুক, তাহলে এই বাগটিতে স্টার দিয়ে আমাদের জানান।
সমস্ত জাভাস্ক্রিপ্ট কি থামানো আছে?
না, শুধুমাত্র <script> এলিমেন্টগুলোই পার্সারকে থামিয়ে দেয়। এর মানে হলো, ইনলাইন স্ক্রিপ্ট হ্যান্ডলার (যেমন onload ) বা javascript: URL-গুলো পার্সারকে থামাবে না এবং সেগুলো এক্সিকিউট হতে পারবে।
উদাহরণস্বরূপ, পৃষ্ঠাটিতে নেভিগেট করার আগেই এটি কনসোলে লগ করতে পারে Hero image is now loaded :
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
অন্যদিকে, যদি ইভেন্ট লিসেনারটি <script> ট্যাগ দিয়ে যোগ করা হয়, তাহলে পেজটি অ্যাক্টিভেট না হওয়া পর্যন্ত Hero image is now loaded বার্তাটি কনসোলে লগ হবে না।
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
এটা অযৌক্তিক মনে হতে পারে, কিন্তু অনেক ক্ষেত্রে (যেমন আগের উদাহরণে!) অবিলম্বে পদক্ষেপ নেওয়াই শ্রেয় এবং এতে বিলম্ব করলে আরও অপ্রত্যাশিত জটিলতা দেখা দিতে পারে।
এছাড়াও, বেশিরভাগ ইনলাইন ইভেন্টের জন্য ব্যবহারকারীর কোনো কার্যকলাপের প্রয়োজন হয় (যেমন, onclick , onhover ), এবং তাই ব্যবহারকারী পেজটির সাথে ইন্টারঅ্যাক্ট না করা পর্যন্ত সেগুলি কার্যকর হয় না।
অবশেষে, পূর্ববর্তী ব্লকিং স্ক্রিপ্টগুলো পার্সারকে থামিয়ে দেবে এবং এর ফলে ইনলাইন ইভেন্ট হ্যান্ডলারগুলো আবিষ্কৃত হতে পারবে না। তাই, এটি একটি ইনলাইন ইভেন্ট হ্যান্ডলার হওয়া সত্ত্বেও, অ্যাক্টিভেশন না হওয়া পর্যন্ত মেসেজটি কনসোলে লোড হবে না।
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
এটি বিশেষত সেইসব ইনলাইন স্ক্রিপ্ট হ্যান্ডলারের ক্ষেত্রে প্রাসঙ্গিক, যেগুলো পূর্বে সংজ্ঞায়িত কোড ব্যবহার করে এবং যা প্রত্যাশিতভাবেই কাজ করতে থাকবে:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
async এবং defer অ্যাট্রিবিউটযুক্ত স্ক্রিপ্টগুলোর ক্ষেত্রে কী হবে?
async এবং defer অ্যাট্রিবিউটযুক্ত স্ক্রিপ্টগুলো সক্রিয় না হওয়া পর্যন্ত বিলম্বিত হয়, কিন্তু এগুলো পার্সারকে পৃষ্ঠার বাকি অংশ প্রক্রিয়াকরণ চালিয়ে যেতে বাধা দেয় না। স্ক্রিপ্টগুলো ডাউনলোড করা হয়, কিন্তু পৃষ্ঠায় নেভিগেট না করা পর্যন্ত সেগুলো কার্যকর হয় না।
prerender until script কীভাবে চালু করবেন?
prerender until script একটি নতুন অপশন যা নিয়ে আমরা কাজ করছি এবং এটি পরিবর্তন সাপেক্ষ। তাই, প্রথমে এটি চালু করে অপ্ট-ইন না করলে এটি ব্যবহার করা যাবে না।
এটি ডেভেলপারদের জন্য স্থানীয়ভাবে chrome://flags/#prerender-until-script ক্রোম ফ্ল্যাগ অথবা --enable-features=PrerenderUntilScript কমান্ড লাইন ফ্ল্যাগ ব্যবহার করে সক্রিয় করা যেতে পারে।
prerender until script এখন Chrome 144 থেকে একটি অরিজিন ট্রায়াল হিসেবেও উপলব্ধ। অরিজিন ট্রায়াল সাইটের মালিকদেরকে তাদের সাইটে কোনো ফিচার চালু করার সুযোগ দেয়, যাতে প্রকৃত ব্যবহারকারীরা ম্যানুয়ালি চালু না করেই ফিচারটি ব্যবহার করতে পারে। এর ফলে, ফিচারটি প্রত্যাশা অনুযায়ী কাজ করছে কিনা তা নিশ্চিত করতে প্রকৃত ব্যবহারকারীদের উপর এর প্রভাব পরিমাপ করা যায়।
এটি একবার চালিয়ে দেখুন এবং আপনার মতামত জানান।
স্পেকুলেশন রুলস এপিআই-তে এই প্রস্তাবিত সংযোজনটি নিয়ে আমরা সত্যিই উচ্ছসিত এবং সাইটের মালিকদের এটি পরীক্ষা করে দেখার জন্য উৎসাহিত করছি।
গিটহাব রিপোজিটরিতে প্রস্তাবনাটির বিষয়ে আপনার মতামত জানান। ক্রোমের বাস্তবায়ন সম্পর্কে মতামত জানাতে একটি ক্রোমিয়াম বাগ রিপোর্ট করুন।