Next.js-এ তৃতীয় পক্ষের স্ক্রিপ্ট লোডিং অপ্টিমাইজ করা হচ্ছে

Next.js' স্ক্রিপ্ট কম্পোনেন্টের পেছনের দৃষ্টিভঙ্গি বুঝুন, যা তৃতীয়-পক্ষের স্ক্রিপ্টের লোডিং অপ্টিমাইজ করার জন্য একটি অন্তর্নির্মিত সমাধান প্রদান করে।

Leena Sohoni

Houssein Djirdeh

মোবাইল এবং ডেস্কটপে পরিবেশিত ওয়েবসাইট থেকে প্রায় 45% অনুরোধ তৃতীয় পক্ষের অনুরোধ যার মধ্যে 33% স্ক্রিপ্ট । তৃতীয় পক্ষের স্ক্রিপ্টের আকার, লেটেন্সি এবং লোডিং একটি সাইটের কর্মক্ষমতাকে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে। Next.js স্ক্রিপ্ট উপাদানটি বেকড-ইন সেরা অনুশীলন এবং ডিফল্টগুলির সাথে আসে যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনগুলিতে তৃতীয়-পক্ষের স্ক্রিপ্টগুলি প্রবর্তন করতে সহায়তা করে যখন বাক্সের বাইরে সম্ভাব্য কার্যকারিতা সমস্যাগুলি সমাধান করে।

তৃতীয় পক্ষের স্ক্রিপ্ট এবং কর্মক্ষমতার উপর তাদের প্রভাব

থার্ড-পার্টি স্ক্রিপ্টগুলি ওয়েব ডেভেলপারদের সাধারণ বৈশিষ্ট্যগুলি বাস্তবায়ন করতে এবং বিকাশের সময় কমাতে বিদ্যমান সমাধানগুলির সুবিধা নিতে দেয়। কিন্তু এই স্ক্রিপ্টগুলির নির্মাতাদের সাধারণত ব্যবহারকারী ওয়েবসাইটের কার্যক্ষমতার প্রভাব বিবেচনা করার জন্য কোন উদ্দীপনা নেই। এই স্ক্রিপ্টগুলি বিকাশকারীদের জন্য একটি ব্ল্যাকবক্স যা এগুলি ব্যবহার করে৷

স্ক্রিপ্টগুলি তৃতীয় পক্ষের অনুরোধের বিভিন্ন বিভাগ জুড়ে ওয়েবসাইটগুলি দ্বারা ডাউনলোড করা তৃতীয় পক্ষের বাইটগুলির একটি উল্লেখযোগ্য সংখ্যার জন্য দায়ী৷ ডিফল্টরূপে, ব্রাউজার নথিতে কোথায় রয়েছে তার উপর ভিত্তি করে স্ক্রিপ্টগুলিকে অগ্রাধিকার দেয় যা ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ স্ক্রিপ্টগুলি আবিষ্কার বা কার্যকর করতে বিলম্ব করতে পারে।

লেআউটের জন্য প্রয়োজনীয় তৃতীয় পক্ষের লাইব্রেরিগুলিকে পৃষ্ঠাটি রেন্ডার করার জন্য তাড়াতাড়ি লোড করা উচিত৷ প্রাথমিক রেন্ডারের জন্য প্রয়োজনীয় নয় এমন তৃতীয় পক্ষগুলিকে পিছিয়ে দেওয়া উচিত যাতে তারা মূল থ্রেডে অন্যান্য প্রক্রিয়াকরণ ব্লক না করে। রেন্ডার-ব্লকিং বা প্রধান থ্রেড ব্লকিং স্ক্রিপ্টগুলিকে ফ্ল্যাগ করার জন্য লাইটহাউসের দুটি অডিট রয়েছে৷

আপনার পৃষ্ঠার রিসোর্স লোডিং সিকোয়েন্স বিবেচনা করা গুরুত্বপূর্ণ যাতে ক্রিটিকাল রিসোর্স দেরি না হয় এবং অ-গুরুত্বপূর্ণ রিসোর্সগুলো ক্রিটিক্যাল রিসোর্সকে ব্লক না করে।

