তৃতীয় পক্ষের জাভাস্ক্রিপ্ট দক্ষতার সাথে লোড করুন

মিলিকা মিহাজলিজা

যদি কোনো তৃতীয় পক্ষের স্ক্রিপ্ট আপনার পৃষ্ঠার লোড কমিয়ে দেয়, তাহলে কর্মক্ষমতা উন্নত করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে:

  • এটি আপনার সাইটে স্পষ্ট মান যোগ না করলে এটি সরান।
  • লোডিং প্রক্রিয়াটি অপ্টিমাইজ করুন।

নিম্নলিখিত কৌশলগুলির সাহায্যে তৃতীয় পক্ষের স্ক্রিপ্টগুলির লোডিং প্রক্রিয়াটি কীভাবে অপ্টিমাইজ করা যায় তা এই পোস্টটি ব্যাখ্যা করে:

  • <script> ট্যাগে async বা defer অ্যাট্রিবিউট ব্যবহার করা
  • প্রয়োজনীয় উত্সের সাথে প্রাথমিক সংযোগ স্থাপন করা
  • অলস লোড হচ্ছে
  • আপনি তৃতীয় পক্ষের স্ক্রিপ্টগুলি কীভাবে পরিবেশন করেন তা অপ্টিমাইজ করা

async বা defer ব্যবহার করুন

যেহেতু সিঙ্ক্রোনাস স্ক্রিপ্টগুলি DOM নির্মাণ এবং রেন্ডারিংকে বিলম্বিত করে, তাই আপনার সর্বদা তৃতীয় পক্ষের স্ক্রিপ্টগুলিকে অ্যাসিঙ্ক্রোনাসভাবে লোড করা উচিত যদি না পৃষ্ঠাটি রেন্ডার করার আগে স্ক্রিপ্টটি চালানো হয়৷

async এবং defer অ্যাট্রিবিউটগুলি ব্রাউজারকে বলে যে এটি ব্যাকগ্রাউন্ডে স্ক্রিপ্ট লোড করার সময় এইচটিএমএল পার্স করতে পারে, তারপর এটি লোড হওয়ার পরে স্ক্রিপ্টটি কার্যকর করতে পারে। এইভাবে, স্ক্রিপ্ট ডাউনলোডগুলি DOM নির্মাণ বা পৃষ্ঠা রেন্ডারিংকে ব্লক করে না, সমস্ত স্ক্রিপ্ট লোড হওয়া শেষ হওয়ার আগে ব্যবহারকারীকে পৃষ্ঠাটি দেখতে দেয়।

<script async src="script.js">

<script defer src="script.js">

async এবং defer অ্যাট্রিবিউটের মধ্যে পার্থক্য হল যখন ব্রাউজার স্ক্রিপ্টগুলি চালায়।

async

async অ্যাট্রিবিউট সহ স্ক্রিপ্টগুলি ডাউনলোড শেষ হওয়ার পরে এবং উইন্ডোর লোড ইভেন্টের আগে প্রথম সুযোগে কার্যকর হয়। এর মানে এটা সম্ভব (এবং সম্ভবত) যে async স্ক্রিপ্টগুলি এইচটিএমএলে প্রদর্শিত ক্রম অনুসারে চলবে না। এর মানে হল যে তারা DOM বিল্ডিংকে বাধা দিতে পারে যদি তারা পার্সার কাজ করার সময় ডাউনলোড করা শেষ করে।

অ্যাসিঙ্ক অ্যাট্রিবিউট সহ পার্সার ব্লকিং স্ক্রিপ্টের ডায়াগ্রাম
async সহ স্ক্রিপ্টগুলি এখনও HTML পার্সিং ব্লক করতে পারে।

defer

defer অ্যাট্রিবিউট সহ স্ক্রিপ্টগুলি এইচটিএমএল পার্সিং সম্পূর্ণভাবে শেষ হওয়ার পরে, কিন্তু DOMContentLoaded ইভেন্টের আগে কার্যকর হয়। defer নিশ্চিত করে যে স্ক্রিপ্টগুলি HTML-এ প্রদর্শিত ক্রমানুসারে চলে এবং পার্সারকে ব্লক করে না।

