วิวัฒนาการของการใช้เครื่องมือปรับความเร็ว: ไฮไลต์จาก Chrome Developer Summit 2019

เมตริกประสิทธิภาพใหม่ การอัปเดต PageSpeed Insights และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) และอื่นๆ

Elizabeth Sweeny
Elizabeth Sweeny

ในงาน 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 มิลลิวินาที ระบบจะนับมิลลิวินาทีที่เกินมานี้รวมไปกับเวลาการบล็อกของงานนั้น

แผนภาพที่แสดงงาน 150 มิลลิวินาทีซึ่งมีเวลาบล็อก 100 มิลลิวินาที

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

แผนภาพที่แสดงงาน 5 รายการที่มีเวลาในการบล็อกทั้งหมด 60 มิลลิวินาทีจากเวลาของเทรดหลัก 270 มิลลิวินาที

แม้ว่า "Time to Interactive" จะทำหน้าที่ได้ดีในการระบุเมื่อเทรดหลักสงบลงในภายหลังเมื่อโหลด แต่ "เวลาในการบล็อกทั้งหมด" จะวัดปริมาณว่าเทรดหลักทำงานหนักเพียงใดระหว่างการโหลด ด้วยวิธีนี้ TTI และ TBT จะช่วยส่งเสริมกันและกัน และสร้างความสมดุล

Cumulative Layout Shift (CLS)

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

Screencast ที่แสดงให้เห็นว่าความไม่เสถียรของเลย์เอาต์ส่งผลเสียต่อผู้ใช้อย่างไร

ดูคู่มือโดยละเอียดเกี่ยวกับ Cumulative Layout Shift เพื่อดูวิธีคำนวณและวิธีวัด

เร็วๆ นี้ สูตรคะแนนประสิทธิภาพของ Lighthouse ใหม่จะยกเลิกการเน้น FMP และ FCI แล้วรวมเมตริกใหม่ 3 รายการ ได้แก่ LCP, TBT และ CLS ไว้ด้วย เนื่องจากเมตริกจะทำงานได้ดีขึ้นเมื่อรู้สึกว่าหน้าเว็บใช้งานได้

ใน Lighthouse v6 First Contentful Paint, ดัชนีความเร็ว และ Largest Contentful Paint คือเมตริกประสิทธิภาพการโหลดหลัก เวลาในการตอบสนอง, First Input Delay, First Input Delay สูงสุดที่อาจเกิดขึ้น และเวลาในการบล็อกทั้งหมดคือเมตริกการโต้ตอบหลัก และ Cumulative Layout Shift คือเมตริกความคาดการณ์หลัก

ดูข้อมูลเพิ่มเติมได้จากการให้คะแนนประสิทธิภาพของ Lighthouse และคอลเล็กชันเมตริก web.dev ใหม่

เกณฑ์ข้อมูลภาคสนาม (CrUX) ที่ปรับใน PageSpeed Insights

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

แผนภูมิแท่ง 2 แผนภูมิแสดงการแจกแจงความเร็วช้า ปานกลาง และเร็วสําหรับ FCP และ FID

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 อีกครั้งเพื่อให้เห็นภาพรวมประสิทธิภาพจริงที่สมบูรณ์ยิ่งขึ้น

อินเทอร์เฟซผู้ใช้ PSI ที่แสดงการเปลี่ยนเส้นทาง URL และปุ่ม "วิเคราะห์อีกครั้ง"

CrUX ในรายงานความเร็วของ Search Console เวอร์ชันใหม่

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

รายงานความเร็วของ Search Console

หนังสือรายปีจากเว็บ

Dion Almaer นำเสนอ Web Almanac ที่งาน CDS 2019

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

ดูข้อมูลเพิ่มเติม

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการอัปเดตเครื่องมือด้านประสิทธิภาพจาก Chrome Developer Summit ได้ที่วิดีโอการพูดคุยเรื่องการพัฒนาเครื่องมือด้านความเร็ว