সমস্যা
ব্রাউজার পৃষ্ঠা তৈরি করা শুরু করার পরে DOM পরিবর্তন করে এমন স্ক্রিপ্ট লোড করার মাধ্যমে ক্লায়েন্ট-সাইড A/B টেস্টিং টুল কাজ করে। কোনও হস্তক্ষেপ ছাড়াই, ব্যবহারকারী এক্সপেরিমেন্ট ভেরিয়েন্টে ফ্লিকার বা ফ্ল্যাশ করার আগে আসল কন্টেন্টটি সংক্ষেপে দেখতে পান। টেস্টিং প্ল্যাটফর্মগুলি ঐতিহাসিকভাবে "অ্যান্টি-ফ্লিকার স্নিপেট" সহ এই সমস্যার সমাধান করেছে যা এক্সপেরিমেন্ট স্ক্রিপ্ট শেষ না হওয়া পর্যন্ত বা একটি নির্বিচারে টাইমআউট (সাধারণত ৪ সেকেন্ড) শেষ না হওয়া পর্যন্ত opacity: 0 সহ পুরো পৃষ্ঠাটি লুকিয়ে রাখে। এই পদ্ধতিতে প্রোগ্রেসিভ রেন্ডারিং করা যায় না, অদৃশ্য কন্টেন্টে অনিচ্ছাকৃত ক্লিক হয় এবং অপ্রয়োজনীয় পেইন্ট সাইকেল তৈরি হয়।
সমাধান
blocking=render অ্যাট্রিবিউট <head>-এ রাখা <script> বা <link> এলিমেন্টকে রিসোর্স ফেচ ও এক্সিকিউট না করা পর্যন্ত রেন্ডারিং ব্লক করার অনুমতি দেয়—তবে পার্সিং নয়। এটি এক্সপেরিমেন্টেশন স্ক্রিপ্টকে একই রেন্ডার-ব্লকিং আচরণ দেয় যা স্টাইলশিটে ডিফল্ট হিসেবে থাকে, এটি নিশ্চিত করে যে এক্সপেরিমেন্ট ভেরিয়েন্ট প্রয়োগ না করা পর্যন্ত ব্রাউজার কখনই পৃষ্ঠাটি পেইন্ট করে না। কোনও অস্বচ্ছতা হ্যাক, কোনও ইচ্ছামতো টাইমআউট এবং কোনও ফ্লিকার নেই।
প্রয়োগ সংক্রান্ত স্ট্র্যাটেজি
- বাধ্যতামূলক: ডকুমেন্ট
<head>-এ এক্সপেরিমেন্টেশন স্ক্রিপ্ট যোগ করুন এবংblocking="render"যোগ করুন। - বাধ্যতামূলক: স্ক্রিপ্টে
type="module"(ইনলাইন স্ক্রিপ্টের জন্য প্রেফার করা হয়) অথবাasync(srcভ্যালু সহ এক্সটার্নাল স্ক্রিপ্টের জন্য প্রেফার করা হয়) আছে কিনা তা নিশ্চিত করুন। - পরীক্ষা করার স্ক্রিপ্ট ছোট ও দ্রুত রাখুন। স্ক্রিপ্ট এক্সিকিউট না হওয়া পর্যন্ত রেন্ডারিং ব্লক করা থাকে, তাই বড় বা ধীরগতির স্ক্রিপ্ট সরাসরি ফার্স্ট পেইন্টকে বিলম্বিত করে।
- প্রথম পেইন্টের আগে রান করার প্রয়োজন নেই এমন স্ক্রিপ্টে
blocking="render"ব্যবহার করবেন না। এটি শুধুমাত্র সেইসব স্ক্রিপ্টের জন্য যার আউটপুট প্রাথমিক রেন্ডারে অবশ্যই দৃশ্যমান হতে হবে। <head>-এর বাইরে স্ক্রিপ্টেblocking="render"প্রয়োগ করবেন না। শুধুমাত্র<head>-এ থাকা স্ক্রিপ্ট রেন্ডারিং ব্লক করতে পারে।
প্রয়োগ করার নির্দেশিকা
বেসিক সেট-আপ
বাধ্যতামূলক: async এবং blocking="render", দুটির সাথেই এক্সপেরিমেন্টেশন স্ক্রিপ্ট লোড করুন। async অ্যাট্রিবিউট নিশ্চিত করে যে স্ক্রিপ্টটি HTML পার্সিং ব্লক করে না (স্ক্রিপ্ট আনার সময় ব্রাউজার DOM তৈরি করা চালিয়ে যায়)। blocking="render" অ্যাট্রিবিউট নিশ্চিত করে যে স্ক্রিপ্ট এক্সিকিউট না হওয়া পর্যন্ত ব্রাউজার কিছু পেইন্ট করবে না।
<head>
<!--
MANDATORY: Both `async` and `blocking="render"` are required.
- `async`: Prevents parser-blocking, so the DOM is built in parallel.
- `blocking="render"`: Holds rendering until the script executes,
ensuring experiment changes are applied before the user sees anything.
-->
<script
src="https://cdn.example.com/experiment-sdk.js"
async
blocking="render"
></script>
</head>
এক্সপেরিমেন্ট-নির্দিষ্ট স্টাইল লোড করা হচ্ছে
পরীক্ষার জন্য ভেরিয়েন্ট স্টাইলশিটের প্রয়োজন হলে, <link> এলিমেন্টে blocking="render" ব্যবহার করুন। <head>-এ স্টাইলশিটগুলি ইতিমধ্যেই ডিফল্টভাবে রেন্ডারিং ব্লক করে, কিন্তু ডাইনামিকভাবে ইনজেক্ট করা স্টাইলশিট বা স্ক্রিপ্টের মাধ্যমে যোগ করা স্টাইলশিটগুলি তা করে না। স্টাইলশিট ডায়নামিকভাবে যোগ করা হলে অথবা আপনি নিজের উদ্দেশ্য সম্পর্কে স্পষ্ট হতে চাইলে, স্পষ্টভাবে blocking="render" ব্যবহার করুন।
<head>
<!--
DO: Use blocking="render" on experiment stylesheets that are
dynamically inserted or conditionally loaded by the experiment SDK.
This ensures variant styles are applied before first paint.
-->
<link
rel="stylesheet"
href="https://cdn.example.com/experiment-variant-b.css"
blocking="render"
>
</head>
ইনলাইন এক্সপেরিমেন্ট স্ক্রিপ্ট
এক্সপেরিমেন্ট লজিক ইনলাইন করার জন্য যথেষ্ট হালকা হলে, blocking="render" সহ ইনলাইন মডিউল স্ক্রিপ্ট ব্যবহার করুন। এক্সপেরিমেন্ট লজিক যখন কোনও কনফিগারেশন ফেচ করে এবং সরাসরি DOM পরিবর্তন প্রয়োগ করে তখন এটি উপযোগী হয়।
<head>
<!--
DO: Use an inline module script when the experiment logic is small.
Module scripts are deferred by default (non-parser-blocking),
and blocking="render" ensures rendering waits for execution.
-->
<script type="module" blocking="render">
// Fetch the experiment configuration from your testing platform.
const config = await fetch('/api/experiment?id=homepage-cta')
.then(res => res.json());
// Apply the variant by setting a data attribute on <html>.
// CSS rules keyed to this attribute will style the variant.
document.documentElement.dataset.variant = config.variant;
</script>
<style>
/* Default styles (control group) */
.cta-button {
background-color: blue;
}
/* Variant B styles, activated by the data attribute */
[data-variant="b"] .cta-button {
background-color: green;
}
</style>
</head>
পেশাদার পদ্ধতি
- বাধ্যতামূলক: এক্সপেরিমেন্টেশন স্ক্রিপ্ট অবশ্যই দ্রুত এক্সিকিউট করতে হবে। স্লো স্ক্রিপ্ট সব রেন্ডারিংয়ে দেরি করে। রেন্ডার-ব্লকিং স্ক্রিপ্টের জন্য পারফর্ম্যান্স বাজেট (যেমন, ১০০ মিলি সেকেন্ডের কম এক্সিকিউশন টাইম) সেট করুন।
- রেন্ডার-ব্লকিং স্ক্রিপ্ট থেকে ভারী এক্সপেরিমেন্ট লজিক স্প্লিট করুন। একটি ছোট, রেন্ডার-ব্লকিং স্টাব লোড করুন যা ভেরিয়েন্টটি প্রয়োগ করে, তারপর
asyncবাdefer(blocking="render"ছাড়া) দিয়ে আলাদাভাবে ভারী ট্র্যাকিং বা অ্যানালিটিক্স স্ক্রিপ্ট লোড করুন। - অ্যাক্টিভ ভেরিয়েন্ট সিগন্যাল করতে
<html>বা<body>-এ ডেটা অ্যাট্রিবিউট ব্যবহার করুন এবং ভেরিয়েন্ট স্টাইলিংয়ের জন্য সেই অ্যাট্রিবিউটে কী করা CSS বাছাইকারী ব্যবহার করুন। এটি রেন্ডার-ব্লকিং স্ক্রিপ্টে সরাসরি DOM ম্যানিপুলেশন এড়ায়। - অ্যানালিটিক্স, ট্র্যাকিং বা অন্যান্য ভিজ্যুয়াল নয় এমন স্ক্রিপ্টে
blocking="render"ব্যবহার করবেন না। শুধুমাত্র সেইসব স্ক্রিপ্ট যা ব্যবহারকারী প্রথম পেইন্টে যা দেখেন তা পরিবর্তন করতে হবে, রেন্ডারিং ব্লক করা উচিত। blocking="render"-এর সাথে লিগ্যাসি অ্যান্টি-ফ্লিকার স্নিপেট যোগ করবেন না। দুটিই একই সমস্যার সমাধান করে; দুটিই ব্যবহার করলে অপ্রয়োজনীয় দেরি হয়।
ফলব্যাক স্ট্র্যাটেজি
blocking অ্যাট্রিবিউট সব ব্রাউজারে কাজ করে না। যেসব ব্রাউজারে এটি কাজ করে না, সেখানে অ্যাট্রিবিউট উপেক্ষা করা হয় এবং স্ক্রিপ্ট ডিফল্ট অ্যাকশন (উপরের উদাহরণে async) অনুযায়ী লোড হয়, যার ফলে ফ্লিকার হতে পারে। কাজ না করা ব্রাউজারে ফ্লিকারিং বন্ধ করতে ফলব্যাক প্রয়োজন।
ফলব্যাক: অ্যান্টি-ফ্লিকার স্নিপেট
করণীয়: blocking="render" কাজ না করলে, শুধুমাত্র ফলব্যাক হিসেবে লাইটওয়েট অ্যান্টি-ফ্লিকার স্নিপেট ব্যবহার করুন। ফিচার-ডিটেক্ট সাপোর্ট এবং ব্রাউজারে ফলব্যাক এড়িয়ে যান যা এটি নেটিভভাবে ম্যানেজ করে।
<head>
<!--
DO: Load the experiment script with blocking="render" for
browsers that support it. This is the preferred approach.
-->
<script
src="https://cdn.example.com/experiment-sdk.js"
async
blocking="render"
></script>
<script>
// DO: Only apply the anti-flicker fallback in browsers
// that do not support blocking="render".
if (!Object.hasOwn(HTMLScriptElement.prototype, 'blocking')) {
// Hide the page until the experiment script runs.
document.documentElement.classList.add('ab-loading');
// DO: Set a timeout to reveal the page if the experiment
// script takes too long. This prevents an indefinitely
// blank page on slow connections. Adjust the timeout
// to match your experiment SDK's expected load time.
setTimeout(() => {
document.documentElement.classList.remove('ab-loading');
}, 4000);
}
</script>
<style>
/*
DO: Use opacity to hide content during experiment loading.
This is only applied when blocking="render" is unsupported.
*/
.ab-loading {
opacity: 0 !important;
}
</style>
</head>
// DO: In your experiment SDK's initialization callback,
// remove the fallback class to reveal the page.
function onExperimentReady() {
document.documentElement.classList.remove('ab-loading');
}
বিবেচনা করার মতো অন্যান্য বিষয়
- পারফর্ম্যান্সের উপর প্রভাব:
blocking="render"ভিজ্যুয়াল সঠিকতার জন্য ফার্স্ট-পেইন্ট স্পিড ট্রেড করে। এক্সপেরিমেন্টেশন স্ক্রিপ্ট যাতে অতিরিক্ত দেরি না করে তা নিশ্চিত করতে Largest Contentful Paint (LCP) এবং First Contentful Paint (FCP) মনিটর করুন। - থার্ড-পার্টি স্ক্রিপ্টের নির্ভরযোগ্যতা: এক্সপেরিমেন্ট SDK থার্ড-পার্টি CDN-এ হোস্ট করা হলে, CDN-এ কোনও সমস্যা হলে রেন্ডারিং সম্পূর্ণভাবে ব্লক হয়ে যেতে পারে। ব্রাউজার তার নিজস্ব টাইমআউট হিউরিস্টিকস (যা ৪ সেকেন্ডের বেশি হতে পারে) প্রয়োগ করে, তবে
blocking="render"-এর জন্য কোনও ডেভেলপার-নিয়ন্ত্রিত টাইমআউট নেই। থার্ড-পার্টি পরিষেবা প্রদানকারীর কাছে শক্তিশালী আপটাইম গ্যারান্টি আছে কিনা তা নিশ্চিত করুন। - সার্ভার-সাইড বিকল্প: পারফর্ম্যান্স-ক্রিটিক্যাল পৃষ্ঠার জন্য, ক্লায়েন্ট-সাইড টেস্টিংয়ের পরিবর্তে সার্ভার-সাইড A/B টেস্টিং (যেখানে সার্ভার সরাসরি সঠিক ভেরিয়েন্ট রেন্ডার করে) ব্যবহার করার কথা বিবেচনা করুন। সার্ভার-সাইড অ্যাপ্রোচ কোনও রেন্ডার-ব্লকিং খরচ ছাড়াই ফ্লিকার সম্পূর্ণভাবে দূর করে। সার্ভার-সাইড টেস্টিং সম্ভব না হলে তবেই ক্লায়েন্ট-সাইড
blocking="render"ব্যবহার করুন।