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

লোডের সময় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে তৃতীয় পক্ষের স্ক্রিপ্ট ব্যবহার করার সাধারণ সমস্যাগুলি এড়িয়ে চলুন।

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

  • এটি আপনার সাইটে স্পষ্ট মান যোগ না করলে এটি সরান।

  • লোডিং প্রক্রিয়াটি অপ্টিমাইজ করুন।

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

  1. <script> ট্যাগে async বা defer অ্যাট্রিবিউট ব্যবহার করা

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

  3. অলস লোড হচ্ছে

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

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

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

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

<script async src="script.js">

<script defer src="script.js">

async এবং defer মধ্যে পার্থক্য হল যখন তারা স্ক্রিপ্টগুলি চালানো শুরু করে।

async

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

অ্যাসিঙ্ক অ্যাট্রিবিউট সহ পার্সার ব্লকিং স্ক্রিপ্টের ডায়াগ্রাম

defer

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

ডিফার অ্যাট্রিবিউট সহ একটি স্ক্রিপ্ট সহ পার্সার প্রবাহের চিত্র

  • লোডিং প্রক্রিয়ার আগে স্ক্রিপ্ট চালানো গুরুত্বপূর্ণ হলে 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 নির্দেশাবলী ব্রাউজার শুধুমাত্র একটি নির্দিষ্ট ডোমেনের DNS সমাধান করার আগে এটিকে স্পষ্টভাবে বলা হয়েছে।

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% উন্নতি দেখেছে৷ DoubleClick-এর অফিসিয়াল ডকুমেন্টেশনে বিজ্ঞাপনগুলি কীভাবে অলস-লোড করা যায় তার নির্দেশিকা রয়েছে৷

একটি বিকল্প পদ্ধতি হল তৃতীয় পক্ষের বিষয়বস্তু লোড করা যখন ব্যবহারকারীরা পৃষ্ঠার সেই বিভাগে নিচে স্ক্রোল করে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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