যদিও তৃতীয় পক্ষের প্রভাব কমানোর জন্য সর্বোত্তম অভ্যাস রয়েছে, প্রত্যেক তৃতীয় পক্ষ ব্যবহার করে তাদের জন্য কীভাবে প্রয়োগ করা যায় সে সম্পর্কে সবাই সচেতন নাও হতে পারে। এটি জটিল হতে পারে কারণ:

• গড়ে, ওয়েবসাইটগুলি মোবাইল এবং ডেস্কটপে 21 থেকে 23টি ভিন্ন থার্ড পার্টি — স্ক্রিপ্ট সহ — ব্যবহার করে৷ ব্যবহার এবং সুপারিশ প্রতিটি জন্য ভিন্ন হতে পারে.
• একটি নির্দিষ্ট ফ্রেমওয়ার্ক বা UI লাইব্রেরি ব্যবহার করা হয় কিনা তার উপর ভিত্তি করে অনেক তৃতীয়-পক্ষের প্রয়োগ ভিন্ন হতে পারে।
• নতুন তৃতীয় পক্ষের লাইব্রেরিগুলি প্রায়শই চালু করা হয়।
• একই তৃতীয় পক্ষের সাথে সম্পর্কিত বিভিন্ন ব্যবসায়িক প্রয়োজনীয়তা ডেভেলপারদের জন্য এর ব্যবহারকে মানসম্মত করা কঠিন করে তোলে।

তৃতীয় পক্ষের স্ক্রিপ্টগুলিতে অরোরার ফোকাস৷

ওপেন সোর্স ওয়েব ফ্রেমওয়ার্ক এবং টুলের সাথে অরোরার সহযোগিতার অংশ হল ডেভেলপারদের পারফরম্যান্স, অ্যাক্সেসযোগ্যতা, নিরাপত্তা এবং মোবাইল প্রস্তুতির মতো ব্যবহারকারীর অভিজ্ঞতার দিকগুলি উন্নত করতে সাহায্য করার জন্য শক্তিশালী ডিফল্ট এবং মতামতযুক্ত টুলিং প্রদান করা। 2021 সালে, আমরা ফ্রেমওয়ার্ক স্ট্যাকগুলিকে ব্যবহারকারীর অভিজ্ঞতা এবং তাদের কোর ওয়েব ভাইটাল মেট্রিক্স উন্নত করতে সাহায্য করার দিকে মনোনিবেশ করেছি।

ফ্রেমওয়ার্ক পারফরম্যান্স উন্নত করতে আমাদের লক্ষ্য অর্জনের দিকে সবচেয়ে উল্লেখযোগ্য পদক্ষেপগুলির মধ্যে একটি হল Next.js-এ তৃতীয় পক্ষের স্ক্রিপ্টগুলির আদর্শ লোডিং ক্রম নিয়ে গবেষণা করা। Next.js-এর মতো ফ্রেমওয়ার্কগুলি দরকারী ডিফল্ট এবং বৈশিষ্ট্যগুলি প্রদান করার জন্য অনন্যভাবে অবস্থান করে যা বিকাশকারীদের দক্ষতার সাথে সম্পদ লোড করতে সহায়তা করে, তৃতীয় পক্ষগুলি সহ। কোন তৃতীয় পক্ষ বিভিন্ন ফ্রেমওয়ার্ক জুড়ে সবচেয়ে বেশি রেন্ডারিং ব্লক করে তা খুঁজে বের করতে আমরা ব্যাপক HTTP আর্কাইভ এবং লাইটহাউস ডেটা অধ্যয়ন করেছি।

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

ফ্রেমওয়ার্ক কম্পোনেন্ট ছাড়াই তৃতীয় পক্ষের স্ক্রিপ্ট সিকোয়েন্স করা

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

1. <script> ট্যাগের সাথে async বা defer অ্যাট্রিবিউট ব্যবহার করুন যা ব্রাউজারকে ডকুমেন্ট পার্সার ব্লক না করে অ-গুরুত্বপূর্ণ তৃতীয় পক্ষের স্ক্রিপ্ট লোড করতে বলে। প্রাথমিক পৃষ্ঠা লোডের জন্য স্ক্রিপ্টের প্রয়োজন নেই বা প্রথম ব্যবহারকারীর ইন্টারঅ্যাকশনকে অ-সমালোচনা হিসাবে বিবেচনা করা যেতে পারে।

      <script src="https://example.com/script1.js" defer></script>
      <script src="https://example.com/script2.js" async></script>
   

