কিভাবে Zalando Lighthouse CI এর সাথে পারফরম্যান্স ফিডব্যাক সময় 1 দিন থেকে 15 মিনিটে কমিয়েছে

Zalando-এর ওয়েব দলটি খুঁজে পেয়েছে যে Lighthouse CI একত্রিত করা কর্মক্ষমতার জন্য একটি সক্রিয় পদ্ধতিকে সক্ষম করেছে, স্বয়ংক্রিয় স্থিতি চেক কর্মক্ষমতা রিগ্রেশন প্রতিরোধ করতে বর্তমান প্রতিশ্রুতিকে প্রধান শাখার সাথে তুলনা করতে সক্ষম।

Jan Brockmeyer

Jeremy Colin

35 মিলিয়নেরও বেশি সক্রিয় গ্রাহকদের সাথে, Zalando হল ইউরোপের শীর্ষস্থানীয় অনলাইন ফ্যাশন প্ল্যাটফর্ম। এই পোস্টে আমরা ব্যাখ্যা করব কেন আমরা Lighthouse CI ব্যবহার করতে শুরু করেছি, বাস্তবায়নের সহজতা এবং আমাদের দলের সুবিধাগুলি।

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

কোম্পানি বাই-ইন সবসময় পারফরম্যান্সে অনুবাদ করে না

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

Zalando এ ওয়েব

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

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

উদ্ধারের জন্য ওয়েব ভাইটাল এবং বাতিঘর

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

প্রকাশের আগে কর্মক্ষমতা উন্নত করার জন্য, আমাদের একটি সঠিক ল্যাব পরিবেশ তৈরি করতে হবে। এটি আমাদের ফিল্ড ডেটার 90 তম শতাংশের প্রতিনিধিত্বকারী পরীক্ষার শর্তগুলি ছাড়াও পুনরুত্পাদনযোগ্য পরিমাপ সরবরাহ করে। এখন, পারফরম্যান্সের উন্নতিতে কাজ করা প্রকৌশলীরা জানতেন যে সবচেয়ে বড় প্রভাব ফেলতে তাদের প্রচেষ্টাকে কোথায় ফোকাস করতে হবে। আমরা ইতিমধ্যেই স্থানীয়ভাবে লাইটহাউস অডিট রিপোর্ট ব্যবহার করছিলাম। তাই আমাদের প্রথম পুনরাবৃত্তি হল Lighthouse নোড মডিউলের উপর ভিত্তি করে একটি পরিষেবা তৈরি করা, যেখানে পরিবর্তনগুলি আমাদের স্টেজিং পরিবেশ থেকে পরীক্ষা করা যেতে পারে। এটি আমাদের প্রায় এক ঘন্টার একটি নির্ভরযোগ্য পারফরম্যান্স ফিডব্যাক লুপ দিয়েছে, যা আমাদের পারফরম্যান্সকে সমানভাবে আনতে এবং আমাদের মুক্তি বাঁচাতে সক্ষম করেছে!

পুল অনুরোধে ডেভেলপারদের কর্মক্ষমতা প্রতিক্রিয়া প্রদান

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

আমাদের ফ্রেমওয়ার্ক ইতিমধ্যেই ডেভেলপারদের কিছু পারফরম্যান্স ফিডব্যাক প্রদান করছিল— কম্পোনেন্ট বান্ডেলের আকার প্রতিটি কমিটের থ্রেশহোল্ড মানের সাথে তুলনা করা হচ্ছে। এখন আমরা GitHub স্থিতি পরীক্ষা হিসাবে Lighthouse মেট্রিক্স রিপোর্ট করতে সক্ষম। এগুলোর কারণে CI পাইপলাইন ব্যর্থ হয় যদি তারা পারফরম্যান্স থ্রেশহোল্ডগুলি পূরণ না করে, নিচের ছবিতে দেখানো বিশদ লাইটহাউস রিপোর্টের লিঙ্ক সহ।

কর্মক্ষমতা কভারেজ প্রসারিত

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

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