ব্রাউজারগুলি কি তৃতীয় পক্ষের সংস্থানগুলির লোডিং অপ্টিমাইজ করতে পারে?

Addy Osmani

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

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

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

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

এই পোস্টের মাধ্যমে, আমরা আমাদের কিছু পরীক্ষা সম্পর্কে তথ্য শেয়ার করতে চাই। আমরা আশা করি এটি একটি প্রক্রিয়ার সূচনা যা ব্যবহারকারী এজেন্ট, ব্যবসা এবং তৃতীয় পক্ষের প্রদানকারীদের মধ্যে স্বচ্ছতা এবং দৃশ্যমানতাকে উত্সাহিত করবে এবং একটি দ্রুত ওয়েবের পথ প্রশস্ত করবে৷

তৃতীয় পক্ষের উপর গভীর দৃষ্টিভঙ্গি

একটি তৃতীয় পক্ষ হল একটি সংস্থান যা সাইটের বাইরের একজন প্রদানকারী দ্বারা পরিবেশিত হয়। তারা সরাসরি সাইটের মালিকদের নিয়ন্ত্রণের মধ্যে নেই, কিন্তু তাদের অনুমোদনের সাথে উপস্থিত। তৃতীয় পক্ষের সম্পদ হল:

• একটি শেয়ার্ড এবং পাবলিক অরিজিনে হোস্ট করা হয়েছে প্রাথমিক সাইট থেকে আলাদা।
• স্বতন্ত্র সাইটের মালিক দ্বারা রচিত বা প্রভাবিত নয়।
• বিভিন্ন সাইট দ্বারা ব্যাপকভাবে ব্যবহৃত হয়।

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

উত্স: বিভাগ দ্বারা তৃতীয় পক্ষ ।

