เครื่องมือสำหรับวัดผล Core Web Vitals

ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่คุณชื่นชอบสามารถวัดผล Core Web Vitals ได้แล้ว

โครงการริเริ่ม Web Vitals ที่เพิ่งประกาศไปเมื่อเร็วๆ นี้มีคำแนะนำแบบองค์รวมเกี่ยวกับสัญญาณคุณภาพที่สำคัญต่อเว็บไซต์ทั้งหมดในการมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้บนเว็บ เรายินดีที่จะประกาศว่าเครื่องมือยอดนิยมทั้งหมดของ Google สำหรับนักพัฒนาเว็บรองรับการวัดผล Core Web Vitals แล้ว ซึ่งช่วยให้คุณวินิจฉัยและแก้ไขปัญหาเกี่ยวกับประสบการณ์ของผู้ใช้ได้ง่ายขึ้น ซึ่งรวมถึง Lighthouse, PageSpeed Insights, เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, Search Console, เครื่องมือวัดของ web.dev, ส่วนขยาย Chrome ของ Web Vitals และ รายงาน UX ของ Chrome ใหม่ (!)

เนื่องจากตอนนี้ Google Search ได้รวม Core Web Vitals เป็นรากฐานในการประเมินประสบการณ์การใช้งานหน้าเว็บแล้ว Google Search จึงจำเป็นต้องมีเมตริกเหล่านี้พร้อมและนำไปใช้งานได้จริงมากที่สุด

โปรดทำตามเวิร์กโฟลว์ต่อไปนี้เพื่อเริ่มเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ด้วย Core Web Vitals

• ใช้รายงาน Core Web Vitals ใหม่ของ Search Console เพื่อระบุกลุ่มหน้าเว็บที่ต้องดำเนินการ (อิงตามข้อมูลในช่อง)
• เมื่อคุณระบุหน้าเว็บที่จำเป็นต้องใช้งานได้แล้ว ให้ใช้ PageSpeed Insights (ขับเคลื่อนโดย Lighthouse และรายงาน UX ของ Chrome) เพื่อวิเคราะห์ปัญหาเกี่ยวกับห้องทดลองและการทำงานจริงในหน้าเว็บ PageSpeed Insights (PSI) มีให้บริการผ่าน Search Console หรือคุณจะป้อน URL ใน PSI โดยตรงก็ได้
• หากพร้อมเพิ่มประสิทธิภาพเว็บไซต์ในพื้นที่ในห้องทดลองแล้ว ใช้ Lighthouse และ Chrome DevTools เพื่อวัด Core Web Vitals และรับคำแนะนำที่นำไปใช้ได้จริงเกี่ยวกับสิ่งที่ต้องแก้ไข ส่วนขยาย Web Vitals ใน Chrome ช่วยให้คุณเห็นมุมมองแบบเรียลไทม์ของเมตริกบนเดสก์ท็อปได้
• หากต้องการใช้หน้าแดชบอร์ดที่กำหนดเองของ Core Web Vitals ใช้แดชบอร์ด CrUX ที่อัปเดตแล้วหรือ Chrome UX Report API ใหม่สำหรับข้อมูลภาคสนามหรือ PageSpeed Insights API สำหรับข้อมูลในห้องทดลอง
• หากกำลังมองหาคำแนะนำ web.dev/measure จะช่วยวัดผลหน้าเว็บและแสดงชุดคู่มือและ Codelab ที่ได้รับการจัดลำดับความสำคัญสำหรับการเพิ่มประสิทธิภาพโดยใช้ข้อมูล PSI ได้
• สุดท้าย ใช้ CI ของ Lighthouse กับคำขอพุลเพื่อให้มั่นใจว่าจะไม่มีการถดถอยใน Core Web Vitals ก่อนนำการเปลี่ยนแปลงไปใช้กับเวอร์ชันที่ใช้งานจริง

จากบทนำดังกล่าว เรามาเจาะลึกรายละเอียดของอัปเดตสำหรับแต่ละเครื่องมือกัน

