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

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

Brendan Kenny

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

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

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

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

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

ตั้งค่า

API ของเส้นทางของผู้ใช้ยังอยู่ในเวอร์ชันตัวอย่าง แต่พร้อมใช้งานใน 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 จับภาพการโหลดหน้าเว็บ

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 แบบดั้งเดิมสําหรับการนําทางนั้น