โฟลว์ของผู้ใช้ Lighthouse

ลองใช้ Lighthouse API ใหม่เพื่อวัดประสิทธิภาพและแนวทางปฏิบัติแนะนำตลอดการไหลเวียนของผู้ใช้

Brendan Kenny
Brendan Kenny
X GitHub

Lighthouse เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบประสิทธิภาพและแนวทางปฏิบัติแนะนำระหว่างการโหลดหน้าเว็บเริ่มต้น อย่างไรก็ตาม ปกติแล้วการใช้ Lighthouse จะวิเคราะห์ด้านอื่นๆ ของหน้าเว็บ เช่น

  • การโหลดหน้าเว็บด้วยแคชที่อุ่นขึ้น
  • หน้าเว็บที่มี Service Worker ที่เปิดใช้งานแล้ว
  • การพิจารณาการโต้ตอบของผู้ใช้ที่อาจเกิดขึ้น

ซึ่งหมายความว่า Lighthouse อาจพลาดข้อมูลที่สำคัญ Core Web Vitals อิงตามการโหลดหน้าเว็บทั้งหมด ไม่ใช่แค่รายการที่มีแคชว่าง นอกจากนี้ เมตริกต่างๆ เช่น Cumulative Layout Shift (CLS) จะวัดได้ตลอดช่วงเวลาที่เปิดหน้านั้นๆ

Lighthouse มี API การไหลเวียนของผู้ใช้แบบใหม่ที่อนุญาตให้ทำการทดสอบในห้องทดลองเมื่อใดก็ได้ภายในอายุการใช้งานของหน้าเว็บ Puppeteer ใช้เพื่อเขียนสคริปต์การโหลดหน้าเว็บและทริกเกอร์การโต้ตอบของผู้ใช้แบบสังเคราะห์ รวมถึงสามารถเรียกใช้ Lighthouse ได้หลายวิธีเพื่อบันทึกข้อมูลเชิงลึกที่สำคัญระหว่างการโต้ตอบดังกล่าว ซึ่งหมายความว่าระบบจะวัดประสิทธิภาพในระหว่างการโหลดหน้าเว็บและระหว่างการโต้ตอบกับหน้าเว็บได้ การตรวจสอบการช่วยเหลือพิเศษสามารถดำเนินการใน CI ได้ ไม่ใช่เฉพาะในมุมมองเริ่มต้น แต่เจาะลึกในขั้นตอนการชำระเงินเพื่อไม่ให้เกิดปัญหาซ้ำ

สคริปต์ Puppeteer เกือบทั้งหมดที่เขียนขึ้นเพื่อให้มั่นใจว่าโฟลว์ผู้ใช้ที่ใช้งานได้สามารถแทรก Lighthouse ได้ทุกเมื่อเพื่อวัดประสิทธิภาพและแนวทางปฏิบัติแนะนำในทุกๆ ด้าน บทแนะนำนี้จะแนะนำโหมด 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

"การนำทาง" ใหม่ของ Lighthouse จะตั้งชื่อตามลักษณะการทำงานมาตรฐาน (จนถึงปัจจุบัน) ของ Lighthouse ซึ่งก็คือการวิเคราะห์ Cold Load ของหน้าเว็บ นี่คือโหมดที่ใช้ตรวจสอบประสิทธิภาพการโหลดหน้าเว็บ แต่การไหลเวียนของผู้ใช้ยังเปิดโอกาสให้มีข้อมูลเชิงลึกใหม่ๆ อีกด้วย

วิธีเขียนสคริปต์ Lighthouse เพื่อจับภาพการโหลดหน้าเว็บ

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

นี่คือขั้นตอนที่ง่ายที่สุด เมื่อเปิด รายงานจะแสดงมุมมองสรุปที่มีเพียงขั้นตอนเดียว การคลิกที่ขั้นตอนดังกล่าวจะแสดงรายงาน Lighthouse แบบดั้งเดิมสำหรับการนำทางนั้น

วันที่ รายงานโฟลว์ของ Lighthouse ที่แสดงการนำทางแบบเดี่ยว
ดูรายงานแบบเรียลไทม์

ใน Lighthouse ตามปกติ หน้านี้จะโหลดโดยล้างแคชหรือพื้นที่เก็บข้อมูลในเครื่องก่อน แต่ผู้ใช้จริงที่เข้าชมเว็บไซต์จะมีการเข้าชมโดยใช้แคชแบบเย็นและอบอุ่นปนกัน และอาจมีความแตกต่างด้านประสิทธิภาพอย่างมากระหว่าง Cold Load เช่นนี้กับผู้ใช้ที่กลับมาที่หน้าซึ่งมีแคชที่ยังคงความอบอุ่น

การถ่ายภาพ Warm Load

