บทนำสู่การรันไลท์เฮาส์แบบเป็นโปรแกรม

เผยแพร่แล้ว: 2022-03-10

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

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

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

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

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

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

การปรับแต่งตัวเลือกประภาคาร

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

การกำหนดค่าการรันการทดสอบ Lighthouse

การกำหนดค่าการทดสอบ Lighthouse เป็นหนึ่งในงานที่ทำได้ง่ายหรือซับซ้อนเท่าที่คุณต้องการ

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

 function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); }); }

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

คุณสามารถระบุตัวเลือก Chrome ใดๆ ที่คุณอาจต้องใช้ในออบเจ็กต์ที่ส่งผ่านไปยัง chrome-launcher ในตัวอย่างจากเอกสารประกอบ ออบเจ็กต์ opts มีอาร์เรย์ที่เราเรียกว่า chromeFlags ซึ่งคุณสามารถส่งผ่านไปยัง chrome-launcher และพอร์ตที่คุณสามารถบันทึกพอร์ตที่ใช้โดย chrome-launcher ได้ จากนั้นจึงส่งต่อไปยัง Lighthouse

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

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

คุณสามารถใช้ emulatedFormFactor เพื่อระบุว่าคุณต้องการให้การทดสอบรันในโปรแกรมจำลองมือถือหรือเดสก์ท็อป คุณสามารถใช้ extraHeaders เพื่อเพิ่มคุกกี้ที่คุณอาจต้องใช้ในเบราว์เซอร์ ตัวอย่างเช่น การทดสอบที่เรียกใช้เฉพาะหมวดหมู่การช่วยสำหรับการเข้าถึงบนโปรแกรมจำลองเดสก์ท็อปที่ให้ผลลัพธ์เป็น HTML อาจมีออบเจ็กต์การกำหนดค่าที่มีลักษณะดังนี้:

 const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], }, }

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

การรายงานผลลัพธ์ที่กำหนดเอง

เมื่อเรียกใช้ Lighthouse โดยทางโปรแกรม คุณสามารถให้ผลลัพธ์ส่งคืนในตัวเลือกการจัดรูปแบบอย่างน้อย 1 ใน 3 ตัวเลือก และ – และนี่คือส่วนที่น่าตื่นเต้นที่สุดในความคิดของฉัน – คุณสามารถเข้าถึงออบเจ็กต์ Lighthouse Result (LHR) แบบดิบได้

HTML, JSON, CSV

Lighthouse จะจัดรูปแบบผลลัพธ์โดยอัตโนมัติในสามวิธี: HTML, JSON หรือ CSV ผลลัพธ์เหล่านี้เป็นผลลัพธ์ที่กำหนดค่าไว้ล่วงหน้าทั้งหมดโดยอิงตามเทมเพลตการรายงานพื้นฐานของ Lighthouse ซึ่งเป็นสิ่งที่คุณเห็นหากคุณเรียกใช้การทดสอบ Lighthouse ภายใน Chrome DevTools เป็นต้น ในออบเจ็กต์การกำหนดค่า lighthouseOptions จากส่วนก่อนหน้า คุณสามารถดูคีย์สำหรับ output ที่มีอาร์เรย์ที่มีสตริงเดียว: html นี่ระบุว่าฉันต้องการให้ผลลัพธ์ส่งคืนในรูปแบบ HTML เท่านั้น ถ้าฉันต้องการผลลัพธ์ทั้งในรูปแบบ HTML และ JSON อาร์เรย์นั้นจะมีลักษณะดังนี้ ['html', 'json']

เมื่อ Lighthouse ทำงาน มันจะส่งคืนวัตถุผลลัพธ์ที่มีสองคีย์: report และ lhr เราจะพูดถึงเนื้อหาของคีย์ lhr ในส่วนถัดไป แต่คีย์ report มีอาร์เรย์ที่มีรูปแบบผลลัพธ์ตามที่คุณร้องขอ ตัวอย่างเช่น หากเราขอ ['html', 'json'] แล้ว results.report[0] จะมีผลลัพธ์ในรูปแบบ HTML และ results.report[1] จะมีผลลัพธ์ในรูปแบบ JSON

วัตถุ LHR

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

คุณสามารถใช้ผลลัพธ์เหล่านี้ได้หลายวิธี รวมถึงการสร้างรายงานที่กำหนดเองและการรวบรวมข้อมูลจากการรันหลายครั้งเพื่อการวิเคราะห์