ডিফার অ্যাট্রিবিউট সহ একটি স্ক্রিপ্ট সহ পার্সার প্রবাহের চিত্র
ব্রাউজারটি এইচটিএমএল পার্সিং করা না হওয়া পর্যন্ত defer সহ স্ক্রিপ্টগুলি চালানোর জন্য অপেক্ষা করে।
  • লোডিং প্রক্রিয়ার আগে স্ক্রিপ্ট চালানো গুরুত্বপূর্ণ হলে async ব্যবহার করুন।
  • কম গুরুত্বপূর্ণ সংস্থানগুলির জন্য defer ব্যবহার করুন, যেমন একটি ভিডিও প্লেয়ার যা ভাঁজের নীচে থাকে।

এই বৈশিষ্ট্যগুলি ব্যবহার করে উল্লেখযোগ্যভাবে পৃষ্ঠা লোডের গতি বাড়াতে পারে৷ উদাহরণস্বরূপ, টেলিগ্রাফ বিজ্ঞাপন এবং বিশ্লেষণ সহ তাদের সমস্ত স্ক্রিপ্ট পিছিয়ে দিয়েছে এবং বিজ্ঞাপন লোডিং সময় গড়ে চার সেকেন্ডের উন্নতি করেছে।

প্রয়োজনীয় উত্সের সাথে প্রাথমিক সংযোগ স্থাপন করুন

আপনি গুরুত্বপূর্ণ তৃতীয় পক্ষের উত্সগুলির সাথে প্রাথমিক সংযোগ স্থাপন করে 100-500 ms বাঁচাতে পারেন৷

দুটি <link> প্রকার, preconnect এবং dns-prefetch , এখানে সাহায্য করতে পারে:

preconnect

<link rel="preconnect"> ব্রাউজারকে বলে যে আপনার পৃষ্ঠা অন্য একটি উত্সের সাথে একটি সংযোগ স্থাপন করতে চায় এবং আপনি যত তাড়াতাড়ি সম্ভব প্রক্রিয়াটি শুরু করতে চান৷ যখন ব্রাউজার প্রাক-সংযুক্ত মূল থেকে একটি সংস্থান অনুরোধ করে, ডাউনলোড অবিলম্বে শুরু হয়।

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> যা <link rel="preconnect"> পরিচালনা করে তার একটি ছোট উপসেট পরিচালনা করে। একটি সংযোগ স্থাপনের জন্য DNS লুকআপ এবং TCP হ্যান্ডশেক এবং নিরাপদ উত্সের জন্য, TLS আলোচনা জড়িত। dns-prefetch ব্রাউজারকে বলে শুধুমাত্র একটি নির্দিষ্ট ডোমেনের ডিএনএসকে স্পষ্টভাবে কল করার আগে সমাধান করতে।

preconnect ইঙ্গিত শুধুমাত্র সবচেয়ে জটিল সংযোগের জন্য ব্যবহার করা হয়। কম গুরুত্বপূর্ণ তৃতীয় পক্ষের ডোমেনগুলির জন্য, <link rel=dns-prefetch> ব্যবহার করুন।

<link rel="dns-prefetch" href="http://example.com">

dns-prefetch এর জন্য ব্রাউজার সমর্থন preconnect সমর্থন থেকে কিছুটা আলাদা, তাই dns-prefetch preconnect সমর্থন করে না এমন ব্রাউজারগুলির জন্য একটি ফলব্যাক হিসাবে কাজ করতে পারে। এটি নিরাপদে বাস্তবায়ন করতে পৃথক লিঙ্ক ট্যাগ ব্যবহার করুন:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

অলস-লোড তৃতীয় পক্ষের সম্পদ

এমবেড করা তৃতীয়-পক্ষের সংস্থানগুলি পৃষ্ঠা লোডিং উল্লেখযোগ্যভাবে কমিয়ে দিতে পারে যদি সেগুলি খারাপভাবে তৈরি করা হয়। যদি সেগুলি সমালোচনামূলক না হয়, বা ভাঁজের নীচে থাকে (অর্থাৎ, ব্যবহারকারীদের সেগুলি দেখতে স্ক্রোল করতে হয়), অলস লোডিং পৃষ্ঠার গতি এবং পেইন্ট মেট্রিক্স উন্নত করার একটি ভাল উপায়৷ এইভাবে, ব্যবহারকারীরা মূল পৃষ্ঠার বিষয়বস্তু দ্রুত পান এবং একটি ভাল অভিজ্ঞতা পান।