ประภาคาร

Lighthouse คือเครื่องมือตรวจสอบเว็บไซต์อัตโนมัติที่ช่วยให้นักพัฒนาซอฟต์แวร์วินิจฉัยปัญหาและระบุโอกาสในการปรับปรุงประสบการณ์ของผู้ใช้เว็บไซต์ได้ โดยจะวัดคุณภาพประสบการณ์ของผู้ใช้ในสภาพแวดล้อมแบบห้องทดลอง เช่น ประสิทธิภาพและการเข้าถึง Lighthouse เวอร์ชันล่าสุด (6.0 ซึ่งเปิดตัวเมื่อกลางเดือนพฤษภาคม 2020) จะมีการตรวจสอบเพิ่มเติม เมตริกใหม่ และคะแนนประสิทธิภาพที่สร้างขึ้นใหม่

Lighthouse 6.0 มีเมตริกใหม่ 3 รายการในรายงาน เมตริกใหม่ 2 รายการ ได้แก่ Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) คือการติดตั้งใช้งาน Core Web Vitals ในห้องทดลองและให้ข้อมูลการวินิจฉัยที่สำคัญเพื่อเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ เนื่องจากเมตริกใหม่นี้สำคัญต่อการประเมินประสบการณ์ของผู้ใช้ เมตริกใหม่จึงไม่ได้มีการวัดและรวมอยู่ในรายงานเท่านั้น แต่ยังเป็นปัจจัยที่ใช้คำนวณคะแนนประสิทธิภาพด้วย

เมตริกใหม่ที่ 3 ที่รวมอยู่ใน Lighthouse ซึ่งได้แก่ เวลาในการบล็อกทั้งหมด (TBT) สัมพันธ์กับเมตริกในช่อง First Input Delay (FID) ซึ่งเป็นเมตริก Core Web Vitals อีกอย่างหนึ่ง การปฏิบัติตามคำแนะนำที่ระบุไว้ในรายงาน Lighthouse และการเพิ่มประสิทธิภาพตามคะแนนช่วยให้คุณมอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้ได้

ผลิตภัณฑ์ทั้งหมดที่ Lighthouse ขับเคลื่อนจะอัปเดตเป็นเวอร์ชันล่าสุด รวมถึง Lighthouse CI ซึ่งช่วยให้คุณวัด Core Web Vitals ได้โดยง่ายก่อนที่จะนํามารวมกันและติดตั้งใช้งาน

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดตล่าสุดของ Lighthouse โปรดดูบล็อกโพสต์มีอะไรใหม่ใน Lighthouse 6.0

PageSpeed Insights

PageSpeed Insights (PSI) รายงานประสิทธิภาพในห้องทดลองและประสิทธิภาพของหน้าเว็บทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป เครื่องมือนี้จะแสดงภาพรวมของประสบการณ์การใช้งานหน้าเว็บจริงของผู้ใช้ (ขับเคลื่อนโดยรายงาน UX ของ Chrome) และชุดคำแนะนำที่นำไปใช้ได้จริงเกี่ยวกับวิธีที่เจ้าของเว็บไซต์สามารถปรับปรุงประสบการณ์การใช้งานหน้าเว็บ (จัดทำโดย Lighthouse)

นอกจากนี้ PageSpeed Insights และ PageSpeed Insights API ยังได้รับการอัปเกรดไปใช้ Lighthouse 6.0 ขั้นสูง และตอนนี้รองรับการวัด Core Web Vitals ทั้งในส่วนห้องทดลองและส่วนภาคสนามของรายงานแล้ว Core Web Vitals มีคำอธิบายประกอบเป็นริบบิ้นสีน้ำเงินดังที่แสดงด้านล่าง

