একটি ওয়েব পারফরম্যান্স ড্যাশবোর্ড তৈরি করা এবং ব্যবসায়িক সাফল্য অর্জনের জন্য জাভাস্ক্রিপ্ট, সংস্থান এবং হোমপেজ অপ্টিমাইজ করা।
টোকোপিডিয়া ইন্দোনেশিয়ার অন্যতম বড় ই-কমার্স কোম্পানি। 2.7M+ দেশব্যাপী বণিক নেটওয়ার্ক, 18M+ পণ্য তালিকা এবং 50M+ মাসিক দর্শকদের সাথে, ওয়েব টিম জানত যে ওয়েব পারফরম্যান্সে বিনিয়োগ অপরিহার্য। কর্মক্ষমতা-প্রথম সংস্কৃতি গড়ে তোলার মাধ্যমে, তারা ক্লিক-থ্রু রেট (CTR) 35% বৃদ্ধি এবং রূপান্তর (CVR) 8% বৃদ্ধি অর্জন করেছে।
৩৫ %
CTR বৃদ্ধি
৮ %
সিভিআর বৃদ্ধি
4 সেকেন্ড
টিটিআই-এর উন্নতি
সুযোগ তুলে ধরা
ওয়েব টিম ব্যবহারকারীর অভিজ্ঞতা এবং ব্যস্ততা উন্নত করতে ওয়েব পারফরম্যান্সে বিনিয়োগের গুরুত্ব সম্পর্কে তাদের নেতৃত্ব দলের সাথে কথা বলেছে এবং উন্নত নিদর্শন এবং API ব্যবহার করে কর্মক্ষমতার প্রভাবও দেখিয়েছে।
তারা যে পদ্ধতি ব্যবহার করেছে
জাভাস্ক্রিপ্ট এবং রিসোর্স অপ্টিমাইজেশান
রেন্ডার-ব্লকিং বা দীর্ঘমেয়াদী জাভাস্ক্রিপ্ট কর্মক্ষমতা সমস্যার একটি সাধারণ কারণ। দলটি এটি কমানোর জন্য বেশ কয়েকটি পদক্ষেপ নিয়েছে:
- সমালোচনামূলক রেন্ডারিং পাথের জন্য অপ্টিমাইজ করতে তৃতীয় পক্ষের স্ক্রিপ্টগুলি বেছে বেছে লোড করতে একটি স্ক্রিপ্ট কন্ট্রোলার লাইব্রেরি তৈরি করুন৷
- ভারী লাইব্রেরিগুলিকে হালকা দিয়ে প্রতিস্থাপিত করা হয়েছে৷
- কোড স্প্লিটিং প্রয়োগ করা হয়েছে এবং ভাঁজের উপরের কন্টেন্টের জন্য অপ্টিমাইজ করা হয়েছে।
- বাস্তবায়িত অভিযোজিত লোডিং , যেমন শুধুমাত্র দ্রুত নেটওয়ার্কে ডিভাইসের জন্য উচ্চ-মানের ছবি লোড করা এবং ধীর নেটওয়ার্কে ডিভাইসের জন্য নিম্ন-মানের ছবি ব্যবহার করা।
- অলস-লোড করা নীচে-ভাঁজ চিত্রগুলি।
- অ-গুরুত্বপূর্ণ জাভাস্ক্রিপ্টের বিলম্বিত লোডিং।
হোমপেজ অপ্টিমাইজেশান
একটি দ্রুত ওয়েবসাইট অভিজ্ঞতা নিশ্চিত করে প্রথমবারের দর্শকদের জন্য হোমপেজের একটি লাইট সংস্করণ তৈরি করতে দলটি Svelte ব্যবহার করেছে। এই সংস্করণটি পটভূমিতে নন-লাইট সম্পদগুলিকে ক্যাশে করার জন্য একজন পরিষেবা কর্মীকেও ব্যবহার করেছে৷
কর্মক্ষমতা বাজেটিং এবং পর্যবেক্ষণ
দলটি ওয়েব পৃষ্ঠাগুলির গুণমান উন্নত করতে লাইটহাউস এবং অন্যান্য সরঞ্জামগুলি ব্যবহার করে একটি কর্মক্ষমতা পর্যবেক্ষণ ড্যাশবোর্ড তৈরি করেছে:
- নেটওয়ার্ক গুণমান, অবকাঠামো পর্যবেক্ষণ, ফ্রন্টএন্ড কর্মক্ষমতা, এবং সার্ভার কর্মক্ষমতা পরিমাপ করে।
- ক্ষেত্র এবং ল্যাব মেট্রিক্স নিরীক্ষণের জন্য ওয়েব প্ল্যাটফর্ম API (যেমন রিসোর্স টাইমিং API এবং
Server-Timingহেডার), PageSpeed Insights (PSI) API , এবং Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদন ডেটার সংমিশ্রণ ব্যবহার করে। - ইমেজ অপ্টিমাইজেশান সুযোগ সনাক্ত করতে সাহায্য করতে Lighthouse থেকে ছবি বিশ্লেষণ করে।
- ক্রমাগত ইন্টিগ্রেশন (CI) চলাকালীন একটি বান্ডিল-আকারের বাজেট প্রয়োগ করে। বান্ডিলের আকার বাজেটের বেশি হলে CI রান ব্যর্থ হয়।
একটি ই-কমার্স ব্যবসা হওয়ায়, ব্যবহারকারী অধিগ্রহণ আমাদের সাফল্যের কেন্দ্রবিন্দু। আমরা ওয়েবের গুরুত্ব স্বীকার করি এবং এইভাবে আমরা আমাদের ব্যবহারকারীদের সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে এমন সমস্ত সরঞ্জাম এবং বৈশিষ্ট্যগুলিতে বিনিয়োগ করার বিষয়ে উত্সাহী।
ডেন্ডি সুনারদি, ইঞ্জিনিয়ারিং ম্যানেজার, ওয়েব প্ল্যাটফর্ম, টোকোপিডিয়া
ভারত এবং দক্ষিণ-পূর্ব এশিয়া থেকে আরও সাফল্যের গল্পের জন্য ওয়েব কেস স্টাডিজ পৃষ্ঠায় স্কেল দেখুন।