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