আপনি কোড অপ্টিমাইজ করার পরেও সাইট খুব ধীরে লোড হলে, সম্ভবত থার্ড-পার্টি স্ক্রিপ্টে কোনও সমস্যা আছে।
থার্ড-পার্টি স্ক্রিপ্ট বিভিন্ন ধরনের উপযোগী ফিচার প্রদান করে যা ওয়েবকে আরও ডায়নামিক, ইন্টার্যাক্টিভ ও ইন্টারকানেক্টেড করে তোলে। এর মধ্যে কিছু আপনার ওয়েবসাইটের ফাংশন বা উপার্জনের জন্য গুরুত্বপূর্ণ হতে পারে। তবে, এগুলি ব্যবহার করা ঝুঁকিপূর্ণ:
- এগুলি আপনার সাইটের পারফর্ম্যান্স কমিয়ে দিতে পারে।
- এগুলি গোপনীয়তা বা নিরাপত্তা সংক্রান্ত সমস্যা তৈরি করতে পারে।
- এগুলি অপ্রত্যাশিত হতে পারে এবং এর আচরণে অপ্রত্যাশিত ফলাফল হতে পারে।
সাধারণত, আপনি চাইবেন যে থার্ড-পার্টি স্ক্রিপ্ট যেন আপনার সাইটের ক্রিটিক্যাল রেন্ডারিং পাথ-এ কোনও প্রভাব না ফেলে। এই গাইডে, আমরা থার্ড-পার্টি জাভাস্ক্রিপ্ট লোড করার সাথে সম্পর্কিত সমস্যাগুলি কীভাবে খুঁজে বের করতে এবং সমাধান করতে হয় এবং আপনার ব্যবহারকারীদের ঝুঁকি কমাতে হয় তা দেখব।
থার্ড-পার্টি স্ক্রিপ্ট কী?
থার্ড-পার্টি জাভাস্ক্রিপ্ট বলতে সাধারণত এমন স্ক্রিপ্টকে বোঝায় যা থার্ড-পার্টি ভেন্ডরের থেকে সরাসরি যেকোনও সাইটে এম্বেড করা যায়। উদাহরণের মধ্যে অন্তর্ভুক্ত রয়েছে:
সোশ্যাল শেয়ারিং বোতাম (Facebook, X, LinkedIn, Mastodon)
ভিডিও প্লেয়ার এম্বেড (YouTube, Vimeo)
বিজ্ঞাপনের iframe
অ্যানালিটিক্স ও মেট্রিক্স স্ক্রিপ্ট
এক্সপেরিমেন্টের জন্য A/B টেস্টিং স্ক্রিপ্ট
সহায়ক লাইব্রেরি, যেমন তারিখ ফর্ম্যাটিং, অ্যানিমেশন বা ফাংশনাল লাইব্রেরি
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/mo8thg5XGV0"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
>
</iframe>
থার্ড-পার্টি স্ক্রিপ্ট এম্বেড করার অর্থ হল, দ্রুত কাজ করার জন্য এবং আমাদের পেজের স্পিড যাতে কমে না যায়, তার জন্য আমরা প্রায়ই সেগুলির উপর নির্ভর করি। থার্ড-পার্টি স্ক্রিপ্ট হল সাইটের মালিকের নিয়ন্ত্রণের বাইরে থাকা রিসোর্সের কারণে পারফর্ম্যান্স স্লো হওয়ার একটি সাধারণ কারণ, যার মধ্যে নিম্নলিখিত সমস্যাগুলি অন্তর্ভুক্ত:
একাধিক সার্ভারে অনেক বেশি নেটওয়ার্ক রিকোয়েস্ট পাঠানো। কোনও সাইটকে যত বেশি অনুরোধ করতে হয়, সেটি লোড হতে তত বেশি সময় লাগতে পারে।
অনেক বেশি JavaScript পাঠানো হচ্ছে যা মূল থ্রেডকে ব্যস্ত রাখে। অত্যধিক জাভাস্ক্রিপ্ট DOM কনস্ট্রাকশন ব্লক করতে পারে, যার ফলে পৃষ্ঠা রেন্ডার হতে দেরি হয়। CPU-ইনটেনসিভ স্ক্রিপ্ট পার্সিং ও এক্সিকিউশন ব্যবহারকারীর ইন্টার্যাকশনে দেরি করতে পারে এবং ব্যাটারি ড্রেন করতে পারে।
বড়, অপ্টিমাইজ না করা ছবির ফাইল বা ভিডিও পাঠালে ডেটা খরচ হতে পারে এবং ব্যবহারকারীর টাকা খরচ হতে পারে।
নিরাপত্তা সংক্রান্ত সমস্যা যা সমস্যার একমাত্র কারণ (SPOF) হিসেবে কাজ করতে পারে, যদি আপনার পৃষ্ঠা সতর্কতা ছাড়াই কোনও স্ক্রিপ্ট লোড করে।
HTTP ক্যাশিং পর্যাপ্ত নয়, তাই ব্রাউজারকে রিসোর্স আনার জন্য আরও নেটওয়ার্ক অনুরোধ পাঠাতে হচ্ছে।
পর্যাপ্ত সার্ভার কম্প্রেশন না থাকার কারণে রিসোর্স ধীরে লোড হয়।
প্রসেসিং সম্পূর্ণ না হওয়া পর্যন্ত কন্টেন্ট ডিসপ্লে ব্লক করা হচ্ছে। অ্যাসিঙ্ক A/B টেস্টিং স্ক্রিপ্টের ক্ষেত্রেও এটি প্রযোজ্য হতে পারে।
ব্যবহারকারীর অভিজ্ঞতাকে ক্ষতিগ্রস্ত করে বলে পরিচিত পুরনো API-এর ব্যবহার, যেমন document.write()।
অতিরিক্ত DOM এলিমেন্ট বা ব্যয়বহুল CSS সিলেক্টর।
একাধিক থার্ড-পার্টি এম্বেড অন্তর্ভুক্ত করার ফলে একাধিক ফ্রেমওয়ার্ক ও লাইব্রেরি বারবার পুল করা হতে পারে, যার ফলে রিসোর্স নষ্ট হয় এবং পারফর্ম্যান্স সংক্রান্ত বর্তমান সমস্যা আরও খারাপ হয়ে যায়।
থার্ড-পার্টি স্ক্রিপ্ট প্রায়ই এম্বেড করার টেকনিক ব্যবহার করে যা window.onload ব্লক করতে পারে, যদি তাদের সার্ভার ধীরে উত্তর দেয়, এমনকি এম্বেড async বা defer ব্যবহার করলেও।
থার্ড-পার্টি স্ক্রিপ্ট সংক্রান্ত সমস্যার সমাধান করার ক্ষমতা আপনার সাইট এবং থার্ড-পার্টি কোড কীভাবে লোড করবেন তা কনফিগার করার ক্ষমতার উপর নির্ভর করতে পারে। সৌভাগ্যবশত, থার্ড-পার্টি রিসোর্সের সাথে সম্পর্কিত সমস্যা খুঁজে বের করা এবং সমাধান করার জন্য অনেক সমাধান এবং টুল রয়েছে।
কোনও পৃষ্ঠায় থার্ড-পার্টি স্ক্রিপ্ট কীভাবে শনাক্ত করবেন?
আপনার সাইটে থার্ড-পার্টি স্ক্রিপ্ট শনাক্ত করা এবং তাদের পারফর্ম্যান্সের প্রভাব নির্ধারণ করা হল সেগুলি অপ্টিমাইজ করার প্রথম ধাপ। আমরা সাজেস্ট করি যে আপনি Chrome DevTools, PageSpeed Insights এবং WebPageTest সহ বিনামূল্যে ওয়েব স্পিড টেস্ট টুল ব্যবহার করে খরচসাপেক্ষ স্ক্রিপ্ট শনাক্ত করুন। এইসব টুল বিস্তারিত ডায়াগনস্টিক তথ্য দেখায় যা থেকে আপনি জানতে পারবেন যে আপনার সাইট কতগুলি থার্ড-পার্টি স্ক্রিপ্ট ব্যবহার করে এবং কোন স্ক্রিপ্টটি এক্সিকিউট করতে সবচেয়ে বেশি সময় নেয়।
WebPageTest-এর ওয়াটারফল ভিউ, থার্ড-পার্টি স্ক্রিপ্টের ভারী ব্যবহারের প্রভাব হাইলাইট করতে পারে। ট্যাগস গন ওয়াইল্ড থেকে নেওয়া নিম্নলিখিত ছবিতে ট্র্যাকিং ও মার্কেটিং স্ক্রিপ্টের বিপরীতে, কোনও সাইটের মূল কন্টেন্ট লোড করার জন্য প্রয়োজনীয় নেটওয়ার্ক অনুরোধের একটি উদাহরণ ডায়াগ্রাম দেখানো হয়েছে।
থার্ড-পার্টি সোর্স থেকে কতটা কন্টেন্ট আসছে তা ভিজ্যুয়ালাইজ করার জন্য WebPageTest-এর ডোমেন ব্রেকডাউন উপযোগী হতে পারে। এটি মোট বাইট এবং অনুরোধের সংখ্যা, এই দুটির ভিত্তিতেই ডেটা বিশ্লেষণ করে:
আমার পৃষ্ঠায় থার্ড-পার্টি স্ক্রিপ্টের প্রভাব কীভাবে পরিমাপ করব?
কোনও স্ক্রিপ্টের কারণে সমস্যা হচ্ছে বলে মনে হলে, স্ক্রিপ্টটি কী করে তা খুঁজে বের করুন এবং আপনার সাইট কাজ করার জন্য এটি প্রয়োজন কিনা তা নির্ধারণ করুন। প্রয়োজন হলে, একটি A/B টেস্ট চালান যাতে এর অনুভূত ভ্যালু এবং মূল ব্যবহারকারীর এনগেজমেন্ট বা পারফর্ম্যান্স মেট্রিকের উপর এর প্রভাবের মধ্যে ভারসাম্য বজায় রাখা যায়।
Lighthouse বুট-আপ টাইম অডিট
Lighthouse জাভাস্ক্রিপ্ট বুট-আপ টাইম অডিট সেইসব স্ক্রিপ্ট হাইলাইট করে যেগুলির স্ক্রিপ্ট পার্স, কম্পাইল বা মূল্যায়ন করতে অনেক সময় লাগে। এটি আপনাকে CPU-ইনটেনসিভ থার্ড-পার্টি স্ক্রিপ্ট শনাক্ত করতে সাহায্য করতে পারে।
Lighthouse নেটওয়ার্ক পেলোড অডিট
Lighthouse নেটওয়ার্ক পেলোড অডিট নেটওয়ার্ক অনুরোধ শনাক্ত করে, যার মধ্যে থার্ড-পার্টি নেটওয়ার্ক অনুরোধও রয়েছে, যা পৃষ্ঠা লোড হওয়ার সময় কমিয়ে দেয় এবং ব্যবহারকারীদের মোবাইল ডেটার জন্য প্রত্যাশার চেয়ে বেশি খরচ করায়।
Chrome DevTools নেটওয়ার্ক অনুরোধ ব্লকিং
Chrome DevTools আপনাকে দেখতে দেয় যে নির্দিষ্ট স্ক্রিপ্ট, স্টাইল শিট বা অন্যান্য রিসোর্স উপলভ্য না থাকলে আপনার পৃষ্ঠা কেমন আচরণ করে। এটি নেটওয়ার্ক অনুরোধ ব্লক করার মাধ্যমে করা হয়, এটি এমন একটি ফিচার যা আপনার পৃষ্ঠা থেকে স্বতন্ত্র থার্ড-পার্টি রিসোর্স সরানোর প্রভাব পরিমাপ করতে সাহায্য করতে পারে।
অনুরোধ ব্লক করার সুবিধা চালু করতে, নেটওয়ার্ক প্যানেলে যেকোনও অনুরোধের উপর মাউসের ডানদিকের বোতামে ক্লিক করুন এবং অনুরোধের URL ব্লক করুন বিকল্প বেছে নিন। তারপর, DevTools ড্রয়ারে একটি অনুরোধ ব্লক করার ট্যাব দেখানো হয়, যেটি আপনাকে কোন কোন অনুরোধ ব্লক করা হয়েছে তা ম্যানেজ করতে দেয়।
Chrome DevTools পারফর্ম্যান্স প্যানেল
Chrome DevTools-এ পারফর্ম্যান্স প্যানেল আপনার পৃষ্ঠার ওয়েব পারফর্ম্যান্স সংক্রান্ত সমস্যা শনাক্ত করতে সাহায্য করে।
- রেকর্ড করুন বিকল্পে ক্লিক করুন।
- আপনার পৃষ্ঠা লোড করুন। DevTools একটি ওয়াটারফল ডায়াগ্রাম দেখায় যা আপনার সাইট লোড হতে কত সময় নেয় তা দেখায়।
- পারফর্ম্যান্স প্যানেলের নিচে বটম-আপ বিকল্পে নেভিগেট করুন।
- প্রোডাক্ট অনুযায়ী গ্রুপ করুন বিকল্পে ক্লিক করুন এবং লোড হওয়ার সময় অনুযায়ী আপনার পৃষ্ঠার থার্ড-পার্টি স্ক্রিপ্ট সাজান।
পৃষ্ঠা লোড হওয়ার পারফর্ম্যান্স বিশ্লেষণ করার জন্য Chrome DevTools ব্যবহার করার ব্যাপারে আরও জানতে, রানটাইম পারফর্ম্যান্স বিশ্লেষণ করা শুরু করুন দেখুন।
থার্ড-পার্টি স্ক্রিপ্টের প্রভাব পরিমাপ করার জন্য আমরা নিম্নলিখিত ওয়ার্কফ্লো সাজেস্ট করি:
- আপনার পৃষ্ঠা লোড হতে কত সময় লাগে তা পরিমাপ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন।
- বাস্তব পরিস্থিতি অনুকরণ করতে, আমরা নেটওয়ার্ক থ্রটলিং এবং CPU থ্রটলিং চালু করার সাজেশন দিই। আপনার ব্যবহারকারীদের কাছে ফাস্ট নেটওয়ার্ক কানেকশন এবং ডেস্কটপ হার্ডওয়্যার থাকার সম্ভাবনা কম, যা ল্যাব কন্ডিশনে এক্সপেনসিভ স্ক্রিপ্টের প্রভাব কমায়।
- থার্ড-পার্টি স্ক্রিপ্টের জন্য দায়ী URL বা ডোমেন ব্লক করুন, যেগুলি আপনার মতে সমস্যা তৈরি করছে (বেশি খরচ হওয়া স্ক্রিপ্ট শনাক্ত করার ব্যাপারে নির্দেশিকার জন্য Chrome DevTools পারফর্ম্যান্স প্যানেল দেখুন)।
- পৃষ্ঠাটি আবার লোড করুন এবং লোড হওয়ার সময় আবার পরিমাপ করুন।
- আরও সঠিক ডেটার জন্য, আপনি হয়ত অন্তত তিনবার লোড টাইম পরিমাপ করতে চাইবেন। এর ফলে, প্রতিটি পৃষ্ঠা লোড হওয়ার সময় কিছু থার্ড-পার্টি স্ক্রিপ্ট বিভিন্ন রিসোর্স ফেচ করে। এই কাজে সাহায্য করার জন্য, DevTools পারফর্ম্যান্স প্যানেল একাধিক রেকর্ডিং সাপোর্ট করে।
WebPageTest-এর মাধ্যমে থার্ড-পার্টি স্ক্রিপ্টের প্রভাব পরিমাপ করা
WebPageTest-এ উন্নত সেটিংস > ব্লক করুন বিকল্পে গিয়ে আলাদা আলাদা অনুরোধ লোড হওয়া ব্লক করা যায়, যাতে সেগুলির প্রভাব পরিমাপ করা যায়। ব্লক করার জন্য ডোমেনের তালিকা নির্দিষ্ট করতে এই ফিচার ব্যবহার করুন, যেমন বিজ্ঞাপন ডোমেন।
এই ফিচার ব্যবহার করার জন্য আমরা নিম্নলিখিত ওয়ার্কফ্লো সাজেস্ট করি:
- থার্ড-পার্টি ব্লক না করে কোনও পৃষ্ঠা পরীক্ষা করুন।
- কিছু থার্ড-পার্টি ব্লক করে পরীক্ষাটি আবার করুন।
- আপনার পরীক্ষার ইতিহাস থেকে দুটি ফলাফল বেছে নিন।
- তুলনা করুন বিকল্পে ক্লিক করুন।
নিম্নলিখিত ছবিতে WebPageTest-এর ফিল্মস্ট্রিপ ফিচার দেখানো হয়েছে যা অ্যাক্টিভ থার্ড-পার্টি রিসোর্স সহ ও ছাড়া পৃষ্ঠার লোড সিকোয়েন্সের তুলনা করে। কোন ডোমেন আপনার পৃষ্ঠার পারফর্ম্যান্সকে সবচেয়ে বেশি প্রভাবিত করে তা নির্ধারণ করতে, আমরা স্বতন্ত্র থার্ড-পার্টি অরিজিনের টেস্টের জন্য এটি চেক করার সাজেস্ট করি।
এছাড়াও, WebPageTest ডোমেন ব্লক করার জন্য DNS লেভেলে কাজ করে এমন দুটি কমান্ডকে সাপোর্ট করে:
blockDomainsব্লক করার জন্য ডোমেনের তালিকা নেয়।- blockDomainsExcept ডোমেনের তালিকা নেয় এবং তালিকায় নেই এমন যেকোনও কিছু ব্লক করে।
WebPageTest-এ সমস্যার একমাত্র কারণ (SPOF) ট্যাবও আছে যা আপনাকে টাইমআউট বা রিসোর্স লোড করার সম্পূর্ণ ব্যর্থতা সিমুলেট করতে দেয়। ডোমেন ব্লক করার মতো নয়, SPOF ধীরে ধীরে টাইম-আউট হয়, যা থার্ড-পার্টি পরিষেবাতে খুব বেশি লোড থাকলে বা সাময়িকভাবে উপলভ্য না থাকলে আপনার পৃষ্ঠা কেমন আচরণ করে তা পরীক্ষা করার জন্য উপযোগী হতে পারে।
বড় টাস্ক ব্যবহার করে ব্যয়বহুল iframe শনাক্ত করা
থার্ড-পার্টি iframe-এ স্ক্রিপ্ট রান করতে অনেক সময় লাগলে, সেটি মূল থ্রেড ব্লক করে দিতে পারে এবং অন্যান্য টাস্ক সম্পূর্ণ হতে দেরি হতে পারে। এইসব বড় টাস্কের কারণে ইভেন্ট হ্যান্ডলার ধীরে কাজ করতে পারে বা ফ্রেম ড্রপ হতে পারে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়।
রিয়েল ইউজার মনিটরিং (RUM)-এর জন্য বড় টাস্ক শনাক্ত করতে, longtask এন্ট্রি পর্যবেক্ষণ করতে জাভাস্ক্রিপ্ট PerformanceObserver API ব্যবহার করুন। এইসব এন্ট্রিতে অ্যাট্রিবিউশন প্রপার্টি থাকে যা আপনি ব্যবহার করে কোন ফ্রেমের জন্য বড় টাস্ক হয়েছে তা নির্ধারণ করতে পারবেন।
নিম্নলিখিত কোড কনসোলে longtaskটি এন্ট্রি লগ করে, যার মধ্যে একটি
"এক্সপেনসিভ" iframe-এর জন্য:
<script>
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Attribution entry including "containerSrc":"https://example.com"
console.log(JSON.stringify(entry.attribution));
}
});
observer.observe({entryTypes: ['longtask']});
</script>
<!-- Imagine this is an iframe with expensive long tasks -->
<iframe src="https://example.com"></iframe>
বড় টাস্ক মনিটর করা সম্পর্কে আরও জানতে, ব্যবহারকারী-কেন্দ্রিক পারফর্ম্যান্স মেট্রিক দেখুন।
আপনি কীভাবে থার্ড-পার্টি স্ক্রিপ্ট দক্ষতার সাথে লোড করবেন?
কোনও থার্ড-পার্টি স্ক্রিপ্ট আপনার পৃষ্ঠা লোড করার গতি কমিয়ে দিলে, পারফর্ম্যান্স উন্নত করার জন্য আপনার কাছে একাধিক বিকল্প আছে:
- ডকুমেন্ট পার্সিং ব্লক করা এড়াতে
asyncবাdeferঅ্যাট্রিবিউট ব্যবহার করে স্ক্রিপ্ট লোড করুন। - থার্ড-পার্টি সার্ভার স্লো হলে, স্ক্রিপ্ট সেল্ফ-হোস্ট করার কথা বিবেচনা করুন।
- স্ক্রিপ্টটি আপনার সাইটে স্পষ্ট ভ্যালু যোগ না করলে, এটি সরিয়ে দিন।
- থার্ড-পার্টি স্ক্রিপ্ট হোস্ট করা ডোমেনের জন্য DNS লুকআপ করতে
<link rel=preconnect>বা<link rel=dns-prefetch>-এর মতো রিসোর্স ইঙ্গিত ব্যবহার করুন।
async বা defer ব্যবহার করুন
জাভাস্ক্রিপ্ট এক্সিকিউশন পার্সার-ব্লকিং। ব্রাউজার কোনও স্ক্রিপ্ট পেলে, সেটিকে DOM কনস্ট্রাকশন পজ করতে হবে, স্ক্রিপ্টটি JavaScript ইঞ্জিনে পাস করতে হবে এবং DOM কনস্ট্রাকশন চালিয়ে যাওয়ার আগে স্ক্রিপ্টটি এক্সিকিউট করার অনুমতি দিতে হবে।
async এবং defer অ্যাট্রিবিউট এই আচরণকে নিম্নলিখিতভাবে পরিবর্তন করে:
async-এর কারণে ব্রাউজার অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট ডাউনলোড করে, যখন এটি HTML ডকুমেন্ট পার্স করা চালিয়ে যায়। স্ক্রিপ্ট ডাউনলোড করা শেষ হলে, স্ক্রিপ্ট এক্সিকিউট করার সময় পার্সিং ব্লক করা হয়।defer-এর কারণে ব্রাউজার অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট ডাউনলোড করে, যখন এটি HTML ডকুমেন্ট পার্স করা চালিয়ে যায়, তারপর ডকুমেন্ট পার্সিং সম্পূর্ণ না হওয়া পর্যন্ত স্ক্রিপ্ট চালানোর জন্য অপেক্ষা করে।
থার্ড-পার্টি স্ক্রিপ্টের জন্য সবসময় async বা defer ব্যবহার করুন, যদি না স্ক্রিপ্টটি
ক্রিটিক্যাল রেন্ডারিং পাথের জন্য প্রয়োজনীয় হয়। লোডিং প্রসেসে স্ক্রিপ্টটি আগে রান করা গুরুত্বপূর্ণ হলে async ব্যবহার করুন, যেমন কিছু অ্যানালিটিক্স স্ক্রিপ্টের জন্য। কম গুরুত্বপূর্ণ রিসোর্সের জন্য defer ব্যবহার করুন, যেমন ভিডিও যা পৃষ্ঠার নিচের দিকে রেন্ডার হয়
এবং ব্যবহারকারী প্রথমে দেখতে পাবেন না।
পারফর্ম্যান্স যদি আপনার প্রাথমিক উদ্বেগ হয়, তাহলে আপনার পৃষ্ঠার গুরুত্বপূর্ণ কন্টেন্ট লোড না হওয়া পর্যন্ত অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট যোগ করার জন্য অপেক্ষা করার সাজেশন আমরা দিই। jQuery-এর মতো প্রয়োজনীয় লাইব্রেরির জন্য
async ব্যবহার করার সাজেশন আমরা দিই না।
কিছু স্ক্রিপ্ট অবশ্যই async বা defer ছাড়া লোড করতে হবে, বিশেষ করে সেগুলি যা
আপনার সাইটের গুরুত্বপূর্ণ অংশ। এর মধ্যে UI লাইব্রেরি বা কন্টেন্ট ডেলিভারি
নেটওয়ার্ক (CDN) ফ্রেমওয়ার্ক অন্তর্ভুক্ত, যা ছাড়া আপনার সাইট কাজ করতে পারবে না।
অন্যান্য স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড করা হলে কাজ করে না। আপনি ব্যবহার করছেন এমন কোনও স্ক্রিপ্টের জন্য ডকুমেন্টেশন চেক করুন এবং অ্যাসিঙ্ক্রোনাসভাবে লোড করা যায় না এমন কোনও স্ক্রিপ্ট বিকল্পের সাথে পরিবর্তন করুন। মনে রাখবেন যে কিছু থার্ড-পার্টি তাদের স্ক্রিপ্ট সিঙ্ক্রোনাসভাবে চালানোর জন্য সাজেস্ট করে, যদিও সেগুলি অ্যাসিঙ্ক্রোনাসভাবেও সমানভাবে ভাল কাজ করবে।
মনে রাখবেন যে async সব সমস্যার সমাধান করে না। আপনার পৃষ্ঠায় যদি বিজ্ঞাপনের উদ্দেশ্যে ট্র্যাকিং স্ক্রিপ্টের মতো প্রচুর
স্ক্রিপ্ট থাকে, তাহলে সেগুলি অ্যাসিঙ্ক্রোনাসভাবে লোড করলেও
পৃষ্ঠা লোড হওয়ার গতি কমে যাবে।
কানেকশন সেট-আপের সময় কমাতে রিসোর্স হিন্ট ব্যবহার করুন
থার্ড-পার্টি অরিজিনের সাথে কানেকশন তৈরি করতে অনেক সময় লাগতে পারে, বিশেষ করে স্লো নেটওয়ার্কে, কারণ নেটওয়ার্ক অনুরোধে একাধিক জটিল কম্পোনেন্ট থাকে, যার মধ্যে ডিএনএস লুক-আপ ও রিডাইরেক্ট অন্তর্ভুক্ত। আপনি -এর মতো রিসোর্স হিন্ট ব্যবহার করে পৃষ্ঠা লোড হওয়ার প্রসেসের শুরুতেই থার্ড-পার্টি স্ক্রিপ্ট হোস্ট করা ডোমেনের জন্য DNS লুকআপ করতে পারেন, যাতে বাকি নেটওয়ার্ক অনুরোধ পরে আরও দ্রুত প্রসেস করা যায়:
<link rel="dns-prefetch" href="http://example.com" />
আপনি যে থার্ড-পার্টি ডোমেনের সাথে কানেক্ট করছেন সেটি HTTPS ব্যবহার করলে, আপনি -ও ব্যবহার করতে পারবেন, যা DNS খোঁজা এবং TCP রাউন্ড-ট্রিপ সমাধান করা এবং TLS নেগোসিয়েশন ম্যানেজ করা, দুটি কাজই করে। এই অন্যান্য ধাপগুলি খুব ধীর হতে পারে কারণ এতে SSL সার্টিফিকেট যাচাই করা অন্তর্ভুক্ত, তাই প্রি-কানেক্ট করলে লোড টাইম অনেক কমে যেতে পারে।
<link rel="preconnect" href="https://cdn.example.com" />
iframe সহ "স্যান্ডবক্স" স্ক্রিপ্ট
আপনি যদি কোনও থার্ড-পার্টি স্ক্রিপ্ট সরাসরি iframe-এ লোড করেন, তাহলে এটি মূল পৃষ্ঠার
এক্সিকিউশন ব্লক করে না। AMP
এই পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টকে
ক্রিটিক্যাল পাথ থেকে দূরে রাখে। মনে রাখবেন যে এই পদ্ধতি
এখনও onload ইভেন্ট ব্লক করে, তাই onload-এর সাথে
গুরুত্বপূর্ণ ফিচার অ্যাটাচ না করার চেষ্টা করুন।
এছাড়াও, Chrome অনুমতি সংক্রান্ত নীতি (আগে ফিচার সংক্রান্ত নীতি বলা হত) সাপোর্ট করে, এটি হল এমন এক সেট নীতি যা কোনও ডেভেলপারকে ব্রাউজারের নির্দিষ্ট কিছু ফিচারে অ্যাক্সেস বেছে নিয়ে বন্ধ করার অনুমতি দেয়। আপনি এটি ব্যবহার করে থার্ড-পার্টি কন্টেন্টকে কোনও সাইটে অবাঞ্ছিত আচরণ করা থেকে আটকাতে পারবেন।
থার্ড-পার্টি স্ক্রিপ্ট সেল্ফ-হোস্ট করুন
কোনও গুরুত্বপূর্ণ স্ক্রিপ্ট কীভাবে লোড হয় তার উপর আপনি আরও নিয়ন্ত্রণ চাইলে, যেমন DNS সময় কমাতে বা HTTP ক্যাশিং হেডার উন্নত করতে, আপনি নিজেই এটি হোস্ট করতে পারবেন।
তবে, সেল্ফ-হোস্টিংয়ের নিজস্ব কিছু সমস্যা আছে, বিশেষ করে স্ক্রিপ্ট আপডেট করার ক্ষেত্রে। সেল্ফ-হোস্টেড স্ক্রিপ্ট API পরিবর্তন বা নিরাপত্তা সংক্রান্ত সমস্যার সমাধানের জন্য অটোমেটিক আপডেট পাবে না, যার ফলে আপনার স্ক্রিপ্ট ম্যানুয়ালি আপডেট না করা পর্যন্ত উপার্জন কমে যেতে পারে বা নিরাপত্তা সংক্রান্ত সমস্যা হতে পারে।
বিকল্প হিসেবে, নেটওয়ার্ক থেকে কত ঘন ঘন স্ক্রিপ্ট ফেচ করা হবে তার উপর আরও নিয়ন্ত্রণ পেতে, আপনি সার্ভিস ওয়ার্কার ব্যবহার করে থার্ড-পার্টি স্ক্রিপ্ট ক্যাশে করতে পারেন। এছাড়াও, আপনি সার্ভিস ওয়ার্কার ব্যবহার করে লোডিং স্ট্র্যাটেজি তৈরি করতে পারেন যা আপনার পৃষ্ঠা কোনও গুরুত্বপূর্ণ ব্যবহারকারী মোমেন্টে না পৌঁছানো পর্যন্ত অপ্রয়োজনীয় থার্ড-পার্টি অনুরোধ থ্রটল করে।
ব্যবহারকারীদের ছোট স্যাম্পেল নিয়ে A/B টেস্ট করুন
A/B টেস্টিং (বা স্প্লিট-টেস্টিং) হল ব্যবহারকারীর অভিজ্ঞতা ও আচরণ বিশ্লেষণ করার জন্য কোনও পৃষ্ঠার দুটি ভার্সন নিয়ে পরীক্ষা করার একটি কৌশল। এটি আপনার ওয়েবসাইটের ট্রাফিকের বিভিন্ন স্যাম্পেলের জন্য পৃষ্ঠার ভার্সন উপলভ্য করে এবং অ্যানালিটিক্স থেকে নির্ধারণ করে যে কোন ভার্সনটি আরও ভাল কনভার্সন রেট প্রদান করে।
তবে, ডিজাইন অনুযায়ী, কোন এক্সপেরিমেন্ট অ্যাক্টিভ করতে হবে তা নির্ধারণ করার জন্য A/B টেস্টিং রেন্ডারিংয়ে দেরি করে। আপনার কোনও ব্যবহারকারী A/B টেস্ট এক্সপেরিমেন্টের অংশ কিনা তা চেক করতে এবং সঠিক ভেরিয়েন্ট চালু করতে প্রায়ই JavaScript ব্যবহার করা হয়। এই প্রক্রিয়াটি এমন ব্যবহারকারীদের অভিজ্ঞতাও খারাপ করতে পারে যারা এই পরীক্ষার অংশ নন।
পৃষ্ঠা রেন্ডারিংয়ের গতি বাড়াতে, আমরা আপনার ব্যবহারকারীর বেসের একটি ছোট স্যাম্পেলে আপনার A/B টেস্টিং স্ক্রিপ্ট পাঠাতে এবং সার্ভারসাইডে পৃষ্ঠার কোন ভার্সনটি প্রদর্শন করতে হবে তা নির্ধারণ করে এমন কোড রান করতে সাজেস্ট করি।
থার্ড-পার্টি রিসোর্স ধীরে ধীরে লোড করুন
এম্বেড করা থার্ড-পার্টি রিসোর্স, যেমন বিজ্ঞাপন ও ভিডিও, খারাপভাবে তৈরি করা হলে, পৃষ্ঠা লোড হওয়ার গতি কমে যাওয়ার প্রধান কারণ হতে পারে। ধীরে ধীরে লোড করার প্রসেস ব্যবহার করে প্রয়োজন হলে তবেই এম্বেড করা রিসোর্স লোড করা যায়, যেমন, ব্যবহারকারী স্ক্রল করে পৃষ্ঠার ফুটার পর্যন্ত না পৌঁছানো পর্যন্ত সেখানে বিজ্ঞাপন দেখানো হয় না। এছাড়াও, আপনি মূল পৃষ্ঠার কন্টেন্ট লোড হওয়ার পরে কিন্তু ব্যবহারকারী পৃষ্ঠার সাথে ইন্টার্যাক্ট করার আগে থার্ড-পার্টি কন্টেন্ট ধীরে ধীরে লোড করতে পারেন।
রিসোর্স ধীরে ধীরে লোড করার সময় সতর্ক থাকুন, কারণ এতে প্রায়ই JavaScript কোড থাকে যা নেটওয়ার্ক কানেকশন দুর্বল হলে প্রভাবিত হতে পারে।
DoubleClick-এর অফিসিয়াল ডকুমেন্টেশনে ধীরে ধীরে বিজ্ঞাপন লোড করার ব্যাপারে নির্দেশিকা দেওয়া আছে।
ইন্টারসেকশন অবজার্ভারের মাধ্যমে ধীরে ধীরে লোড করার সুবিধা
ঐতিহাসিকভাবে, ধীরে ধীরে লোড করার উদ্দেশ্যে ভিউপোর্টে কোনও এলিমেন্ট দেখা যাচ্ছে কিনা তা শনাক্ত করার পদ্ধতিগুলি ত্রুটি-প্রবণ এবং প্রায়শই ব্রাউজারকে ধীর করে দেয়। এইসব অদক্ষ পদ্ধতি প্রায়শই স্ক্রল বা ছোট বড় করা ইভেন্ট শোনে, তারপর DOM API যেমন getBoundingClientRect() ব্যবহার করে ভিউপোর্টের সাপেক্ষে এলিমেন্ট কোথায় আছে তা গণনা করে।
IntersectionObserver হল একটি ব্রাউজার API যা পৃষ্ঠা মালিকদের দক্ষতার সাথে শনাক্ত করতে দেয় যখন একটি পর্যবেক্ষণ করা উপাদান ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা ছেড়ে যায়। LazySizes-এ IntersectionObserver-এর জন্য ঐচ্ছিক সহায়তা রয়েছে।
ধীরে ধীরে লোড করার অ্যানালিটিক্স
আপনি যদি অনেকক্ষণ ধরে আপনার অ্যানালিটিক্স স্ক্রিপ্ট লোড করা স্থগিত রাখেন, তাহলে আপনি মূল্যবান অ্যানালিটিক্স ডেটা মিস করতে পারেন। সৌভাগ্যবশত, প্রাথমিক পৃষ্ঠা-লোড ডেটা ধরে রাখার সময় অ্যানালিটিক্স অলসভাবে শুরু করার জন্য কৌশলগুলি উপলভ্য।
Google Analytics-এর জন্য এই ধরনের একটি স্ট্র্যাটেজি ফিল ওয়ালটনের ব্লগ পোস্ট আমি তৈরি করা প্রতিটি সাইটে যে Google Analytics সেট-আপ ব্যবহার করি -এ কভার করা হয়েছে।
নিরাপদে থার্ড-পার্টি স্ক্রিপ্ট লোড করুন
এই বিভাগে থার্ড-পার্টি স্ক্রিপ্ট যতটা সম্ভব নিরাপদে লোড করার জন্য নির্দেশিকা প্রদান করা হয়েছে।
document.write() এড়িয়ে চলুন
থার্ড-পার্টি স্ক্রিপ্ট, বিশেষ করে পুরনো পরিষেবার জন্য, কখনও কখনও স্ক্রিপ্ট ইনজেক্ট ও লোড করতে
document.write()
ব্যবহার করে। এটি একটি সমস্যা কারণ document.write()-এর আচরণ
অসামঞ্জস্যপূর্ণ এবং এর ব্যর্থতা ডিবাগ করা কঠিন।
document.write() সংক্রান্ত সমস্যার সমাধান হল এটি ব্যবহার না করা। Chrome 53 এবং তার পরবর্তী ভার্সনে,
Chrome DevTools কনসোলে সতর্কতা লগ করে, যাতে
document.write()-এর সমস্যাজনক ব্যবহার সম্পর্কে জানা যায়:
document.write() ব্যবহার।আপনি এই সমস্যার মেসেজ পেলে, আপনার ব্রাউজারে পাঠানো HTTP হেডার
খুঁজে দেখে, আপনার সাইটে document.write() ব্যবহার করা হচ্ছে কিনা
তা চেক করতে পারবেন।
Lighthouse
যেকোনও থার্ড-পার্টি স্ক্রিপ্ট হাইলাইট করতে পারে
যা এখনও document.write() ব্যবহার করছে।
document.write() ব্যবহার করে তা দেখানো একটি লাইটহাউস রিপোর্ট।সাবধানে ট্যাগ ম্যানেজার ব্যবহার করুন
ট্যাগ হল একটি কোড স্নিপেট যা ডিজিটাল মার্কেটিং টিমকে ডেটা সংগ্রহ করতে, কুকি সেট করতে বা সোশ্যাল মিডিয়া উইজেটের মতো থার্ড-পার্টি কন্টেন্ট সাইটে ইন্টিগ্রেট করতে দেয়। এইসব ট্যাগ আপনার পৃষ্ঠায় নেটওয়ার্ক অনুরোধ, জাভাস্ক্রিপ্ট ডিপেন্ডেন্সি এবং অন্যান্য রিসোর্স যোগ করে যা পৃষ্ঠার পারফর্ম্যান্সের উপর প্রভাব ফেলতে পারে। যত বেশি ট্যাগ যোগ করা হয়, ব্যবহারকারীর উপর সেই প্রভাব কমানো তত বেশি কঠিন হয়ে পড়ে।
পৃষ্ঠা দ্রুত লোড করার জন্য, আমরা ট্যাগ ম্যানেজার ব্যবহার করার সাজেশন দিই, যেমন Google Tag Manager (GTM)। GTM আপনাকে অ্যাসিঙ্ক্রোনাসভাবে ট্যাগ ডিপ্লয় করতে দেয় যাতে সেগুলি একে অপরের লোডিং ব্লক না করে, ট্যাগ এক্সিকিউট করার জন্য ব্রাউজারের প্রয়োজনীয় নেটওয়ার্ক কলের সংখ্যা কমায় এবং এর ডেটা লেয়ার UI-তে ট্যাগ ডেটা সংগ্রহ করে।
ট্যাগ ম্যানেজার ব্যবহার করার ঝুঁকি
ট্যাগ ম্যানেজার পৃষ্ঠা লোড করার প্রসেসকে স্ট্রিমলাইন করার জন্য ডিজাইন করা হলেও, সেগুলি অসতর্কভাবে ব্যবহার করলে নিম্নলিখিত উপায়ে পৃষ্ঠা লোড করার প্রসেস স্লো হয়ে যেতে পারে:
- আপনার ট্যাগ ম্যানেজারে অত্যধিক সংখ্যক ট্যাগ এবং অটো-ইভেন্ট লিসেনার থাকার কারণে ব্রাউজারকে স্বাভাবিকের চেয়ে বেশি নেটওয়ার্ক অনুরোধ করতে হয় এবং আপনার কোডের ইভেন্টে দ্রুত প্রতিক্রিয়া জানানোর ক্ষমতা হ্রাস পায়।
- ক্রেডেনশিয়াল ও অ্যাক্সেস আছে এমন যেকেউ আপনার ট্যাগ ম্যানেজারে JavaScript যোগ করতে পারবেন। এটি আপনার পৃষ্ঠা লোড করার জন্য প্রয়োজনীয় ব্যয়বহুল নেটওয়ার্ক অনুরোধের সংখ্যা বাড়াতে পারে, এছাড়াও অপ্রয়োজনীয় স্ক্রিপ্ট থেকে নিরাপত্তা ঝুঁকি এবং অন্যান্য পারফর্ম্যান্স সংক্রান্ত সমস্যা উপস্থাপন করতে পারে। এইসব ঝুঁকি কমাতে, আপনার ট্যাগ ম্যানেজারে অ্যাক্সেস সীমিত করার সাজেস্ট করা হয়।
গ্লোবাল স্কোপকে দূষিত করে এমন স্ক্রিপ্ট এড়িয়ে চলুন
থার্ড-পার্টি স্ক্রিপ্ট বিভিন্নভাবে কাজ করতে পারে যার ফলে আপনার পৃষ্ঠা অপ্রত্যাশিতভাবে ভেঙে যেতে পারে:
- JavaScript ডিপেন্ডেন্সি লোড করা স্ক্রিপ্ট গ্লোবাল স্কোপকে এমন কোড দিয়ে দূষিত করতে পারে যা আপনার কোডের সাথে খারাপভাবে ইন্টার্যাক্ট করে।
- অপ্রত্যাশিত আপডেট ব্রেকিং পরিবর্তন ঘটাতে পারে।
- ট্রানজিটে থার্ড-পার্টি কোড পরিবর্তন করা যেতে পারে যাতে আপনার পৃষ্ঠার টেস্টিং ও ডিপ্লয়মেন্টের মধ্যে আলাদাভাবে কাজ করে।
আমরা সাজেস্ট করি যে আপনি থার্ড-পার্টি স্ক্রিপ্ট নিয়মিত অডিট করুন যাতে খারাপ অ্যাক্টরদের চেক করা যায়। এছাড়াও, আপনার পৃষ্ঠা সুরক্ষিত রাখতে, আপনি সেল্ফ-টেস্টিং, সাবরিসোর্স ইন্টিগ্রিটি এবং থার্ড-পার্টি কোডের সুরক্ষিত ট্রান্সমিশন প্রয়োগ করতে পারেন।
প্রশমন কৌশল
আপনার সাইটের পারফর্ম্যান্স ও সুরক্ষার উপর থার্ড-পার্টি স্ক্রিপ্টের প্রভাব কমানোর জন্য কিছু বড় মাপের কৌশল এখানে দেওয়া হল:
HTTPS: HTTPS ব্যবহার করে এমন সাইটকে HTTP ব্যবহার করে এমন থার্ড-পার্টির উপর নির্ভর করলে চলবে না। আরও তথ্যের জন্য, মিক্সড কন্টেন্ট দেখুন।
স্যান্ডবক্সিং: স্ক্রিপ্টের জন্য উপলভ্য অ্যাকশন সীমাবদ্ধ করতে
sandboxঅ্যাট্রিবিউট সহ iframe-এ থার্ড-পার্টি স্ক্রিপ্ট চালানোর কথা বিবেচনা করুন।কন্টেন্ট নিরাপত্তা নীতি (CSP): আপনার সাইটের জন্য বিশ্বস্ত স্ক্রিপ্টের আচরণ নির্ধারণ করতে এবং ক্রস সাইট স্ক্রিপ্টিং (XSS)-এর মতো কিছু অ্যাটাকের প্রভাব শনাক্ত ও প্রশমিত করতে, আপনার সার্ভারের রেসপন্সে HTTP হেডার ব্যবহার করতে পারবেন।
কোনও পৃষ্ঠার অনুমোদিত জাভাস্ক্রিপ্ট সোর্স নির্দিষ্ট করতে CSP-এর script-src নির্দেশিকা কীভাবে ব্যবহার করবেন তার উদাহরণ নিচে দেওয়া হল:
// Given this CSP header Content-Security-Policy: script-src
https://example.com/ // The following third-party script will not be loaded or
executed
<script src="https://not-example.com/js/library.js"></script>
আরও পড়ুন
থার্ড-পার্টি জাভাস্ক্রিপ্ট অপ্টিমাইজ করার ব্যাপারে আরও জানতে, আমরা আপনাকে নিম্নলিখিতগুলি পড়তে সাজেস্ট করি:
- পারফর্ম্যান্স ও রেজিলিয়েন্স: থার্ড-পার্টির স্ট্রেস-টেস্টিং
- জাভাস্ক্রিপ্টের মাধ্যমে ইন্টার্যাক্টিভিটি যোগ করা
- থার্ড-পার্টি স্ক্রিপ্ট থেকে সম্ভাব্য বিপদ
- কীভাবে থার্ড-পার্টি স্ক্রিপ্ট ওয়েবে পারফর্ম করতে পারে
- Why Fast Matters - CSS Wizardry
- জাভাস্ক্রিপ্ট সাপ্লাই চেইন প্যারাডক্স: SRI, CSP এবং থার্ড-পার্টি লাইব্রেরিতে বিশ্বাস
- থার্ড-পার্টি CSS নিরাপদ নয়
কেনজি বাহেউক্স, জেরেমি ওয়াগনার, প্যাট মীনান, ফিলিপ ওয়ালটন, জেফ পোসনিক এবং চেনি সাইকে তাদের পর্যালোচনার জন্য ধন্যবাদ।