นอกจากนี้ คุณยังเพิ่มการนำทางที่ 2 ลงในสคริปต์นี้ได้ โดยครั้งนี้จะเป็นการปิดใช้การล้างแคชและพื้นที่เก็บข้อมูลที่ 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 แสดงการนำทาง 2 แบบ โดย 1 การนำทางแบบเย็นและโหมดอุ่น 1 จุด ซึ่งมีคะแนนประสิทธิภาพสูงกว่า
ดูรายงานแบบเรียลไทม์

การผสมผสานระหว่าง Cold Load และ Warm Load จะให้ภาพรวมที่สมบูรณ์ยิ่งขึ้นเกี่ยวกับประสบการณ์ของผู้ใช้จริง หากคุณมีเว็บไซต์ที่ผู้ใช้โหลดหน้าเว็บหลายหน้าในการเข้าชมครั้งเดียวกัน ก็อาจทำให้คุณเห็นประสบการณ์ที่ผู้เข้าชมอยู่ในพื้นที่นั้นได้อย่างสมเหตุสมผลมากขึ้น

สแนปชอต

สแนปชอตเป็นโหมดใหม่ที่เรียกใช้การตรวจสอบ Lighthouse ในช่วงเวลาหนึ่งๆ หน้าเว็บไม่ได้รับการโหลดซ้ำ ซึ่งต่างจากการเรียกใช้ Lighthouse ปกติ ซึ่งจะปลดล็อกความสามารถในการตั้งค่าหน้าเว็บและทดสอบในสถานะที่แน่นอน เช่น การเปิดเมนูแบบเลื่อนลงหรือแบบฟอร์มที่กรอกข้อมูลลงไปบางส่วน เป็นต้น

ในตัวอย่างนี้ สมมติว่าคุณต้องการตรวจสอบว่า UI ใหม่บางรายการสำหรับการตั้งค่าขั้นสูงภายใน 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 เป็น 0 อย่างไรก็ตาม เมื่อเลื่อนหน้าเว็บแล้ว เลย์เอาต์ที่เป็นปัญหาจะมีการเปลี่ยนเลย์เอาต์และค่า CLS จะสูงขึ้น

ลองใช้เว็บไซต์เดโม

สคริปต์ต่อไปนี้จะสร้างรายงานโฟลว์ผู้ใช้ที่มีการดำเนินการทั้ง 2 แบบ เพื่อแสดงความแตกต่าง

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

วิธีนี้จะสร้างรายงานที่เปรียบเทียบการนําทางปกติกับช่วงเวลาซึ่งมีทั้งการนําทางและการเลื่อนหลังจากนั้น

วันที่ รายงานโฟลว์ของ Lighthouse แสดงชุดสแนปชอตที่ถ่าย
ดูรายงานแบบเรียลไทม์

เมื่อเจาะลึกในแต่ละขั้นตอน ขั้นตอนสำหรับการนำทางเท่านั้นจะแสดง CLS เป็น 0 ไซต์ที่ยอดเยี่ยม

รายงาน Lighthouse ที่ครอบคลุมเฉพาะการนำทางหน้าเว็บซึ่งมีเมตริกสีเขียวทั้งหมด

แต่การตั้งค่า "นำทางและเลื่อน" จะบอกเรื่องราวที่แตกต่าง ปัจจุบันมีเฉพาะเวลาทั้งหมดในการบล็อกและการเปลี่ยนเลย์เอาต์สะสมเท่านั้นที่มีให้ใช้งานในช่วงเวลาต่างๆ แต่เนื้อหาที่โหลดแบบ Lazy Loading ในหน้านี้จะใส่ CLS ของเว็บไซต์อย่างชัดเจน

รายงาน Lighthouse ที่ครอบคลุมการนำทางหน้าเว็บและการเลื่อนด้วย CLS ที่ไม่ผ่าน

ก่อนหน้านี้ Lighthouse ระบุลักษณะการทำงานของ CLS ที่เป็นปัญหาไม่ได้ แต่จะแสดงในประสบการณ์การใช้งานของผู้ใช้จริงเกือบทั้งหมด การทดสอบประสิทธิภาพผ่านการโต้ตอบที่มีสคริปต์จะช่วยเพิ่มความแม่นยำของห้องปฏิบัติการได้อย่างมาก

กำลังมองหาความคิดเห็น

API การไหลเวียนของผู้ใช้ใหม่ใน Lighthouse ทำสิ่งใหม่ๆ ได้หลายอย่าง แต่การวัดประเภทสถานการณ์ที่ผู้ใช้พบอาจซับซ้อน

หากมีคำถาม โปรดติดต่อฟอรัมสนทนาของ Lighthouse และรายงานข้อบกพร่องหรือคำแนะนำในเครื่องมือติดตามปัญหา