ในขณะที่ Search Console ช่วยให้เจ้าของเว็บไซต์เห็นภาพรวมที่ยอดเยี่ยมของกลุ่มหน้าเว็บที่ต้องดำเนินการ แต่ PSI ช่วยระบุโอกาสในการปรับปรุงประสบการณ์การใช้งานหน้าเว็บต่อเจ้าของเว็บไซต์ ใน PSI คุณจะดูได้ว่าหน้าเว็บมีคุณสมบัติตามเกณฑ์สำหรับประสบการณ์การใช้งานที่ดีใน Core Web Vitals ทั้งหมดหรือไม่ที่ด้านบนของรายงาน ซึ่งระบุว่าผ่านการประเมิน Core Web Vitals หรือไม่ผ่านการประเมิน Core Web Vitals

CrUX

รายงาน UX ของ Chrome (CrUX) เป็นชุดข้อมูลสาธารณะเกี่ยวกับประสบการณ์ของผู้ใช้จริงในเว็บไซต์หลายล้านแห่ง วัดเวอร์ชันฟิลด์ของ Core Web Vitals ทั้งหมด ข้อมูล CrUX มาจากผู้ใช้ที่เลือกรับในภาคสนาม ซึ่งต่างจากข้อมูลในห้องทดลอง การใช้ข้อมูลนี้ช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจการกระจายประสบการณ์ของผู้ใช้จริงในเว็บไซต์ของตัวเองหรือของคู่แข่งได้ แม้จะไม่มี RUM ในเว็บไซต์ แต่ CrUX ก็มีวิธีประเมิน Core Web Vitals ที่ง่ายและรวดเร็วได้ ชุดข้อมูล CrUX ใน BigQuery มีข้อมูลประสิทธิภาพแบบละเอียดสำหรับ Core Web Vitals ทั้งหมดและพร้อมใช้งานในภาพรวมรายเดือนในระดับต้นทาง

วิธีเดียวที่จะทราบได้อย่างแท้จริงว่าผู้ใช้ของคุณมีประสิทธิภาพการทำงานของเว็บไซต์อย่างไร คือการวัดประสิทธิภาพของไซต์ในภาคสนามขณะที่ผู้ใช้เหล่านั้นกำลังโหลดและโต้ตอบกับไซต์ การวัดประเภทนี้เรียกกันโดยทั่วไปว่าการตรวจสอบโดยผู้ใช้จริง หรือเรียกสั้นๆ ว่า RUM แม้จะไม่มี RUM ในเว็บไซต์ แต่ CrUX ก็มีวิธีประเมิน Core Web Vitals ที่ง่ายและรวดเร็วได้

ขอแนะนำ CrUX API

วันนี้เรายินดีที่จะเปิดตัว CrUX API ซึ่งเป็นวิธีที่รวดเร็วและไม่มีค่าใช้จ่ายในการผสานรวมเวิร์กโฟลว์การพัฒนากับการวัดคุณภาพระดับ URL และต้นทางสำหรับเมตริกฟิลด์ต่อไปนี้ได้อย่างง่ายดาย

• การแสดงผลเนื้อหาขนาดใหญ่ที่สุด
• การเปลี่ยนเลย์เอาต์สะสม
• ความล่าช้าของอินพุตครั้งแรก
• การแสดงผลที่มีเนื้อหาเต็มครั้งแรก

นักพัฒนาซอฟต์แวร์จะค้นหาต้นทางหรือ URL และแบ่งกลุ่มผลการค้นหาตามรูปแบบของอุปกรณ์ต่างๆ ได้ API จะอัปเดตทุกวันและสรุปข้อมูลในช่วง 28 วันก่อนหน้า (ต่างจากชุดข้อมูล BigQuery ที่รวบรวมแบบรายเดือน) นอกจากนี้ API ดังกล่าวยังมีโควต้า API สาธารณะที่ไม่เข้มงวดเท่าที่เราวางไว้ใน API อื่นของเรา ซึ่งก็คือ PageSpeed Insights API (25,000 คำขอต่อวัน)

ข้อมูลด้านล่างคือการสาธิตที่ใช้ CrUX API เพื่อแสดงเมตริก Core Web Vitals ที่มีการเผยแพร่ข้อมูลที่ดี ต้องปรับปรุง และไม่ดี

