প্রকাশিত: অক্টোবর 14, 2025
নেক্সট পেইন্টের সাথে ইন্টারঅ্যাকশন (আইএনপি) প্রতিক্রিয়াশীলতা পরিমাপের জন্য একটি গুরুত্বপূর্ণ কোর ওয়েব ভাইটাল মেট্রিক। Fotocasa-এ, Google Search Console উল্লেখযোগ্য সংখ্যক পৃষ্ঠা হাইলাইট করেছে যেগুলি 2024 সালে যখন INP ফার্স্ট ইনপুট বিলম্ব (FID) প্রতিস্থাপিত হয়েছিল তখন "উন্নতি প্রয়োজন" এবং "খারাপ"-এ স্থানান্তরিত হয়েছিল। এই কেস স্টাডিটি এই সমস্যাগুলি নির্ণয় এবং সমাধান করার জন্য নিযুক্ত সরঞ্জাম এবং কৌশলগুলির রূপরেখা দেয়, শেষ পর্যন্ত একটি সাবট্যান্টিয়াল মার্জিন দ্বারা INP উন্নত করে৷
যেখানে শুরু হয়েছিল ফোটোকাসা দল
FID থেকে INP-এ স্থানান্তরিত হওয়ার আগে, ডেস্কটপ এবং মোবাইল উভয়ের প্রায় প্রতিটি পৃষ্ঠাই "ভাল" থ্রেশহোল্ডের মধ্যে ছিল, যার অর্থ সেই সময়ে সমস্ত কোর ওয়েব ভাইটাল (LCP, CLS, এবং FID) ভাল পারফর্ম করছিল৷ যাইহোক, INP-তে স্থানান্তরিত হওয়ার পরে, প্রায় সমস্ত পৃষ্ঠাগুলি "উন্নতি প্রয়োজন" এবং কিছু এমনকি "দরিদ্র"-এ স্থানান্তরিত হয়েছে, কারণ বেশিরভাগ ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য INP মান ধারাবাহিকভাবে 200 মিলিসেকেন্ড অতিক্রম করেছে।
এই পরিবর্তনটি Fotocasa দলকে উপলব্ধি করেছে যে তারা ব্যবহারকারীর অভিজ্ঞতার একটি গুরুত্বপূর্ণ দিক উপেক্ষা করছে। যদিও FID শুধুমাত্র প্রথম মিথস্ক্রিয়াটির বিলম্ব পরিমাপ করেছে, INP ইনপুট প্রক্রিয়াকরণ এবং উপস্থাপনা বিলম্বের জন্য অ্যাকাউন্টিং, সমস্ত মিথস্ক্রিয়াগুলির প্রতিক্রিয়াশীলতা মূল্যায়ন করে। এই বৃহত্তর পরিমাপটি সত্যিকারের ইন্টারঅ্যাক্টিভিটি (যেমন Google দ্বারা বলা হয়েছে ) এবং অনুপস্থিত সুযোগগুলি হাইলাইট করার জন্য আরও ভাল প্রক্সি।
যদিও Google Search Console ফিল্ড পারফরম্যান্স ডেটা প্রদান করে, এটি রিয়েল-টাইম অন্তর্দৃষ্টি প্রদান করে না। এটির ডেটা 28-দিনের উইন্ডোতে একত্রিত করা হয়েছে, যা এই মুহূর্তে কোন ইন্টারঅ্যাকশনের কারণে সমস্যা তৈরি করছে তা চিহ্নিত করা কঠিন করে তোলে।
রিয়েল টাইমে INP ট্র্যাক করার একটি উপায় প্রয়োজন ছিল যাতে ব্যবহারকারীদের দ্বারা সবচেয়ে ধীরগতি এবং প্রায়শই ব্যবহৃত উভয় মিথস্ক্রিয়া সনাক্ত করা যায় এবং টিমের উন্নয়ন পরিবেশে তাদের নির্ভরযোগ্যভাবে পুনরুত্পাদন করা হয়। একইভাবে গুরুত্বপূর্ণ ছিল করা পরিবর্তনগুলির প্রভাব বোঝা, শুধুমাত্র কোন সংশোধনগুলি সাহায্য করেছে তা নয়, তবে কোন পরিবর্তনগুলি অসাবধানতাবশত জিনিসগুলিকে আরও খারাপ করেছে৷
এই কারণে, সমস্যাগুলি নির্ণয় এবং সমাধান করতে সহায়তা করার জন্য সরঞ্জামগুলির একটি সেট ব্যবহার করা হয়েছিল। সবচেয়ে গুরুত্বপূর্ণ ছিল:
- Google Chrome DevTools, বিশেষ করে পারফরম্যান্স ট্যাব।
- একটি কাস্টম RUM ( রিয়েল ইউজার মনিটরিং ) সিস্টেম যা ওয়েব-ভাইটাল লাইব্রেরি ব্যবহার করে ডেটাডগে ফোটোকাসা দল দ্বারা নির্মিত।
- প্রতিক্রিয়া বিকাশকারী সরঞ্জাম।
সমস্যা নির্ণয়ের জন্য সরঞ্জাম
INP কর্মক্ষমতা সমস্যাগুলি নির্ণয় এবং ডিবাগ করতে, নিম্নলিখিত সরঞ্জামগুলি ব্যবহার করা হয়েছিল৷
Google Chrome DevTools
একটি ওয়েব অ্যাপ্লিকেশনে কোর ওয়েব ভাইটাল সম্পর্কিত সমস্যাগুলি সনাক্ত এবং পুনরুত্পাদন করার একটি দুর্দান্ত উপায় হল Google Chrome DevTools-এ পারফরম্যান্স ট্যাব ব্যবহার করা৷ পারফরম্যান্স ট্যাব স্বয়ংক্রিয়ভাবে মূল ওয়েব ভাইটাল মেট্রিক্স পরিমাপ করে, লোডিং, ইন্টারঅ্যাক্টিভিটি এবং লেআউট শিফট মেট্রিক্সের উপর তাৎক্ষণিক প্রতিক্রিয়া প্রদান করে। অন্যান্য Google টুলগুলিতে এই মেট্রিক্সগুলি কীভাবে রিপোর্ট করা হয় তার সাথে এটি ব্যাপকভাবে সামঞ্জস্যপূর্ণ।
আইএনপি সমস্যাগুলি সনাক্ত করতে এবং সমাধান করতে, ফোটোকাসা দল সাধারণত কম এবং মধ্য-প্রান্তের ডিভাইসগুলির কার্যকারিতা অনুকরণ করতে সিপিইউকে থ্রোটলিং করে শুরু করে। এটি ফোটোকাসা দলকে আরও সীমাবদ্ধ পরিস্থিতিতে পৃষ্ঠাটি কীভাবে আচরণ করে তা পর্যবেক্ষণ করার অনুমতি দেয়। তারপর প্রোফাইলার ব্যবহার করে সেশনটি রেকর্ড করা হয়েছিল এবং কার্যকারিতা সমস্যাগুলি চিহ্নিত করতে ব্যবহারকারীর মিথস্ক্রিয়ায় ফোকাস করে ট্রেসগুলি সাবধানে বিশ্লেষণ করা হয়েছিল।
বাধা শনাক্ত করার সময়, INP উপ-অংশগুলি এবং ব্রাউজার তাদের প্রতিটির মধ্যে যে কাজগুলি সম্পাদন করে তা পরীক্ষা করা বিশেষভাবে কার্যকর। উদাহরণস্বরূপ, নিম্নলিখিত চিত্রটিতে, এটি দেখা যায় যে ডকুমেন্টের মূল অংশে শৈলী পরিবর্তনের কারণে দুটি শৈলী পুনর্গণনার কারণে INP বেশ উচ্চ।
Fotocasa INP এবং অন্যান্য কোর ওয়েব ভাইটাল মেট্রিক্স ট্র্যাক করার জন্য একটি সিস্টেম সেট আপ করে, যাতে কোনো পারফরম্যান্স সমস্যা দ্রুত শনাক্ত ও সমাধান করা হয়। যখন একটি মেট্রিক একটি নির্দিষ্ট থ্রেশহোল্ড অতিক্রম করে (Google এর সংজ্ঞায়িত রেঞ্জের উপর ভিত্তি করে), অ্যাট্রিবিউশনটি লগ করা হয় যাতে সমস্যাটি বিশ্লেষণ এবং সমাধান করা যায়।
সেই সিস্টেমের জন্য, ওয়েব-ভাইটাল লাইব্রেরিটি বাস্তব ব্যবহারকারীদের কাছ থেকে এই মেট্রিকগুলিকে এমনভাবে ক্যাপচার করতে ব্যবহার করা হয়েছিল যা সঠিকভাবে মেলে যে কীভাবে সেগুলি ক্রোম দ্বারা পরিমাপ করা হয় এবং অন্যান্য Google টুলগুলিতে রিপোর্ট করা হয় (যেমন Chrome ব্যবহারকারীর অভিজ্ঞতার প্রতিবেদন, পৃষ্ঠার গতির অন্তর্দৃষ্টি, অনুসন্ধান কনসোলের গতির প্রতিবেদন এবং অন্যান্য)।
একটি বিস্তৃত দৃশ্য এবং কেন্দ্রীভূত ট্র্যাকিংয়ের জন্য, Fotocasa ডেটা সংগ্রহ এবং ভিজ্যুয়ালাইজ করার জন্য ডেটাডগ ব্যবহার করে, দলটিকে তথ্য-চালিত সিদ্ধান্ত নিতে সক্ষম করে। কাস্টম মেট্রিক্স এটিকে সাশ্রয়ী রাখে এবং ফোটোকাসা ওয়েবসাইটে প্রায় সমস্ত ব্যবহারকারীকে ট্র্যাক করতে আরও ভাল সক্ষম।
এই সিস্টেমটি ফোটোকেস টিমকে তাদের পরিবর্তনগুলি মেট্রিক্সকে প্রভাবিত করে কিনা বা অপ্রত্যাশিত পরিবর্তন ঘটছে কিনা তা দ্রুত নিরীক্ষণ করতে দেয়, সম্ভাব্যভাবে তাদের সাথে আপস করে। INP মেট্রিকটিকে তারপরে ইনপুট বিলম্ব, প্রক্রিয়াকরণের সময়কাল এবং উপস্থাপনা বিলম্বের মতো অংশগুলিতে বিচ্ছিন্ন করা যেতে পারে যাতে মিথস্ক্রিয়াটির কোন অংশটি দীর্ঘ মিথস্ক্রিয়া সময়ের জন্য প্রধানত দায়ী।
অসঙ্গতিগুলি সনাক্ত করার পরে, চিত্র 7 এবং 8-এ চিত্রিত একটির মতো, Fotocasa অবিলম্বে প্রতিক্রিয়া জানায় এবং OpenSearch ব্যবহার করে, অন্য একটি টুল যা পরিবর্তনটি কোথায় ঘটতে পারে তা চিহ্নিত করতে সাহায্য করেছিল। ওয়েব-ভাইটাল লাইব্রেরি দ্বারা প্রদত্ত ডেটা লক্ষ্য চিহ্নিত করতে সহায়তা করে (ডিওএম উপাদানটি একটি উচ্চতর মেট্রিক মানের জন্য সম্ভাব্য দায়ী) এবং টিমকে সমস্যা সমাধানে আরও গভীরভাবে ফোকাস করতে সহায়তা করে৷
উপরন্তু, বিভিন্ন ফিল্টার সংজ্ঞায়িত করা যেতে পারে, যেমন পৃষ্ঠার ধরন, ডিভাইস, বা লোড স্টেট স্ট্রিমলাইন দৃশ্যকল্পের জন্য, এবং কিভাবে INP প্রভাবিত হচ্ছে সে সম্পর্কে আরও সঠিক ধারণা অর্জন করতে পারে।
প্রতিক্রিয়া বিকাশকারী সরঞ্জাম
প্রতিক্রিয়া বিকাশকারী সরঞ্জামগুলি ফোটোকাসার ডিবাগিং ক্ষমতাগুলিকে উন্নত করতে ব্যবহার করা হয়েছিল, যা একটি শক্তিশালী বৈশিষ্ট্য সরবরাহ করে যা আপনাকে দৃশ্যমানভাবে পুনরায় রেন্ডার করা উপাদানগুলিকে হাইলাইট করতে দেয়৷
প্রোফাইলার ট্যাবে নেভিগেট করে এই বৈশিষ্ট্যটি সক্ষম করা যেতে পারে। সেখান থেকে, উপরের বারের ডানদিকে কগহুইলে ক্লিক করুন, সাধারণ ট্যাবে যান এবং উপাদানগুলি রেন্ডার করার সময় হাইলাইট আপডেটগুলি চেক করুন। এটি সক্রিয় করার সাথে, উপাদানগুলি হাইলাইট করা হয় যখন তারা পুনরায় রেন্ডার করে, একটি গতিশীল ভিজ্যুয়াল উপস্থাপনা প্রদান করে।
একটি পুনরায় রেন্ডারের কারণ খুঁজে বের করা
একটি উপাদান যা পুনরায় রেন্ডার করা হয়েছে তা চিহ্নিত করা হলে, পরবর্তী প্রশ্নটি হল "কেন এটি ঘটেছে?" React DevTools ফ্লেম গ্রাফ ভিউতে একটি সহায়ক টুলটিপ দিয়ে এর উত্তর দেয়।
এই তথ্য অ্যাক্সেস করতে, একটি প্রোফাইলার সেশন রেকর্ড করুন। প্রোফাইলার আউটপুট বিশ্লেষণ করে, আপনি সহায়ক তথ্য পাবেন:
- উপরের-ডান কোণায়, প্রতিক্রিয়া কমিটের সংখ্যা প্রদর্শিত হয়।
- শিখা গ্রাফ দৃশ্যত উপাদান গাছের প্রতিনিধিত্ব করে, ধূসর ইঙ্গিতকারী উপাদানগুলির সাথে যা পুনরায় রেন্ডার হয়নি৷ প্রতিটি বার একটি মুহূর্ত উপস্থাপন করে যখন প্রতিক্রিয়া উপাদান ট্রি পরিবর্তিত হয়, এবং যখন একটি সংশ্লিষ্ট পরিবর্তন DOM-এ প্রতিশ্রুতিবদ্ধ হয়।
- শিখা গ্রাফের প্রতিটি উপাদানের উপর ঘোরাফেরা করলে কেন এই রেন্ডার হয়েছে? "উপশিরোনাম।
একটি কম্পোনেন্ট রিরেন্ডারের কারণ অন্তর্ভুক্ত হতে পারে:
- এই প্রথম কম্পোনেন্ট রেন্ডার করা হয়েছে
- প্রসঙ্গ বদলেছে
- হুক পরিবর্তন করা হয়েছে
- প্রপস পরিবর্তন করা হয়েছে
- রাজ্য বদলেছে
- মূল উপাদান রেন্ডার করা হয়েছে
রেন্ডারিং সময় খুঁজে বের করা
শিখা গ্রাফের রং অর্থপূর্ণ তথ্য প্রদান করে। নীলের বিভিন্ন শেডের মতো রং ইঙ্গিত দেয় যে একটি উপাদানের অন্যান্য উপাদানের তুলনায় তুলনামূলকভাবে কম রেন্ডারিং সময় প্রয়োজন। বিপরীতভাবে, কমলা এবং লালের মতো রঙগুলি বোঝায় যে একটি উপাদান আরও রেন্ডারিং সময় ব্যয় করে।
ফোটোকাসা দল কীভাবে সমস্যার সমাধান করেছে
অপ্রয়োজনীয় rerenders সরান
যখনই React-এর নতুন ডেটা দিয়ে UI আপডেট করার প্রয়োজন হয় তখনই রিরেন্ডার হয়। এটি সাধারণত একটি ব্যবহারকারীর ক্রিয়া, একটি API প্রতিক্রিয়া বা অন্যান্য গুরুত্বপূর্ণ ইভেন্ট থেকে আসে যার জন্য একটি ব্যবহারকারী ইন্টারফেস আপডেট প্রয়োজন। যেহেতু প্রতিটি রিরেন্ডার জাভাস্ক্রিপ্ট চালায়, সেগুলির মধ্যে অনেকগুলি একসাথে - বিশেষ করে একটি বড় কম্পোনেন্ট ট্রিতে - মূল থ্রেডটি ব্লক করতে পারে এবং পারফরম্যান্স সমস্যার কারণ হতে পারে।
দুটি ধরণের রিরেন্ডার রয়েছে:
- প্রয়োজনীয় রিরেন্ডার: যখন একটি উপাদানকে প্রকৃতপক্ষে আপডেট করতে হবে কারণ এটি নতুন ডেটার মালিক বা ব্যবহার করে।
- অপ্রয়োজনীয় রিরেন্ডার: যখন কোন উপাদান কোন অর্থপূর্ণ পরিবর্তন ছাড়াই আপডেট হয়, প্রায়ই অদক্ষ রাষ্ট্র ব্যবস্থাপনা বা অনুপযুক্ত প্রপ হ্যান্ডলিং এর কারণে।
কিছু অপ্রয়োজনীয় রিরেন্ডার সাধারণত বড় বিষয় নয়, কারণ প্রতিক্রিয়া যথেষ্ট দ্রুত যে ব্যবহারকারীরা সাধারণত লক্ষ্য করবেন না। যদি সেগুলি খুব ঘন ঘন হয়, তবে, বা একটি ভারী উপাদান গাছ জুড়ে, তারা ব্যবহারকারীর অভিজ্ঞতাকে আঘাত করতে পারে এবং পৃষ্ঠার INP-কে নেতিবাচকভাবে প্রভাবিত করতে পারে৷
এটি ছিল ফোটোকাসা দলের ক্ষেত্রে। তারা বুঝতে পেরেছিল যে ওয়েবসাইটটিতে অনেক অপ্রয়োজনীয় রিরেন্ডার রয়েছে। এই দুটি প্রধান পরিস্থিতিতে ঘটেছে:
- পৃষ্ঠা লোডের সময়: প্রধান থ্রেডে দীর্ঘ টাস্কের সংখ্যা বৃদ্ধি এবং প্রথম ইন্টারঅ্যাকশন বিলম্বিত করা, যা পৃষ্ঠার INP-কে নেতিবাচকভাবে প্রভাবিত করে।
- ব্যবহারকারীর মিথস্ক্রিয়া চলাকালীন: বেশিরভাগ মিথস্ক্রিয়াগুলির প্রক্রিয়াকরণের সময় বৃদ্ধি করা, যা INP-এরও ক্ষতি করে।
অনেক অপ্রয়োজনীয় রিরেন্ডার ফটোকাসা ওয়েবসাইটে অপ্টিমাইজ করা হয়েছে। সবচেয়ে বড় অপ্টিমাইজেশানগুলির মধ্যে একটি হল অনুসন্ধান পৃষ্ঠায়। পেজ লোডে তিনটি অপ্রয়োজনীয় রিরেন্ডার ছিল। একবার এইগুলি সরানো হলে, নিম্নলিখিত ফলাফলগুলি পর্যবেক্ষণ করা হয়েছিল:
- দীর্ঘ কাজের সংখ্যা কম (নিচের চিত্রটি দেখুন)
- কম মোট ব্লকিং সময় (চিত্র 14 এবং 15 তুলনা করুন)
রাজ্য colocation
রিঅ্যাক্ট স্টেটের অনুপযুক্ত বসানো একটি অ্যাপ্লিকেশনকে ধীর করে দিতে পারে এবং UI কে প্রতিক্রিয়াহীন বোধ করতে পারে। যখন একটি কম্পোনেন্টের অবস্থা পরিবর্তিত হয়, তখন তার চাইল্ড কম্পোনেন্টগুলি ডিফল্টরূপে রিরেন্ডার হবে যদি না একটি এস্কেপ হ্যাচ ব্যবহার করা হয় (উদাহরণস্বরূপ, মেমো)।
পূর্ববর্তী বিভাগে যেমন ব্যাখ্যা করা হয়েছে, রিরেন্ডারগুলি স্বাভাবিকভাবে খারাপ নয়, তবে একটি নির্দিষ্ট অবস্থার আপডেটের কারণে পুরো পৃষ্ঠাটিকে পুনরায় রেন্ডার করার ফলে ধীর মিথস্ক্রিয়া হতে পারে, যেহেতু রেন্ডারের পরে DOM আপডেটগুলি ঘটে।
উদাহরণস্বরূপ, অনুসন্ধান পৃষ্ঠায় একটি ডায়ালগ রয়েছে যা একটি বোতামে ক্লিক করলে সমস্ত ফিল্টার দেখায়।
এই ক্ষেত্রে ডায়ালগের খোলা অবস্থা নিয়ন্ত্রণকারী রাষ্ট্র অনুসন্ধান পৃষ্ঠায় স্থাপন করা হয়েছিল। যখন এই অবস্থাটি পরিবর্তিত হয় তখন পুরো পৃষ্ঠাটি একটি খারাপ INP তৈরি করে পুনরায় রেন্ডার করা হয়েছিল, বিশেষ করে ধীরগতির ডিভাইসগুলিতে যেমনটি দেখা যায় যখন DevTools-এ CPU থ্রটলিং ব্যবহার করা হয়েছিল:
পরিবর্তনের সূত্রপাতকারী উপাদানটির যতটা সম্ভব কাছাকাছি অবস্থা পরিবর্তন করা এই সমস্যার সমাধান করে। এই বিশেষ ক্ষেত্রে, স্টেট ফিল্টারগুলির বোতাম উপাদানে স্থাপন করা যেতে পারে তাই যখন স্টেট পরিবর্তিত হয়, শুধুমাত্র বোতামটি পুনরায় রেন্ডার করা হবে।
অপ্রয়োজনীয় রাজ্যগুলি সরান
রাজ্যে অপ্রয়োজনীয় বা সদৃশ তথ্য থাকা উচিত নয়। যদি তারা তা করে তবে এটি অপ্রয়োজনীয় রিরেন্ডারের দিকে নিয়ে যেতে পারে এবং সমস্যার কারণ হতে পারে।
উদাহরণস্বরূপ, Fotocasa ফিল্টার বারে, একটি প্রদত্ত অনুসন্ধানের জন্য প্রয়োগকৃত ফিল্টারের সংখ্যা প্রতিনিধিত্বকারী পাঠ্য রয়েছে:
প্রয়োগকৃত ফিল্টারের সংখ্যা অ্যাপ্লিকেশনের অবস্থা থেকে গণনা করা হয়। যাইহোক, এটি শুধুমাত্র সমগ্র কম্পোনেন্টের অপ্রয়োজনীয় রিরেন্ডারের ফলেই নয় বরং কিছু ক্ষেত্রে লেআউট শিফটের দিকে পরিচালিত করে যেহেতু এই উপাদানটি সার্ভার-সাইড রেন্ডার করা হয়েছে:
const [filtersCount, setFiltersCount] = useState(DEFAULT_COUNTER)
useEffect(() => {
const counter = filters
? Object.keys(filters)
?.reduce(reducerCounter, [])
?.filter((param) => searchParams?.[param]).length
: DEFAULT_COUNTER
setFiltersCount(counter)
}, [searchParams]);
এই সমস্যাটি সমাধান করার জন্য, রাষ্ট্র ব্যবহার না করে একটি ভেরিয়েবল ব্যবহার করে ফিল্টার অবজেক্ট থেকে মানটি নেওয়া হয়েছিল:
const counter = filters
? Object.keys(filters)
?.reduce(reducerCounter, [])
?.filter((param) => searchParams?.[param]).length
: DEFAULT_COUNTER;
ব্যয়বহুল রেন্ডার হ্রাস করুন
একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে যখন একটি মিথস্ক্রিয়া ঘটে, তখন এটি সাধারণত একটি রাষ্ট্র পরিবর্তনকে ট্রিগার করে। পূর্বে ব্যাখ্যা করা হয়েছে, যখন একটি উপাদানের অবস্থা পরিবর্তিত হয়, তখন উপাদানটি তার সমস্ত সন্তানের সাথে পুনরায় রেন্ডার করা হবে।
যদি এই উপাদানগুলির মধ্যে একটি রেন্ডার ফাংশন ধীর হয় তবে এটি পৃষ্ঠার INP-কে নেতিবাচকভাবে প্রভাবিত করবে কারণ সম্ভবত একটি দীর্ঘ টাস্ক তৈরি হবে এবং DOM আপডেট হতে আরও সময় নেবে৷
ফোটোকাসা দল যতটা সম্ভব উপাদানগুলির রেন্ডার ফাংশনের মধ্যে সময়-সাপেক্ষ গণনাগুলি কমিয়ে আনার চেষ্টা করেছিল। Chrome DevTools এবং React ডেভেলপার টুলগুলি ধীর রেন্ডারিং ক্রিয়াকলাপ সনাক্ত করতে বেশ কার্যকর ছিল৷
বিলম্ব কোড নির্বাহ
উপাদানগুলির রেন্ডার ফাংশন অপ্টিমাইজ করার পাশাপাশি, অন্যান্য ফাংশনগুলি যতটা সম্ভব দীর্ঘ কাজগুলিকে কম করার জন্য অপ্টিমাইজ করা হয়েছিল। যাইহোক, কিছু কাজ অপ্টিমাইজ করা যায়নি কারণ সেগুলি তৃতীয় পক্ষের কোডের উপর নির্ভর করে।
একটি উদাহরণ বিশ্লেষণ ছিল. এই ক্ষেত্রে, অ্যানালিটিক্স কোড কার্যকর করতে বিলম্ব করার এবং ব্যবহারকারীর ইন্টারঅ্যাকশন হওয়ার সময় DOM আপডেটগুলিকে অগ্রাধিকার দেওয়ার সিদ্ধান্ত নেওয়া হয়েছিল। এটি অর্জনের জন্য, Fotocasa টিম idlefy নামক একটি লাইব্রেরি ব্যবহার করেছে, যেটি নিশ্চিত করেছে যে ব্রাউজারটি অবিলম্বে বন্ধ হয়ে গেলেও বিশ্লেষণ কোডটি এখনও চলবে।
কর্মক্ষমতা সংস্কৃতি
পারফরম্যান্স কাজ একটি এককালীন প্রচেষ্টা নয়, এটি এমন কিছু যা অবশ্যই উত্পাদনে প্রকাশিত প্রতিটি বৈশিষ্ট্যের সাথে বিবেচনা করা উচিত। দলের প্রত্যেককে সারিবদ্ধ হতে হবে, অন্যথায় কোর ওয়েব ভাইটালগুলিতে রিগ্রেশন প্রায় অনিবার্য।
এর উপরে থাকার জন্য, Fotocasa টিম সক্রিয়ভাবে দলের মধ্যে জ্ঞান ভাগ করে নিয়েছে এবং ফোটোকাসার ডেটাডগ RUM ডেটার উপর ভিত্তি করে পারফরম্যান্সের সমস্যাগুলি সনাক্ত করার জন্য একটি স্পষ্ট কাঠামো স্থাপন করেছে, সেগুলি কীভাবে পুনরুত্পাদন করা যায় সহ। Core Web Vitals-এর জন্য সতর্কতাগুলি-বিশেষ করে INP-কে RUM সিস্টেমে সেট আপ করা হয়েছিল, সরাসরি স্ল্যাকে ফোটোকাসা দলকে অবহিত করার জন্য কনফিগার করা হয়েছিল৷ এই পদ্ধতিটি কর্মক্ষমতাকে মনের শীর্ষে রাখে এবং সমস্যাগুলি রিগ্রেশনে পরিণত হওয়ার আগে ধরতে সাহায্য করে।
ফলাফল
Fotocasa এ INP উন্নত করার জন্য প্রযুক্তিগত অপ্টিমাইজেশন এবং সাংস্কৃতিক পরিবর্তনের সমন্বয় প্রয়োজন। অপ্রয়োজনীয় রি-রেন্ডার বাদ দিয়ে, স্টেট প্লেসমেন্ট অপ্টিমাইজ করে, ব্যয়বহুল রেন্ডার কমিয়ে, এবং অ-গুরুত্বপূর্ণ কোড স্থগিত করে, Fotocasa টিম সফলভাবে সমস্ত ডেস্কটপ পৃষ্ঠাগুলিকে "উন্নতির প্রয়োজন" থেকে "ভাল"-এ স্থানান্তরিত করেছে এবং প্রায় সমস্ত "দরিদ্র" এবং "উন্নতির প্রয়োজন" পৃষ্ঠাগুলিতে আপগ্রেড করে উল্লেখযোগ্যভাবে মোবাইল পৃষ্ঠাগুলিকে উল্লেখযোগ্যভাবে উন্নত করেছে৷
এই পরিবর্তনগুলি Fotocasa এর সামগ্রিক ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করেছে এবং অন্যান্য উদ্যোগের সাথে সাথে যোগাযোগ এবং ফোন লিড বিজ্ঞাপনে 27% বৃদ্ধি করেছে, যা সরাসরি কোম্পানির মূল ব্যবসায়িক মেট্রিক্সকে শক্তিশালী করেছে।
Datadog-এর সাথে রিয়েল-টাইম মনিটরিং Fotocasa টিমকে INP উন্নতিগুলি যাচাই করতে, দ্রুত অসঙ্গতিগুলি সনাক্ত করতে এবং রিগ্রেশন প্রতিরোধ করতে দেয়৷ এই কৃতিত্বের বাইরেও, ফোটোকাসা তাদের উন্নয়ন সংস্কৃতিতে ওয়েব পারফরম্যান্সকে এম্বেড করতেও পরিচালনা করেছে, এটি নিশ্চিত করে যে INP এবং কোর ওয়েব ভাইটাল প্রতিটি রিলিজে অগ্রাধিকার পাবে।