কিভাবে রেনল্ট সবচেয়ে বড় কন্টেন্টফুল পেইন্ট পরিমাপ ও অপ্টিমাইজ করে তার বাউন্স এবং রূপান্তর হার উন্নত করেছে

দলটি তার ল্যান্ডিং পৃষ্ঠাগুলিতে 10 মিলিয়ন ভিজিট থেকে ডেটা বিশ্লেষণ করেছে এবং সবচেয়ে বড় সামগ্রীপূর্ণ পেইন্ট এবং রূপান্তর হারের মধ্যে একটি শক্তিশালী সম্পর্ক খুঁজে পেয়েছে।

Antoine Bisch

Cédric Bazureau

Thierry Coustillac

Groupe Renault হল একটি ফরাসি বহুজাতিক অটোমোবাইল প্রস্তুতকারক যার উপস্থিতি 130 টিরও বেশি দেশে। রেনল্টের মতো একটি স্বয়ংচালিত গোষ্ঠীর জন্য, পারফরম্যান্ট ব্র্যান্ড সাইটগুলি আরও বেশি ব্যবহারকারীর ব্যস্ততা এবং রূপান্তরগুলিকে আরও ব্যবসার অর্থ দেয়৷ এর সমস্ত ব্র্যান্ড সাইটগুলি স্থানীয় সাইটগুলির জন্য সামগ্রী এবং বৈশিষ্ট্যগুলির নমনীয়তা বজায় রেখে স্কেলে সেরা ব্যবহারকারীর অভিজ্ঞতা প্রদানের লক্ষ্য রাখে। এই প্রেক্ষাপটে, কর্মক্ষমতা নিরীক্ষণ গ্রাহক অভিজ্ঞতা দলের জন্য একটি মূল অংশ যা বিশ্বব্যাপী প্ল্যাটফর্মের বিকাশ এবং রক্ষণাবেক্ষণের দায়িত্বে রয়েছে।

Core Web Vitals-এর ব্যবসায়িক প্রভাব পরিমাপ করা

Google Analytics-এ পরিমাপ

পঞ্চান্ন-এর সাথে কাজ করে, এর গ্লোবাল ডেটা পার্টনার, Renault ওয়েব-ভাইটাল লাইব্রেরি সেট আপ করে, যা প্রকৃত ব্যবহারকারীদের কাছ থেকে Google Analytics-এ সমস্ত ওয়েব ভাইটাল মেট্রিক্স পাঠানোর অনুমতি দেয় যাতে তারা Chrome দ্বারা পরিমাপ করা হয় এবং রিপোর্ট করা হয় তা সঠিকভাবে মেলে। অন্যান্য Google টুল।

নিম্নলিখিত বিশ্লেষণটি ডিসেম্বর 2020 এবং মার্চ 2021 এর মধ্যে চার মাসের মধ্যে এই টুলগুলি ব্যবহার করে ক্যাপচার করা একটি ডেটাসেট দেখায়।

অপ্টিমাইজ করা এলসিপি ব্যবহারকারীর ব্যস্ততা এবং ব্যবসায়িক মেট্রিক্সের সাথে দৃঢ়ভাবে সম্পর্কযুক্ত

দলগুলি একটি নিম্ন বৃহৎ কন্টেন্টফুল পেইন্ট (LCP) এবং অনুকূল বাউন্স রেট এবং রূপান্তর হারের মধ্যে একটি বিশেষভাবে শক্তিশালী সম্পর্ক চিহ্নিত করেছে, যা নীচের ভিজ্যুয়ালাইজেশনে দেখানো হয়েছে।

ডেটাসেটটি চার মাসে 33টি দেশে 10 মিলিয়নের বেশি ভিজিট ক্যাপচার করে এবং দেখায় যে LCP পরিমাপ কতটা নিম্নের সাথে সম্পর্কযুক্ত:

• কম বাউন্স রেট
• আরও রূপান্তর (লিড ফর্ম সম্পূর্ণ)

মজার বিষয় হল, যেহেতু ওয়েবসাইটটি একটি একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) হিসাবে চলে, এই সমস্ত ব্যবস্থাগুলি শুধুমাত্র ল্যান্ডিং পৃষ্ঠাগুলিতে ক্যাপচার করা হয়৷ ডেটা দেখায় যে LCP 1 সেকেন্ডের নিচে না পৌঁছানো পর্যন্ত ওয়েবসাইটটি অপ্টিমাইজ করা মূল্যবান। গ্রুপের ব্র্যান্ড সাইটগুলি কখনই অপ্টিমাইজ করা যায় না!

এই ডেটাসেটটি শুধুমাত্র LCP এবং ব্যবসায়িক মেট্রিক্সের মধ্যে নেতিবাচক সম্পর্কই দেখায় না, তবে সেরা পারফরম্যান্সকারী ল্যান্ডিং পৃষ্ঠাগুলির মধ্যে পারফরম্যান্সের অসঙ্গতিগুলিও হাইলাইট করে। এই ওয়েবসাইটের পরিপ্রেক্ষিতে, 1 সেকেন্ডের নিচে LCP পাওয়ার ফলে কনভার্সন বড় হয় এবং বাউন্স কমে যায়।

এজা রাকোতোয়ারিমনানা, পরামর্শক, পঞ্চান্ন

1 সেকেন্ডের LCP উন্নতির ফলে বাউন্স হারে 14 শতাংশ পয়েন্ট (ppt) হ্রাস এবং রূপান্তর 13% বৃদ্ধি পেতে পারে।

কোর ওয়েব ভাইটালকে স্কেলে অপ্টিমাইজ করার জন্য রেনল্টের পদ্ধতি

2020 সালের শুরু থেকে, ব্র্যান্ডের শীর্ষ 5 ইউরোপীয় বাজারে, দ্রুত LCP (2.5 সেকেন্ডের নিচে) অভিজ্ঞতা অর্জনকারী দর্শকের সংখ্যা Renault ডোমেনের জন্য গড়ে 22 ppt বৃদ্ধি পেয়েছে (51% থেকে 73%)।

এখানে তারা কিভাবে এটি যোগাযোগ করেছি.

SPA এর একটি কেন্দ্রীয় অপ্টিমাইজেশান

একটি প্ল্যাটফর্মের দৃষ্টিকোণ থেকে, পারফরম্যান্স বছরের পর বছর ধরে একটি অগ্রাধিকার এবং মূল মেট্রিক্স হিসাবে কোর ওয়েব ভাইটালগুলি সহ একটি মসৃণ প্রক্রিয়া ছিল৷ কেন্দ্রীয় দলগুলি একটি ব্যাপক পর্যবেক্ষণ সমাধান ( Google Lighthouse এবং Chrome UX Report API সহ) সেট আপ করেছে এবং সংস্থা জুড়ে একটি কর্মক্ষমতা সংস্কৃতি প্রতিষ্ঠা করেছে৷ তাদের একক পৃষ্ঠা অ্যাপ্লিকেশন অপ্টিমাইজ করার জন্য বেশ কয়েকটি কৌশল ছিল, যার মধ্যে রয়েছে:

