বাতিঘর ব্যবহারকারী প্রবাহিত

একটি ব্যবহারকারী প্রবাহ জুড়ে কর্মক্ষমতা এবং সর্বোত্তম অনুশীলন পরিমাপ করতে একটি নতুন Lighthouse API ব্যবহার করে দেখুন৷

Brendan Kenny

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

• একটি উষ্ণ ক্যাশে সঙ্গে পৃষ্ঠা লোড
• একটি সক্রিয় পরিষেবা কর্মী সহ পৃষ্ঠাগুলি৷
• সম্ভাব্য ব্যবহারকারী মিথস্ক্রিয়া জন্য অ্যাকাউন্টিং

এর মানে হল যে বাতিঘর গুরুত্বপূর্ণ তথ্য মিস করতে পারে। কোর ওয়েব ভাইটালগুলি সমস্ত পৃষ্ঠা লোডের উপর ভিত্তি করে, শুধুমাত্র একটি খালি ক্যাশে নয়। উপরন্তু, ক্রমবর্ধমান লেআউট শিফট (সিএলএস) এর মতো মেট্রিকগুলি একটি পৃষ্ঠা খোলার পুরো সময়ের জন্য পরিমাপযোগ্য।

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

কর্মক্ষম ব্যবহারকারীর প্রবাহ নিশ্চিত করার জন্য লেখা প্রায় যেকোনো Puppeteer স্ক্রিপ্টে এখন কর্মক্ষমতা এবং সর্বোত্তম অনুশীলন পরিমাপ করার জন্য যেকোন সময়ে Lighthouse ঢোকানো যেতে পারে। এই টিউটোরিয়ালটি নতুন লাইটহাউস মোডগুলির মাধ্যমে চলবে যা ব্যবহারকারীর প্রবাহের বিভিন্ন অংশ পরিমাপ করতে পারে: নেভিগেশন, স্ন্যাপশট এবং টাইমস্প্যান৷

সেটআপ

ব্যবহারকারী প্রবাহ API গুলি এখনও পূর্বরূপ, কিন্তু সেগুলি আজ Lighthouse-এ উপলব্ধ৷ নীচের ডেমোগুলি চেষ্টা করার জন্য, আপনার নোড সংস্করণ 14 বা তার পরে প্রয়োজন হবে৷ একটি খালি ডিরেক্টরি তৈরি করুন এবং এটি চালান:

# Default to ES modules.
echo '{"type": "module"}' > package.json

# Init npm project without the wizard.
npm init -y

# Dependencies for these examples.
npm install lighthouse puppeteer open

নেভিগেশন

নতুন লাইটহাউস "নেভিগেশন" মোডটি আসলে (এখন পর্যন্ত) স্ট্যান্ডার্ড লাইটহাউস আচরণকে একটি নাম দিচ্ছে: একটি পৃষ্ঠার ঠান্ডা লোড বিশ্লেষণ করুন৷ এটি পৃষ্ঠা লোড কর্মক্ষমতা নিরীক্ষণ করার জন্য ব্যবহার করার মোড, কিন্তু ব্যবহারকারীর প্রবাহ নতুন অন্তর্দৃষ্টির সম্ভাবনাও উন্মুক্ত করে।

একটি পৃষ্ঠা লোড ক্যাপচার করার জন্য বাতিঘর স্ক্রিপ্ট করতে:

1. ব্রাউজার খুলতে puppeteer ব্যবহার করুন.
2. একটি Lighthouse ব্যবহারকারী প্রবাহ শুরু করুন.
3. লক্ষ্য URL নেভিগেট করুন.

import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Single Navigation'});
  await flow.navigate('https://web.dev/performance-scoring/');

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

এটি সবচেয়ে সহজ প্রবাহ। যখন খোলা হয়, রিপোর্টটি শুধুমাত্র একক ধাপের সাথে একটি সারাংশ ভিউ দেখায়। সেই ধাপে ক্লিক করলে সেই নেভিগেশনের জন্য একটি ঐতিহ্যবাহী বাতিঘর প্রতিবেদন প্রকাশ পাবে।

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

একটি উষ্ণ লোড ক্যাপচার

আপনি এই স্ক্রিপ্টে একটি দ্বিতীয় নেভিগেশন যোগ করতে পারেন, এই সময় ক্যাশে এবং স্টোরেজ ক্লিয়ারিং অক্ষম করে যা লাইটহাউস নেভিগেশনে ডিফল্টভাবে করে। এই পরবর্তী উদাহরণটি web.dev-এ একটি নিবন্ধ লোড করে তা দেখতে এটি ক্যাশিং থেকে কতটা উপকৃত হয়:

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const testUrl = 'https://web.dev/performance-scoring/';
  const flow = await startFlow(page, {name: 'Cold and warm navigations'});
  await flow.navigate(testUrl, {
    stepName: 'Cold navigation'
  });
  await flow.navigate(testUrl, {
    stepName: 'Warm navigation',
    configContext: {
      settingsOverrides: {disableStorageReset: true},
    },
  });

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

ফলস্বরূপ প্রবাহ রিপোর্ট এই মত কিছু দেখায়:

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