2. প্রি-কানেক্ট এবং ডিএনএস-প্রিফেচ ব্যবহার করে প্রয়োজনীয় উত্সের সাথে প্রাথমিক সংযোগ স্থাপন করুন । এটি সমালোচনামূলক স্ক্রিপ্টগুলিকে আগে ডাউনলোড করা শুরু করার অনুমতি দেয়।

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

3. অলস-লোড থার্ড-পার্টি রিসোর্স এবং মূল পৃষ্ঠার বিষয়বস্তু লোড হওয়া শেষ হওয়ার পরে বা ব্যবহারকারী যখন পৃষ্ঠার সেই অংশে স্ক্রোল করে যেখানে সেগুলি অন্তর্ভুক্ত করা হয় তখন এম্বেড করে।

Next.js স্ক্রিপ্ট উপাদান

Next.js স্ক্রিপ্ট কম্পোনেন্ট স্ক্রিপ্ট সিকোয়েন্স করার জন্য উপরের পদ্ধতিগুলো প্রয়োগ করে এবং ডেভেলপারদের তাদের লোডিং কৌশল নির্ধারণ করার জন্য একটি টেমপ্লেট প্রদান করে। একবার উপযুক্ত কৌশল নির্দিষ্ট করা হলে, এটি অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলিকে ব্লক না করে সর্বোত্তমভাবে লোড হবে।

স্ক্রিপ্ট উপাদানটি HTML <script> ট্যাগের উপর তৈরি করে এবং কৌশল বৈশিষ্ট্য ব্যবহার করে তৃতীয় পক্ষের স্ক্রিপ্টগুলির জন্য লোডিং অগ্রাধিকার সেট করার একটি বিকল্প প্রদান করে।

// Example for beforeInteractive:
<Script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver" strategy="beforeInteractive" />

// Example for afterInteractive (default):
<Script src="https://example.com/samplescript.js" />

// Example for lazyonload:
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

কৌশল বৈশিষ্ট্য তিনটি মান নিতে পারে.

1. beforeInteractive : এই বিকল্পটি সমালোচনামূলক স্ক্রিপ্টগুলির জন্য ব্যবহার করা যেতে পারে যা পৃষ্ঠাটি ইন্টারেক্টিভ হওয়ার আগে কার্যকর করা উচিত। Next.js নিশ্চিত করে যে এই ধরনের স্ক্রিপ্টগুলি সার্ভারের প্রাথমিক HTML-এ ইনজেকশন করা হয়েছে এবং অন্যান্য স্ব-বান্ডেল জাভাস্ক্রিপ্টের আগে কার্যকর করা হয়েছে। সমালোচনামূলক বিষয়বস্তু রেন্ডার করার জন্য প্রয়োজনীয় সম্মতি ব্যবস্থাপনা, বট সনাক্তকরণ স্ক্রিপ্ট বা সহায়ক লাইব্রেরিগুলি এই কৌশলটির জন্য ভাল প্রার্থী।

2. afterInteractive : এটি ডিফল্ট কৌশল প্রয়োগ করা হয় এবং ডিফার অ্যাট্রিবিউট সহ একটি স্ক্রিপ্ট লোড করার সমতুল্য। এটি এমন স্ক্রিপ্টগুলির জন্য ব্যবহার করা উচিত যা ব্রাউজারটি পৃষ্ঠাটি ইন্টারেক্টিভ হওয়ার পরে চালাতে পারে—উদাহরণস্বরূপ, বিশ্লেষণ স্ক্রিপ্ট। Next.js এই স্ক্রিপ্টগুলিকে ক্লায়েন্ট-সাইডে ইনজেক্ট করে এবং পৃষ্ঠাটি হাইড্রেটেড হওয়ার পরে সেগুলি চলে। এইভাবে, অন্যথায় নির্দিষ্ট না হলে, স্ক্রিপ্ট উপাদান ব্যবহার করে সংজ্ঞায়িত সমস্ত তৃতীয় পক্ষের স্ক্রিপ্ট Next.js দ্বারা স্থগিত করা হয়, যার ফলে একটি শক্তিশালী ডিফল্ট প্রদান করা হয়।