• দ্রুত ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) নিশ্চিত করতে সার্ভার সাইড রেন্ডারিং (SSR) ।
• ল্যান্ডিং পৃষ্ঠার জন্য প্রয়োজনীয় শুধুমাত্র JS এবং CSS খণ্ডগুলি সরবরাহ করার জন্য কোড বিভক্ত করা (ভাল LCP এবং FID-এর জন্য)।
• উচ্চ স্তরের রিসোর্স ক্যাশিং সহ CDN (অপ্রয়োজনীয় ক্যোয়ারী প্যারামিটার বাছাই এবং অপসারণ করার জন্য একটি Lambda@Edge সহ)। এটি এসএসআর (সার্ভার গণনার কারণে ধীর TTFB) এর ত্রুটিগুলি এড়াতে এবং চূড়ান্ত ব্যবহারকারীর (ভাল TTFB এবং LCP-এর জন্য) কাছাকাছি সামগ্রী সরবরাহ করতে সহায়তা করেছে।
• কোডের আকার কমাতে ব্রোটলি দিয়ে কম্প্রেশন অপ্টিমাইজ করা হচ্ছে ।
• অনুরোধ এবং প্রতিক্রিয়াগুলির মাল্টিপ্লেক্সিং সক্ষম করতে HTTP2 ।
• WebP সমর্থন এবং srcset এবং sizes বৈশিষ্ট্য সহ প্রতিক্রিয়াশীল ছবি ব্যবহার করে ব্যবহারকারীদের কাছে সবচেয়ে উপযুক্ত ছবির আকার এবং বিন্যাস পরিবেশন করা।
• IntersectionObserver এবং FPO ব্যবহার করে অলস লোড করা ছবি, ভিডিও এবং iframes (ছোট 1 KB থাম্বনেল)।
• ব্লকিং স্ক্রিপ্টগুলি অপসারণ করা এবং JS ফাইলের আকার কমাতে ব্রাউজার টার্গেটে ট্রান্সপিলেশন সামঞ্জস্য করা (অপ্রয়োজনীয় পলিফিল এড়ানোর মাধ্যমে)।
• যেখানে এবং যখন প্রয়োজন তখনই তৃতীয় পক্ষের স্ক্রিপ্টগুলি লোড করতে Google ট্যাগ ম্যানেজার কন্টেইনারের আকার হ্রাস করা ।
• কাস্টম ফন্টের সংখ্যা কমানো , ইউনিকোড-রেঞ্জ সহ woff/woff2 ফরম্যাট ব্যবহার করে এবং font-display:swap ফন্ট ফাইলের আকার কমাতে এবং কাস্টম ফন্টগুলি এখনও উপলব্ধ না থাকলেও যত তাড়াতাড়ি সম্ভব পাঠ্য দেখান।
• প্রিলোড হচ্ছে হিরো ছবি যা প্রায়ই LCP উপাদান।

দলটি এখনও ভবিষ্যতের উন্নতিতে কাজ করছে যেমন:

• CSS দ্রুত ডেলিভারি করে FCP উন্নত করতে সার্ভার পুশ করে । (এডাব্লুএস সমর্থন এবং অবচয় প্রস্তাবের অভাবের কারণে স্ট্যান্ডবাইতে।
• FID উন্নত করতে প্রগতিশীল হাইড্রেশন ।
• আধুনিক ব্রাউজারগুলির জন্য ES6 বিল্ড ব্যবহার করে একটি দ্রুত অভিজ্ঞতা প্রদানের জন্য ES6 মডিউল সমর্থন ।

SPA পদ্ধতিটি কর্মক্ষমতার জন্য উপকারী হতে পারে কারণ ব্যবহারকারীরা পৃষ্ঠা জুড়ে নেভিগেট করার সময় একটি সম্পূর্ণ পৃষ্ঠা পুনরায় লোড করার প্রয়োজন হয় না। বলা হচ্ছে, এসপিএ-তে বর্তমান কোর ওয়েব ভাইটাল পরিমাপ পদ্ধতিগুলি একটি খারাপ দিক হিসাবে অনুভূত হতে পারে কারণ রুট ট্রানজিশন পরিমাপ করা হচ্ছে না; তাই UI ক্যাশিংয়ের কারণে একটি সেশনের মধ্যে তুলনামূলকভাবে দ্রুত পৃষ্ঠা লোড হওয়ার বিষয়টি বিবেচনায় নেওয়া হয় না। এটি একটি মাল্টি পেজ অ্যাপ্লিকেশান প্রতিযোগী ওয়েবসাইটের সাথে কোর ওয়েব ভাইটালগুলির তুলনা করাও কঠিন করে তোলে যেখানে একটি উষ্ণ ক্যাশে ব্যবহারকারী একটি সেশনের সময় ব্রাউজ করা প্রতিটি পৃষ্ঠায় পরিমাপ কমিয়ে আনবে৷ আরো বিস্তারিত জানার জন্য Web Vitals SPA FAQ পড়ুন।

এগুলি পরিচিত সীমাবদ্ধতা যা Chrome পণ্য দলগুলি দ্বারা তদন্ত করা হচ্ছে৷ SPA-তে পরিমাপ উন্নত করতে ইতিমধ্যেই CLS মেট্রিকের একটি আপডেট পাঠানো হয়েছে।

পারফরম্যান্সের জন্য ক্রমাগত পর্যবেক্ষণ প্রয়োজন কারণ বিভিন্ন প্রযুক্তিগত দল এটিকে প্রভাবিত করতে পারে। SPA-তে কীভাবে সেগুলি পরিমাপ করা হয় তার সীমাবদ্ধতা থাকা সত্ত্বেও, কোর ওয়েব ভাইটালগুলি আমাদের দলগুলি যে পদক্ষেপগুলি নেয় তার প্রভাবগুলি ট্র্যাক করতে দেয়৷ আশা করি রুট পরিবর্তনগুলি শীঘ্রই বিবেচনায় নেওয়া হবে!

সেড্রিক বাজুরো, টেক লিড, রেনল্ট

একটি ভাগ করা দায়িত্ব হিসাবে কর্মক্ষমতা অপ্টিমাইজেশান প্রচার করে স্থানীয় নির্দেশিকা

কর্মক্ষমতা একটি বিশ্বব্যাপী (কেন্দ্রীয়) এবং স্থানীয় উভয় দায়িত্ব হিসাবে যোগাযোগ করা হয়. দলগুলি একত্রে সেরা অনুশীলনের একটি সিরিজ রেখেছে যা স্থানীয় বিষয়বস্তুর মালিকদের অনুসরণ করার জন্য। এই নির্দেশিকাগুলি থেকে এখানে কয়েকটি উদাহরণ দেওয়া হল:

• সাইটের কর্মক্ষমতা উন্নত করতে স্থানীয় Google ট্যাগ ম্যানেজার কন্টেইনার অপ্টিমাইজ করুন। উদাহরণস্বরূপ শর্তসাপেক্ষে নির্দিষ্ট ট্যাগ ট্রিগার করুন।
• অভ্যন্তরীণ সরঞ্জামগুলি ব্যবহার করে এটিকে সংকুচিত করে বা বাইরের প্ল্যাটফর্মে (যেমন YouTube) হোস্ট করে ভিডিও সামগ্রীর আকার সীমিত করুন।
• গুগল ট্যাগ ম্যানেজারের মাধ্যমে ছবি আপলোড করা এড়িয়ে চলুন।

আমাদের ব্র্যান্ড সাইটগুলির একটি ক্রমাগত অপ্টিমাইজেশন নিশ্চিত করার জন্য আমাদের ডিজিটাল পারফরম্যান্সের গভীর বোঝার চাবিকাঠি। আমাদের গ্রাহক অভিজ্ঞতা টিমের দৃষ্টিভঙ্গি হল একটি বিশ্বব্যাপী প্ল্যাটফর্ম প্রদান করা যা স্থানীয় টিমের ব্যবসায়িক ফলাফলকে ইতিবাচকভাবে প্রভাবিত করে যখন এই দলগুলিকে নির্দেশিকা এবং সর্বোত্তম অনুশীলনগুলি উচ্চ স্তরে বজায় রাখার জন্য ক্ষমতায়ন করে।

আলেকজান্ডার পেরুচে, হেড অফ পারফরমেন্স, রেনল্ট

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