স্ন্যাপশট

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

এই উদাহরণের জন্য, ধরুন আপনি চেক করতে চান যে Squosh- এর মধ্যে উন্নত সেটিংসের জন্য কিছু নতুন UI স্বয়ংক্রিয় লাইটহাউস চেক পাস করে। এই সেটিংস শুধুমাত্র দৃশ্যমান হয় যদি একটি ছবি লোড করা হয় এবং বিকল্প মেনুটি উন্নত সেটিংস দেখানোর জন্য প্রসারিত করা হয়।

এই প্রক্রিয়াটি পাপেটিয়ারের সাথে স্ক্রিপ্টযোগ্য এবং আপনি আসলে প্রতিটি ধাপে একটি লাইটহাউস স্ন্যাপশট নিতে পারেন:

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Squoosh snapshots'});

  await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});

  // Wait for first demo-image button, then open it.
  const demoImageSelector = 'ul[class*="demos"] button';
  await page.waitForSelector(demoImageSelector);
  await flow.snapshot({stepName: 'Page loaded'});
  await page.click(demoImageSelector);

  // Wait for advanced settings button in UI, then open them.
  const advancedSettingsSelector = 'form label[class*="option-reveal"]';
  await page.waitForSelector(advancedSettingsSelector);
  await flow.snapshot({stepName: 'Demo loaded'});
  await page.click(advancedSettingsSelector);

  await flow.snapshot({stepName: 'Advanced settings opened'});

  browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

ফলাফল রিপোর্ট দেখায় যে ফলাফল সাধারণত ভাল, কিন্তু কিছু অ্যাক্সেসযোগ্যতার মানদণ্ড থাকতে পারে যা ম্যানুয়ালি চেক আউট করা প্রয়োজন:

সময়কাল

ক্ষেত্রের (CrUX থেকে) এবং ল্যাবে (যেমন লাইটহাউস থেকে) পারফরম্যান্স ফলাফলের মধ্যে সবচেয়ে বড় পার্থক্য হল ব্যবহারকারীর ইনপুটের অভাব। এখানেই একটি টাইমস্প্যান—শেষ ব্যবহারকারী প্রবাহ মোড—সাহায্য করতে পারে।

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

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

একটি নিয়মিত লাইটহাউস নেভিগেশনের একটি CLS 0 থাকবে। তবে, একবার স্ক্রোল করা হলে, পৃষ্ঠাটিতে সমস্যাযুক্ত লেআউট পরিবর্তন হবে এবং CLS মান বৃদ্ধি পাবে।

নিম্নলিখিত স্ক্রিপ্ট পার্থক্য দেখানোর জন্য উভয় ক্রিয়া সহ একটি ব্যবহারকারী প্রবাহ প্রতিবেদন তৈরি করবে।

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  // Get a session handle to be able to send protocol commands to the page.
  const session = await page.target().createCDPSession();

  const testUrl = 'https://pie-charmed-treatment.glitch.me/';
  const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});

  // Regular Lighthouse navigation.
  await flow.navigate(testUrl, {stepName: 'Navigate only'});

  // Navigate and scroll timespan.
  await flow.startTimespan({stepName: 'Navigate and scroll'});
  await page.goto(testUrl, {waitUntil: 'networkidle0'});
  // We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
  // https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
  await session.send('Input.synthesizeScrollGesture', {
    x: 100,
    y: 600,
    yDistance: -2500,
    speed: 1000,
    repeatCount: 2,
    repeatDelayMs: 250,
  });
  await flow.endTimespan();

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

এটি একটি টাইমস্প্যানের সাথে একটি নিয়মিত নেভিগেশনের তুলনা করে একটি প্রতিবেদন তৈরি করে যাতে একটি নেভিগেশন এবং পরে স্ক্রলিং উভয়ই থাকে:

প্রতিটি ধাপে খনন করে, নেভিগেশন-শুধু পদক্ষেপটি 0 এর একটি CLS দেখায়। দুর্দান্ত সাইট!

তবে "নেভিগেট এবং স্ক্রোল" ধাপটি একটি ভিন্ন গল্প বলে। বর্তমানে শুধুমাত্র টোটাল ব্লকিং টাইম এবং কিউমুলেটিভ লেআউট শিফট টাইমস্প্যানে উপলব্ধ, কিন্তু এই পৃষ্ঠায় অলস-লোড করা বিষয়বস্তু স্পষ্টভাবে সাইটের CLS-কে ট্যাঙ্ক করে।

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

প্রতিক্রিয়া খুঁজছি

লাইটহাউসের নতুন ব্যবহারকারী প্রবাহ APIগুলি অনেক নতুন জিনিস করতে পারে, কিন্তু আপনার ব্যবহারকারীরা যে ধরনের পরিস্থিতির সম্মুখীন হয় তা পরিমাপ করা এখনও জটিল হতে পারে।

লাইটহাউস আলোচনা ফোরামে যেকোন প্রশ্ন থাকলে অনুগ্রহ করে যোগাযোগ করুন এবং সমস্যা ট্র্যাকারে কোনো বাগ বা পরামর্শ ফাইল করুন।