3. lazyOnload : যখন ব্রাউজারটি নিষ্ক্রিয় থাকে তখন এই বিকল্পটি অলস-লোড কম-অগ্রাধিকার স্ক্রিপ্ট করতে ব্যবহার করা যেতে পারে। পৃষ্ঠাটি ইন্টারেক্টিভ হয়ে যাওয়ার পরপরই এই ধরনের স্ক্রিপ্ট দ্বারা প্রদত্ত কার্যকারিতার প্রয়োজন হয় না—উদাহরণস্বরূপ, চ্যাট বা সোশ্যাল মিডিয়া প্লাগ-ইন।

বিকাশকারীরা Next.js-কে বলতে পারে কীভাবে তাদের অ্যাপ্লিকেশন কৌশলটি নির্দিষ্ট করে একটি স্ক্রিপ্ট ব্যবহার করে। এটি ফ্রেমওয়ার্ককে সর্বোত্তম লোডিং ক্রম নিশ্চিত করার সময় স্ক্রিপ্ট লোড করার জন্য অপ্টিমাইজেশান এবং সর্বোত্তম অনুশীলন প্রয়োগ করার অনুমতি দেয়।

সতর্কতা: যেহেতু ব্যবহৃত ডিফল্ট কৌশলটি afterInteractive , তাই ডেভেলপারদের অবশ্যই পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় স্ক্রিপ্টগুলির জন্য beforeInteractive কৌশল সেট করতে হবে।

স্ক্রিপ্ট কম্পোনেন্ট ব্যবহার করে, ডেভেলপাররা তৃতীয় পক্ষের স্ক্রিপ্ট দেরীতে লোড করা তৃতীয় পক্ষের জন্য এবং সমালোচনামূলক স্ক্রিপ্টের জন্য নথি স্তরে যেকোনো জায়গায় একটি তৃতীয় পক্ষের স্ক্রিপ্ট রাখতে পারে। এটি বোঝায় যে স্ক্রিপ্টের উপাদানটি স্ক্রিপ্ট ব্যবহার করে উপাদানটির সাথে সহ-অবস্থিত হতে পারে। হাইড্রেশনের পরে, ব্যবহৃত কৌশলের উপর নির্ভর করে স্ক্রিপ্টটি প্রাথমিকভাবে রেন্ডার করা নথির মাথায় বা শরীরের নীচে ইনজেকশন দেওয়া হবে।

প্রভাব পরিমাপ

আমরা দুটি ডেমো অ্যাপ তৈরি করতে Next.js কমার্স অ্যাপ এবং স্টার্টার ব্লগের টেমপ্লেট ব্যবহার করেছি যা তৃতীয়-পক্ষের স্ক্রিপ্টগুলি অন্তর্ভুক্ত করার প্রভাব পরিমাপ করতে সাহায্য করেছে। Google ট্যাগ ম্যানেজার এবং সোশ্যাল মিডিয়া এম্বেডগুলির জন্য সাধারণভাবে ব্যবহৃত তৃতীয় পক্ষগুলি সরাসরি প্রথমে এবং তারপরে স্ক্রিপ্ট উপাদানের মাধ্যমে এই অ্যাপগুলির পৃষ্ঠাগুলিতে অন্তর্ভুক্ত করা হয়েছিল৷ তারপরে আমরা WebPageTest- এ এই পৃষ্ঠাগুলির কর্মক্ষমতা তুলনা করি।

একটি Next.js কমার্স অ্যাপে তৃতীয় পক্ষের স্ক্রিপ্ট

নীচে দেওয়া ডেমোর জন্য বাণিজ্য অ্যাপ টেমপ্লেটে তৃতীয়-পক্ষের স্ক্রিপ্টগুলি যোগ করা হয়েছে।

2টি স্ক্রিপ্ট সহ ডেমো 1-এর জন্য স্ক্রিপ্ট এবং স্ক্রিপ্ট কম্পোনেন্ট কনফিগারেশন।

