লাইটহাউসে সর্বোচ্চ সম্ভাব্য FID 90% হ্রাস এবং Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্টে FID-তে 9% উন্নতির জন্য পণ্যের বিবরণ পৃষ্ঠাগুলির ইন্টারঅ্যাক্টিভিটি অপ্টিমাইজ করা৷
Mercado Libre লাতিন আমেরিকার বৃহত্তম ই-কমার্স এবং পেমেন্ট ইকোসিস্টেম। এটি 18টি দেশে বিদ্যমান এবং এটি ব্রাজিল, মেক্সিকো এবং আর্জেন্টিনায় (অনন্য দর্শক এবং পৃষ্ঠা দর্শনের উপর ভিত্তি করে) একটি বাজারের শীর্ষস্থানীয়।
ওয়েব পারফরম্যান্স দীর্ঘ সময়ের জন্য কোম্পানির জন্য একটি ফোকাস হয়েছে, কিন্তু তারা সম্প্রতি পারফরম্যান্স নিরীক্ষণ এবং সাইটের বিভিন্ন অংশে অপ্টিমাইজেশান প্রয়োগ করার জন্য একটি দল গঠন করেছে৷
এই নিবন্ধটি কোর ওয়েব ভাইটালগুলির একটিকে অপ্টিমাইজ করার জন্য Mercado Libre-এর ফ্রন্টএন্ড আর্কিটেকচার টিম থেকে Guille Paz , Pablo Carminatti এবং Oleh Burkhay দ্বারা করা কাজের সংক্ষিপ্তসার: প্রথম ইনপুট বিলম্ব (FID) এবং এর ল্যাব প্রক্সি, টোটাল ব্লকিং টাইম (TBT) ।
90 %
বাতিঘরে সর্বোচ্চ সম্ভাব্য FID হ্রাস
9 %
CrUX-এ FID কে "দ্রুত" হিসাবে উপলব্ধি করা আরও ব্যবহারকারী৷
দীর্ঘ কাজ, প্রথম ইনপুট বিলম্ব, এবং মোট ব্লকিং সময়
ব্যয়বহুল জাভাস্ক্রিপ্ট কোড চালানোর ফলে দীর্ঘ টাস্ক হতে পারে, যা ব্রাউজারের মূল থ্রেডে 50ms এর বেশি চলে।
FID (প্রথম ইনপুট বিলম্ব) সময় পরিমাপ করে যখন একজন ব্যবহারকারী প্রথম কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (যেমন যখন তারা একটি লিঙ্কে ক্লিক করে) তখন থেকে সেই সময় পর্যন্ত যখন ব্রাউজারটি সেই ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় ইভেন্ট হ্যান্ডলারগুলিকে প্রক্রিয়াকরণ শুরু করতে সক্ষম হয়। একটি সাইট যা ব্যয়বহুল জাভাস্ক্রিপ্ট কোড কার্যকর করে তার সম্ভবত বেশ কয়েকটি দীর্ঘ কাজ থাকতে পারে, যা FID-কে নেতিবাচকভাবে প্রভাবিত করবে।
একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, সাইটগুলিকে 100 মিলিসেকেন্ডের কম প্রথম ইনপুট বিলম্ব করার চেষ্টা করা উচিত: 
যখন Mercado Libre-এর সাইটটি বেশিরভাগ বিভাগে ভাল পারফরম্যান্স করছিল, তারা Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্টে দেখেছে যে পণ্যের বিশদ পৃষ্ঠাগুলির একটি দুর্বল FID ছিল৷ সেই তথ্যের উপর ভিত্তি করে, তারা সাইটের পণ্য পৃষ্ঠাগুলির জন্য ইন্টারঅ্যাকটিভিটি উন্নত করার জন্য তাদের প্রচেষ্টা ফোকাস করার সিদ্ধান্ত নিয়েছে৷
এই পৃষ্ঠাগুলি ব্যবহারকারীকে জটিল মিথস্ক্রিয়া সঞ্চালনের অনুমতি দেয়, তাই লক্ষ্য ছিল ইন্টারঅ্যাক্টিভিটি অপ্টিমাইজেশান, মূল্যবান কার্যকারিতায় হস্তক্ষেপ না করে।
পণ্যের বিস্তারিত পৃষ্ঠাগুলির ইন্টারঅ্যাক্টিভিটি পরিমাপ করুন
FID এর জন্য একজন প্রকৃত ব্যবহারকারীর প্রয়োজন এবং এইভাবে ল্যাবে পরিমাপ করা যায় না। যাইহোক, টোটাল ব্লকিং টাইম (TBT) মেট্রিক ল্যাব-পরিমাপযোগ্য, ক্ষেত্রের FID-এর সাথে ভালভাবে সম্পর্কযুক্ত, এবং ইন্টারঅ্যাক্টিভিটি প্রভাবিত করে এমন সমস্যাগুলিও ক্যাপচার করে।
নিম্নলিখিত ট্রেসে, উদাহরণস্বরূপ, মূল থ্রেডে চলমান টাস্কগুলি চালানোর জন্য মোট সময় 560 ms, সেই সময়ের মাত্র 345 ms কে মোট ব্লক করার সময় হিসাবে বিবেচনা করা হয় (প্রতিটি টাস্কের অংশগুলির সমষ্টি যা 50ms অতিক্রম করে):
বাস্তব জগতে পণ্যের বিশদ পৃষ্ঠাগুলির ইন্টারঅ্যাক্টিভিটি পরিমাপ এবং উন্নত করার জন্য Mercado Libre ল্যাবে একটি প্রক্সি মেট্রিক হিসাবে TBT গ্রহণ করেছে৷
তারা যে সাধারণ পন্থা নিয়েছে তা এখানে:
- কোন স্ক্রিপ্টগুলি আসল ডিভাইসে মূল থ্রেডকে ব্যস্ত রাখছে তা নির্ধারণ করতে WebPageTest ব্যবহার করুন।
- ম্যাক্স পটেনশিয়াল ফার্স্ট ইনপুট বিলম্ব (ম্যাক্স পটেনশিয়াল এফআইডি) এর পরিবর্তনের প্রভাব নির্ধারণ করতে লাইটহাউস ব্যবহার করুন।
দীর্ঘ কাজ কল্পনা করতে WebPageTest ব্যবহার করুন
WebPageTest (WPT) হল একটি ওয়েব পারফরম্যান্স টুল যা আপনাকে বিশ্বের বিভিন্ন স্থানে বাস্তব ডিভাইসে পরীক্ষা চালানোর অনুমতি দেয়।
Mercado Libre তাদের ব্যবহারকারীদের অভিজ্ঞতা পুনরুত্পাদন করতে WPT ব্যবহার করে একটি ডিভাইসের ধরন এবং প্রকৃত ব্যবহারকারীদের মতো অবস্থান বেছে নিয়ে। বিশেষ করে, তারা একটি Moto 4G ডিভাইস এবং Dulles, Virginia বেছে নিয়েছে, কারণ তারা মেক্সিকোতে Mercado Libre ব্যবহারকারীদের অভিজ্ঞতা আনুমানিক জানতে চেয়েছিল। WPT-এর মূল থ্রেড ভিউ পর্যবেক্ষণ করে, Mercado Libre দেখতে পেল যে 2 সেকেন্ডের জন্য মূল থ্রেডকে ব্লক করার জন্য পরপর বেশ কয়েকটি দীর্ঘ কাজ ছিল:
সংশ্লিষ্ট জলপ্রপাত বিশ্লেষণ করে তারা দেখতে পেল যে এই দুই সেকেন্ডের একটি উল্লেখযোগ্য অংশ তাদের বিশ্লেষণ মডিউল থেকে এসেছে। অ্যাপ্লিকেশনটির প্রধান বান্ডেলের আকার ছিল বড় (950KB) এবং পার্স, কম্পাইল এবং এক্সিকিউট করতে অনেক সময় লেগেছিল।
সর্বোচ্চ সম্ভাব্য FID নির্ধারণ করতে বাতিঘর ব্যবহার করুন
লাইটহাউস আপনাকে বিভিন্ন ডিভাইস এবং অবস্থানগুলির মধ্যে বেছে নেওয়ার অনুমতি দেয় না, তবে এটি সাইটগুলি নির্ণয় এবং কার্য সম্পাদনের সুপারিশগুলি পাওয়ার জন্য একটি খুব দরকারী টুল৷
পণ্যের বিশদ পৃষ্ঠাগুলিতে লাইটহাউস চালানোর সময়, Mercado Libre দেখতে পান যে সর্বাধিক সম্ভাব্য FID হল লাল রঙে চিহ্নিত একমাত্র মেট্রিক, যার মান 1710ms ।
এর উপর ভিত্তি করে, Mercado Libre তাদের সর্বোচ্চ সম্ভাব্য এফআইডি স্কোর উন্নত করার লক্ষ্য স্থির করেছে লাইটহাউস এবং ওয়েবপেজটেস্টের মতো একটি ল্যাবরেটরি টুলে, এই ধারণার অধীনে যে এই উন্নতিগুলি তাদের প্রকৃত ব্যবহারকারীদের প্রভাবিত করবে, এবং সেইজন্য, Chrome এর মতো বাস্তব ব্যবহারকারী পর্যবেক্ষণ সরঞ্জামগুলিতে প্রদর্শিত হবে। ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন।
দীর্ঘ কাজ অপ্টিমাইজ করুন
প্রথম পুনরাবৃত্তি
প্রধান থ্রেড ট্রেসের উপর ভিত্তি করে, Mercado Libre ব্যয়বহুল কোড চলমান দুটি মডিউল অপ্টিমাইজ করার লক্ষ্য নির্ধারণ করেছে।
তারা অভ্যন্তরীণ ট্র্যাকিং মডিউলের কর্মক্ষমতা অপ্টিমাইজ করা শুরু করে। এই মডিউলটিতে একটি CPU-ভারী টাস্ক রয়েছে যা মডিউলটির কাজ করার জন্য গুরুত্বপূর্ণ ছিল না এবং তাই নিরাপদে সরানো যেতে পারে। এটি পুরো সাইটের জন্য জাভাস্ক্রিপ্টে 2% হ্রাসের দিকে পরিচালিত করেছে।
এর পরে তারা সাধারণ বান্ডিলের আকার উন্নত করার জন্য কাজ শুরু করে:
অপ্টিমাইজেশানের সুযোগ সনাক্ত করতে Mercado Libre ওয়েবপ্যাক-বান্ডেল-বিশ্লেষক ব্যবহার করেছে:
- প্রাথমিকভাবে তাদের সম্পূর্ণ লোডাশ মডিউল প্রয়োজন ছিল। এটি একটি প্রতি-পদ্ধতি দ্বারা প্রতিস্থাপিত হয়েছিল যা সমগ্র লাইব্রেরির পরিবর্তে শুধুমাত্র Lodash-এর একটি উপসেট লোড করতে হবে , এবং Lodash-ওয়েবপ্যাক-প্লাগইনের সাথে লোড্যাশকে আরও সঙ্কুচিত করতে ব্যবহার করা হয়েছে।
তারা নিম্নলিখিত ব্যাবেল অপ্টিমাইজেশানগুলিও প্রয়োগ করেছে:
- @babel/plugin-transform-runtime ব্যবহার করে পুরো কোড জুড়ে Babel-এর সাহায্যকারীদের পুনঃব্যবহার করে, এবং বান্ডিলের আকার যথেষ্ট কমিয়ে দেয়।
- বিল্ড টাইমে টোকেন প্রতিস্থাপন করতে ব্যাবেল-প্লাগইন-সার্চ-এন্ড-রিপ্লেস ব্যবহার করে, মূল বান্ডেলের ভিতরে একটি বড় কনফিগারেশন ফাইল মুছে ফেলার জন্য।
- বেবেল-প্লাগইন-ট্রান্সফর্ম-রিঅ্যাক্ট-রিমুভ-প্রপ-টাইপ যোগ করা হচ্ছে প্রপ ধরনের অপসারণ করে কিছু অতিরিক্ত বাইট বাঁচাতে।
এই অপ্টিমাইজেশনের ফলস্বরূপ, বান্ডেলের আকার প্রায় 16% হ্রাস পেয়েছে।
প্রভাব পরিমাপ
পরিবর্তনগুলি Mercado Libre-এর একটানা দীর্ঘ কাজকে দুই সেকেন্ড থেকে এক সেকেন্ডে নামিয়ে এনেছে:
বাতিঘর সর্বোচ্চ সম্ভাব্য প্রথম ইনপুট বিলম্বে 57% হ্রাস দেখিয়েছে:
দ্বিতীয় পুনরাবৃত্তি
পরবর্তী উন্নতিগুলি খুঁজতে দলটি দীর্ঘ কাজগুলিতে খনন অব্যাহত রেখেছে।
সেই তথ্যের ভিত্তিতে তারা নিম্নলিখিত পরিবর্তনগুলি বাস্তবায়ন করার সিদ্ধান্ত নিয়েছে:
- কম্পাইল এবং পার্স টাইম অপ্টিমাইজ করতে প্রধান বান্ডেলের আকার হ্রাস করা চালিয়ে যান (যেমন বিভিন্ন মডিউল জুড়ে ডুপ্লিকেট নির্ভরতা সরিয়ে)।
- কম্পোনেন্ট লেভেলে কোড স্প্লিটিং প্রয়োগ করুন, জাভাস্ক্রিপ্টকে ছোট খণ্ডে ভাগ করতে এবং বিভিন্ন কম্পোনেন্টের আরও স্মার্ট লোড করার অনুমতি দিতে।
- প্রধান থ্রেডের একটি স্মার্ট ব্যবহারের জন্য মঞ্জুরি দিতে উপাদান হাইড্রেশন বিলম্বিত করুন। এই কৌশলটিকে সাধারণত আংশিক হাইড্রেশন বলা হয়।
প্রভাব পরিমাপ
ফলস্বরূপ WebPageTest ট্রেস JS নির্বাহের আরও ছোট অংশ দেখায়:
এবং লাইটহাউসে তাদের সর্বোচ্চ সম্ভাব্য FID সময় একটি অতিরিক্ত 60% দ্বারা হ্রাস করা হয়েছে:
বাস্তব ব্যবহারকারীদের জন্য অগ্রগতি কল্পনা করুন
ওয়েবপেজটেস্ট এবং লাইটহাউসের মতো ল্যাবরেটরি পরীক্ষার সরঞ্জামগুলি বিকাশের সময় সমাধানগুলির পুনরাবৃত্তি করার জন্য দুর্দান্ত, প্রকৃত লক্ষ্য হল প্রকৃত ব্যবহারকারীদের অভিজ্ঞতা উন্নত করা।
ক্রোম ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন বাস্তব-বিশ্বের ক্রোম ব্যবহারকারীরা ওয়েবে জনপ্রিয় গন্তব্যগুলি কীভাবে অনুভব করে তার জন্য ব্যবহারকারীর অভিজ্ঞতার মেট্রিক্স প্রদান করে৷ BigQuery , PageSpeedInsights , বা CrUX API- এ কোয়েরি চালিয়ে রিপোর্ট থেকে ডেটা পাওয়া যেতে পারে৷
CrUX ড্যাশবোর্ড হল মূল মেট্রিক্সের অগ্রগতি কল্পনা করার একটি সহজ উপায়:
পরবর্তী পদক্ষেপ
ওয়েব পারফরম্যান্স কখনই একটি সমাপ্ত কাজ নয়, এবং Mercado Libre বুঝতে পারে যে এই অপ্টিমাইজেশনগুলি তাদের ব্যবহারকারীদের কাছে নিয়ে আসে। যদিও তারা প্রোডাক্ট লিস্টিং পেজ, ইমেজ অপ্টিমাইজেশান এবং অন্যান্য প্রিফেচিং সহ সমগ্র সাইট জুড়ে বেশ কিছু অপ্টিমাইজেশান প্রয়োগ করা চালিয়ে যাচ্ছে, তারা মোট ব্লকিং টাইম (TBT) এবং প্রক্সি এফআইডির মাধ্যমে আরও অনেক কিছু কমাতে প্রোডাক্ট লিস্টিং পেজগুলিতে উন্নতি যোগ করা চালিয়ে যাচ্ছে। এই অপ্টিমাইজেশান অন্তর্ভুক্ত:
- কোড বিভাজন সমাধান পুনরাবৃত্তি.
- তৃতীয় পক্ষের স্ক্রিপ্টগুলির সম্পাদনের উন্নতি করা।
- বান্ডলার লেভেলে অ্যাসেট বান্ডলিংয়ে ক্রমাগত উন্নতি ( ওয়েবপ্যাক )।
Mercado Libre এর পারফরম্যান্সের একটি সামগ্রিক দৃষ্টিভঙ্গি রয়েছে, তাই তারা সাইটে ইন্টারঅ্যাক্টিভিটি অপ্টিমাইজ করা চালিয়ে যাওয়ার সময়, তারা অন্যান্য দুটি বর্তমান কোর ওয়েব ভাইটালগুলিতে উন্নতির সুযোগগুলি মূল্যায়ন করা শুরু করেছে: LCP (লার্জেস্ট কনটেন্টফুল পেইন্ট) এবং CLS (ক্রমবর্ধমান লেআউট শিফট) এমনকি আরো