เมตริกประสิทธิภาพใหม่ การอัปเดต PageSpeed Insights และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) และอื่นๆ
ในงาน Chrome Developer Summit ที่ผ่านมา Paul Irish และฉันได้ประกาศการอัปเดต Lighthouse ซึ่งได้แก่ Lighthouse CI, สูตรคะแนนประสิทธิภาพใหม่ และอื่นๆ นอกจากข่าวสำคัญเกี่ยวกับ Lighthouse แล้ว เรายังได้นำเสนอการพัฒนาเครื่องมือด้านประสิทธิภาพที่น่าสนใจ ซึ่งรวมถึงเมตริกประสิทธิภาพใหม่ การอัปเดต PageSpeed Insights และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ตลอดจนข้อมูลเชิงลึกจากการวิเคราะห์ระบบนิเวศของเว็บใน Web Almanac
เมตริกประสิทธิภาพใหม่
การวัดประสบการณ์ของผู้ใช้อย่างละเอียดเป็นกุญแจสำคัญในการวัดผลผลกระทบที่ประสบการณ์ดังกล่าวมีต่อกําไรสุทธิ รวมถึงติดตามการปรับปรุงและการถดถอย เมื่อเวลาผ่านไป เมตริกใหม่ๆ ได้พัฒนาขึ้นเพื่อจับความแตกต่างเหล่านั้นและเติมเต็มช่องโหว่ในการวัดประสบการณ์ของผู้ใช้ ข้อมูลล่าสุดเกี่ยวกับเมตริกคือเมตริกภาคสนาม 2 รายการ ได้แก่ Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) ซึ่งกำลังอยู่ในระยะทดลองในกลุ่มทํางานด้านประสิทธิภาพเว็บของ W3C และเมตริกในห้องทดลองใหม่อย่าง Total Blocking Time (TBT)
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) รายงานเวลาที่องค์ประกอบเนื้อหาขนาดใหญ่ที่สุดปรากฏในวิวพอร์ต
ก่อนมี Largest Contentful Paint นั้น First Meaningful Paint (FMP) และดัชนีความเร็ว (SI) มีหน้าที่บันทึกประสบการณ์การโหลดหลังจาก Paint เริ่มต้น แต่เมตริกเหล่านี้มีความซับซ้อนและมักไม่ระบุเวลาที่โหลดเนื้อหาหลักของหน้าเว็บ การวิจัยแสดงให้เห็นว่าการดูว่าองค์ประกอบที่ใหญ่ที่สุดในหน้าเว็บแสดงผลเมื่อใดนั้นแสดงถึงเวลาที่โหลดเนื้อหาหลักของหน้าเว็บได้ดีกว่า
เมตริก Largest Contentful Paint ใหม่จะพร้อมใช้งานในรายงาน Lighthouse ในเร็วๆ นี้ และในระหว่างนี้คุณสามารถวัด LCP ใน JavaScript ได้
เวลาทั้งหมดในการบล็อก (TBT)
เมตริกเวลาในการบล็อกทั้งหมด (TBT) จะวัดระยะเวลาทั้งหมดระหว่าง First Contentful Paint (FCP) กับเวลาในการตอบสนอง (TTI) ซึ่งมีการบล็อกเทรดหลักเป็นเวลานานพอที่จะป้องกันการตอบสนองต่ออินพุต
ระบบจะถือว่างานที่ใช้เวลานานหากทำงานในชุดข้อความหลักนานกว่า 50 มิลลิวินาที ระบบจะนับมิลลิวินาทีที่เกินมานี้รวมไปกับเวลาการบล็อกของงานนั้น

เวลาการบล็อกทั้งหมดของหน้าเว็บคือผลรวมของเวลาการบล็อกของงานที่ใช้เวลานานทั้งหมดที่เกิดขึ้นระหว่าง FCP กับ TTI

แม้ว่าเวลาในการโต้ตอบจะระบุได้ดีว่าเมื่อใดที่เทรดหลักจะทำงานได้ดีขึ้นในช่วงหลังของการโหลด แต่ระยะเวลาทั้งหมดในการบล็อกมีจุดประสงค์เพื่อวัดว่าเทรดหลักทำงานหนักเพียงใดตลอดการโหลด วิธีนี้จะช่วยให้ TTI และ TBT ส่งเสริมกันและกัน และมีความสมดุล
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) จะวัดความเสถียรของภาพในหน้าเว็บและประเมินความถี่ที่ผู้ใช้พบการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิด การเปลี่ยนแปลงเนื้อหาที่ไม่คาดคิดอาจทำให้ผู้ใช้หงุดหงิดมาก และเมตริกใหม่นี้จะช่วยคุณแก้ปัญหาดังกล่าวด้วยการวัดความถี่ที่เนื้อหาเปลี่ยนแปลงสำหรับผู้ใช้
ดูคู่มือโดยละเอียดเกี่ยวกับ Cumulative Layout Shift เพื่อดูวิธีคํานวณและวิธีวัด
สูตรคะแนนประสิทธิภาพใหม่ของ Lighthouse จะลดการเน้น FMP และ FCI ในเร็วๆ นี้ และรวมเมตริกใหม่ 3 รายการ ได้แก่ LCP, TBT และ CLS เนื่องจากเมตริกเหล่านี้จับภาพได้ดียิ่งขึ้นเมื่อหน้าเว็บใช้งานได้

