Chrome เพื่อเพิ่มการซ้อนทับประสิทธิภาพเพื่อช่วยให้นักพัฒนาเว็บสร้างเว็บไซต์ได้เร็วขึ้น

เมื่อ Google เปิดตัว Chrome 90 ในปลายปีนี้ เบราว์เซอร์จะมีฟีเจอร์โอเวอร์เลย์ใหม่ซึ่งจะช่วยให้นักพัฒนาทราบสถิติสำคัญเกี่ยวกับประสิทธิภาพของเว็บไซต์

Performance Heads-Up Display (HUD) ใหม่ของ Chrome ได้รับรายละเอียดโดยผู้จัดการฝ่ายวิศวกรรมของ Google แอดดี้ ออสมานี (ทาง หุ่นยนต์ตำรวจ). โอเวอร์เลย์ใหม่ซึ่งจะเป็นส่วนหนึ่งของ Chrome DevTools จะช่วยให้นักพัฒนาได้รับทั้ง Core Web Vitals และเมตริกความราบรื่น เมื่อเปิดใช้งาน HUD แล้ว HUD จะคงอยู่และแสดงในแต่ละแท็ก

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

สิ่งที่เราพูดเกี่ยวกับ Core Web Vitals เมื่อเดือนพฤษภาคม 2020 มีดังนี้

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

• Largest Contentful Paint (LCP): วัดประสิทธิภาพการโหลด เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี LCP ควรเกิดขึ้นภายใน 2.5 วินาทีนับจากเวลาที่เริ่มโหลดหน้าเว็บครั้งแรก
• ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID): วัดการโต้ตอบ เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี หน้าเว็บควรมี FID น้อยกว่า 100 มิลลิวินาที
• Cumulative Layout Shift (CLS): วัดความเสถียรของการมองเห็น เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี เพจควรรักษา CLS ให้น้อยกว่า 0.1

นักพัฒนาซอฟต์แวร์คำนึงถึงประโยชน์สูงสุดในการสร้างเว็บไซต์ที่มีประสบการณ์ที่รวดเร็วและราบรื่น นั่นเป็นเพราะว่า Google จะจัดอันดับเว็บไซต์ อิงตาม “ประสบการณ์การใช้งานเพจ” เริ่มตั้งแต่เดือนพฤษภาคม 2021 Google เริ่มติดป้ายกำกับเว็บไซต์ว่าตรงตามเกณฑ์เมตริก Core Web Vitals ในเดือนสิงหาคมปีที่แล้ว โดยแจ้งให้ผู้ใช้ใน Chrome 85 ทราบว่าลิงก์นำไปสู่ ​​"หน้าเว็บที่รวดเร็ว" หรือไม่

ตาม Osmani HUD ยังคงได้รับการขัดเกลา ดังนั้นสิ่งต่างๆ เช่น ความเสถียรและประสิทธิภาพจะมาพร้อมกับเวลา คุณสามารถตรงไปที่ crbug.com และรายงานข้อบกพร่องหรือข้อเสนอแนะภายใต้ส่วนประกอบภายใน > GPU > เมตริก