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

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

Brendan Kenny

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

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

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

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

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

सेटअप

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