কর্মক্ষমতা উন্নত করতে আপনার কি পরিমাপ করা উচিত?

ক্রয় ফানেলের প্রতিটি পর্যায়ে কর্মক্ষমতা পরিমাপ করার কৌশল।

মার্টিন শিয়েরল

টুইটার গিটহাব

একটি ক্রয়ের ফানেলের বিভিন্ন ধাপগুলি বিভিন্ন উপায়ে পারফরম্যান্স সমস্যাগুলির জন্য প্রবণ, এবং তাই বিভিন্ন পরিমাপ এবং অপ্টিমাইজেশন প্রয়োজন:

এই নির্দেশিকায় আমরা আলোচনা করব কিভাবে বিভিন্ন ধাপ পরিমাপ করা যায়। এর জন্য আমরা আপনাকে ল্যাবের পাশাপাশি ফিল্ড ডেটা দেখার পরামর্শ দিই।

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

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

একটি সম্পূর্ণ ছবি পেতে, উভয় তথ্য উৎস প্রয়োজন. নিম্নলিখিত বিভাগগুলি দেখায় কিভাবে ফানেল জুড়ে বিভিন্ন প্রাসঙ্গিক কর্মক্ষমতা চিহ্নের জন্য ল্যাব এবং ফিল্ড ডেটা সংগ্রহ করতে হয়।

আবিষ্কার

আবিষ্কারের জন্য অপ্টিমাইজ করার অর্থ হল প্রথম লোডের জন্য অপ্টিমাইজ করা, যা নতুন ব্যবহারকারীরা পাবেন, কিন্তু অনুসন্ধান এবং সামাজিক ক্রলারও পাবেন৷ প্রথম লোডের জন্য ল্যাব ডেটা Lighthouse-এর মাধ্যমে সহজেই অর্জিত হতে পারে, যখন ফিল্ড ডেটা (অন্তত Chrome এর জন্য) Chrome UX রিপোর্টের মাধ্যমে সহজেই পাওয়া যায়৷ উভয়ের একটি সুবিধাজনক সংমিশ্রণ PageSpeed ​​Insights- এ পাওয়া যাবে। এছাড়াও আপনি ক্ষেত্র থেকে প্রাসঙ্গিক মেট্রিক্স ট্র্যাক করা উচিত: প্রকৃত ব্যবহারকারীদের ডিভাইসে এই মেট্রিক্স পরিমাপ একটি ভাল ওভারভিউ প্রদান করে।

ব্যবহারকারীর দৃষ্টিকোণ থেকে সবচেয়ে গুরুত্বপূর্ণ মেট্রিক্স হল:

• ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) : ব্যবহারকারী যখন একটি ফাঁকা স্ক্রিনের দিকে তাকায়। এটি হল যখন বেশিরভাগ ব্যবহারকারী বাউন্স করেন, কারণ তারা অগ্রগতি দেখতে পান না।
• প্রথম অর্থপূর্ণ পেইন্ট (FMP) : ব্যবহারকারী যখন মূল বিষয়বস্তু দেখতে শুরু করে যার জন্য তারা এসেছে। এটি প্রায়শই হিরো ইমেজ, কিন্তু একটি ল্যান্ডিং পৃষ্ঠার জন্য এটি একটি বাই বোতামের মতো একটি কল টু অ্যাকশনও হতে পারে, যেহেতু ব্যবহারকারী একটি স্পষ্ট উদ্দেশ্য নিয়ে এসেছেন (উদাহরণস্বরূপ, একটি লক্ষ্যযুক্ত বিজ্ঞাপন প্রচারের মাধ্যমে)৷
• প্রথম ইনপুট বিলম্ব (FID) : ওয়েবসাইট ব্যবহারকারীর প্রথম ইনপুটে প্রতিক্রিয়া করার সময়। অত্যধিক জাভাস্ক্রিপ্ট এবং অন্যান্য সম্পদ লোডিং সমস্যা এটিকে ব্লক করতে পারে, যা ব্যর্থ ট্যাপ বা ক্লিক, ভুল ইনপুট এবং পৃষ্ঠা পরিত্যাগের দিকে পরিচালিত করে।

আপনি দেখতে পারেন আরো মেট্রিক আছে, কিন্তু এই একটি ভাল বেসলাইন. এছাড়াও বাউন্স রেট, রূপান্তর এবং ব্যবহারকারীর ব্যস্ততা ক্যাপচার করা নিশ্চিত করুন যাতে আপনি এগুলি সম্পর্কের মধ্যে সেট করতে পারেন।

ব্যস্ততা এবং রূপান্তর

একটি ল্যান্ডিং পৃষ্ঠার প্রথম লোডের পরে, একজন ব্যবহারকারী আপনার সাইটের মাধ্যমে এগিয়ে যাবে, আশা করি একটি সফল রূপান্তরের দিকে।

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

এটি করার দুটি সুবিধাজনক উপায় রয়েছে:

ওয়েবপেজ টেস্ট

WebPageTest একটি খুব নমনীয় স্ক্রিপ্টিং সমাধান অফার করে। মূল ধারণা হল:

