การรวบรวมข้อมูลเกี่ยวกับ 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 คือหน้าแดชบอร์ดที่สร้างไว้ล่วงหน้าซึ่งจะแสดงข้อมูล CrUX สำหรับต้นทางที่คุณเลือก ต่อยอดจาก Data Studio และขั้นตอนการตั้งค่าจะใช้เวลาประมาณ 1 นาที การรายงานหน้าแดชบอร์ดของ CrUX มีมิติข้อมูลมากกว่า PageSpeed Insights และ Search Console เช่น ข้อมูลสามารถแจกแจงตามอุปกรณ์และประเภทการเชื่อมต่อ
โปรดทราบว่าแม้ว่าเครื่องมือที่ระบุไว้ก่อนหน้านี้จะเหมาะสําหรับ "เริ่มต้นใช้งาน" การวัด 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 ได้ที่เอกสารประกอบและคำแนะนำแนวทางปฏิบัติแนะนำสำหรับการวัด 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 ข้อที่ควรทราบ ดังนี้
- Largest Contentful Paint (LCP) ที่วัดในสภาพแวดล้อมของห้องทดลองอาจต่างจากข้อมูลที่วัดในช่องที่มีข้อมูล RUM เนื่องจากความล่าช้าในการโหลดหน้าเว็บ (ผ่านการเปลี่ยนเส้นทาง เวลาในการตอบสนองเชื่อมต่อกับเซิร์ฟเวอร์ หรือข้อมูลที่ไม่ได้แคช) เนื้อหาที่แตกต่างกันจะแสดงต่อผู้ใช้ที่แตกต่างกันตามหน้าจอ หรือเนื่องจากสาเหตุอื่นๆ (รวมถึงแบนเนอร์คุกกี้ การปรับเปลี่ยนให้เหมาะกับแต่ละบุคคล)
- Cumulative Layout Shift (CLS) ที่วัดในสภาพแวดล้อมของห้องทดลองอาจต่ำกว่า CLS ที่สังเกตการณ์ในข้อมูล RUM อย่างไม่เป็นจริง เครื่องมือทดสอบหลายอย่างจะโหลดหน้าเว็บเท่านั้น ไม่ได้โต้ตอบกับหน้าเว็บ ด้วยเหตุนี้ จึงจะจับเฉพาะการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นระหว่างการโหลดหน้าเว็บครั้งแรกเท่านั้น ในทางตรงกันข้าม CLS ที่วัดโดยเครื่องมือ RUM จะบันทึกการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดซึ่งเกิดขึ้นตลอดอายุการใช้งานของหน้าเว็บ
- วัด การโต้ตอบกับ Next Paint (INP) ในสภาพแวดล้อมของห้องทดลองไม่ได้เนื่องจากจำเป็นต้องมีการโต้ตอบของผู้ใช้กับหน้าเว็บ ด้วยเหตุนี้ เวลาการบล็อกทั้งหมด (TBT) จึงถือเป็นพร็อกซีของห้องทดลองที่แนะนำสำหรับ INP TBT จะวัด "ระยะเวลาทั้งหมดระหว่าง First Contentful Paint กับเวลาในการตอบสนองในระหว่างที่หน้าเว็บถูกบล็อกไม่ให้ตอบสนองต่ออินพุตของผู้ใช้" แม้ว่า INP และ TBT จะคำนวณแตกต่างกัน แต่ทั้ง 2 อย่างจะเป็นการสะท้อนเทรดหลักที่ถูกบล็อกระหว่างกระบวนการบูตสแตรป เมื่อเธรดหลักถูกบล็อกเบราว์เซอร์จะตอบสนองต่อการโต้ตอบของผู้ใช้ล่าช้า
เครื่องมือ
คุณใช้เครื่องมือเหล่านี้เพื่อรวบรวมการวัดผล Web Vitals ในห้องทดลองได้
- เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วัดและรายงาน Core Web Vitals สําหรับหน้าหนึ่งๆ ในมุมมองเมตริกแบบเรียลไทม์ของแผงประสิทธิภาพ มุมมองนี้จะแสดงความคิดเห็นเกี่ยวกับประสิทธิภาพแบบเรียลไทม์เมื่อนักพัฒนาแอปทําการเปลี่ยนแปลงโค้ด
- Lighthouse รายงานเกี่ยวกับ LCP, CLS และ TBT รวมถึงไฮไลต์การปรับปรุงประสิทธิภาพที่เป็นไปได้ Lighthouse พร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในรูปแบบแพ็กเกจ npm และยังสามารถผสานรวมกับเวิร์กโฟลว์การผสานรวมอย่างต่อเนื่องโดยใช้ Lighthouse CI
- WebPageTest รวม Web Vitals ไว้ในการรายงานมาตรฐาน WebPageTest มีประโยชน์สำหรับการรวบรวมข้อมูลใน Web Vitals ภายใต้เงื่อนไขของอุปกรณ์และเครือข่ายหนึ่งๆ