শ্রেণী	সংজ্ঞা
বিজ্ঞাপন	বিজ্ঞাপন পরিবেশন বা বিজ্ঞাপন কার্যক্ষমতা পরিমাপ করার জন্য ব্যবহৃত স্ক্রিপ্ট।
ভিডিও	স্ক্রিপ্ট যা ভিডিও প্লেয়ার এবং স্ট্রিমিং কার্যকারিতা সক্ষম করে।
হোস্ট করা লাইব্রেরি	সর্বজনীনভাবে হোস্ট করা ওপেন সোর্স লাইব্রেরির মিশ্রণ।
বিষয়বস্তু	বিষয়বস্তু প্রদানকারী বা প্রকাশনা-নির্দিষ্ট অধিভুক্ত ট্র্যাকিং থেকে স্ক্রিপ্ট।
গ্রাহক সাফল্য	গ্রাহক সহায়তা/বিপণন প্রদানকারীদের থেকে স্ক্রিপ্ট যা চ্যাট এবং যোগাযোগের সমাধান অফার করে।
হোস্টিং	ওয়েব হোস্টিং প্ল্যাটফর্ম থেকে স্ক্রিপ্ট.
মার্কেটিং	বিপণন সরঞ্জাম থেকে স্ক্রিপ্ট যা পপআপ, নিউজলেটার, এবং অন্যান্য যোগ করে।
সামাজিক	স্ক্রিপ্ট যে সামাজিক বৈশিষ্ট্য সক্রিয়.
ট্যাগ ম্যানেজার	স্ক্রিপ্ট যা অন্যান্য অনেক স্ক্রিপ্ট লোড করে এবং অনেক কাজ শুরু করে।
বিশ্লেষণ	স্ক্রিপ্ট যা ব্যবহারকারীদের এবং তাদের ক্রিয়াকলাপ পরিমাপ বা ট্র্যাক করে।
কুকি কনসেন্ট প্ল্যাটফর্ম	যে স্ক্রিপ্টগুলি সাইটগুলিকে একটি জ্ঞাত এবং স্বচ্ছ উপায়ে ব্যবহারকারীর সম্মতি (GDPR, ePR, CCPA) পেতে দেয়৷
ইউটিলিটি	স্ক্রিপ্ট যা ডেভেলপার ইউটিলিটি (API ক্লায়েন্ট, সাইট মনিটরিং, জালিয়াতি সনাক্তকরণ, এবং অন্যান্য।
অন্যান্য	বিবিধ স্ক্রিপ্ট কোন সুনির্দিষ্ট বিভাগ বা বৈশিষ্ট্য ছাড়া একটি শেয়ার্ড অরিজিনের মাধ্যমে বিতরণ করা হয়েছে৷

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

কিভাবে তৃতীয় পক্ষ কর্মক্ষমতা প্রভাবিত করে?

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

1. আকার এবং স্ক্রিপ্ট এক্সিকিউশন খরচ : তৃতীয় পক্ষগুলি প্রায়ই আপনার পৃষ্ঠায় একটি <script> বা <iframe> উপাদান ড্রপ করে "শুধু" উল্লেখযোগ্য কার্যকারিতা প্রদানের লক্ষ্য রাখে। এই উপাদানগুলি তখন স্ক্রিপ্ট এবং সংস্থানগুলিকে টেনে আনে যা আকারে উল্লেখযোগ্য এবং ডাউনলোড এবং কার্যকর করতে বেশি সময় নেয়। অত্যধিক জাভাস্ক্রিপ্ট প্রধান থ্রেডকে দীর্ঘক্ষণ ব্যস্ত রাখে, রেন্ডারিং ব্লক করে এবং ব্যবহারকারীর মিথস্ক্রিয়া বিলম্বিত করে। কিছু শীর্ষস্থানীয় তৃতীয় পক্ষ বিশ্লেষণ করা সাইটের 50% এরও বেশি জন্য 42 ms থেকে 1.6 s পর্যন্ত মূল থ্রেড ব্লক করে বলে জানা গেছে। একটি ব্লক করা প্রধান থ্রেডের ফলে একটি উচ্চ টোটাল ব্লকিং টাইম (TBT) হয় যা সাইটের পারফরম্যান্স স্কোরকে প্রভাবিত করে এমন একটি মেট্রিক। উপরন্তু, এটি ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রতিক্রিয়াতেও বিলম্ব করে এবং ওয়েবসাইটগুলির প্রতিক্রিয়া পরিমাপ করতে ব্যবহৃত ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিককে হ্রাস করে। সুতরাং, স্ক্রিপ্ট এক্সিকিউশন খরচ কর্মক্ষমতা উপর একটি উল্লেখযোগ্য প্রভাব আছে.

2. সংখ্যা : গড়ে, ওয়েবসাইটগুলি মোবাইল এবং ওয়েবে প্রায় 21টি ভিন্ন তৃতীয় পক্ষ ব্যবহার করে৷ প্রায়শই, থার্ড-পার্টি ট্যাগগুলি ট্যাগ ম্যানেজমেন্ট টুলস দ্বারা যুক্ত করা হয় যা সরাসরি প্রযুক্তি/উন্নয়ন দল দ্বারা নিয়ন্ত্রিত হয় না। যে ট্যাগগুলির প্রয়োজন নেই সেগুলি পর্যালোচনা প্রক্রিয়া ছাড়াই অন্য দলগুলি যোগ করতে পারে এবং কখনও সরানো হবে না৷ এগুলো ব্যবহারকারীর অভিজ্ঞতা, পৃষ্ঠার ওজন বা CPU ব্যবহারকে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে। একটি শাসন প্রক্রিয়া প্রতিষ্ঠা করা এই ধরনের পরিস্থিতি মোকাবেলা করতে পারে এবং বিকাশকারীদের প্রতিটি প্রদানকারীর প্রভাব নিরীক্ষা করার অনুমতি দেয়। এটি সাহায্য করবে যদি ডেভেলপারদের কাছে সমস্ত তৃতীয় পক্ষের জন্য প্রস্তুত ডেটা উপলব্ধ থাকে যা তাদের কর্মক্ষমতা প্রভাব, সুবিধা এবং তুলনার জন্য ট্রেড-অফ সহ একটি নির্দিষ্ট ফাংশন প্রদান করে। আরেকটি চ্যালেঞ্জের দলগুলি মুখোমুখি হয় যে অনেক সাইটের জন্য, তাদের তৃতীয়-পক্ষের ট্যাগগুলি শুধুমাত্র উৎপাদনে চলে কিন্তু তাদের উন্নয়ন পরিবেশে নয়, যা ডেভেলপারদের জন্য তাদের পরীক্ষা করা আরও চ্যালেঞ্জিং করে তোলে।

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

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

উপরের ফলাফল হিসাবে, তৃতীয় পক্ষগুলি কোর ওয়েব ভাইটালগুলির যে কোনও বা সমস্ত উপাদানকে প্রভাবিত করতে পারে৷ বেশিরভাগ তৃতীয় পক্ষ নেতিবাচকভাবে সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এবং প্রথম ইনপুট বিলম্ব (FID) প্রভাবিত করে। YouTube এম্বেডগুলি মোবাইলে 10% ওয়েবসাইটের জন্য 4.5 সেকেন্ডের জন্য মূল থ্রেডকে ব্লক করে এবং 50% অধ্যয়ন করা ওয়েবসাইটের জন্য কমপক্ষে 1.6 সেকেন্ডের জন্য। একজন ব্যবহারকারীর হতাশা কল্পনা করুন যদি তারা একটি ধীর সংযোগে 20টি স্ক্রিপ্ট সহ একটি পৃষ্ঠায় আসে। Thirdpartyweb.today থেকে নিম্নলিখিত ভিজ্যুয়ালাইজেশন বর্তমানে সবচেয়ে বড় পারফরম্যান্স প্রভাব সহ তৃতীয় পক্ষগুলিকে দেখায়৷

"শীর্ষ ~4 মিলিয়ন সাইট জুড়ে, ~2700 অরিজিন সমস্ত স্ক্রিপ্ট এক্সিকিউশন সময়ের ~57% জন্য দায়ী যেখানে শীর্ষ 50টি সত্ত্বা ইতিমধ্যেই ~47% এর জন্য হিসাব করছে"। - তৃতীয় পক্ষের ওয়েব

যে পৃষ্ঠাগুলি দ্রুত রেন্ডার করে এবং একটি যুক্তিসঙ্গত সময়সীমার মধ্যে ইন্টারেক্টিভ হয়ে ওঠে সেগুলি মূল ওয়েব ভাইটাল দ্বারা পরিমাপ করা ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য অপরিহার্য। ভাল UX প্রায়ই ওয়েবসাইটগুলির জন্য ভাল ব্যবসায় অনুবাদ করে, যার অর্থ তৃতীয়-পক্ষের জন্য ব্যবহার করা ভাল ব্যবসা হতে পারে। তৃতীয় পক্ষের প্রভাব কমাতে একসাথে কাজ করা চেইনের প্রত্যেকের জন্য একটি জয় হতে পারে।

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

কিভাবে Chrome সাহায্য করতে পারে?

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

1. ব্যবহারকারী-অভিজ্ঞতা বা ব্যবসায়িক ফলাফলগুলিকে প্রত্যাহার না করে ওয়েবে তৃতীয়-পক্ষের সংস্থানগুলি লোড করার আরও ভাল উপায় খুঁজুন৷

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

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

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

প্রস্তাবিত পদ্ধতি

আমরা এই ফলাফলগুলি অর্জনের জন্য একটি ত্রি-মুখী পদ্ধতির প্রস্তাব করছি...

1. **আরইউএম এবং ক্রোমের ডেভেলপার টুলিংয়ের মাধ্যমে প্রতি তৃতীয়-পক্ষের প্রভাবে বিকাশকারীদের আরও গভীর বৈশিষ্ট্য দিন।**

   RUM বলতে ওয়েব পারফরম্যান্স মনিটরিং API-এর মাধ্যমে উপলব্ধ বাস্তব ব্যবহারকারী মেট্রিক্স ডেটা ( ফিল্ড ডেটা নামেও পরিচিত) বোঝায়। Chrome এর ডেভেলপার টুলিং এর মধ্যে রয়েছে Lighthouse, Chrome DevTools এবং Chrome ব্যবহারকারীর অভিজ্ঞতার প্রতিবেদন। আমরা উপলব্ধ API এবং সরঞ্জামগুলিকে উন্নত করার প্রস্তাব করি যাতে সাইট বিকাশকারীরা প্রতিটি পৃষ্ঠায় ব্যবহৃত প্রতিটি তৃতীয় পক্ষের প্রভাব বুঝতে পারে৷ সরঞ্জামগুলি তাদের প্রভাব প্রশমিত করার জন্য যে পদক্ষেপগুলি নিতে পারে সে সম্পর্কেও শিক্ষিত করবে (উদাহরণস্বরূপ, তাদের পিছিয়ে দেওয়া বা সম্মুখভাগ ব্যবহার করা) এবং ট্রেড-অফ সহ অন্যান্য সম্ভাব্য সমাধানগুলি (অন্যান্য তৃতীয় পক্ষ বা DIY) অন্বেষণ করবে৷ ওয়েব পারফরম্যান্স মনিটরিং API-এর জন্য, আমরা আমাদের ব্যবহারকারীদের গোপনীয়তা এবং নিরাপত্তার সাথে আপোস না করে তাদের ক্রস-অরিজিন সংস্থানগুলির কভারেজ প্রসারিত করার উপায়গুলি অন্বেষণ করছি৷

2. ** ব্যবসাকে তৃতীয় পক্ষের সম্পদগুলি দক্ষতার সাথে লোড করার জন্য একটি ভাল আলোকিত পথ দিন৷**

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

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

3. **আরও ভালো স্বচ্ছতার প্রচেষ্টার মাধ্যমে তাদের কর্মক্ষমতা প্রভাব কমাতে তৃতীয়-পক্ষের প্রণোদনা দিন।**

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

চ্যালেঞ্জ

এই মাত্রার একটি প্রচেষ্টা চ্যালেঞ্জ ছাড়া নয়। কিছু মূল চ্যালেঞ্জ আমাদের বিবেচনা করতে হবে।

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

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

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

2. আমরা ক্রোমকে উন্নত করার প্রস্তাব দিই যাতে এটি অপ্টিমাইজেশান প্রয়োগ করতে পারে যা প্রথম বনাম তৃতীয়-পক্ষের সংস্থানগুলির লোডিংকে অগ্রাধিকার দেওয়ার জন্য সঠিক ভারসাম্য বজায় রাখতে সহায়তা করে৷ একটি মূল্যবান পরিবর্তন সমস্ত ব্রাউজার জুড়ে একটি মান হিসাবে উপলব্ধ হয়, কিন্তু এটি সময় নেয়। উদাহরণস্বরূপ, <img> এবং <iframe> উপাদানগুলির জন্য loading বৈশিষ্ট্য 2019 সাল থেকে Chrome/Edge-এ উপলব্ধ, কিন্তু 2022 সালে শুধুমাত্র Safari-এ উপলব্ধ হয়েছে। যতক্ষণ না একটি বৈশিষ্ট্য মানসম্মত হয়, তৃতীয় পক্ষের সংস্থানগুলির ব্যবহারকারীদের নিশ্চিত করতে হবে যে তারা অন্যান্য ব্রাউজারগুলির জন্যও অপ্টিমাইজ করেছে। প্রাসঙ্গিক যেখানে আমরা আমাদের নির্দেশিকাতে এটি হাইলাইট করে সাহায্য করব।

3. এই প্রকল্পটি কার্যকর করার জন্য, আমাদের শুধুমাত্র নির্দিষ্ট প্রয়োজনীয়তাগুলি বুঝতে সাহায্য করার জন্য অংশীদার এবং বিকাশকারীদের সাথে জড়িত হতে হবে না, তবে স্কেলে পরীক্ষামূলক সমাধানগুলি পরীক্ষা করতে, প্রতিক্রিয়া প্রদান করতে, পুনরাবৃত্তি করতে হবে এবং যখন প্রয়োজন হবে তখন উন্নতি করতে হবে৷ পরিবর্তনগুলি পরিকল্পিত হতে হবে, পরীক্ষা এবং মূল্যায়নের জন্য একটি যুক্তিসঙ্গত সময়সীমার জন্য অনুমতি দেয়।

প্রাথমিক মান প্রস্তাব

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

LazyEmbeds

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

একটি পৃষ্ঠায় YouTube ভিডিও অলস লোড করতে LazyEmbeds ব্যবহার করে এখানে একটি ডেমো রয়েছে৷ একটি একক YouTube ভিডিও এম্বেড সাধারণত পৃষ্ঠায় 500-600KB জাভাস্ক্রিপ্ট যোগ করে। আমরা LazyEmbeds ব্যবহার করে এরকম 14টি ভিডিও এম্বেড সহ একটি ব্লগ পোস্ট অপ্টিমাইজ করার চেষ্টা করেছি। পৃষ্ঠা-লোডের সময় এবং ডেটা-সঞ্চয় জুড়ে ফলাফলগুলি আশাব্যঞ্জক ছিল।

	আগে	পরে
ডেটা	15.4 MB	6.1 এমবি
মোট ব্লকিং সময়	3.2 সেকেন্ড	1.6 সেকেন্ড

এই কাজটি সম্পর্কে আরও জানতে, আমাদের ব্যাখ্যাকারী এবং ব্লিঙ্ক-ডেভের উদ্দেশ্য-থেকে-পরীক্ষার থ্রেড এবং পরীক্ষার এক্সটেনশন দেখুন।

টার্গেটেড থার্ড-পার্টি থ্রটলিং

থার্ড-পার্টি স্ক্রিপ্টগুলি প্রায়ই সামগ্রিক তদারকি প্রক্রিয়া ছাড়াই বিভিন্ন দল দ্বারা যুক্ত করা হয়। দ্য টেলিগ্রাফের ইঞ্জিনিয়ারিং টিম স্পষ্ট করে বলেছিল যে "সবাই একটি পৃষ্ঠায় 'সেই ট্যাগ' চায় যা সংস্থাকে অর্থ উপার্জন করবে"। এটি ক্রমাগত কর্মক্ষমতা প্রভাব পরিচালনার বোঝা বাড়াতে পারে।

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

RUM APIs উন্নত করা

আমরা তৃতীয় পক্ষের কর্মক্ষমতা মূল্যায়নে প্রাসঙ্গিক হবে এমন তথ্য অন্তর্ভুক্ত করার জন্য RUM API-কে উন্নত করার কথাও বিবেচনা করছি। বর্ধিতকরণ নিম্নলিখিত অন্তর্ভুক্ত:

1. <iframe> রিপোর্টিং: আমরা এমন সমাধান নিয়ে কাজ করছি যা ক্রস-ফ্রেম রিপোর্টিংয়ের জন্য পারফরম্যান্স টাইমলাইন API ব্যবহার করতে পারে। এটি শীর্ষ-স্তরের পৃষ্ঠার লেখকদেরকে পৃষ্ঠাটিতে এমবেড করা একটি সহযোগী তৃতীয় পক্ষের আইফ্রেমের কর্মক্ষমতা ডেটা পরিদর্শন করার অনুমতি দেবে।

2. লং টাস্ক অ্যাট্রিবিউশন: RUM-এ লং টাস্ক API সাইটের মালিকদের দীর্ঘ টাস্ক সনাক্ত করতে সাহায্য করবে যা দীর্ঘ সময়ের জন্য মূল থ্রেডকে বেঁধে রাখে এবং মিথস্ক্রিয়া বিলম্বিত করে।

আরও আপডেট

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

আমরা এই সমস্যার স্থানটি আরও অন্বেষণ করতে এবং আমাদের শিক্ষার উপর সম্প্রদায়ের সাথে জড়িত থাকার জন্য উন্মুখ।

লীনা সোহোনি-কাস্তুরে, জেরেমি ওয়াগনার, গিলবার্তো কচি, কেনজি বাহেক্স, কোহেই উয়েনো, কেনতারো হারা, অ্যালেক্স এন. জোসে, মেলিসা মিচেল, ইয়োভ ওয়েইস, শুনিয়া শিশিদো এবং মিনোরু চিকামুনেকে তাদের প্রতিক্রিয়া এবং অবদানের জন্য বিশেষ ধন্যবাদ।