• ওয়েবপেজটেস্টকে navigate কমান্ড দিয়ে প্রবাহের পৃষ্ঠাগুলিতে নেভিগেট করতে বলুন।
• স্ক্রিপ্ট প্রয়োজন হলে clickAndWait কমান্ডের মাধ্যমে বোতামে ক্লিক করুন এবং setValue মাধ্যমে পাঠ্য ক্ষেত্রগুলি পূরণ করুন। একক পৃষ্ঠা অ্যাপ্লিকেশনের পরীক্ষার জন্য প্রথমটির পরের সমস্ত ধাপের জন্য কমান্ড navigate পরিবর্তে clickAndWait ব্যবহার করুন, কারণ navigate হালকা ভার্চুয়াল পৃষ্ঠা লোডের পরিবর্তে একটি সম্পূর্ণ লোড করবে।
• সম্পূর্ণ প্রবাহের জন্য একটি একক সামগ্রিক ফলাফল প্রতিবেদন তৈরি করতে combineSteps মাধ্যমে বিশ্লেষণে প্রবাহের বিভিন্ন ধাপ একত্রিত করা নিশ্চিত করুন।

এই ধরনের একটি স্ক্রিপ্ট এই মত দেখতে পারে:

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

এই ধরনের স্ক্রিপ্টের সাহায্যে আপনি সহজেই সময়ের সাথে পারফরম্যান্স পরিমাপ এবং তুলনা করতে পারেন। এমনকি WebPageTest API-এর মাধ্যমেও এটি স্বয়ংক্রিয় হতে পারে।

পুতুল

স্ক্রিপ্ট পরীক্ষার আরেকটি দুর্দান্ত বিকল্প হল হেডলেস ক্রোমের মাধ্যমে, যা নোড API Puppeteer-এর মাধ্যমে নিয়ন্ত্রণ করা যেতে পারে। সাধারণ ধারণা হল Puppeteer এর মাধ্যমে ব্রাউজারটি শুরু করা, goto ফাংশনের মাধ্যমে ল্যান্ডিং পৃষ্ঠায় নেভিগেট করা, ক্ষেত্রগুলি পূরণ করতে JavaScript ইনজেক্ট করা বা বোতামে ক্লিক করা এবং প্রয়োজন অনুসারে আরও গোটো কলের মাধ্যমে ফানেলের মাধ্যমে এগিয়ে যাওয়া।

একটি মেট্রিক হিসাবে প্রবাহের সময়কাল সরাসরি পরিমাপ করা যেতে পারে, তবে আপনি প্রবাহের পৃথক লোডগুলির FCP, FMP বা TTI মানগুলিও যোগ করতে পারেন৷ Puppeteer-এর সাথে ওয়েবসাইট পারফরম্যান্সের পরীক্ষা কিভাবে Puppeteer-এর মাধ্যমে পারফরম্যান্স মেট্রিক্স পেতে হয় তার একটি ওভারভিউ প্রদান করে। একটি খুব সরলীকৃত উদাহরণ নোড স্ক্রিপ্ট এই মত দেখতে পারে:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

এই স্ক্রিপ্টটি সহজেই স্বয়ংক্রিয় হতে পারে, এমনকি বিল্ড প্রক্রিয়া বা পারফ বাজেটের অংশও তৈরি করা যেতে পারে এবং নিয়মিত পর্যবেক্ষণ করা যেতে পারে।

রি-এনগেজমেন্ট

ব্যবহারকারীরা বিভিন্ন সময়ের ব্যবধানে আপনার সাইটে ফিরে আসবে। অতিবাহিত সময়ের উপর নির্ভর করে, ব্রাউজারে ওয়েবসাইটের কম সম্পদ ক্যাশে থাকতে পারে, আরও নেটওয়ার্ক অনুরোধের প্রয়োজন। এটি ল্যাব পরীক্ষায় পুনরাবৃত্তি ভিজিট জুড়ে কর্মক্ষমতা পার্থক্য অনুমান করা কঠিন করে তোলে। যদিও এটির উপর নজর রাখা এখনও বাঞ্ছনীয়, এবং পুনরাবৃত্তি ভিজিট করার জন্য একটি দুর্দান্ত ল্যাব টেস্ট টুল হল WebPageTest , যাতে সরাসরি পুনরাবৃত্তি করার জন্য একটি ডেডিকেটেড বিকল্প রয়েছে:

ক্ষেত্রের পুনরাবৃত্তি পরিদর্শন কর্মক্ষমতা জন্য একটি ভাল অনুভূতি পেতে ব্যবহারকারীর ধরন দ্বারা আপনার কর্মক্ষমতা মেট্রিক্স ভাগ করার জন্য আপনার পছন্দের বিশ্লেষণ প্যাকেজ ব্যবহার করুন. এখানে গুগল অ্যানালিটিক্সে এই ধরনের একটি প্রতিবেদনের উদাহরণ রয়েছে:

এই ধরনের একটি প্রতিবেদন আপনাকে নতুন এবং ফিরে আসা ব্যবহারকারীদের জন্যও পৃষ্ঠা লোড করার সময় দেবে।

রিক্যাপ

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