রিঅ্যাক্ট এসপিএ পারফরম্যান্স অপ্টিমাইজেশানের একটি বাস্তব-বিশ্বের কেস স্টাডি।
ওয়েবসাইট কর্মক্ষমতা শুধু লোড সময় সম্পর্কে নয়. ব্যবহারকারীদের একটি দ্রুত এবং প্রতিক্রিয়াশীল অভিজ্ঞতা প্রদান করা গুরুত্বপূর্ণ, বিশেষ করে উৎপাদনশীলতা ডেস্কটপ অ্যাপগুলির জন্য যা লোকেরা প্রতিদিন ব্যবহার করে। Recruit Technologies- এর ইঞ্জিনিয়ারিং টিম তাদের একটি ওয়েব অ্যাপ, AirSHIFT , আরও ভালো ব্যবহারকারীর ইনপুট পারফরম্যান্সের জন্য উন্নত করার জন্য একটি রিফ্যাক্টরিং প্রকল্পের মধ্য দিয়ে গেছে। তারা এটা কিভাবে এখানে.
ধীর প্রতিক্রিয়া, কম উত্পাদনশীলতা
AirSHIFT হল একটি ডেস্কটপ ওয়েব অ্যাপ্লিকেশন যা স্টোরের মালিকদের, যেমন রেস্তোরাঁ এবং ক্যাফে, তাদের কর্মীদের শিফটের কাজ পরিচালনা করতে সাহায্য করে৷ প্রতিক্রিয়া সহ নির্মিত, একক পৃষ্ঠার অ্যাপ্লিকেশনটি দিন, সপ্তাহ, মাস এবং আরও অনেক কিছু দ্বারা সংগঠিত শিফ্ট সময়সূচীর বিভিন্ন গ্রিড টেবিল সহ সমৃদ্ধ ক্লায়েন্ট বৈশিষ্ট্যগুলি সরবরাহ করে।
যেহেতু রিক্রুট টেকনোলজিস ইঞ্জিনিয়ারিং টিম AirSHIFT অ্যাপে নতুন বৈশিষ্ট্য যুক্ত করেছে, তারা ধীর কর্মক্ষমতা সম্পর্কে আরও প্রতিক্রিয়া দেখতে শুরু করেছে। AirSHIFT এর ইঞ্জিনিয়ারিং ম্যানেজার, Yosuke Furukawa, বলেছেন:
একটি ব্যবহারকারীর গবেষণা গবেষণায়, আমরা হতবাক হয়ে গিয়েছিলাম যখন দোকানের একজন মালিক বলেছিলেন যে তিনি একটি বোতামে ক্লিক করার পরে কফি তৈরির জন্য তার আসন ছেড়ে দেবেন, শুধুমাত্র শিফট টেবিলটি লোড হওয়ার অপেক্ষায় সময় কাটাতে।
গবেষণার মধ্য দিয়ে যাওয়ার পরে, প্রকৌশল দল বুঝতে পেরেছিল যে তাদের অনেক ব্যবহারকারী 10 বছর আগে থেকে 1 GHz সেলেরন এম ল্যাপটপের মতো কম স্পেক কম্পিউটারে বিশাল শিফট টেবিল লোড করার চেষ্টা করছে।
AirSHIFT অ্যাপটি ব্যয়বহুল স্ক্রিপ্টগুলির সাথে মূল থ্রেডটিকে ব্লক করছিল, কিন্তু প্রকৌশল দল বুঝতে পারেনি যে স্ক্রিপ্টগুলি কতটা ব্যয়বহুল ছিল কারণ তারা দ্রুত ওয়াই-ফাই সংযোগ সহ সমৃদ্ধ বিশেষ কম্পিউটারগুলিতে বিকাশ এবং পরীক্ষা করছে৷
CPU এবং নেটওয়ার্ক থ্রোটলিং সক্ষম করে Chrome DevTools-এ তাদের পারফরম্যান্স প্রোফাইল করার পর, এটা স্পষ্ট হয়ে গেল যে পারফরম্যান্স অপ্টিমাইজেশন প্রয়োজন। AirSHIFT এই সমস্যাটি মোকাবেলা করার জন্য একটি টাস্ক ফোর্স গঠন করেছে। এখানে 5টি জিনিস রয়েছে যা তারা তাদের অ্যাপকে ব্যবহারকারীর ইনপুটের প্রতি আরও প্রতিক্রিয়াশীল করতে ফোকাস করেছে৷
1. বড় টেবিল ভার্চুয়ালাইজ করুন
শিফট টেবিল প্রদর্শনের জন্য একাধিক ব্যয়বহুল পদক্ষেপের প্রয়োজন: ভার্চুয়াল DOM তৈরি করা এবং স্টাফ সদস্যদের সংখ্যা এবং টাইম স্লটের অনুপাতে স্ক্রীনে রেন্ডার করা। উদাহরণস্বরূপ, যদি একটি রেস্তোরাঁর 50 জন কর্মরত সদস্য থাকে এবং তাদের মাসিক শিফটের সময়সূচী পরীক্ষা করতে চায়, তাহলে এটি 50 (সদস্যদের) 30 (দিন) দ্বারা গুণিত হবে যা রেন্ডারের জন্য 1,500টি সেল উপাদান তৈরি করবে। এটি একটি খুব ব্যয়বহুল অপারেশন, বিশেষত কম বিশেষ ডিভাইসের জন্য। বাস্তবে, জিনিসগুলি আরও খারাপ ছিল। গবেষণা থেকে তারা শিখেছে যে দোকানগুলি 200 জন স্টাফ সদস্যকে পরিচালনা করে, একটি একক মাসিক টেবিলে প্রায় 6,000 সেল উপাদান প্রয়োজন।
এই অপারেশনের খরচ কমাতে, AirSHIFT শিফট টেবিলটিকে ভার্চুয়ালাইজ করেছে। অ্যাপটি এখন শুধুমাত্র ভিউপোর্টের মধ্যে থাকা উপাদানগুলিকে মাউন্ট করে এবং অফ-স্ক্রিন উপাদানগুলিকে আনমাউন্ট করে৷
এই ক্ষেত্রে, AirSHIFT রিঅ্যাক্ট-ভার্চুয়ালাইজড ব্যবহার করেছে কারণ জটিল দ্বিমাত্রিক গ্রিড টেবিল সক্ষম করার প্রয়োজনীয়তা ছিল। তারা ভবিষ্যতে লাইটওয়েট রিঅ্যাক্ট-উইন্ডো ব্যবহার করার জন্য বাস্তবায়ন রূপান্তর করার উপায়গুলিও অন্বেষণ করছে।
ফলাফল
একা টেবিল ভার্চুয়ালাইজ করা স্ক্রিপ্টিংয়ের সময় 6 সেকেন্ড কমিয়েছে (4x CPU স্লোডাউন + ফাস্ট 3G থ্রটলড ম্যাকবুক প্রো পরিবেশে)। রিফ্যাক্টরিং প্রকল্পে এটি ছিল সবচেয়ে প্রভাবশালী কর্মক্ষমতা উন্নতি।
2. User Timeing API দিয়ে অডিট করুন
এরপরে, AirSHIFT টিম ব্যবহারকারীর ইনপুটে চলা স্ক্রিপ্টগুলিকে রিফ্যাক্টর করে। Chrome DevTools- এর ফ্লেম চার্ট মূল থ্রেডে আসলে কী ঘটছে তা বিশ্লেষণ করা সম্ভব করে তোলে। কিন্তু AirSHIFT টিম রিঅ্যাক্টের লাইফ সাইকেলের উপর ভিত্তি করে অ্যাপ্লিকেশান অ্যাক্টিভিটি বিশ্লেষণ করা সহজ বলে মনে করেছে।
React 16 ব্যবহারকারীর টাইমিং API এর মাধ্যমে এর পারফরম্যান্স ট্রেস প্রদান করে, যা আপনি Chrome DevTools-এর টাইমিং বিভাগ থেকে কল্পনা করতে পারেন। এয়ারশিফট রিঅ্যাক্ট লাইফসাইকেল ইভেন্টগুলিতে চলমান অপ্রয়োজনীয় যুক্তি খুঁজে পেতে সময় বিভাগ ব্যবহার করেছে।
ফলাফল
AirSHIFT টিম আবিষ্কার করেছে যে প্রতিটি রুট নেভিগেশনের ঠিক আগে একটি অপ্রয়োজনীয় React Tree Reconciliation ঘটছে। এর মানে হল যে প্রতিক্রিয়া নেভিগেশনের আগে অপ্রয়োজনীয়ভাবে শিফট টেবিল আপডেট করছে। একটি অপ্রয়োজনীয় Redux স্টেট আপডেট এই সমস্যার কারণ ছিল। এটি ঠিক করা প্রায় 750 ms স্ক্রিপ্টিং সময় সাশ্রয় করেছে৷ AirSHIFT অন্যান্য মাইক্রো অপ্টিমাইজেশান করেছে যা শেষ পর্যন্ত স্ক্রিপ্টিং টাইমে 1 সেকেন্ডের মোট হ্রাস ঘটায়।
3. অলস লোড উপাদান এবং ওয়েব কর্মীদের ব্যয়বহুল যুক্তি সরানো
AirSHIFT এর একটি অন্তর্নির্মিত চ্যাট অ্যাপ্লিকেশন রয়েছে। অনেক দোকানের মালিক শিফট টেবিলের দিকে তাকিয়ে চ্যাটের মাধ্যমে তাদের স্টাফ সদস্যদের সাথে যোগাযোগ করেন, যার অর্থ হল টেবিলটি লোড হওয়ার সময় একজন ব্যবহারকারী একটি বার্তা টাইপ করছেন। যদি মূল থ্রেডটি টেবিলে রেন্ডারিং করা স্ক্রিপ্টগুলির সাথে দখল করা হয়, তাহলে ব্যবহারকারীর ইনপুট ঝাঁকুনি হতে পারে।
এই অভিজ্ঞতা উন্নত করার জন্য, AirSHIFT এখন বাস্তব উপাদানগুলি অলসভাবে লোড করার সময় টেবিলের বিষয়বস্তুর জন্য স্থানধারক দেখানোর জন্য React.lazy এবং Suspense ব্যবহার করে।
AirSHIFT টিম অলসভাবে লোড করা উপাদানগুলির মধ্যে কিছু ব্যয়বহুল ব্যবসায়িক যুক্তিও ওয়েব কর্মীদের কাছে স্থানান্তরিত করেছে। এটি মূল থ্রেডটি মুক্ত করে ব্যবহারকারীর ইনপুট জ্যাঙ্ক সমস্যার সমাধান করেছে যাতে এটি ব্যবহারকারীর ইনপুটের প্রতিক্রিয়াতে ফোকাস করতে পারে।
সাধারণত ডেভেলপাররা শ্রমিকদের ব্যবহারে জটিলতার সম্মুখীন হয় কিন্তু এবার Comlink তাদের জন্য ভারী উত্তোলন করেছে। নীচে ছদ্ম কোড দেওয়া হল কিভাবে AirSHIFT কর্মী তাদের সবচেয়ে ব্যয়বহুল অপারেশনগুলির একটিকে তৈরি করেছিল: মোট শ্রম খরচ গণনা করা।
App.js-এ, লোড করার সময় ফলব্যাক কন্টেন্ট দেখানোর জন্য React.lazy এবং Suspense ব্যবহার করুন
/** App.js */
import React, { lazy, Suspense } from 'react'
// Lazily loading the Cost component with React.lazy
const Hello = lazy(() => import('./Cost'))
const Loading = () => (
<div>Some fallback content to show while loading</div>
)
// Showing the fallback content while loading the Cost component by Suspense
export default function App({ userInfo }) {
return (
<div>
<Suspense fallback={<Loading />}>
<Cost />
</Suspense>
</div>
)
}
কস্ট কম্পোনেন্টে, ক্যালক লজিক চালানোর জন্য comlink ব্যবহার করুন
/** Cost.js */
import React from 'react';
import { proxy } from 'comlink';
// import the workerlized calc function with comlink
const WorkerlizedCostCalc = proxy(new Worker('./WorkerlizedCostCalc.js'));
export default async function Cost({ userInfo }) {
// execute the calculation in the worker
const instance = await new WorkerlizedCostCalc();
const cost = await instance.calc(userInfo);
return <p>{cost}</p>;
}
গণনার যুক্তি প্রয়োগ করুন যা কর্মীর মধ্যে চলে এবং এটি কমলিংক দিয়ে প্রকাশ করুন
// WorkerlizedCostCalc.js
import { expose } from 'comlink'
import { someExpensiveCalculation } from './CostCalc.js'
// Expose the new workerlized calc function with comlink
expose({
calc(userInfo) {
// run existing (expensive) function in the worker
return someExpensiveCalculation(userInfo);
}
}, self);
ফলাফল
সীমিত পরিমাণ যুক্তি থাকা সত্ত্বেও তারা ট্রায়াল হিসাবে কাজ করেছে, AirSHIFT তাদের জাভাস্ক্রিপ্টের প্রায় 100 ms মূল থ্রেড থেকে কর্মী থ্রেডে স্থানান্তর করেছে (4x CPU থ্রটলিং সহ সিমুলেটেড)।
AirSHIFT বর্তমানে অন্বেষণ করছে যে তারা অলসভাবে অন্যান্য উপাদান লোড করতে পারে এবং জ্যাঙ্ককে আরও কমাতে ওয়েব কর্মীদের কাছে আরও যুক্তি অফলোড করতে পারে কিনা।
4. একটি কর্মক্ষমতা বাজেট সেট করা
এই সমস্ত অপ্টিমাইজেশানগুলি প্রয়োগ করার পরে, অ্যাপটি সময়ের সাথে পারফরম্যান্স বজায় রাখে তা নিশ্চিত করা গুরুত্বপূর্ণ ছিল। AirSHIFT এখন বর্তমান জাভাস্ক্রিপ্ট এবং CSS ফাইলের আকার অতিক্রম না করতে bundlesize ব্যবহার করে। এই মৌলিক বাজেটগুলি সেট করা ছাড়াও, তারা একটি ড্যাশবোর্ড তৈরি করেছে যাতে শিফ্ট টেবিল লোডিং সময়ের বিভিন্ন শতাংশ দেখানো হয় যাতে অ-আদর্শ পরিস্থিতিতেও অ্যাপ্লিকেশনটি কার্যকরী কিনা তা পরীক্ষা করে।
- প্রতিটি Redux ইভেন্টের জন্য স্ক্রিপ্ট সমাপ্তির সময় এখন পরিমাপ করা হয়
- ইলাস্টিকসার্চে পারফরম্যান্স ডেটা সংগ্রহ করা হয়
- প্রতিটি ইভেন্টের 10 তম, 25 তম, 50 তম এবং 75 তম পার্সেন্টাইল পারফরম্যান্স কিবানা দিয়ে কল্পনা করা হয়েছে
AirSHIFT এখন 75 তম পার্সেন্টাইল ব্যবহারকারীদের জন্য এটি 3 সেকেন্ডের মধ্যে সম্পূর্ণ হয়েছে তা নিশ্চিত করতে শিফট টেবিল লোডিং ইভেন্ট পর্যবেক্ষণ করছে। এটি এখনকার জন্য একটি অপ্রয়োগকৃত বাজেট কিন্তু তারা যখন তাদের বাজেট অতিক্রম করে তখন তারা ইলাস্টিকসার্চের মাধ্যমে স্বয়ংক্রিয়-বিজ্ঞপ্তি বিবেচনা করছে।
ফলাফল
উপরের গ্রাফ থেকে, আপনি বলতে পারেন যে AirSHIFT এখন 75 তম পার্সেন্টাইল ব্যবহারকারীদের জন্য 3 সেকেন্ডের বাজেটে আঘাত করছে এবং 25 তম পার্সেন্টাইল ব্যবহারকারীদের জন্য এক সেকেন্ডের মধ্যে শিফট টেবিল লোড করছে। বিভিন্ন শর্ত এবং ডিভাইস থেকে RUM পারফরম্যান্স ডেটা ক্যাপচার করে, AirSHIFT এখন পরীক্ষা করতে পারে যে একটি নতুন বৈশিষ্ট্য প্রকাশ আসলেই অ্যাপ্লিকেশনটির কর্মক্ষমতা প্রভাবিত করছে কিনা।
5. পারফরম্যান্স হ্যাকাথন
যদিও এই সমস্ত পারফরম্যান্স অপ্টিমাইজেশানের প্রচেষ্টাগুলি গুরুত্বপূর্ণ এবং প্রভাবশালী ছিল, তবুও অ-কার্যকরী উন্নয়নকে অগ্রাধিকার দেওয়ার জন্য ইঞ্জিনিয়ারিং এবং ব্যবসায়িক দলগুলি পাওয়া সবসময় সহজ নয়। চ্যালেঞ্জের অংশ হল এই কর্মক্ষমতা অপ্টিমাইজেশনের কিছু পরিকল্পনা করা যাবে না। তাদের পরীক্ষা-নিরীক্ষা এবং একটি ট্রায়াল-এন্ড-এরর মানসিকতা প্রয়োজন।
এয়ারশিফ্ট এখন অভ্যন্তরীণ 1-দিনের পারফরম্যান্স হ্যাকাথন পরিচালনা করছে যাতে ইঞ্জিনিয়ারদের শুধুমাত্র পারফরম্যান্স সম্পর্কিত কাজে ফোকাস করা যায়। এই হ্যাকাথনগুলিতে তারা সমস্ত সীমাবদ্ধতা দূর করে এবং ইঞ্জিনিয়ারদের সৃজনশীলতাকে সম্মান করে, যার অর্থ গতিতে অবদান রাখে এমন যে কোনও বাস্তবায়ন বিবেচনার যোগ্য। হ্যাকাথনকে ত্বরান্বিত করতে, AirSHIFT গ্রুপটিকে ছোট দলে বিভক্ত করে এবং প্রতিটি দল কে সবচেয়ে বড় লাইটহাউস পারফরম্যান্স স্কোর উন্নতি করতে পারে তা দেখার জন্য প্রতিযোগিতা করে। দলগুলো খুবই প্রতিদ্বন্দ্বিতাপূর্ণ! 🔥
ফলাফল
হ্যাকাথন পদ্ধতি তাদের জন্য ভাল কাজ করছে।
- হ্যাকাথন চলাকালীন একাধিক পদ্ধতির চেষ্টা করে এবং লাইটহাউসের সাথে প্রতিটি পরিমাপ করে কার্যক্ষমতার বাধাগুলি সহজেই সনাক্ত করা যেতে পারে।
- হ্যাকাথনের পরে, টিমকে বোঝানো খুব সহজ যে তারা প্রোডাকশন রিলিজের জন্য কোন অপ্টিমাইজেশানকে অগ্রাধিকার দেবে।
- এটি গতির গুরুত্বকে সমর্থন করার একটি কার্যকর উপায়। প্রতিটি অংশগ্রহণকারী বুঝতে পারে আপনি কীভাবে কোড করেন এবং কীভাবে এটি কার্যকারিতার ফলাফল দেয় তার মধ্যে পারস্পরিক সম্পর্ক।
একটি ভাল পার্শ্ব প্রতিক্রিয়া হল যে Recruit-এর মধ্যে অন্যান্য অনেক ইঞ্জিনিয়ারিং টিম এই হ্যান্ডস-অন পদ্ধতিতে আগ্রহী হয়েছিল এবং AirSHIFT টিম এখন কোম্পানির মধ্যে একাধিক গতির হ্যাকাথনকে সুবিধা দিচ্ছে।
সারসংক্ষেপ
এই অপ্টিমাইজেশানগুলিতে কাজ করা AirSHIFT এর পক্ষে এটি অবশ্যই সবচেয়ে সহজ যাত্রা ছিল না তবে এটি অবশ্যই অর্থ প্রদান করেছে। এখন AirSHIFT 1.5 সেকেন্ডের মধ্যে শিফট টেবিল লোড করছে যা প্রজেক্টের আগে তাদের কর্মক্ষমতা থেকে 6x উন্নতি।
কর্মক্ষমতা অপ্টিমাইজেশন চালু হওয়ার পরে, একজন ব্যবহারকারী বলেছেন:
শিফট টেবিল লোড দ্রুত করার জন্য আপনাকে অনেক ধন্যবাদ. শিফট কাজের ব্যবস্থা করা এখন অনেক বেশি দক্ষ।