ดูข้อมูลเพิ่มเติมได้จากการให้คะแนนประสิทธิภาพของ Lighthouse และการเก็บรวบรวมเมตริก web.dev ใหม่
เกณฑ์ข้อมูลภาคสนาม (CrUX) ที่ปรับใน PageSpeed Insights
ตลอดปีที่ผ่านมา เราได้วิเคราะห์ประสิทธิภาพของเว็บจากผู้ใช้ผ่านข้อมูลประสบการณ์ของผู้ใช้ Chrome (CrUX) จากข้อมูลเชิงลึกดังกล่าว เราประเมินเกณฑ์ที่ใช้ติดป้ายกํากับเว็บไซต์ว่า "ช้า" "ปานกลาง" หรือ "เร็ว" ในประสิทธิภาพภาคสนามอีกครั้ง

PageSpeed Insights (PSI) ใช้เปอร์เซ็นต์ไทล์ของข้อมูลภาคสนามทั้งหมดเป็นตัวเลขเป้าหมายสําหรับเว็บไซต์นั้นๆ เพื่อให้ได้การประเมินโดยรวมของเว็บไซต์ โดยเกณฑ์ก่อนหน้านี้ที่ใช้คือเปอร์เซ็นต์ไทล์ที่ 90 สำหรับ First Contentful Paint และเปอร์เซ็นต์ไทล์ที่ 95 สำหรับเวลาในการตอบสนองต่อการป้อนข้อมูลครั้งแรก (FID)
ตัวอย่างเช่น หากเว็บไซต์มีการแจกแจง FCP เร็ว 50% ปานกลาง 30% และช้า 20% FCP เปอร์เซ็นไทล์ที่ 90 จะอยู่ในส่วนที่ช้า ทําให้คะแนนในช่องโดยรวมของเว็บไซต์ช้า
เราได้ปรับการแบ่งประเภทนี้เพื่อให้มีการเผยแพร่โดยรวมที่ดีขึ้นในเว็บไซต์ต่างๆ โดยรายละเอียดใหม่มีดังนี้
เมตริก | เปอร์เซ็นไทล์โดยรวม | เร็ว (มิลลิวินาที) | ปานกลาง (มิลลิวินาที) | ช้า (มิลลิวินาที) |
FCP | เปอร์เซ็นไทล์ที่ 75 | 1000 | 1000-3000 | 3000+ |
FID | เปอร์เซ็นไทล์ที่ 95 | 100 | 100-300 | 300+ |
ตัวอย่างเช่น ตอนนี้หากเว็บไซต์มีการแจกแจง FCP เร็ว 50% ปานกลาง 30% และช้า 20% FCP เปอร์เซ็นไทล์ที่ 75 จะอยู่ในส่วนปานกลาง ทําให้คะแนนในช่องโดยรวมของเว็บไซต์อยู่ในระดับปานกลาง
URL หลักที่เปลี่ยนเส้นทางใน PageSpeed Insights
ทีม PageSpeed Insights ได้เพิ่มข้อความแจ้งให้วิเคราะห์อีกครั้งลงใน PSI เพื่อให้คุณวัดประสบการณ์ของผู้ใช้ได้อย่างแม่นยำที่สุด สําหรับเว็บไซต์ที่เปลี่ยนเส้นทางไปยัง URL ใหม่ ระบบจะแจ้งให้คุณเรียกใช้รายงานใน URL ของหน้า Landing Page อีกครั้งเพื่อให้เห็นภาพรวมประสิทธิภาพจริงที่สมบูรณ์ยิ่งขึ้น

CrUX ในรายงานความเร็วของ Search Console เวอร์ชันใหม่
Search Console ได้เปิดตัวรายงานความเร็วใหม่เมื่อ 1 สัปดาห์ก่อนการประชุม Chrome Dev Summit โดยจะใช้ข้อมูลจากรายงานประสบการณ์ของผู้ใช้ Chrome เพื่อช่วยเจ้าของเว็บไซต์ระบุปัญหาที่อาจเกิดขึ้นเกี่ยวกับประสบการณ์ของผู้ใช้ รายงานความเร็วจะกําหนดกลุ่ม URL ที่คล้ายกันไปยังที่เก็บข้อมูล "เร็ว" "ปานกลาง" และ "ช้า" โดยอัตโนมัติ และช่วยจัดลําดับความสําคัญในการปรับปรุงประสิทธิภาพสําหรับปัญหาที่เฉพาะเจาะจง

สารานุกรมเว็บ

ในคีย์โน้ตช่วงเปิดงาน เราได้ประกาศเปิดตัวสารานุกรมเว็บ ซึ่งเป็นโปรเจ็กต์ประจำปีที่รวบรวมสถิติและเทรนด์เกี่ยวกับสถานะของเว็บเข้ากับความเชี่ยวชาญของชุมชนเว็บ ผู้มีส่วนร่วม 85 คน ซึ่งประกอบด้วยนักพัฒนาซอฟต์แวร์ Chrome และชุมชนเว็บ ได้อาสาทำงานในโปรเจ็กต์นี้ ซึ่งจะวิเคราะห์แง่มุมหลัก 20 ด้านเกี่ยวกับเว็บที่กล่าวถึงวิธีสร้าง แสดง และใช้งานเว็บไซต์ เริ่มต้นสำรวจ Web Almanac เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับสถานะประสิทธิภาพ JavaScript และโค้ดของบุคคลที่สามบนเว็บ
ดูข้อมูลเพิ่มเติม
ดูรายละเอียดเพิ่มเติมเกี่ยวกับการอัปเดตเครื่องมือด้านประสิทธิภาพจาก Chrome Developer Summit ได้ที่วิดีโอการพูดคุยเรื่องการพัฒนาเครื่องมือด้านความเร็ว