আগে	পরে
অ্যাসিঙ্ক সহ Google ট্যাগ ম্যানেজার	কৌশল সহ স্ক্রিপ্ট উপাদান = উভয় স্ক্রিপ্টের জন্য ইন্টারঅ্যাকটিভ পরে
টুইটার ফলো বোতাম অ্যাসিঙ্ক বা ডিফার ছাড়াই

নিম্নলিখিত তুলনা Next.js কমার্স স্টার্টার-কিটের উভয় সংস্করণের ভিজ্যুয়াল অগ্রগতি দেখায়। যেমন দেখা যায়, LCP প্রায় 1 সেকেন্ড আগে সঠিক লোডিং কৌশল সহ স্ক্রিপ্ট উপাদান সক্রিয় করা হয়।

একটি Next.js ব্লগে তৃতীয় পক্ষের স্ক্রিপ্ট

নীচে দেওয়া হিসাবে ডেমো ব্লগ অ্যাপে তৃতীয় পক্ষের স্ক্রিপ্ট যোগ করা হয়েছে।

4টি স্ক্রিপ্ট সহ ডেমো 2-এর জন্য স্ক্রিপ্ট এবং স্ক্রিপ্ট কম্পোনেন্ট কনফিগারেশন।

আগে	পরে
অ্যাসিঙ্ক সহ Google ট্যাগ ম্যানেজার	কৌশল সহ স্ক্রিপ্ট উপাদান = চারটি স্ক্রিপ্টের প্রতিটির জন্য lazyonload
অ্যাসিঙ্ক সহ টুইটার অনুসরণ বোতাম
অ্যাসিঙ্ক বা ডিফার ছাড়াই YouTube সাবস্ক্রাইব বোতাম
অ্যাসিঙ্ক বা ডিফার ছাড়াই লিঙ্কডইন অনুসরণ বোতাম

ভিডিওতে দেখা যায়, ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) স্ক্রিপ্ট কম্পোনেন্ট ছাড়া পৃষ্ঠায় 0.9 সেকেন্ড এবং স্ক্রিপ্ট কম্পোনেন্টের সাথে 0.4 সেকেন্ডে দেখা যায়।

স্ক্রিপ্ট উপাদান জন্য পরবর্তী কি

যদিও afterInteractive এবং lazyOnload জন্য কৌশল বিকল্পগুলি রেন্ডার-ব্লকিং স্ক্রিপ্টগুলির উপর উল্লেখযোগ্য নিয়ন্ত্রণ প্রদান করে, আমরা অন্যান্য বিকল্পগুলিও অন্বেষণ করছি যা স্ক্রিপ্ট উপাদানটির উপযোগিতা বৃদ্ধি করবে।

ওয়েব কর্মীদের ব্যবহার করে

ওয়েব ওয়ার্কারদের ব্যাকগ্রাউন্ড থ্রেডে স্বাধীন স্ক্রিপ্ট চালানোর জন্য ব্যবহার করা যেতে পারে যা প্রসেসিং ইউজার ইন্টারফেস কাজগুলি পরিচালনা করতে এবং কর্মক্ষমতা উন্নত করতে প্রধান থ্রেডকে মুক্ত করতে পারে। ওয়েব ওয়ার্কাররা মূল থ্রেডের বাইরে UI কাজের পরিবর্তে জাভাস্ক্রিপ্ট প্রসেসিং অফলোড করার জন্য সবচেয়ে উপযুক্ত। গ্রাহক সমর্থন বা বিপণনের জন্য ব্যবহৃত স্ক্রিপ্টগুলি, যা সাধারণত UI এর সাথে যোগাযোগ করে না, একটি পটভূমি থ্রেডে কার্যকর করার জন্য ভাল প্রার্থী হতে পারে। একটি হালকা থার্ড-পার্টি লাইব্রেরি— পার্টিটাউন —একজন ওয়েব ওয়ার্কারে এই ধরনের স্ক্রিপ্টগুলিকে আলাদা করতে ব্যবহার করা যেতে পারে।