ในรุ่นต่อๆ ไป เราวางแผนที่จะขยาย API เพื่อเปิดใช้การเข้าถึงมิติข้อมูลและเมตริกชุดข้อมูล CrUX เพิ่มเติม

แดชบอร์ด CrUX ที่ปรับปรุงใหม่

แดชบอร์ด CrUX ที่ออกแบบใหม่ช่วยให้คุณติดตามประสิทธิภาพของต้นทางได้อย่างง่ายดายเมื่อเวลาผ่านไป และตอนนี้คุณสามารถใช้เพื่อตรวจสอบการกระจายของเมตริก Core Web Vitals ทั้งหมดได้ ในการเริ่มต้นใช้งานหน้าแดชบอร์ด โปรดดูที่บทแนะนำของเราใน web.dev

เราได้เปิดตัวหน้า Landing Page ใหม่ของ Core Web Vitals เพื่อให้คุณดูประสิทธิภาพการทำงานของเว็บไซต์ได้อย่างรวดเร็วยิ่งขึ้น เรายินดีรับฟังความคิดเห็นเกี่ยวกับเครื่องมือ CrUX ทั้งหมด หากต้องการแชร์ความคิดเห็นและคำถาม ติดต่อเราได้ที่บัญชี Twitter @ChromeUXReport หรือ Google Group

แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

แก้ไขข้อบกพร่องเหตุการณ์ Layout Shift ในส่วนประสบการณ์

แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีส่วนประสบการณ์ใหม่ที่ช่วยให้คุณตรวจจับการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดได้ วิธีนี้มีประโยชน์ในการค้นหาและแก้ไขปัญหาความไม่เสถียรของภาพในหน้าเว็บที่ทำให้เกิด Cumulative Layout Shift

เลือกการเปลี่ยนเลย์เอาต์เพื่อดูรายละเอียดในแท็บสรุป หากต้องการดูตำแหน่งของการเปลี่ยนแปลง ให้วางเมาส์เหนือช่องย้ายจากและย้ายไปที่

แก้ไขข้อบกพร่องของความพร้อมในการโต้ตอบด้วยเวลาในการบล็อกทั้งหมดในส่วนท้าย

เมตริก Total block Time (TBT) จะวัดได้ในเครื่องมือห้องทดลองและใช้เป็นตัวแทนที่ยอดเยี่ยมสำหรับ First Input Delay TBT จะวัดระยะเวลารวมระหว่าง First Contentful Paint (FCP) กับ Time to Interactive (TTI) ที่มีการบล็อกเทรดหลักเป็นเวลานานพอที่จะทำให้ตอบสนองต่ออินพุตไม่ได้ การเพิ่มประสิทธิภาพการทำงานที่ปรับปรุง TBT ในห้องทดลองควรช่วยปรับปรุง FID ในภาคสนาม

TBT จะแสดงในส่วนท้ายของแผงประสิทธิภาพของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เมื่อคุณวัดประสิทธิภาพหน้าเว็บ ดังนี้

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บประสิทธิภาพ
3. คลิกบันทึก
4. โหลดหน้าเว็บซ้ำด้วยตนเอง
5. รอให้หน้าเว็บโหลดขึ้นแล้วหยุดบันทึก

ดูข้อมูลเพิ่มเติมได้ที่มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 84)

Search Console

รายงาน Core Web Vitals ใหม่ใน Search Console ช่วยให้คุณระบุกลุ่มหน้าเว็บในเว็บไซต์ที่ต้องให้ความสนใจได้ โดยอิงตามข้อมูลการใช้งานจริง (ภาคสนาม) จาก CrUX ประสิทธิภาพของ URL จะจัดกลุ่มตามสถานะ ประเภทเมตริก และกลุ่ม URL (กลุ่มของหน้าเว็บที่คล้ายกัน)

