คู่มือการย้ายข้อมูล Lighthouse v3

คำแนะนำนี้มีไว้สำหรับผู้ใช้ Lighthouse v2 ที่มีคุณสมบัติดังนี้

  • เรียกใช้ Lighthouse จากโหนดหรือบรรทัดคำสั่ง
  • ใช้เอาต์พุต JSON ของ Lighthouse

หากหลักเกณฑ์เหล่านี้ไม่เกี่ยวข้องกับคุณ เวิร์กโฟลว์ของการเรียกใช้ Lighthouse ส่วนใหญ่ก็จะเหมือนกัน ดูภาพรวมของฟีเจอร์และการเปลี่ยนแปลงใหม่ๆ ได้ที่ การประกาศ Lighthouse 3.0

การเปลี่ยนแปลงคำขอ

ตอนนี้ Lighthouse จะคำนวณประสิทธิภาพจำลองโดยค่าเริ่มต้นและการตั้งค่าการควบคุมได้เปลี่ยนแปลงไปอย่างมาก

แฟล็ก CLI

สถานการณ์ แฟล็ก v2 การตั้งค่าสถานะ v3
การควบคุม 3G ของเครื่องมือสำหรับนักพัฒนาเว็บ ไม่มี (ลักษณะการทำงานเริ่มต้น) --throttling-method=devtools
ไม่มีการควบคุม --disable-network-throttling --disable-cpu-throttling --throttling-method=provided
การควบคุมเครือข่าย ไม่มีการควบคุม CPU --disable-cpu-throttling --throttling-method=devtools --throttling.cpuSlowdownMultiplier=1
เรียกใช้การตรวจสอบประสิทธิภาพ --perf --preset=perf
เรียกใช้การตรวจสอบเนื้อหาผสม --mixed-content --preset=mixed-content

โมดูลโหนด

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

const fs = require('fs');
const lighthouse = require('lighthouse');

async function run() {
  // `onlyCategories` was previously only available as a config setting.
  // `output` was previously only available in CLI.
  const flags = {onlyCategories: ['performance'], output: 'html'};
  const html = (await lighthouse('https://google.com/', flags)).report;
  fs.writeFileSync('report.html', html);
}

การเปลี่ยนแปลงเอาต์พุต

รูปแบบระดับบนสุดใหม่ในเอาต์พุต JSON

ตอนนี้ออบเจ็กต์ JSON ที่ Lighthouse v3 แสดงผลจะมีพร็อพเพอร์ตี้ระดับบนสุด 3 รายการดังนี้

  • lhr ผลการตรวจสอบ Shorts สำหรับ "Lighthouse Results" โดยพื้นฐานแล้ว นี่เป็นออบเจ็กต์ระดับบนสุดใน v2 แต่ v3 ทำให้เกิดการเปลี่ยนแปลงที่ส่งผลกับรูปร่างของออบเจ็กต์นี้ด้วย ดูการเปลี่ยนแปลงของออบเจ็กต์ผลลัพธ์
  • artifacts ข้อมูลที่รวบรวมจาก Chrome ขณะตรวจสอบ ซึ่งก่อนหน้านี้มีการรวมเข้ากับ คุณสมบัติของ LHR
  • report รายงานที่จัดรูปแบบ HTML/JSON/CSV เป็นสตริง

การเปลี่ยนแปลงออบเจ็กต์ผลลัพธ์

ตามที่ได้กล่าวไว้ในรูปแบบระดับบนสุดใหม่ในเอาต์พุต JSON ผลการตรวจสอบพร้อมใช้งานแล้วผ่านพร็อพเพอร์ตี้ lhr ใน v2 เนื้อหาของออบเจ็กต์นี้คือเอาต์พุต JSON ระดับบนสุด แต่รูปร่างของออบเจ็กต์นี้เองมีการเปลี่ยนแปลงใน v3 ตารางด้านล่างแสดงการเปลี่ยนแปลงทั้งหมด

  • หากแถวมีค่าทั้งในคอลัมน์ v2 และ v3 หมายความว่าคุณควรแทนที่การอ้างอิงใดๆ ไปยังพร็อพเพอร์ตี้ v2 ในโค้ดด้วยรายการที่เทียบเท่ากับ v3
  • เมื่อแถวไม่มีค่าในคอลัมน์ v3 คอลัมน์ Notes จะอธิบายตัวเลือกของคุณ
  • โปรดทราบว่ารายการต่างๆ เช่น ID จะหมายถึงข้อความตัวยึดตำแหน่ง
พร็อพเพอร์ตี้ v2 เทียบเท่ากับ v3 Notes
initialUrl requestedUrl
url finalUrl
generatedTime fetchedTime
reportCategories categories เปลี่ยนจากอาร์เรย์เป็นออบเจ็กต์ที่มีคีย์
reportGroups categoryGroups
audits.ID.name audits.ID.id
audits.ID.description audits.ID.title
audits.ID.helpText audits.ID.description
audits.ID.scoringMode audits.ID.scoreDisplayMode ระบบขยายค่าที่เป็นไปได้เป็น numeric|binary|manual|informative|not-applicable|error แล้ว
audits.ID.score audits.ID.score คะแนนจะเป็นตัวเลขระหว่าง 0 ถึง 1 เสมอ (ไม่ใช่ 0-100) เมื่อ scoreDisplayMode เป็นตัวเลขหรือไบนารี สำหรับโหมดการแสดงผลอื่นๆ จะมีคะแนนอยู่ที่ null เสมอเพราะไม่มีเกณฑ์ว่าผ่าน/ไม่ผ่าน
audits.ID.displayValue audits.ID.displayValue สามารถเป็นอาร์เรย์ของอาร์กิวเมนต์รูปแบบ Printf สำหรับการประมาณค่าสตริงได้แล้ว
audits.ID.debugString audits.ID.explanation audits.ID.errorMessage audits.ID.warnings ค่า debugString ได้แปลงเป็นพร็อพเพอร์ตี้ 1 ใน 3 รายการข้างต้นแล้วโดยขึ้นอยู่กับความตั้งใจ
audits.ID.details audits.ID.details โครงสร้างของรายละเอียดเปลี่ยนไปเป็นการใช้งานที่เข้าใจได้ง่ายมากขึ้น แต่ละรายการใน .items เป็นออบเจ็กต์ที่มีคีย์ที่เชื่อถือได้แทนที่จะเป็น any[]
audits.ID.error audits.ID.scoreDisplayMode === 'error'
audits.ID.notApplicable audits.ID.scoreDisplayMode === 'not-applicable'
audits.ID.informative audits.ID.scoreDisplayMode === 'informative'
audits.ID.manual audits.ID.scoreDisplayMode === 'manual'
audits.ID.extendedInfo นำออกแล้ว โปรดใช้ details แทน