Next.js স্ক্রিপ্ট উপাদানটির বর্তমান বাস্তবায়নের সাথে, আমরা afterInteractive বা lazyOnload এ কৌশল সেট করে মূল থ্রেডে এই স্ক্রিপ্টগুলিকে পিছিয়ে দেওয়ার পরামর্শ দিই। ভবিষ্যতে, আমরা একটি নতুন কৌশল বিকল্প, 'worker' প্রবর্তনের প্রস্তাব করছি, যা Next.js-কে PartyTown ব্যবহার করতে বা ওয়েব কর্মীদের স্ক্রিপ্ট চালানোর জন্য একটি কাস্টম সমাধান ব্যবহার করার অনুমতি দেবে। আমরা এই RFC- তে ডেভেলপারদের মন্তব্যকে স্বাগত জানাই।

CLS মিনিমাইজ করা

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

স্ক্রিপ্ট উপাদানটি এম্বেডগুলি লোড করতে ব্যবহার করা যেতে পারে যা লেআউট পরিবর্তনের কারণ হতে পারে। আমরা কনফিগারেশন বিকল্পগুলি প্রদান করতে এটিকে বাড়ানোর কথা বিবেচনা করছি যা CLS কমাতে সাহায্য করবে। এটি স্ক্রিপ্ট উপাদানের মধ্যে বা একটি সহচর উপাদান হিসাবে উপলব্ধ করা যেতে পারে।

মোড়ক উপাদান

Google Analytics বা Google ট্যাগ ম্যানেজার (GTM) এর মতো জনপ্রিয় তৃতীয় পক্ষের স্ক্রিপ্টগুলি অন্তর্ভুক্ত করার জন্য সিনট্যাক্স এবং লোডিং কৌশল সাধারণত স্থির থাকে৷ এগুলি প্রতিটি ধরণের স্ক্রিপ্টের জন্য পৃথক মোড়কের উপাদানগুলিতে আরও এনক্যাপসুলেট করা যেতে পারে। শুধুমাত্র অ্যাপ্লিকেশন-নির্দিষ্ট বৈশিষ্ট্যগুলির একটি ন্যূনতম সেট (যেমন ট্র্যাকিং আইডি) বিকাশকারীদের জন্য উপলব্ধ হবে৷ মোড়কের উপাদানগুলি বিকাশকারীদের সাহায্য করবে:

1. জনপ্রিয় স্ক্রিপ্ট ট্যাগগুলি অন্তর্ভুক্ত করা তাদের জন্য সহজ করা।
2. ফ্রেমওয়ার্ক হুডের অধীনে সবচেয়ে অনুকূল কৌশল ব্যবহার করে তা নিশ্চিত করা।

উপসংহার

তৃতীয় পক্ষের স্ক্রিপ্টগুলি সাধারণত ব্যবহারকারী ওয়েবসাইটে নির্দিষ্ট বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার জন্য তৈরি করা হয়। অ-সমালোচনামূলক স্ক্রিপ্টগুলির প্রভাব কমাতে, আমরা সেগুলিকে পিছিয়ে দেওয়ার পরামর্শ দিই—যা Next.js স্ক্রিপ্ট উপাদান ডিফল্টরূপে করে। ডেভেলপারদের আশ্বাস আছে যে স্ক্রিপ্টগুলি অন্তর্ভুক্ত করা সমালোচনামূলক কার্যকারিতা বিলম্বিত করবে না যদি না তারা স্পষ্টভাবে beforeInteractive কৌশল প্রয়োগ করে। Next.js স্ক্রিপ্ট কম্পোনেন্টের মতো, ফ্রেমওয়ার্ক ডেভেলপাররা অন্যান্য ফ্রেমওয়ার্কেও এই বৈশিষ্ট্যগুলি তৈরি করার কথা বিবেচনা করতে পারেন। আমরা সক্রিয়ভাবে Nuxt.js টিমের সাথে অনুরূপ একটি উপাদান অবতরণ অন্বেষণ করছি। প্রতিক্রিয়ার উপর ভিত্তি করে, আমরা অতিরিক্ত ব্যবহারের ক্ষেত্রেও স্ক্রিপ্টের উপাদানকে আরও উন্নত করার আশা করি।

স্বীকৃতি

Kara Erickson , Janicklas Ralph , Katie Hempenius , Philip Walton , Jeremy Wagner , and Addy Osmani কে ধন্যবাদ এই পোস্টে তাদের মতামতের জন্য।