جریان‌های کاربر Lighthouse

میانای برنامه‌سازی کاربردی Lighthouse جدیدی را برای سنجش عملکرد و روال‌های مطلوب در سراسر جریان کاربر امتحان کنید.

Brendan Kenny
Brendan Kenny
GitHub Bluesky

Lighthouse ابزاری فوق‌العاده برای آزمایش عملکرد و روال‌های مطلوب درطول بارگیری اولیه صفحه است. بااین‌حال، استفاده از Lighthouse برای تجزیه‌وتحلیل جنبه‌های دیگر عمر صفحه، مانند موارد زیر، به‌طور سنتی دشوار بوده است:

  • صفحه با حافظه نهان گرم بار می‌شود
  • صفحه‌های دارای Service Worker فعال‌شده
  • درنظر گرفتن تعامل‌های احتمالی کاربر

این یعنی Lighthouse ممکن است اطلاعات حیاتی را ازدست بدهد. معیارهای کلیدی اصلی وب براساس همه بارگیری‌های صفحه است، نه فقط آن‌هایی که حافظه نهان خالی دارند. به‌علاوه، سنجه‌هایی مثل تغییر چیدمان تجمعی (CLS) در تمام مدتی که صفحه باز است قابل‌اندازه‌گیری هستند.

Lighthouse دارای یک API جریان کاربر جدید است که امکان آزمایش آزمایشگاهی را در هر نقطه‌ای از طول عمر صفحه فراهم می‌کند. از Puppeteer برای نوشتن اسکریپت بارگیری‌های صفحه و راه‌اندازی تعاملات مصنوعی کاربر استفاده می‌شود، و Lighthouse را می‌توان به روش‌های مختلفی برای ثبت اطلاعات آماری کلیدی درطول آن تعاملات فراخوانی کرد. این یعنی عملکرد را می‌توان هم درطول بار کردن صفحه و هم درطول تعامل با صفحه سنجید. بررسی‌های دسترس‌پذیری را می‌توان در CI اجرا کرد، نه فقط در نمای اولیه بلکه در عمق روند تسویه‌حساب تا مطمئن شوید هیچ‌چیز پس‌رفت نمی‌کند.

تقریباً هر اسکریپت Puppeteer که برای اطمینان از جریان کاربر فعال نوشته شده است، اکنون می‌تواند Lighthouse را در هر نقطه‌ای برای اندازه‌گیری عملکرد و بهترین شیوه‌ها در سراسر آن درج کند. این آموزش حالت‌های جدید Lighthouse را که می‌توانند بخش‌های مختلف جریان‌های کاربر را اندازه‌گیری کنند، بررسی می‌کند: پیمایش‌ها، عکس‌های آنی، و بازه‌های زمانی.

راه‌اندازی

میاناهای برنامه‌سازی کاربردی جریان کاربر هنوز در مرحله پیش‌نمایش هستند، اما امروز در Lighthouse دردسترس‌اند. برای امتحان کردن نسخه‌های نمایشی زیر، به Node نسخه ۱۴ یا بالاتر نیاز دارید. فهرست راهنمای خالی ایجاد کنید و در آن این دستور را اجرا کنید:

# 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 که بارگیری صفحه را ضبط می‌کند:

  1. از puppeteer برای باز کردن مرورگر استفاده کنید.
  2. جریان کاربر Lighthouse را شروع کنید.
  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();

این ساده‌ترین جریان است. وقتی گزارش باز می‌شود، نمای خلاصه‌ای را فقط با یک مرحله نشان می‌دهد. با کلیک کردن روی آن مرحله، گزارش Lighthouse سنتی برای آن پیمایش نشان داده می‌شود.

گزارش جریان 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 را در یک نقطه زمانی اجرا می‌کند. برخلاف اجرای عادی Lighthouse، صفحه مجدداً بار نمی‌شود. این کار امکان راه‌اندازی صفحه و آزمایش آن را در وضعیت دقیق آن باز می‌کند: برای مثال، با باز بودن منو کرکره‌ای یا پر شدن بخشی از فرم.

