การตรวจสอบอัตโนมัติด้วย AutoWebPerf

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

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 ประเภท ได้แก่

  • เครื่องยนต์
  • โมดูลขั้วต่อ
  • โมดูลรวบรวม

เครื่องมือจะนํารายการการทดสอบจากเครื่องมือเชื่อมต่อ (เช่น จากไฟล์ CSV ในเครื่อง) เรียกใช้การตรวจสอบประสิทธิภาพผ่านเครื่องมือรวบรวมข้อมูลที่เลือก (เช่น PageSpeed Insights) และเขียนผลลัพธ์ไปยังเครื่องมือเชื่อมต่อเอาต์พุต (เช่น Google ชีต)

แผนภาพสถาปัตยกรรมของ AWP

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 แผนภูมิแผนภูมิหนึ่งแสดงให้เห็นว่าช่วงไม่กี่สัปดาห์ที่ผ่านมา การเปลี่ยนแปลงเลย์เอาต์แบบสะสมเพิ่มขึ้น ซึ่งหมายความว่าความเสถียรของเลย์เอาต์สำหรับบางหน้าลดลง ในกรณีนี้ คุณควรให้ความสําคัญกับการวิเคราะห์ปัญหาพื้นฐานของหน้าเว็บเหล่านี้

ภาพหน้าจอของผลลัพธ์ Core Web Vitals ใน Data Studio

หากต้องการลดความซับซ้อนของกระบวนการตั้งแต่ต้นจนจบตั้งแต่การเก็บรวบรวมข้อมูลไปจนถึงการแสดงภาพ คุณสามารถใช้ 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