การรวบรวมข้อมูลใน Web Vitals ของเว็บไซต์เป็นขั้นตอนแรกในการเพิ่มประสิทธิภาพ การวิเคราะห์ที่สมบูรณ์จะเก็บรวบรวมข้อมูลประสิทธิภาพจากทั้งสภาพแวดล้อมจริงและสภาพแวดล้อมในห้องทดลอง การวัด Web Vitals ต้องการการเปลี่ยนแปลงโค้ดเพียงเล็กน้อย และทําได้โดยใช้เครื่องมือฟรี
การวัด Web Vitals โดยใช้ข้อมูล RUM
ข้อมูล Real User Monitoring (RUM) หรือที่เรียกว่าข้อมูลภาคสนาม จะบันทึกประสิทธิภาพที่ได้รับจากผู้ใช้จริงของเว็บไซต์ ข้อมูล RUM คือข้อมูลที่ Google ใช้ในการพิจารณาว่าเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์ Core Web Vitals ที่แนะนำหรือไม่
เริ่มต้นใช้งาน
หากคุณไม่ได้ตั้งค่า RUM ไว้ เครื่องมือต่อไปนี้จะให้ข้อมูลเกี่ยวกับประสิทธิภาพจริงของเว็บไซต์แก่คุณได้อย่างรวดเร็ว เครื่องมือเหล่านี้ทั้งหมดอิงตามชุดข้อมูลที่สำคัญชุดเดียวกัน (รายงานประสบการณ์ของผู้ใช้ Chrome) แต่มีกรณีการใช้งานที่แตกต่างกันเล็กน้อย
- PageSpeed Insights (PSI): PageSpeed Insights จะรายงานประสิทธิภาพระดับหน้าเว็บและระดับต้นทางโดยรวมในช่วง 28 วันที่ผ่านมา นอกจากนี้ยังมีคำแนะนำเกี่ยวกับวิธีปรับปรุงประสิทธิภาพ หากกำลังมองหาการดำเนินการเดียวเพื่อเริ่มต้นวัดและปรับปรุง Web Vitals ของเว็บไซต์ เราขอแนะนำให้ใช้ PSI เพื่อตรวจสอบเว็บไซต์ PSI มีให้บริการบนเว็บและในรูปแบบ API
- Search Console: Search Console จะรายงานข้อมูลประสิทธิภาพแบบหน้าต่อหน้า จึงเหมาะสมสำหรับการระบุหน้าเว็บที่ต้องได้รับการปรับปรุง การรายงานของ Search Console จะมีข้อมูลประสิทธิภาพที่ผ่านมา ซึ่งต่างจาก PageSpeed Insights Search Console ใช้ได้กับเว็บไซต์ที่คุณเป็นเจ้าของและได้รับการยืนยันการเป็นเจ้าของแล้วเท่านั้น
- แดชบอร์ด CrUX: แดชบอร์ด CrUX คือแดชบอร์ดที่สร้างไว้ล่วงหน้าซึ่งแสดงข้อมูล CrUX สําหรับต้นทางที่คุณเลือก ฟีเจอร์นี้สร้างขึ้นจาก Data Studio และกระบวนการตั้งค่าจะใช้เวลาประมาณ 1 นาที เมื่อเทียบกับ PageSpeed Insights และ Search Console การรายงานแดชบอร์ด CrUX มีมิติข้อมูลมากกว่า เช่น ข้อมูลอาจแจกแจงตามอุปกรณ์และประเภทการเชื่อมต่อ
โปรดทราบว่าแม้เครื่องมือที่แสดงด้านบนจะเหมาะสำหรับ "การเริ่มต้นใช้งาน" การวัด Web Vitals แต่ก็มีประโยชน์ในบริบทอื่นๆ ได้เช่นกัน โดยเฉพาะอย่างยิ่ง CrUX และ PSI มีให้ใช้งานในแบบ API และสามารถใช้เพื่อสร้างหน้าแดชบอร์ดและการรายงานอื่นๆ ได้
กำลังรวบรวมข้อมูล RUM
แม้ว่าเครื่องมือที่ใช้ CrUX จะเป็นจุดเริ่มต้นที่ดีในการตรวจสอบประสิทธิภาพ Web Vitals แต่เราขอแนะนําอย่างยิ่งให้เสริมเครื่องมือด้วย RUM ของคุณเอง ข้อมูล RUM ที่รวบรวมด้วยตนเองจะให้ความคิดเห็นเกี่ยวกับประสิทธิภาพของเว็บไซต์โดยละเอียดได้ทันที วิธีนี้ช่วยให้ระบุปัญหาและทดสอบวิธีแก้ไขที่เป็นไปได้ได้ง่ายขึ้น
คุณจะรวบรวมข้อมูล RUM ของตนเองโดยใช้ผู้ให้บริการ RUM เฉพาะก็ได้ หรือจะตั้งค่าเครื่องมือของคุณเองก็ได้
ผู้ให้บริการ RUM โดยเฉพาะมีความเชี่ยวชาญด้านการรวบรวมและรายงานข้อมูล RUM หากต้องการใช้ Core Web Vitals กับบริการเหล่านี้ โปรดสอบถามผู้ให้บริการ RUM เกี่ยวกับการเปิดใช้การตรวจสอบ Core Web Vitals สำหรับเว็บไซต์
หากไม่มีผู้ให้บริการ RUM คุณอาจเพิ่มการตั้งค่าข้อมูลวิเคราะห์ที่มีอยู่เพื่อรวบรวมและรายงานเกี่ยวกับเมตริกเหล่านี้ได้โดยใช้ไลบรารี JavaScript web-vitals วิธีการนี้มีการอธิบายรายละเอียดเพิ่มเติมด้านล่าง
ไลบรารี JavaScript Web-vitals
หากคุณใช้การตั้งค่า RUM ของคุณเองสําหรับ Web Vitals วิธีที่ง่ายที่สุดในการรวบรวมการวัดผล Web Vitals คือการใช้ไลบรารี JavaScript ของ web-vitals web-vitals เป็นไลบรารีขนาดเล็กที่ประกอบขึ้นเป็นโมดูล (ประมาณ 1 KB) ที่มอบ API ที่สะดวกสำหรับการรวบรวมและการรายงานเมตริก Web Vitals ที่วัดได้แต่ละรายการ
เมตริกที่ประกอบขึ้นเป็น Web Vitals บางส่วนไม่ได้แสดงโดยตรงโดย API ประสิทธิภาพในตัวของเบราว์เซอร์ แต่สร้างขึ้นจากเมตริกดังกล่าวโดยตรง เช่น มีการใช้ Cumulative Layout Shift (CLS) โดยใช้ Layout Instability API การใช้ web-vitals ทำให้คุณไม่ต้องกังวลเกี่ยวกับการใช้เมตริกเหล่านี้ด้วยตนเอง และยังช่วยให้แน่ใจว่าข้อมูลที่คุณรวบรวมตรงกับระเบียบวิธีและแนวทางปฏิบัติแนะนำสำหรับแต่ละเมตริกอีกด้วย
โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งาน web-vitals ในเอกสารประกอบและคู่มือแนวทางปฏิบัติแนะนําสําหรับการวัด Web Vitals ในช่อง
การรวมข้อมูล
คุณจำเป็นต้องรายงานการวัดที่รวบรวมโดย web-vitals หากมีการวัดข้อมูลนี้แต่ไม่ได้รายงาน คุณจะไม่เห็นข้อมูลนั้น เอกสารประกอบเกี่ยวกับ web-vitals มีตัวอย่างแสดงวิธีส่งข้อมูลไปยังปลายทาง API ทั่วไป, Google Analytics หรือ Google Tag Manager
หากคุณมีเครื่องมือการรายงานที่ชื่นชอบอยู่แล้ว ให้ลองใช้เครื่องมือนั้น หากไม่มี Google Analytics ไม่เสียค่าใช้จ่ายและสามารถใช้เพื่อวัตถุประสงค์นี้ได้
เมื่อพิจารณาว่าจะใช้เครื่องมือใด คุณควรพิจารณาถึงผู้ที่จำเป็นต้องเข้าถึงข้อมูลด้วย โดยทั่วไปธุรกิจจะมีประสิทธิภาพสูงสุดเมื่อทั้งบริษัทสนใจที่จะปรับปรุงประสิทธิภาพ ไม่ใช่จากแผนกเดียว ดูวิธีรับความเห็นชอบจากแผนกต่างๆ ได้ในการแก้ไขความเร็วเว็บไซต์ข้ามสายงาน
การตีความข้อมูล
เมื่อวิเคราะห์ข้อมูลประสิทธิภาพ สิ่งสำคัญคือต้องให้ความสำคัญกับส่วนเล็กๆ ของการกระจาย ข้อมูลของ RUM มักเผยให้เห็นว่าประสิทธิภาพการทำงานอาจแตกต่างกันอย่างมาก เช่น ผู้ใช้บางรายได้รับประสบการณ์การใช้งานที่รวดเร็ว บางรายมีประสบการณ์การทำงานช้า อย่างไรก็ตาม การใช้ค่ามัธยฐานเพื่อสรุปข้อมูลอาจมาสก์พฤติกรรมนี้ได้ง่าย
เมื่อพิจารณา Web Vitals แล้ว Google ใช้เปอร์เซ็นต์ของประสบการณ์ "ที่ดี" แทนการใช้สถิติ เช่น ค่ามัธยฐานหรือค่าเฉลี่ย ในการตัดสินว่าเว็บไซต์หรือหน้าเว็บเป็นไปตามเกณฑ์ที่แนะนำหรือไม่ กล่าวอย่างเจาะจงคือ หากต้องการให้เว็บไซต์หรือหน้าเว็บได้รับการพิจารณาว่าเป็นไปตามเกณฑ์ Core Web Vitals การเข้าชมหน้าเว็บ 75% ควรเป็นไปตามเกณฑ์ "ดี" ของแต่ละเมตริก
การวัด Web Vitals โดยใช้ข้อมูลจากห้องทดลอง
ข้อมูล Lab หรือที่เรียกว่าข้อมูลสังเคราะห์นั้นรวบรวมจากสภาพแวดล้อมที่มีการควบคุมไม่ใช่ผู้ใช้จริง ข้อมูลจากห้องปฏิบัติการแตกต่างจากข้อมูล RUM ตรงที่สามารถเก็บรวบรวมได้จากสภาพแวดล้อมก่อนการผลิต จึงรวมอยู่ในเวิร์กโฟลว์ของนักพัฒนาซอฟต์แวร์และกระบวนการผสานรวมอย่างต่อเนื่อง ตัวอย่างเครื่องมือที่รวบรวมข้อมูลสังเคราะห์ ได้แก่ Lighthouse และ WebPageTest
ข้อควรพิจารณา
ข้อมูล RUM และข้อมูลในห้องทดลองมักจะเกิดความคลาดเคลื่อนอยู่เสมอ โดยเฉพาะในกรณีที่สภาพเครือข่าย ประเภทอุปกรณ์ หรือตำแหน่งของสภาพแวดล้อมของห้องทดลองนั้นแตกต่างจากของผู้ใช้อย่างมาก อย่างไรก็ตาม เมื่อต้องรวบรวมข้อมูลในห้องทดลองเกี่ยวกับเมตริก Web Vitals สิ่งที่ควรพิจารณาโดยเฉพาะมี 2 ประการดังนี้
- Cumulative Layout Shift (CLS): Cumulative Layout Shift ที่วัดในสภาพแวดล้อมของห้องทดลองอาจต่ำกว่า CLS ที่พบในข้อมูล RUM CLS คือ "ยอดรวมของคะแนนการเปลี่ยนเลย์เอาต์แต่ละรายการทั้งหมดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดทุกครั้งที่เกิดขึ้นตลอดอายุของหน้าเว็บ" อย่างไรก็ตาม อายุการใช้งานของหน้ามักจะแตกต่างกันอย่างมาก โดยขึ้นอยู่กับว่าผู้ใช้จริงหรือเครื่องมือวัดประสิทธิภาพสังเคราะห์ เครื่องมือห้องทดลองหลายรายการจะโหลดหน้าเว็บเท่านั้นโดยไม่โต้ตอบกับ ด้วยเหตุนี้ ระบบจึงจะบันทึกเฉพาะการเปลี่ยนแปลงของเลย์เอาต์ที่เกิดขึ้นระหว่างการโหลดหน้าเว็บครั้งแรกเท่านั้น ในทางตรงกันข้าม CLS ที่วัดโดยเครื่องมือ RUM จะบันทึกการเปลี่ยนแปลงของเลย์เอาต์ที่ไม่คาดคิดซึ่งเกิดขึ้นตลอดอายุการใช้งานหน้าเว็บ
- First Input Delay (FID): ระบบวัด First Input Delay ในสภาพแวดล้อมของห้องทดลองไม่ได้ เนื่องจากผู้ใช้ต้องโต้ตอบกับหน้าเว็บ ดังนั้น Total block Time (TBT) จึงเป็นพร็อกซีในห้องทดลองที่แนะนำสำหรับ FID TBT จะวัด "ระยะเวลารวมระหว่าง First Contentful Paint กับ Time to Interactive ที่หน้าเว็บถูกบล็อกไม่ให้ตอบสนองต่ออินพุตของผู้ใช้" แม้ว่าจะมีการคำนวณ FID และ TBT แตกต่างกัน แต่ทั้งคู่ก็ยังสะท้อนเทรดหลักที่ถูกบล็อกระหว่างขั้นตอน Bootstrapped เมื่อเทรดหลักถูกบล็อก เบราว์เซอร์จะตอบสนองการโต้ตอบของผู้ใช้ล่าช้า FID จะวัดความล่าช้า (หากมี) ที่เกิดขึ้นในครั้งแรกที่ผู้ใช้พยายามโต้ตอบกับหน้าเว็บ
การใช้เครื่องมือ
เครื่องมือต่อไปนี้ใช้เพื่อรวบรวมการวัดผลในห้องทดลองของ Web Vitals ได้
- ส่วนขยาย Chrome ของ Web Vitals: ส่วนขยาย Chrome ของ Web Vitals จะวัดผลและรายงาน Core Web Vitals (LCP, FID และ CLS) สำหรับหน้าเว็บหนึ่งๆ เครื่องมือนี้มีจุดประสงค์เพื่อให้ความคิดเห็นเกี่ยวกับประสิทธิภาพแบบเรียลไทม์แก่นักพัฒนาแอปที่กำลังทำการเปลี่ยนแปลงโค้ด
- Lighthouse: รายงานเกี่ยวกับ LCP, CLS และ TBT ของ Lighthouse รวมถึงไฮไลต์การปรับปรุงประสิทธิภาพที่เป็นไปได้ Lighthouse พร้อมใช้งานใน Chrome DevTools, เป็นส่วนขยาย Chrome และแพ็กเกจ npm คุณยังรวม Lighthouse ไว้ในเวิร์กโฟลว์การผสานรวมต่อเนื่องผ่าน Lighthouse CI ได้ด้วย
- WebPageTest: WebPageTest มี Web Vitals เป็นส่วนหนึ่งของการรายงานมาตรฐาน WebPageTest มีประโยชน์สำหรับการรวบรวมข้อมูลใน Web Vitals ภายใต้สภาพอุปกรณ์และเครือข่ายบางอย่าง