برای این مثال، فرض کنید می‌خواهید بررسی کنید که آیا واسط کاربر جدیدی برای «تنظیمات پیشرفته» در Squoosh بررسی‌های خودکار Lighthouse را با موفقیت می‌گذراند یا نه. این تنظیمات فقط زمانی قابل‌مشاهده است که تصویری بار شده باشد و منوِ گزینه‌ها برای نمایش تنظیمات پیشرفته ازهم باز شده باشد.

منو تنظیمات پیشرفته Squoosh
منو تنظیمات پیشرفته Squoosh

این فرایند با 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();

گزارش حاصل نشان می‌دهد که نتایج به‌طور کلی خوب هستند، اما ممکن است برخی معیارهای دسترس‌پذیری وجود داشته باشند که باید به‌صورت دستی بررسی شوند:

گزارش جریان Lighthouse که مجموعه‌ای از عکس‌های آنی گرفته‌شده را نشان می‌دهد

بازه‌های زمانی

یکی از بزرگ‌ترین تفاوت‌های بین نتایج عملکرد در فیلد (مانند CrUX) و در آزمایشگاه (مانند Lighthouse) نبود ورودی کاربر است. اینجا است که بازه زمانی (آخرین حالت جریان کاربر) می‌تواند کمک کند.

بازه زمانی ممیزی‌های Lighthouse را درطول یک دوره زمانی اجرا می‌کند که ممکن است شامل پیمایش باشد یا نباشد. این روشی عالی برای ثبت اتفاقاتی است که درطول تعاملات در صفحه رخ می‌دهد. برای مثال، به‌طور پیش‌فرض Lighthouse مقدار CLS را درطول بار شدن صفحه اندازه‌گیری می‌کند، اما در فیلد، CLS از پیمایش اولیه تا بسته شدن صفحه اندازه‌گیری می‌شود. اگر تعاملات کاربر محرک CLS باشد، این چیزی است که Lighthouse قبلاً نمی‌توانست آن را شناسایی کند و به رفع آن کمک کند.

یک پیمایش Lighthouse معمولی دارای CLS صفر خواهد بود. بااین‌حال، پس‌از پیمایش، صفحه جابه‌جایی‌های چیدمان مشکل‌ساز خواهد داشت و مقدار 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.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();

این کار گزارشی تولید می‌کند که ناوبری معمولی را با بازه زمانی‌ای که هم شامل ناوبری و هم پیمایش پس‌از آن است مقایسه می‌کند:

گزارش جریان Lighthouse که مجموعه‌ای از عکس‌های آنی گرفته‌شده را نشان می‌دهد

با بررسی دقیق هر مرحله، مرحله فقط پیمایش CLS صفر را نشان می‌دهد. سایت عالی!

گزارش Lighthouse که فقط پیمایش صفحه را با همه سنجه‌های سبز پوشش می‌دهد

اما مرحله «پیمایش و پیمایش» داستان دیگری را روایت می‌کند. درحال‌حاضر فقط «مجموع زمان مسدودسازی» و «تغییر چیدمان تجمعی» در بازه‌های زمانی دردسترس هستند، اما محتوای بارشده به‌صورت کُند در این صفحه به‌وضوح CLS را برای سایت کاهش می‌دهد.

گزارش Lighthouse که پیمایش صفحه و پیمایش با CLS ناموفق را پوشش می‌دهد

قبلاً Lighthouse نمی‌توانست این رفتار مشکل‌ساز CLS را شناسایی کند، هرچند تقریباً به‌طور قطع در تجربه کاربران واقعی ظاهر می‌شد. آزمایش عملکرد روی تعامل‌های اسکریپت‌شده، وفاداری آزمایشگاه را به‌طور قابل‌توجهی بهبود می‌بخشد.

به‌دنبال بازخورد

میاناهای برنامه‌سازی کاربردی جریان کاربر جدید در Lighthouse می‌توانند کارهای جدید زیادی انجام دهند، اما ممکن است اندازه‌گیری نوع سناریوهایی که کاربران شما با آن‌ها مواجه می‌شوند همچنان پیچیده باشد.

لطفاً هرگونه سؤالی را در تالارهای گفتگوی Lighthouse مطرح کنید و هرگونه اشکال یا پیشنهاد را در ردیاب مشکل ثبت کنید.