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

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

Antoine Bisch
Gilberto Cocchi
Gilberto Cocchi
X GitHub
Jonathan Chen

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 ประเภทดังนี้

  • เครื่องมือ
  • โมดูลเครื่องมือเชื่อมต่อ
  • การรวบรวมโมดูล

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

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

AWP มาพร้อมอุปกรณ์รวบรวมและเครื่องมือเชื่อมต่อที่ติดตั้งล่วงหน้าจำนวนหนึ่ง

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

ภาพหน้าจอของผลลัพธ์ 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 ที่โหลดข้อมูลจากสเปรดชีตโดยตรง และพล็อตแนวโน้มเป็นแผนภูมิอนุกรมเวลา โปรดดูเครื่องมือเชื่อมต่อ API ของ Google สเปรดชีตเพื่อดูขั้นตอนโดยละเอียดเกี่ยวกับวิธีตั้งค่า AWP ด้วยสเปรดชีตเป็นแหล่งข้อมูลเพื่อแสดงบน Data Studio

ขั้นตอนถัดไปคือ

AWP เป็นวิธีที่ง่ายและมีการผสานรวมเพื่อลดภาระในการตั้งค่าไปป์ไลน์การตรวจสอบอย่างต่อเนื่องเพื่อวัด Core Web Vitals และเมตริกประสิทธิภาพอื่นๆ ตอนนี้ AWP จะครอบคลุม Use Case ที่พบบ่อยที่สุดและจะยังคงมอบฟีเจอร์เพิ่มเติมเพื่อจัดการกับ Use Case อื่นๆ ในอนาคต

ดูข้อมูลเพิ่มเติมในที่เก็บ AutoWebPerf