लाइटहाउस यूज़र फ़्लो

पूरे यूज़र फ़्लो के दौरान, परफ़ॉर्मेंस और सबसे सही तरीकों को मेज़र करने के लिए, नए Lighthouse API को आज़माएं.

ब्रेंडन कैनी

लाइटहाउस, पेज लोड होने के शुरुआत में परफ़ॉर्मेंस और सबसे सही तरीकों की जांच करने के लिए एक बेहतरीन टूल है. हालांकि, आम तौर पर किसी पेज के जीवन के दूसरे पहलुओं का विश्लेषण करने के लिए, लाइटहाउस का इस्तेमाल करना मुश्किल होता है. जैसे:

• वॉर्म कैश मेमोरी के साथ पेज लोड होता है
• एक सक्रिय सर्विस वर्कर वाले पेज
• उपयोगकर्ता के संभावित इंटरैक्शन का ध्यान रखना

इसका मतलब है कि लाइटहाउस में ज़रूरी जानकारी मौजूद नहीं है. वेबसाइट की परफ़ॉर्मेंस की जानकारी, सिर्फ़ सभी पेज लोड पर आधारित होती है, न कि सिर्फ़ उन पेजों के हिसाब से जिनमें कैश मेमोरी खाली हो. इसके अलावा, कुल लेआउट शिफ़्ट (सीएलएस) जैसी मेट्रिक को तब तक मेज़र किया जा सकता है, जब तक कोई पेज खुला रहता है.

लाइटहाउस में एक नया यूज़र फ़्लो एपीआई है. इसकी मदद से, पेज को लंबे समय तक किसी भी समय लैब टेस्ट किया जा सकता है. Puppeteer का इस्तेमाल स्क्रिप्ट पेज लोड करने और सिंथेटिक उपयोगकर्ता इंटरैक्शन को ट्रिगर करने के लिए किया जाता है. साथ ही, लाइटहाउस को कई तरीकों से शुरू किया जा सकता है, ताकि उन इंटरैक्शन के दौरान अहम जानकारी कैप्चर की जा सके. इसका मतलब है कि परफ़ॉर्मेंस को पेज लोड होने के दौरान और पेज के साथ इंटरैक्शन के दौरान मापा जा सकता है. सुलभता की जांच CI में की जा सकती है. ऐसा न सिर्फ़ शुरुआती व्यू में, बल्कि चेकआउट प्रोसेस की गहराई में जाकर भी किया जा सकता है, ताकि यह पक्का किया जा सके कि कोई भी चीज़ वापस न आए.

काम कर रहे यूज़र फ़्लो को पक्का करने के लिए लिखी गई करीब-करीब सभी Puppeteer स्क्रिप्ट में अब किसी भी समय लाइटहाउस को डाला जा सकता है, ताकि परफ़ॉर्मेंस और सबसे सही तरीकों को मापा जा सके. यह ट्यूटोरियल, लाइटहाउस के नए मोड के बारे में जानकारी देगा. इससे यूज़र फ़्लो के अलग-अलग हिस्सों को मेज़र किया जा सकेगा: नेविगेशन, स्नैपशॉट, और टाइमस्पैन.

सेटअप

यूज़र फ़्लो एपीआई अब भी झलक में है. हालांकि, वे आज लाइटहाउस में उपलब्ध हैं. नीचे दिए गए डेमो आज़माने के लिए, आपको Node वर्शन 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. लाइटहाउस यूज़र फ़्लो शुरू करें.
3. टारगेट यूआरएल पर जाएं.

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();

मिलने वाला फ़्लो रिपोर्ट कुछ ऐसा दिखता है:

कोल्ड और वॉर्म लोड का कॉम्बिनेशन, इस बात की पूरी जानकारी देता है कि उपयोगकर्ताओं को कैसा अनुभव मिल रहा है. अगर आपकी साइट में कोई ऐसी साइट है जहां उपयोगकर्ता एक ही विज़िट में कई पेज लोड करते हैं, तो यह आपको इस बात का एक ज़्यादा असल अनुभव दे सकती है कि वे फ़ील्ड में कैसा अनुभव कर रहे हैं.

स्नैपशॉट

स्नैपशॉट एक नया मोड है, जो एक ही समय पर लाइटहाउस ऑडिट चलाता है. सामान्य लाइटहाउस रन के उलट, पेज फिर से लोड नहीं होता है. इससे, आपको पेज सेट अप करने और उसकी सही स्थिति की जांच करने की सुविधा मिलती है. उदाहरण के लिए, ड्रॉप-डाउन खुला होने पर या फ़ॉर्म में कुछ हद तक भरे हुए पेज के साथ.