รายงานนี้อิงตามเมตริก Core Web Vitals 3 รายการ ได้แก่ LCP, FID และ CLS หาก URL ใดมีจำนวนข้อมูลการรายงานสำหรับเมตริกเหล่านี้ไม่ถึงเกณฑ์ขั้นต่ำ URL นั้นจะไม่แสดงในรายงาน ลองใช้รายงานใหม่เพื่อดูภาพรวมของประสิทธิภาพของต้นทาง

เมื่อระบุประเภทของหน้าเว็บที่มีปัญหาเกี่ยวกับ Core Web Vitals แล้ว คุณสามารถใช้ PageSpeed Insights เพื่อดูข้อมูลเกี่ยวกับคำแนะนำการเพิ่มประสิทธิภาพเฉพาะสำหรับหน้าตัวแทนได้

web.dev

https://pagespeed.web.dev/ ช่วยให้คุณวัดประสิทธิภาพของหน้าเว็บได้เมื่อเวลาผ่านไป โดยจะแสดงรายการคำแนะนำตามลำดับความสำคัญและ Codelab เกี่ยวกับวิธีปรับปรุง การวัดผลนี้ขับเคลื่อนโดย PageSpeed Insights ตอนนี้เครื่องมือวัดยังรองรับเมตริก Core Web Vitals ด้วย ดังที่แสดงด้านล่าง

ส่วนขยาย Web Vitals

ส่วนขยาย Web Vitals จะวัดเมตริก Core Web Vitals 3 รายการแบบเรียลไทม์สําหรับ Google Chrome (เดสก์ท็อป) ข้อมูลนี้เป็นประโยชน์ในการตรวจหาปัญหาตั้งแต่เนิ่นๆ ระหว่างเวิร์กโฟลว์การพัฒนาและเป็นเครื่องมือวิเคราะห์เพื่อประเมินประสิทธิภาพของ Core Web Vitals ขณะที่ท่องเว็บ

ส่วนขยายพร้อมให้ติดตั้งจาก Chrome เว็บสโตร์แล้ว เราหวังว่าสิ่งนี้จะเป็นประโยชน์สำหรับคุณ เรายินดีรับฟังความคิดเห็นเพื่อปรับปรุงที่เก็บ ตลอดจนความคิดเห็นเกี่ยวกับที่เก็บ GitHub ของโปรเจ็กต์

ไฮไลต์สั้นๆ

ข้อมูลโดยสรุปมีเท่านี้ สิ่งที่คุณจะทำต่อไปได้

• ใช้ Lighthouse ใน DevTools เพื่อเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้และดูว่าคุณกำลังเตรียมพร้อมสู่ความสำเร็จโดยใช้ Core Web Vitals ในภาคสนาม
• ใช้ PageSpeed Insights เพื่อเปรียบเทียบประสิทธิภาพของห้องทดลองและข้อมูลใน Core Web Vitals
• ลองใช้ Chrome User Experience API แบบใหม่เพื่อเข้าถึงประสิทธิภาพการทำงานของต้นทางและ URL เทียบกับ Core Web Vitals ตลอดช่วง 28 วันที่ผ่านมาได้อย่างง่ายดาย
• ใช้ส่วนประสบการณ์และส่วนท้ายในแผงประสิทธิภาพของเครื่องมือสําหรับนักพัฒนาเว็บเพื่อเจาะลึกและแก้ไขข้อบกพร่องตาม Core Web Vitals ที่เจาะจง
• ใช้รายงาน Core Web Vitals ของ Search Console เพื่อดูข้อมูลสรุปเกี่ยวกับประสิทธิภาพของต้นทางในช่อง
• ใช้ส่วนขยาย Web Vitals เพื่อติดตามประสิทธิภาพของหน้าเว็บเทียบกับ Core Web Vitals แบบเรียลไทม์

เราจะอธิบายเพิ่มเติมเกี่ยวกับเครื่องมือ Core Web Vitals ในงาน web.dev Live ในเดือนมิถุนายน ลงชื่อสมัครใช้เพื่อรับข้อมูลอัปเดตเกี่ยวกับกิจกรรมนี้

~ โดย Elizabeth และ Addy จาก WebPerf Janitors