একটি মোবাইল ডিভাইসে দেখানো একটি ওয়েবপৃষ্ঠার একটি ডায়াগ্রাম যেখানে স্ক্রোলযোগ্য সামগ্রী স্ক্রীনের বাইরে প্রসারিত হয়৷ যে বিষয়বস্তুটি ভাঁজের নিচে আছে সেটি ডিস্যাচুরেটেড কারণ এটি এখনও লোড হয়নি।
ভাঁজ নীচে অলস লোড বিষয়বস্তু.

একটি কার্যকর পদ্ধতি হল প্রধান পৃষ্ঠার সামগ্রী লোড হওয়ার পরে তৃতীয় পক্ষের সামগ্রী অলসভাবে লোড করা৷ বিজ্ঞাপন এই পদ্ধতির জন্য একটি ভাল প্রার্থী.

বিজ্ঞাপনগুলি অনেক সাইটের জন্য আয়ের একটি গুরুত্বপূর্ণ উত্স, তবে ব্যবহারকারীরা সামগ্রীর জন্য আসে। অলসভাবে বিজ্ঞাপন লোড করে এবং মূল বিষয়বস্তু দ্রুত সরবরাহ করে, আপনি একটি বিজ্ঞাপনের সামগ্রিক দর্শনযোগ্যতা শতাংশ বাড়াতে পারেন। উদাহরণস্বরূপ, MediaVine অলস-লোডিং বিজ্ঞাপনগুলিতে স্যুইচ করেছে এবং পৃষ্ঠা লোডের গতিতে 200% উন্নতি দেখেছে৷ গুগল অ্যাড ম্যানেজারের কাছে ডকুমেন্টেশন আছে কীভাবে বিজ্ঞাপন লোড করতে হয় ।

ব্যবহারকারীরা প্রথম পৃষ্ঠার সেই বিভাগে স্ক্রোল করলেই আপনি তৃতীয় পক্ষের সামগ্রী লোড করার জন্য সেট করতে পারেন।

ইন্টারসেকশন অবজারভার হল একটি ব্রাউজার API যা দক্ষতার সাথে সনাক্ত করে যখন কোন উপাদান ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা প্রস্থান করে এবং আপনি এই কৌশলটি বাস্তবায়ন করতে এটি ব্যবহার করতে পারেন। lazysizes হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা অলস লোডিং ইমেজ এবং iframes জন্য। এটি YouTube এম্বেড এবং উইজেট সমর্থন করে। এটি ইন্টারসেকশন অবজারভারের জন্য ঐচ্ছিক সমর্থনও রয়েছে।

অলস লোডিং ইমেজ এবং আইফ্রেমের জন্য loading অ্যাট্রিবিউট ব্যবহার করা জাভাস্ক্রিপ্ট কৌশলগুলির একটি দুর্দান্ত বিকল্প, এবং এটি সম্প্রতি Chrome 76-এ উপলব্ধ হয়েছে!

আপনি তৃতীয় পক্ষের স্ক্রিপ্টগুলি কীভাবে পরিবেশন করেন তা অপ্টিমাইজ করুন

তৃতীয় পক্ষের স্ক্রিপ্টগুলির আপনার ব্যবহার অপ্টিমাইজ করার জন্য নিম্নলিখিত কিছু প্রস্তাবিত কৌশল রয়েছে৷

তৃতীয় পক্ষের CDN হোস্টিং

তৃতীয় পক্ষের বিক্রেতারা তাদের হোস্ট করা জাভাস্ক্রিপ্ট ফাইলগুলির জন্য URL প্রদান করা সাধারণ, সাধারণত একটি বিষয়বস্তু বিতরণ নেটওয়ার্কে (CDN) ৷ এই পদ্ধতির সুবিধা হল যে আপনি দ্রুত শুরু করতে পারেন—শুধু URL টি কপি এবং পেস্ট করুন—এবং কোনও রক্ষণাবেক্ষণ ওভারহেড নেই৷ তৃতীয় পক্ষের বিক্রেতা সার্ভার কনফিগারেশন এবং স্ক্রিপ্ট আপডেট পরিচালনা করে।