इस उदाहरण के लिए, मान लें कि आपको यह देखना है कि Squoosh की मदद से, बेहतर सेटिंग के लिए बनाया गया कुछ नया यूज़र इंटरफ़ेस (यूआई) अपने-आप काम करने वाली लाइटहाउस जांच में पास हुआ है या नहीं. ये सेटिंग सिर्फ़ तब दिखती हैं, जब इमेज लोड कर दी गई हो और बेहतर सेटिंग दिखाने के लिए विकल्प मेन्यू को बड़ा किया गया हो.

Puppeteer की मदद से, इस प्रोसेस को स्क्रिप्ट किया जा सकता है. साथ ही, हर चरण में लाइटहाउस स्नैपशॉट लिया जा सकता है:

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 से) और लैब (जैसे कि लाइटहाउस से) में परफ़ॉर्मेंस के नतीजों के बीच का सबसे बड़ा अंतर यह है कि उपयोगकर्ता का इनपुट न होना है. यहां टाइमस्पैन—आखिरी यूज़र फ़्लो मोड—मदद कर सकता है.

किसी समयावधि में लाइटहाउस ऑडिट किया जाता है, जिसमें नेविगेशन शामिल हो भी सकता है और नहीं भी. इंटरैक्शन के दौरान किसी पेज पर हो रही गतिविधि को कैप्चर करने का यह सबसे अच्छा तरीका है. उदाहरण के लिए, डिफ़ॉल्ट रूप से लाइटहाउस, पेज लोड होने के दौरान सीएलएस को मेज़र करता है. हालांकि, फ़ील्ड में सीएलएस को शुरुआती नेविगेशन से तब तक मापा जाता है, जब तक पेज बंद नहीं हो जाता. अगर किसी व्यक्ति के इंटरैक्शन, सीएलएस का ट्रिगर होता है, तो यह ऐसा लाइटहाउस होता है जिसे पहले लाइटहाउस नहीं देखा जा सकता था और इसे ठीक करने में मदद नहीं कर पाता था.

यह जानने के लिए, यहां एक टेस्ट साइट दी गई है. इसमें साइट पर स्क्रोल किए जाने के दौरान, लेख में डाले जाने वाले विज्ञापनों की नकल की जाती है. इसके लिए, साइट को खाली जगह भी नहीं दी जाती है. कार्ड की एक लंबी सीरीज़ में, जब उसका स्लॉट व्यूपोर्ट में आता है, तब लाल रंग का एक स्क्वेयर जोड़ दिया जाता है. इन लाल स्क्वेयर के लिए जगह नहीं तय की गई थी. इसलिए, उनके नीचे के कार्ड रास्ते में नहीं दिख रहे हैं. इस वजह से, लेआउट शिफ़्ट हो जाता है.

सामान्य लाइटहाउस नेविगेशन का सीएलएस 0 होगा. हालांकि, स्क्रोल करने पर पेज पर लेआउट शिफ़्ट में गड़बड़ी होगी और सीएलएस वैल्यू बढ़ जाएगी.

यह स्क्रिप्ट अंतर दिखाने के लिए, दोनों कार्रवाइयों के साथ एक यूज़र फ़्लो रिपोर्ट बनाएगी.

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 का सीएलएस दिखाता है. बहुत बढ़िया!

हालांकि, "नेविगेट और स्क्रोल करें" चरण कुछ अलग कहानी बताते हैं. फ़िलहाल, समयावधि के हिसाब से सिर्फ़ टोटल ब्लॉकिंग टाइम और कुल लेआउट शिफ़्ट की सुविधा उपलब्ध है. हालांकि, इस पेज पर लेज़ी-लोड होने वाला कॉन्टेंट, साइट के सीएलएस को साफ़ तौर पर दिखाता है.

पहले, Lighthouse इस समस्या वाले सीएलएस व्यवहार की पहचान नहीं कर पाता था. हालांकि, यह असल उपयोगकर्ताओं के अनुभव में ज़रूर दिखेगा. स्क्रिप्ट किए गए इंटरैक्शन की परफ़ॉर्मेंस की जांच करने से, लैब की क्वालिटी में काफ़ी सुधार होता है.

सुझाव, शिकायत या राय खोजी जा रही है

लाइटहाउस में नया यूज़र फ़्लो एपीआई कई नए काम कर सकता है. हालांकि, फिर भी आपके उपयोगकर्ताओं को जिस तरह की स्थितियों का सामना करना पड़ता है, उन्हें मापना मुश्किल हो सकता है.

अगर आपका कोई सवाल है, तो कृपया लाइटहाउस चर्चा फ़ोरम में हमसे संपर्क करें. साथ ही, किसी भी गड़बड़ी या सुझाव को समस्या के ट्रैकर में दर्ज करें.