เครื่องมือแบบโมดูลใหม่ที่ช่วยให้รวบรวมข้อมูลประสิทธิภาพจากแหล่งที่มาหลายแห่งโดยอัตโนมัติ
AutoWebPerf (AWP) คืออะไร
AutoWebPerf (AWP) เป็นเครื่องมือแบบโมดูลที่ช่วยให้รวบรวมข้อมูลประสิทธิภาพจากแหล่งที่มาหลายแห่งได้โดยอัตโนมัติ ปัจจุบันมีเครื่องมือมากมายที่วัดประสิทธิภาพของเว็บไซต์สำหรับขอบเขตต่างๆ (ห้องทดลองและภาคสนาม) เช่น รายงาน UX ของ Chrome, PageSpeed Insights หรือ WebPageTest AWP มีการผสานรวมกับเครื่องมือตรวจสอบต่างๆ ด้วยการตั้งค่าที่ง่ายดายเพื่อให้คุณตรวจสอบประสิทธิภาพเว็บไซต์ได้อย่างต่อเนื่องในที่เดียว
การเปิดตัวหลักเกณฑ์ของ Web Vitals หมายความว่าการตรวจสอบหน้าเว็บอย่างใกล้ชิดและต่อเนื่องมีความสำคัญมากขึ้นเรื่อยๆ วิศวกรที่อยู่เบื้องหลังเครื่องมือนี้ทําการตรวจสอบประสิทธิภาพมาหลายปีแล้ว และสร้าง 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 ประเภท ได้แก่
- engine
- โมดูลขั้วต่อ
- โมดูลรวบรวม
เครื่องมือจะนํารายการการทดสอบจากเครื่องมือเชื่อมต่อ (เช่น จากไฟล์ 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
คุณค้นหาวิธีอื่นๆ ในการทำให้การตรวจสอบรายวันและการรวบรวมผลลัพธ์เป็นแบบอัตโนมัติได้ในที่เก็บ GitHub ของ AWP
การแสดงผลลัพธ์การตรวจสอบใน Data Studio
นอกจากการวัด Core Web Vitals อย่างต่อเนื่องแล้ว คุณยังต้องประเมินแนวโน้มและค้นหาการถดถอยที่อาจเกิดขึ้นด้วยเมตริกผู้ใช้จริง (RUM) หรือข้อมูลรายงาน UX ของ Chrome (CrUX) ที่ AWP รวบรวม โปรดทราบว่ารายงาน UX ของ Chrome (CrUX) เป็นการรวมข้อมูลแบบเลื่อน 28 วัน เราจึงขอแนะนำให้ใช้ข้อมูล RUM ของคุณเองควบคู่ไปกับ CrUX เพื่อให้คุณตรวจพบการถดถอยได้เร็วขึ้น
Data Studio เป็นเครื่องมือแสดงภาพแบบไม่มีค่าใช้จ่ายที่คุณสามารถโหลดเมตริกประสิทธิภาพและวาดแนวโน้มเป็นแผนภูมิได้ง่ายๆ ตัวอย่างเช่น แผนภูมิอนุกรมเวลาด้านล่างแสดง Core Web Vitals ตามข้อมูลรายงาน UX ของ Chrome แผนภูมิแผนภูมิหนึ่งแสดงให้เห็นว่าช่วงหลายสัปดาห์ที่ผ่านมา การเปลี่ยนแปลงเลย์เอาต์แบบสะสมเพิ่มขึ้น ซึ่งหมายความว่าความเสถียรของเลย์เอาต์สำหรับบางหน้าลดลง ในกรณีนี้ คุณควรให้ความสําคัญกับการวิเคราะห์ปัญหาพื้นฐานของหน้าเว็บเหล่านี้
หากต้องการลดความซับซ้อนของกระบวนการตั้งแต่ต้นจนจบตั้งแต่การเก็บรวบรวมข้อมูลไปจนถึงการแสดงภาพ คุณสามารถใช้ AWP กับรายการ URL เพื่อส่งออกผลลัพธ์ไปยัง Google ชีตโดยอัตโนมัติด้วยคําสั่งต่อไปนี้
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
หลังจากรวบรวมเมตริกรายวันในสเปรดชีตแล้ว คุณสามารถสร้างแดชบอร์ด Data Studio ที่โหลดข้อมูลจากสเปรดชีตโดยตรง และแสดงแนวโน้มเป็นแผนภูมิอนุกรมเวลา ดูขั้นตอนโดยละเอียดเกี่ยวกับวิธีตั้งค่า AWP โดยใช้สเปรดชีตเป็นแหล่งข้อมูลเพื่อแสดงภาพใน Data Studio ได้ที่เครื่องมือเชื่อมต่อ Google สเปรดชีต API
ขั้นตอนถัดไปคือ
AWP เป็นวิธีที่ง่ายและผสานรวมเพื่อลดความพยายามในการตั้งค่าไปป์ไลน์การตรวจสอบอย่างต่อเนื่องเพื่อวัด Core Web Vitals และเมตริกประสิทธิภาพอื่นๆ ปัจจุบัน AWP ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุด และจะเพิ่มฟีเจอร์อื่นๆ เพื่อรองรับกรณีการใช้งานอื่นๆ ในอนาคต
ดูข้อมูลเพิ่มเติมในที่เก็บข้อมูล AutoWebPerf