ตัวอย่าง: การเรียกใช้การทดสอบการช่วยสำหรับการเข้าถึงสำหรับมือถือและเดสก์ท็อป

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

หมายเหตุ : หากคุณต้องการดูตัวอย่างการทำงานของโค้ดด้านล่างในการวิเคราะห์หน้าแรกของ Sparkbox คุณสามารถค้นหาที่เก็บได้ที่นี่

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

 const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, }, ]

จากนั้น ฉันสามารถสร้างฟังก์ชันที่จะวนรอบอาร์เรย์นี้ และเรียกใช้การทดสอบ Lighthouse สำหรับแต่ละวัตถุที่พบในอาร์เรย์

สิ่งหนึ่งที่ควรทราบคือ มีความจำเป็นต้องทำให้เกิดการหน่วงเวลาระหว่างการรันแต่ละครั้ง ไม่เช่นนั้น Chromium อาจสับสนและการทำงานจะผิดพลาด ในการทำเช่นนี้ ฉันได้เพิ่มฟังก์ชัน wait ที่ส่งกลับสัญญาเมื่อช่วง setTimeout เสร็จสิ้น

 function wait(val) { return new Promise(resolve => setTimeout(resolve, val)); } function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); }); } async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("****** Starting Lighthouse analysis ******"); await launchLighthouse(optionSet, opts, results); } }

ในกรณีนี้ ฉันกำลังส่งผลลัพธ์ไปยังฟังก์ชัน reportResults จากที่นั่น ฉันจะบันทึกผลลัพธ์ลงในไฟล์ในเครื่อง พิมพ์ผลลัพธ์ไปยังคอนโซล และส่งผลไปยังฟังก์ชันที่จะพิจารณาว่าการทดสอบผ่านหรือไม่ผ่านเกณฑ์การเข้าถึงของเรา

 async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome); }

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

ในตัวอย่างนี้ ในออบเจ็กต์ lighthouseOptions อาร์เรย์ของเราจะขอ HTML ก่อน แล้วจึงค่อย JSON ดังนั้นอาร์เรย์ report จะมีผลลัพธ์ในรูปแบบ HTML ก่อนและผลลัพธ์ที่จัดรูปแบบ JSON เป็นอันดับที่สอง ฟังก์ชัน writeToLocalFile จะบันทึกเวอร์ชันที่ถูกต้องของผลลัพธ์ในไฟล์ที่มีชื่อที่กำหนดเอง

 function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return `${currentTime}-${emulatedFormFactor}.${fileExtension}`; } function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, `reports/accessibility/${fileName}`).catch(error => console.error(error)); } return null; }

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

 function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n********************************\n'); console.log(`Options: ${optionSet.settings.emulatedFormFactor}\n`); console.log(`${title}: ${score}`); console.log('\n********************************'); }

และสุดท้าย ฉันต้องการล้มเหลวในการทดสอบหากคะแนนการช่วยสำหรับการเข้าถึงไม่ตรงกับคะแนนเกณฑ์ของฉันที่ 95

 function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } } }

ฉันขอเชิญคุณทุกคนลองใช้มันและสำรวจวิธีต่างๆ ที่ Lighthouse สามารถช่วยตรวจสอบคุณภาพไซต์ของคุณได้

บันทึกสุดท้าย

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

ดังที่ปีเตอร์ ดรักเกอร์กล่าวว่า:

“ถ้าคุณไม่สามารถวัดได้ คุณก็ไม่สามารถปรับปรุงมันได้”

ความสามารถในการไม่เพียงแต่วัดแต่ตรวจสอบคุณภาพเว็บไซต์ของเรา โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ที่ซับซ้อน จะช่วยให้เราสร้างเว็บที่ดีขึ้นได้อย่างมาก

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

การทดสอบ A/B สำหรับประสบการณ์มือถือครั้งแรก
วิธีทดสอบแนวคิดการออกแบบเพื่อประสิทธิผล
ความสำคัญของการทดสอบการช่วยสำหรับการเข้าถึงด้วยตนเอง
การเรียนรู้ของเครื่องสำหรับนักพัฒนาส่วนหน้าด้วย Tensorflow.js
เริ่มต้นออกแบบ UI ด้วยเคล็ดลับเหล่านี้เพื่อเพิ่มความเร็วเวิร์กโฟลว์ของคุณ