किसी यूज़र फ़्लो के दौरान परफ़ॉर्मेंस और सबसे सही तरीकों को मेज़र करने के लिए, Lighthouse का नया एपीआई आज़माएं.
पेज के शुरुआती लोड के दौरान, परफ़ॉर्मेंस और सबसे सही तरीकों की जांच करने के लिए, Lighthouse एक बेहतरीन टूल है. हालांकि, पेज के अन्य पहलुओं का विश्लेषण करने के लिए, लाइटहाउस का इस्तेमाल करना मुश्किल रहा है. जैसे:
- वॉर्म कैश मेमोरी की मदद से पेज लोड होना
- ऐसे पेज जिनमें सर्विस वर्कर चालू है
- उपयोगकर्ता के संभावित इंटरैक्शन को ध्यान में रखना
इसका मतलब है कि Lighthouse से ज़रूरी जानकारी छूट सकती है. Core Web Vitals, पेज लोड होने के सभी मामलों पर आधारित होती है. इसमें सिर्फ़ खाली कैश मेमोरी वाले पेज शामिल नहीं होते. इसके अलावा, लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस) जैसी मेट्रिक को पेज के खुले रहने के दौरान किसी भी समय मेज़र किया जा सकता है.
Lighthouse में एक नया यूज़र फ़्लो एपीआई है. इसकी मदद से, पेज के लाइफ़स्पैन के दौरान किसी भी समय लैब टेस्टिंग की जा सकती है. Puppeteer का इस्तेमाल, पेज लोड को स्क्रिप्ट करने और उपयोगकर्ता के सिंथेटिक इंटरैक्शन को ट्रिगर करने के लिए किया जाता है. साथ ही, Lighthouse को कई तरीकों से शुरू किया जा सकता है, ताकि उन इंटरैक्शन के दौरान अहम जानकारी कैप्चर की जा सके. इसका मतलब है कि पेज लोड होने और पेज के साथ इंटरैक्शन के दौरान, परफ़ॉर्मेंस को मेज़र किया जा सकता है. सुलभता की जांच सीआई में की जा सकती है. यह जांच, शुरुआती व्यू के साथ-साथ चेकआउट प्रोसेस के दौरान भी की जा सकती है, ताकि यह पक्का किया जा सके कि कोई गड़बड़ी न हो.
यूज़र फ़्लो को सही तरीके से काम करने के लिए लिखी गई Puppeteer स्क्रिप्ट में, अब किसी भी समय Lighthouse को शामिल किया जा सकता है. इससे, परफ़ॉर्मेंस और सबसे सही तरीकों को मेज़र किया जा सकता है. इस ट्यूटोरियल में, Lighthouse के नए मोड के बारे में बताया जाएगा. इनकी मदद से, यूज़र फ़्लो के अलग-अलग हिस्सों को मेज़र किया जा सकता है: नेविगेशन, स्नैपशॉट, और टाइमस्पैन.
सेटअप
यूज़र फ़्लो एपीआई अब भी झलक के तौर पर उपलब्ध हैं. हालांकि, इन्हें Lighthouse में आज ही इस्तेमाल किया जा सकता है. यहां दिए गए डेमो आज़माने के लिए, आपके पास 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
नेविगेशन
Lighthouse का नया "नेविगेशन" मोड, Lighthouse के स्टैंडर्ड व्यवहार को एक नाम दे रहा है: किसी पेज के कोल्ड लोड का विश्लेषण करना. इस मोड का इस्तेमाल, पेज लोड होने की परफ़ॉर्मेंस को मॉनिटर करने के लिए किया जाता है. हालांकि, यूज़र फ़्लो से नई अहम जानकारी भी मिल सकती है.
पेज लोड को कैप्चर करने वाले Lighthouse को स्क्रिप्ट करने के लिए:
- ब्राउज़र खोलने के लिए, Puppeteer का इस्तेमाल करें.
- Lighthouse यूज़र फ़्लो शुरू करें.
- टारगेट यूआरएल पर जाएं.
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();
यह सबसे आसान तरीका है. रिपोर्ट खोलने पर, खास जानकारी वाला व्यू दिखता है. इसमें सिर्फ़ एक चरण होता है. उस चरण पर क्लिक करने से, उस नेविगेशन के लिए Lighthouse की सामान्य रिपोर्ट दिखेगी.
Lighthouse की मदद से, इस पेज को लोड करने से पहले, कैश मेमोरी या लोकल स्टोरेज को मिटा दिया जाता है. हालांकि, किसी साइट पर आने वाले असल उपयोगकर्ताओं के पास कोल्ड और वॉर्म कैश मेमोरी का मिक्सचर होगा. साथ ही, इस तरह के कोल्ड लोड और अब भी वॉर्म कैश मेमोरी के साथ पेज पर वापस आने वाले उपयोगकर्ता के बीच परफ़ॉर्मेंस में काफ़ी अंतर हो सकता है.
वॉर्म लोड कैप्चर करना
इस स्क्रिप्ट में दूसरा नेविगेशन भी जोड़ा जा सकता है. इस बार, कैश मेमोरी और स्टोरेज को मिटाने की सुविधा को बंद किया जा सकता है. Lighthouse, नेविगेशन में डिफ़ॉल्ट रूप से इस सुविधा को चालू रखता है. इस उदाहरण में, 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();
इससे मिलने वाली फ़्लो रिपोर्ट कुछ इस तरह दिखती है:
कोल्ड और वॉर्म लोड के कॉम्बिनेशन से, यह पता चलता है कि असल उपयोगकर्ताओं को कैसा अनुभव मिल रहा है. अगर आपकी कोई ऐसी साइट है जहां उपयोगकर्ता एक ही विज़िट में कई पेज लोड करते हैं, तो इससे आपको यह ज़्यादा बेहतर तरीके से पता चल सकता है कि फ़ील्ड में उन्हें कैसा अनुभव मिल रहा है.
स्नैपशॉट
स्नैपशॉट एक नया मोड है, जो किसी खास समय पर Lighthouse ऑडिट चलाता है. सामान्य Lighthouse रन के उलट, पेज को फिर से लोड नहीं किया जाता. इससे, किसी पेज को सेट अप करने और उसकी मौजूदा स्थिति में उसकी जांच करने की सुविधा मिलती है. उदाहरण के लिए, ड्रॉप-डाउन मेन्यू खुला होने या फ़ॉर्म को कुछ हद तक भरने पर.
इस उदाहरण के लिए, मान लें कि आपको यह देखना है कि Squoosh में ऐडवांस सेटिंग के लिए कुछ नया यूज़र इंटरफ़ेस (यूआई), Lighthouse की अपने-आप होने वाली जांचों को पास करता है या नहीं. ये सेटिंग सिर्फ़ तब दिखती हैं, जब कोई इमेज लोड की गई हो और बेहतर सेटिंग दिखाने के लिए विकल्प मेन्यू को बड़ा किया गया हो.
इस प्रोसेस को Puppeteer की मदद से स्क्रिप्ट किया जा सकता है. साथ ही, हर चरण पर Lighthouse स्नैपशॉट लिया जा सकता है:
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 से) में परफ़ॉर्मेंस के नतीजों के बीच सबसे बड़ा अंतर, उपयोगकर्ता के इनपुट की कमी है. ऐसे में, टाइमस्पैन मोड आपकी मदद कर सकता है. यह यूज़र फ़्लो का आखिरी मोड है.
टाइमस्पैन, कुछ समय के लिए Lighthouse ऑडिट चलाता है. इसमें नेविगेशन शामिल हो भी सकता है और नहीं भी. यह इंटरैक्शन के दौरान, पेज पर होने वाली गतिविधियों को कैप्चर करने का एक शानदार तरीका है. उदाहरण के लिए, Lighthouse डिफ़ॉल्ट रूप से पेज लोड होने के दौरान सीएलएस को मेज़र करता है. हालांकि, फ़ील्ड में सीएलएस को शुरुआती नेविगेशन से लेकर पेज बंद होने तक मेज़र किया जाता है. अगर उपयोगकर्ता के इंटरैक्शन की वजह से सीएलएस ट्रिगर होता है, तो Lighthouse पहले इसका पता नहीं लगा पाता था और इसे ठीक करने में मदद नहीं कर पाता था.
Lighthouse के सामान्य नेविगेशन में सीएलएस 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.example.com/';
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 इस समस्या वाले सीएलएस व्यवहार की पहचान नहीं कर पाता था. हालांकि, यह असल उपयोगकर्ताओं के अनुभव में ज़रूर दिखता था. स्क्रिप्ट किए गए इंटरैक्शन के बजाय परफ़ॉर्मेंस टेस्टिंग करने से, लैब की विश्वसनीयता काफ़ी बढ़ जाती है.
सुझाव/राय या शिकायत पाने के लिए
Lighthouse में नए यूज़र फ़्लो एपीआई कई नए काम कर सकते हैं. हालांकि, आपके उपयोगकर्ताओं को जिन स्थितियों का सामना करना पड़ता है उन्हें मेज़र करना अब भी मुश्किल हो सकता है.
अगर आपका कोई सवाल है, तो कृपया Lighthouse के चर्चा फ़ोरम में पूछें. साथ ही, किसी भी गड़बड़ी या सुझाव को समस्या ट्रैकर में दर्ज करें.