เครื่องมือแบบโมดูลใหม่ที่ช่วยให้รวบรวมข้อมูลประสิทธิภาพจากหลายแหล่งได้โดยอัตโนมัติ
AutoWebPerf (AWP) คืออะไร
AutoWebPerf (AWP) เป็นเครื่องมือแบบโมดูลที่ช่วยให้รวบรวมข้อมูลประสิทธิภาพจากแหล่งที่มาหลายแห่งได้โดยอัตโนมัติ ปัจจุบันมีเครื่องมือมากมาย ที่พร้อมใช้งานเพื่อวัดประสิทธิภาพเว็บไซต์สำหรับ ขอบเขตต่างๆ (ห้องทดลองและ ภาคสนาม) เช่น รายงาน UX ของ Chrome, PageSpeed Insights หรือ WebPageTest AWP มีการผสานรวม กับเครื่องมือตรวจสอบต่างๆ ด้วยการตั้งค่าที่ง่ายดายเพื่อให้คุณตรวจสอบ ประสิทธิภาพของเว็บไซต์ได้อย่างต่อเนื่องในที่เดียว
การเผยแพร่คำแนะนำเกี่ยวกับ Web Vitals หมายความว่าการตรวจสอบหน้าเว็บอย่างใกล้ชิดและสม่ำเสมอมีความสำคัญมากขึ้นเรื่อยๆ วิศวกรที่อยู่เบื้องหลังเครื่องมือนี้ได้ทำการตรวจสอบประสิทธิภาพมาหลายปีแล้ว และได้ สร้าง AWP ขึ้นมาเพื่อทำให้ส่วนหนึ่งของกิจกรรมประจำวันซึ่งต้องทำด้วยตนเอง ซ้ำๆ และใช้เวลานานเป็นไปโดยอัตโนมัติ ปัจจุบัน AWP มีความพร้อมในระดับหนึ่งแล้วและพร้อมที่จะแชร์ในวงกว้างเพื่อให้ทุกคนได้รับประโยชน์จากระบบอัตโนมัติที่ AWP นำมาใช้
เครื่องมือนี้เข้าถึงได้ในที่เก็บสาธารณะ AutoWebPerf ใน GitHub
AWP มีไว้เพื่ออะไร
แม้ว่าจะมีเครื่องมือและ API หลายอย่างที่ใช้ตรวจสอบประสิทธิภาพของหน้าเว็บ แต่ส่วนใหญ่จะแสดงข้อมูลที่วัดในเวลาที่เฉพาะเจาะจง หากต้องการตรวจสอบเว็บไซต์อย่างเหมาะสมและรักษาประสิทธิภาพที่ดีของหน้าเว็บที่สำคัญ เราขอแนะนําให้วัด Core Web Vitals อย่างต่อเนื่องเมื่อเวลาผ่านไปและสังเกตแนวโน้ม
AWP ช่วยให้การดำเนินการดังกล่าวง่ายขึ้นด้วยการจัดหาเครื่องมือและการผสานรวม API ที่สร้างไว้ล่วงหน้า ซึ่งสามารถกำหนดค่าแบบเป็นโปรแกรมเพื่อทำให้การค้นหาที่เกิดซ้ำเป็นแบบอัตโนมัติไปยัง API การตรวจสอบประสิทธิภาพต่างๆ
เช่น เมื่อใช้ AWP คุณสามารถตั้งค่าการทดสอบรายวันในหน้าแรกเพื่อบันทึกข้อมูลภาคสนามจาก CrUX API และข้อมูลห้องทดลองจากรายงาน Lighthouse จาก PageSpeed Insights ข้อมูลนี้สามารถเขียนและจัดเก็บไว้ได้ตลอดเวลา เช่น ใน Google ชีต แล้วนำมาแสดงภาพในแดชบอร์ด Data Studio AWP จะทำให้ส่วนที่ต้องใช้แรงมากของกระบวนการทั้งหมดเป็นไปโดยอัตโนมัติ จึงเป็นโซลูชันที่ยอดเยี่ยมในการติดตามแนวโน้มในห้องปฏิบัติการและภาคสนามเมื่อเวลาผ่านไป ดูรายละเอียดเพิ่มเติมได้ที่การแสดงผลลัพธ์การตรวจสอบใน Data Studio ด้านล่าง)
ภาพรวมสถาปัตยกรรม
AWP เป็นไลบรารีแบบโมดูลาร์ที่มีโมดูล 3 ประเภท ได้แก่
- เครื่องมือค้นหา
- โมดูลตัวเชื่อมต่อ
- โมดูล gatherer
เครื่องมือนี้จะรับรายการการทดสอบจากเครื่องมือเชื่อมต่อ (เช่น จากไฟล์ CSV ในเครื่อง) เรียกใช้การตรวจสอบประสิทธิภาพผ่านเครื่องมือรวบรวมข้อมูลที่เลือก (เช่น PageSpeed Insights) และเขียนผลลัพธ์ไปยังเครื่องมือเชื่อมต่อเอาต์พุต (เช่น Google ชีต)
AWP มาพร้อมกับเครื่องมือรวบรวมและตัวเชื่อมต่อที่ติดตั้งใช้งานไว้ล่วงหน้าจำนวนหนึ่ง ดังนี้
- โปรแกรมรวบรวมข้อมูลที่ติดตั้งใช้งานล่วงหน้า
- เครื่องมือเชื่อมต่อที่ติดตั้งไว้ล่วงหน้า
- Google ชีต
- JSON
- CSV
การตรวจสอบอัตโนมัติด้วย AWP
AWP จะทำการตรวจสอบประสิทธิภาพโดยอัตโนมัติผ่านแพลตฟอร์มการตรวจสอบที่คุณต้องการ เช่น PageSpeed Insights WebPageTest หรือ CrUX API AWP มีความยืดหยุ่นในการเลือกตำแหน่งที่จะโหลดรายการการทดสอบ และตำแหน่งที่จะเขียนผลลัพธ์
เช่น คุณสามารถเรียกใช้การตรวจสอบสำหรับรายการการทดสอบที่จัดเก็บไว้ใน Google ชีต และเขียนผลลัพธ์ลงในไฟล์ CSV ด้วยคำสั่งด้านล่าง
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
การตรวจสอบที่เกิดซ้ำ
คุณสามารถเรียกใช้การตรวจสอบที่เกิดซ้ำได้ทุกวัน ทุกสัปดาห์ หรือทุกเดือน เช่น คุณสามารถเรียกใช้การตรวจสอบรายวันสำหรับรายการการทดสอบที่กำหนดไว้ใน JSON ในเครื่องได้ดังนี้
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
คำสั่งด้านล่างจะอ่านรายการการทดสอบการตรวจสอบจากไฟล์ JSON ในเครื่อง เรียกใช้ การตรวจสอบในเครื่อง จากนั้นส่งออกผลลัพธ์ไปยังไฟล์ CSV ในเครื่อง
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
หากต้องการเรียกใช้การตรวจสอบทุกวันเป็นบริการที่ทำงานอยู่เบื้องหลังอย่างต่อเนื่อง คุณสามารถใช้คำสั่งด้านล่างแทนได้
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
หรือจะตั้งค่า crontab ในสภาพแวดล้อมที่คล้าย Unix เพื่อเรียกใช้ AWP เป็นงาน cron รายวันก็ได้
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
ดูวิธีเพิ่มเติมในการทำให้การตรวจสอบรายวันและการรวบรวมผลลัพธ์เป็นไปโดยอัตโนมัติได้ในที่เก็บ AWP GitHub
การแสดงผลลัพธ์การตรวจสอบใน Data Studio
นอกจากการวัด Core Web Vitals อย่างต่อเนื่องแล้ว คุณยังต้องสามารถประเมินแนวโน้มและค้นพบการถดถอยที่อาจเกิดขึ้นด้วยเมตริกผู้ใช้จริง (RUM) หรือข้อมูลรายงาน Chrome UX (CrUX) ที่ AWP รวบรวม โปรดทราบว่ารายงาน Chrome UX (CrUX) เป็นการรวบรวมข้อมูลแบบเลื่อน 28 วัน ดังนั้นเราขอแนะนำให้ใช้ข้อมูล RUM ของคุณเองควบคู่ไปกับ CrUX เพื่อให้คุณตรวจพบการเกิดปัญหาซ้ำได้เร็วขึ้น
Data Studio เป็นเครื่องมือแสดงข้อมูลเป็นภาพฟรีที่คุณโหลดเมตริกประสิทธิภาพ และวาดเทรนด์เป็นแผนภูมิได้อย่างง่ายดาย ตัวอย่างเช่น แผนภูมิอนุกรมเวลา ด้านล่างแสดง Core Web Vitals ตามข้อมูลรายงาน Chrome UX แผนภูมิหนึ่งแสดง Cumulative Layout Shift ที่เพิ่มขึ้นในช่วงไม่กี่สัปดาห์ที่ผ่านมา ซึ่งหมายถึงการถดถอยในความเสถียรของเลย์เอาต์สำหรับบางหน้า ในกรณีนี้ คุณควรให้ความสำคัญกับการวิเคราะห์ปัญหาพื้นฐานของหน้าเว็บเหล่านี้
หากต้องการลดความซับซ้อนของกระบวนการตั้งแต่ต้นจนจบ ตั้งแต่การเก็บรวบรวมข้อมูลไปจนถึงการแสดงภาพ คุณ สามารถเรียกใช้ AWP ด้วยรายการ URL เพื่อส่งออกผลลัพธ์ไปยัง Google ชีตโดยอัตโนมัติ ด้วยคำสั่งต่อไปนี้
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
หลังจากรวบรวมเมตริกรายวันในสเปรดชีตแล้ว คุณจะสร้างแดชบอร์ด Data Studio ที่โหลดข้อมูลจากสเปรดชีตโดยตรง และพล็อต แนวโน้มลงในแผนภูมิอนุกรมเวลาได้ ดูขั้นตอนโดยละเอียดเกี่ยวกับวิธีตั้งค่า AWP ด้วยสเปรดชีตเป็นแหล่งข้อมูลเพื่อแสดงภาพใน Data Studio ได้ที่ตัวเชื่อมต่อ API สเปรดชีตของ Google
ขั้นตอนต่อไปคืออะไร
AWP มีวิธีที่ง่ายและผสานรวมในการลดความพยายามในการตั้งค่าไปป์ไลน์การตรวจสอบอย่างต่อเนื่องเพื่อวัด Core Web Vitals และเมตริกประสิทธิภาพอื่นๆ ปัจจุบัน AWP ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุด และจะยังคงให้บริการฟีเจอร์เพิ่มเติมเพื่อรองรับกรณีการใช้งานอื่นๆ ในอนาคต
ดูข้อมูลเพิ่มเติมได้ในที่เก็บ AutoWebPerf