প্রকাশিত: ২৩ জানুয়ারী, ২০২৬
ক্রোম স্পেকুলেশন রুলস এপিআই- তে প্রিরেন্ডার পর্যন্ত স্ক্রিপ্ট সংযোজনের জন্য ক্রোম ১৪৪ থেকে একটি নতুন অরিজিন ট্রায়াল চালু করছে। এই অরিজিন ট্রায়াল সাইটগুলিকে প্রকৃত ব্যবহারকারীদের সাথে নতুন সংযোজনটি চেষ্টা করতে দেয়। লক্ষ্য হল ফিল্ড পরীক্ষা করা এবং এটিকে গঠন করতে এবং এটি এমন কিছু কিনা তা নির্ধারণ করতে Chrome টিমের প্রতিক্রিয়া প্রদান করা যা আমাদের ওয়েব প্ল্যাটফর্মে যুক্ত করা উচিত।
এটি কোন সমস্যার সমাধান করতে চাইছে?
স্পেকুলেশন রুলস এপিআই ব্যবহারকারীদের পৃষ্ঠাগুলিতে নেভিগেট করার আগে থেকেই পৃষ্ঠা লোড শুরু করতে দেয়। এটি সময়ের আগে কিছু বা সমস্ত কাজ সম্পন্ন করে ভবিষ্যতে পৃষ্ঠা লোড উন্নত করতে পারে। এখন পর্যন্ত এটি দুই ধরণের অনুমানের অনুমতি দিয়েছে: প্রিফেচ এবং প্রিরেন্ডার।
প্রিফেচ শুধুমাত্র HTML ডকুমেন্টটিই আনে। এটি গুরুত্বপূর্ণ প্রথম রিসোর্সটি আগে থেকেই পেয়ে যায় যা পরবর্তীতে যখন কোনও URL নেভিগেট করা হয় তখন কর্মক্ষমতা বৃদ্ধি করে। এটি কোনও সাবরিসোর্স (যেমন, CSS, জাভাস্ক্রিপ্ট, বা ছবি) লোড করে না, বা জাভাস্ক্রিপ্ট এক্সিকিউট করে না, এবং তাই পৃষ্ঠা লোড করার সময় ব্রাউজারকে এখনও যথেষ্ট কাজ করতে হতে পারে।
প্রিরেন্ডার আরও অনেক কিছু করে। এটি সাবরিসোর্সগুলি আনে এবং পৃষ্ঠাটি রেন্ডার করতে এবং জাভাস্ক্রিপ্ট চালানো শুরু করে, প্রায় যেন পৃষ্ঠাটি একটি লুকানো ব্যাকগ্রাউন্ড ট্যাবে খোলা হয়েছে। ব্যবহারকারী যখন লিঙ্কটিতে ক্লিক করেন তখন তারা তাৎক্ষণিক নেভিগেশন পেতে পারেন যদি ব্রাউজার পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় সমস্ত কাজ সম্পন্ন করে।
প্রিরেন্ডার অপশন ব্যবহার করলে পারফরম্যান্সের দিক থেকে অনেক ভালো হতে পারে, তবে এর জন্য অতিরিক্ত বাস্তবায়ন খরচের পাশাপাশি অতিরিক্ত রিসোর্স খরচও হতে পারে। যদি সাবধানতার সাথে বিবেচনা না করা হয়, তাহলে ব্যবহারকারী পৃষ্ঠায় যাওয়ার আগেই সম্পূর্ণরূপে প্রিরেন্ডার করার সময় এটি অপ্রত্যাশিত পার্শ্ব প্রতিক্রিয়া সৃষ্টি করতে পারে। উদাহরণস্বরূপ, বিশ্লেষণ প্রদানকারী যদি অনুমান বিবেচনা না করে তবে ব্যবহারকারী নেভিগেট করার আগেই বিশ্লেষণ শুরু হতে পারে—পরিসংখ্যানের দিকে ঝুঁকে পড়তে পারে।
প্রিরেন্ডার ব্যবহারকারী সাইটগুলিকেও সতর্ক থাকতে হবে যাতে কোনও ব্যবহারকারীকে একটি পুরানো পৃষ্ঠা পরিবেশন না করা হয়। উদাহরণস্বরূপ, যদি আপনি একটি ই-কমার্স সাইটে একটি পৃষ্ঠা অনুমান করেন, তারপর আপনার ঝুড়িতে কিছু যোগ করেন, এবং তারপর পূর্বে অনুমান করা পৃষ্ঠাটি লোড করেন তবে সাইটটি আপডেট করা নিশ্চিত করার জন্য অতিরিক্ত যত্ন না নিলে আপনি পুরানো ঝুড়ির পরিমাণ দেখতে পাবেন।
সার্ভার-সাইডে যদি এই অবস্থা ব্যবস্থাপনার কিছু ঘটে থাকে তবে প্রিফেচের ক্ষেত্রেও এই জটিলতাগুলি বিদ্যমান, তবে প্রিরেন্ডারের জন্য এটি প্রায়শই একটি বড় সমস্যা। আরও জটিল সাইটগুলিতে প্রিরেন্ডার ব্যবহার করা আরও জটিল হতে পারে।
তবে, আমরা ডেভেলপারদের কাছ থেকে শুনেছি যে তারা ইতিমধ্যেই পৃষ্ঠাটি প্রিফেচ করার ফলে কর্মক্ষমতা বৃদ্ধি দেখতে পাচ্ছে এবং আরও বেশি সুবিধা পেতে অনুমানের নিয়মগুলি নিয়ে আরও এগিয়ে যেতে চায়। স্ক্রিপ্ট না আসা পর্যন্ত এখানেই প্রিরেন্ডার করা হয়।
প্রিরেন্ডার অবধি স্ক্রিপ্ট কী?
প্রি-রেন্ডার যতক্ষণ না স্ক্রিপ্ট প্রিফেচ এবং প্রি-রেন্ডারের মধ্যে একটি নতুন, মধ্যম স্থল হয়ে ওঠে। এটি HTML ডকুমেন্ট প্রিফেচ করে (যেমন প্রিফেচ করে), এবং তারপর পৃষ্ঠাটি রেন্ডার করা শুরু করে, যার মধ্যে সমস্ত সাবরিসোর্স (যেমন প্রি-রেন্ডার করে) আনা অন্তর্ভুক্ত থাকে। তবে গুরুত্বপূর্ণ বিষয় হল, ব্রাউজারটি <script> উপাদানগুলি (ইনলাইন স্ক্রিপ্ট এবং src স্ক্রিপ্ট উভয়ের জন্য) কার্যকর করা এড়াবে। যখন এটি একটি ব্লকিং <script> ট্যাগের মুখোমুখি হয়, তখন এটি পার্সারকে থামিয়ে দেয় এবং ব্যবহারকারীর পৃষ্ঠায় নেভিগেট করা পর্যন্ত অপেক্ষা করে। ইতিমধ্যে প্রি-লোড স্ক্যানার পৃষ্ঠার প্রয়োজনীয় সাবরিসোর্সগুলি আনতে পারে যাতে পৃষ্ঠাটি লোড হওয়া চালিয়ে যেতে পারে তখন সেগুলি ব্যবহারের জন্য প্রস্তুত থাকে।
যেকোনো ব্লকিং <script> উপাদান আটকে রাখলে, বাস্তবায়ন জটিলতার অনেকটাই এড়ানো যায়। একই সময়ে, রেন্ডারিং প্রক্রিয়া শুরু করে এবং সাবরিসোর্সগুলি আনার মাধ্যমে, প্রিফেচের উপর একটি বিশাল লাভ হয় - সম্ভাব্যভাবে প্রায় একটি সম্পূর্ণ প্রিরেন্ডারের মতোই।
সবচেয়ে ভালো ক্ষেত্রে (যখন পৃষ্ঠায় কোনও স্ক্রিপ্ট থাকে না), এই বিকল্পটি পুরো পৃষ্ঠাটিকে প্রিরেন্ডার করবে। অথবা, যখন কোনও পৃষ্ঠার ফুটারে কেবল স্ক্রিপ্ট উপাদান থাকে বা কেবল async বা defer অ্যাট্রিবিউট সহ স্ক্রিপ্ট থাকে , তখন পৃষ্ঠাটি জাভাস্ক্রিপ্ট ছাড়াই সম্পূর্ণরূপে প্রিরেন্ডার করা হবে। এমনকি সবচেয়ে খারাপ পরিস্থিতিতে (যেখানে <head> এ একটি ব্লকিং স্ক্রিপ্ট থাকে), পৃষ্ঠা রেন্ডারের শুরু, এবং বিশেষ করে সাবরিসোর্সগুলির প্রিফেচিং, অনেক উন্নত পৃষ্ঠা লোডের দিকে পরিচালিত করবে।
প্রিরেন্ডার পর্যন্ত স্ক্রিপ্ট কিভাবে ব্যবহার করবেন?
প্রথমে, বৈশিষ্ট্যটি সক্ষম করুন , তারপর prerender until script অন্যান্য Speculation Rules API বিকল্পগুলির মতো একইভাবে একটি নতুন prerender_until_script কী ব্যবহার করুন (এটিকে একটি বৈধ JSON কী নাম করতে আন্ডারস্কোরগুলি লক্ষ্য করুন)
এটি স্ট্যাটিক URL-এর তালিকার নিয়মগুলির সাথে ব্যবহার করা যেতে পারে:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
এটি ডকুমেন্ট নিয়মের সাথেও ব্যবহার করা যেতে পারে যেখানে অনুমান করার জন্য URL গুলি পৃষ্ঠায় লিঙ্ক হিসাবে উপলব্ধ:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
প্রিরেন্ডার যতক্ষণ না স্ক্রিপ্টটি বিভিন্ন আগ্রহের মান সহ সাধারণ স্পেকুলেশন রুলস API বিকল্পগুলির সাথে ব্যবহার করা যেতে পারে।
যেহেতু জাভাস্ক্রিপ্ট কার্যকর হবে না, document.prerendering পড়া যাবে না এবং prerenderingchange ইভেন্টটিও পড়া যাবে না। তবে activationStart সময় শূন্য হবে না।
নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে পূর্ববর্তী উদাহরণটি prerender_until_script সমর্থন করে না এমন ব্রাউজারগুলির জন্য প্রিফেচ করার জন্য একটি ফলব্যাক সহ স্থাপন করা যায়:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome এই ডুপ্লিকেশনটি কোনও সমস্যা ছাড়াই পরিচালনা করবে এবং প্রতিটি আগ্রহের সেটিংয়ের জন্য সবচেয়ে উপযুক্ত নিয়মটি কার্যকর করবে।
বিকল্পভাবে, আপনি এগুলিকে বিভিন্ন আগ্রহের স্তরের সাথে ব্যবহার করতে পারেন, আগ্রহের সাথে প্রিফেচ করতে, এবং তারপর prerender until স্ক্রিপ্টে আপগ্রেড করতে পারেন যাতে আরও সংকেত থাকে যেমনটি পূর্বে prefetch/prerender দিয়ে প্রস্তাবিত ছিল :
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
মনে রাখবেন আপনি এই পদ্ধতিতে একটি প্রিরেন্ডার until স্ক্রিপ্টকে সম্পূর্ণ প্রিরেন্ডারে আপগ্রেড করতে পারবেন না, তবে এই বাগটি তারকাচিহ্নিত করে Chrome সমর্থন করে এমন কোনও প্যাটার্নে আপনার আগ্রহ থাকলে আমাদের জানান।
সব জাভাস্ক্রিপ্ট কি পজ করা আছে?
না, শুধুমাত্র <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 অ্যাট্রিবিউট সহ স্ক্রিপ্টগুলি সক্রিয়করণ পর্যন্ত বিলম্বিত হয় কিন্তু পার্সারকে পৃষ্ঠার বাকি অংশ প্রক্রিয়া করা থেকে বিরত রাখবে না। স্ক্রিপ্টগুলি ডাউনলোড করা হয় কিন্তু পৃষ্ঠাটি নেভিগেট না করা পর্যন্ত কার্যকর করা হয় না।
স্ক্রিপ্ট পর্যন্ত প্রিরেন্ডার কীভাবে সক্ষম করবেন?
প্রিরেন্ডার until স্ক্রিপ্ট একটি নতুন বিকল্প যা আমরা কাজ করছি, এবং এটি পরিবর্তন সাপেক্ষে, তাই প্রথমে এটি নির্বাচন করার জন্য সক্ষম না করে ব্যবহারের জন্য উপলব্ধ নয়।
এটি স্থানীয়ভাবে ডেভেলপারদের জন্য chrome://flags/#prerender-until-script Chrome ফ্ল্যাগ অথবা --enable-features=PrerenderUntilScript কমান্ড লাইন ফ্ল্যাগ দিয়ে সক্রিয় করা যেতে পারে।
প্রিরেন্ডার পর্যন্ত স্ক্রিপ্ট এখন Chrome 144 থেকে একটি অরিজিন ট্রায়াল হিসেবেও উপলব্ধ। অরিজিন ট্রায়াল সাইটের মালিকদের তাদের সাইটে একটি বৈশিষ্ট্য সক্ষম করার অনুমতি দেয় যাতে প্রকৃত ব্যবহারকারীরা ম্যানুয়ালি এটি সক্ষম না করেই বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এটি প্রকৃত ব্যবহারকারীদের উপর বৈশিষ্ট্যটির প্রভাব পরিমাপ করার অনুমতি দেয় যাতে এটি প্রত্যাশা অনুযায়ী কাজ করে।
এটি পরীক্ষামূলকভাবে দেখুন এবং আপনার মতামত জানান।
স্পেকুলেশন রুলস এপিআই-তে এই প্রস্তাবিত সংযোজনটি নিয়ে আমরা সত্যিই উত্তেজিত এবং সাইট মালিকদের এটি পরীক্ষামূলকভাবে গ্রহণের জন্য উৎসাহিত করছি।
GitHub রেপোতে প্রস্তাবটি সম্পর্কে আপনার মতামত শেয়ার করুন। Chrome এর বাস্তবায়ন সম্পর্কে প্রতিক্রিয়ার জন্য, একটি Chromium বাগ ফাইল করুন।