কিন্তু যেহেতু সেগুলি আপনার বাকি সংস্থানগুলির মতো একই উত্সে নয়, তাই একটি পাবলিক CDN থেকে ফাইলগুলি লোড করা একটি নেটওয়ার্ক খরচ সহ আসে৷ ব্রাউজারটিকে একটি DNS লুকআপ করতে হবে, একটি নতুন HTTP সংযোগ স্থাপন করতে হবে, এবং, নিরাপদ উৎপত্তিতে, বিক্রেতার সার্ভারের সাথে একটি SSL হ্যান্ডশেক করতে হবে৷

আপনি যখন তৃতীয় পক্ষের সার্ভার থেকে ফাইলগুলি ব্যবহার করেন, তখন খুব কমই ক্যাশিংয়ের উপর আপনার নিয়ন্ত্রণ থাকে। অন্য কারোর ক্যাশিং কৌশলের উপর নির্ভর করার ফলে স্ক্রিপ্টগুলি অপ্রয়োজনীয়ভাবে নেটওয়ার্ক থেকে প্রায়শই পুনরায় আনা হতে পারে।

স্ব-হোস্ট তৃতীয় পক্ষের স্ক্রিপ্ট

স্ব-হোস্টিং তৃতীয় পক্ষের স্ক্রিপ্ট একটি বিকল্প যা আপনাকে একটি স্ক্রিপ্টের লোডিং প্রক্রিয়ার উপর আরও নিয়ন্ত্রণ দেয়। স্ব-হোস্টিং দ্বারা আপনি করতে পারেন:

  • DNS লুকআপ এবং রাউন্ড-ট্রিপ সময় হ্রাস করুন।
  • HTTP ক্যাশিং হেডার উন্নত করুন।
  • HTTP/2 , অথবা নতুন HTTP/3 এর সুবিধা নিন।

উদাহরণস্বরূপ, ক্যাসপার একটি A/B টেস্টিং স্ক্রিপ্ট স্ব-হোস্টিং করে 1.7 সেকেন্ড অফ লোড টাইম শেভ করতে পেরেছে।

স্ব-হোস্টিং যদিও একটি বড় খারাপ দিক নিয়ে আসে: স্ক্রিপ্টগুলি পুরানো হয়ে যেতে পারে এবং যখন API পরিবর্তন বা নিরাপত্তা সংশোধন করা হয় তখন স্বয়ংক্রিয় আপডেট পাওয়া যায় না।

তৃতীয় পক্ষের সার্ভার থেকে স্ক্রিপ্ট ক্যাশে করতে পরিষেবা কর্মীদের ব্যবহার করুন

আপনি স্ব-হোস্টিংয়ের বিকল্প হিসাবে তৃতীয় পক্ষের সার্ভার থেকে স্ক্রিপ্ট ক্যাশে করতে পরিষেবা কর্মীদের ব্যবহার করতে পারেন। তৃতীয় পক্ষের CDN-এর সুবিধাগুলি বজায় রেখে এটি আপনাকে ক্যাশিংয়ের উপর আরও বেশি নিয়ন্ত্রণ দেয়।

নেটওয়ার্ক থেকে স্ক্রিপ্টগুলি কত ঘন ঘন পুনঃআনয়ন করা হয় তা আপনি নিয়ন্ত্রণ করতে পারেন এবং একটি লোডিং কৌশল তৈরি করতে পারেন যা অপ্রয়োজনীয়, তৃতীয় পক্ষের সংস্থানগুলির জন্য অনুরোধগুলিকে থ্রোটল করে যতক্ষণ না কোনও ব্যবহারকারী পৃষ্ঠায় একটি মূল ইন্টারঅ্যাকশনে পৌঁছায়। preconnect মাধ্যমে, আপনি প্রাথমিক সংযোগ স্থাপন করতে পারেন এবং নেটওয়ার্ক খরচ কমাতেও সাহায্য করতে পারেন।