เรียนรู้เกี่ยวกับ PageSpeed Insights ล่าสุดเพื่อช่วยให้คุณวัดผลและเพิ่มประสิทธิภาพของหน้าเว็บและคุณภาพของเว็บไซต์ได้ดียิ่งขึ้น
ในช่วงหลายปีที่ผ่านมา PageSpeed Insights (PSI) ได้พัฒนาให้เป็นแหล่งที่มาแบบครบวงจรสำหรับทั้งฟิลด์และข้อมูลห้องทดลอง ผสานรวมข้อมูลจากรายงาน UX ของ Chrome (CrUX) และการวินิจฉัย Lighthouse เพื่อมอบข้อมูลเชิงลึกที่ช่วยปรับปรุงประสิทธิภาพของเว็บไซต์
วันนี้เรายินดีที่จะประกาศเปิดตัว PSI เวอร์ชันอัปเดต แม้ว่านี่จะเป็นองค์ประกอบที่สำคัญในชุดเครื่องมือความเร็วของเรา แต่ฐานของโค้ด PSI นั้นมีอายุ 10 ปี มีโค้ดเดิมจำนวนมาก และครบกำหนดสำหรับการออกแบบใหม่ เราใช้โอกาสนี้เป็นโอกาสในการแก้ไขปัญหาเกี่ยวกับอินเทอร์เฟซใน PSI ซึ่งบางครั้งทำให้ผู้ใช้ไปยังส่วนต่างๆ ของรายงานได้ยาก เป้าหมายหลักของเราคือ
- ทำให้ UI ใช้งานง่ายขึ้นโดยแยกความแตกต่างระหว่างข้อมูลที่มาจากสภาพแวดล้อมสังเคราะห์กับข้อมูลที่รวบรวมจากผู้ใช้ในช่องนั้นอย่างชัดเจน
- สื่อสารอย่างชัดเจนถึงวิธีคํานวณการประเมิน Core Web Vitals ใน UI
- ปรับรูปลักษณ์ของ PSI ให้ทันสมัยโดยใช้ดีไซน์ Material
โพสต์นี้จะแนะนำฟีเจอร์ใหม่ๆ ใน PSI ซึ่งจะเปิดตัวภายในปีนี้
มีอะไรใหม่
การออกแบบ UI ของ PSI ใหม่มีเป้าหมายเพื่อปรับปรุงการนำเสนอข้อมูลรายงาน รวมถึงเพิ่มความชัดเจนและรายละเอียดของข้อมูลที่มีในรายงาน UI ใหม่มีเป้าหมายเพื่อให้ใช้งานง่ายขึ้นและช่วยให้นักพัฒนาซอฟต์แวร์ค้นพบข้อมูลเชิงลึกด้านประสิทธิภาพในห้องทดลองและด้านประสิทธิภาพการทำงานของหน้าเว็บของตนได้อย่างรวดเร็ว การเปลี่ยนแปลงพื้นฐานของ UI มีดังนี้
แยกข้อมูลภาคสนามและห้องทดลองอย่างชัดเจน
เราได้เปลี่ยน UI ให้แยกข้อมูลภาคสนามออกจากข้อมูลในห้องทดลองอย่างชัดเจน เราได้แทนที่ป้ายกำกับสำหรับ "ข้อมูลภาคสนาม" และ "ข้อมูล Lab" ด้วยข้อความที่ระบุความหมายของข้อมูลและวิธีที่ข้อมูลจะช่วยได้ เรายังได้เพิ่มส่วน ข้อมูลช่องไว้ที่ด้านบนด้วย เราย้ายคะแนนประสิทธิภาพตามห้องทดลองดั้งเดิมซึ่งแสดงอยู่ด้านบนสุดลงมาที่ส่วนข้อมูลใน Lab เพื่อไม่ให้เกิดความกำกวมเกี่ยวกับที่มาของคะแนน
การประเมิน Core Web Vitals
ผลการประเมิน Core Web Vitals ซึ่งก่อนหน้านี้ปรากฏเป็นคำเดียว "ผ่าน" หรือ "ไม่ผ่าน" ในข้อมูลฟิลด์ ขณะนี้โดดเด่นเป็นส่วนย่อยที่แยกต่างหากพร้อมไอคอนที่ชัดเจน
โปรดทราบว่ากระบวนการประเมินสำหรับ Core Web Vitals จะไม่มีการเปลี่ยนแปลง เมตริก Core Web Vitals แบบ FID, LCP และ CLS อาจรวบรวมในระดับหน้าเว็บหรือต้นทาง สำหรับการรวมที่มีข้อมูลเพียงพอในเมตริกทั้ง 3 รายการ ข้อมูลที่รวบรวมได้จะต้องผ่านการประเมิน Core Web Vitals หากเปอร์เซ็นไทล์ที่ 75 ของเมตริกทั้ง 3 รายการเป็น "ดี" มิฉะนั้น การรวมคำตอบจะไม่ผ่านการประเมิน หากการรวมมีข้อมูล FID ไม่เพียงพอ จะผ่านการประเมินหากทั้งเปอร์เซ็นไทล์ที่ 75 ของ LCP และ CLS อยู่ในระดับดี หาก LCP หรือ CLS มีข้อมูลไม่เพียงพอ จะไม่สามารถประเมินการรวมระดับหน้าเว็บหรือต้นทางได้
ป้ายกำกับสำหรับประสิทธิภาพบนอุปกรณ์เคลื่อนที่และเดสก์ท็อป
เราเปลี่ยนเมนูการนำทางที่ด้านบนและรวมลิงก์สำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อปไว้ตรงกลางในหน้ารายงาน ตอนนี้ลิงก์จะมองเห็นได้ง่ายและระบุแพลตฟอร์มที่ข้อมูลกำลังแสดงอย่างชัดเจน และยังช่วยให้แถบนำทางดูสะอาดตาขึ้นด้วย
สรุปแหล่งที่มา
สรุปข้อมูลต้นทางซึ่งให้คะแนน CrUX แบบรวมของทุกหน้าจากต้นทางปรากฏอยู่เมื่อคลิกช่องทำเครื่องหมาย เราได้ย้ายส่วนรายงานนี้ไปยังแท็บใหม่ "ต้นทาง" ในส่วน "ข้อมูลช่อง"
ข้อมูลเพิ่มเติมที่เป็นประโยชน์
ตอนนี้รายงานจะมีส่วนข้อมูลใหม่ที่ด้านล่างของแต่ละช่อง และการ์ดห้องทดลองที่แชร์รายละเอียดต่อไปนี้เกี่ยวกับข้อมูลตัวอย่าง
- ระยะเวลาการเก็บรวบรวมข้อมูล
- ระยะเวลาการเข้าชม
- อุปกรณ์
- ดูการเชื่อมต่อเครือข่าย
- ขนาดตัวอย่าง
- เวอร์ชันของ Chrome
ข้อมูลนี้ควรเพิ่มความแตกต่างระหว่างข้อมูลห้องทดลองและข้อมูลภาคสนาม และช่วยให้ผู้ใช้ที่ก่อนหน้านี้ไม่แน่ใจว่าแหล่งข้อมูลทั้งสอง (ห้องทดลองและภาคสนาม) แตกต่างกันอย่างไร
ขยายมุมมอง
เรามีฟีเจอร์ใหม่ "ขยายมุมมอง" ที่เพิ่มฟังก์ชันเจาะลึกในส่วนข้อมูลภาคสนามและช่วยให้คุณดูรายละเอียดโดยละเอียดสำหรับเมตริก Core Web Vitals ได้
รูปภาพของหน้า
เราได้นำรูปภาพของหน้าที่โหลดออกแล้ว ซึ่งปรากฏอยู่ข้างข้อมูลในช่อง ทั้งรูปภาพและภาพขนาดย่อของหน้าที่แสดงลำดับการโหลดจะปรากฏในส่วนข้อมูลห้องปฏิบัติการ
หากต้องการดูเอกสารล่าสุดเกี่ยวกับผลิตภัณฑ์ โปรดไปที่ https://developers.google.com/speed/docs/insights/.
การอัปเดตเกี่ยวกับ web.dev/measure
นอกจากนี้เรายังอัปเดต web.dev/measure ให้ขับเคลื่อนด้วย PageSpeed Insights API โดยตรงเพื่อลดความไม่สอดคล้องกันของเครื่องมือต่างๆ ในกล่องเครื่องมือประสิทธิภาพด้วย
ก่อนหน้านี้ นักพัฒนาแอปจะเรียกใช้รายงานผ่านทั้งเครื่องมือ PSI และ /measure และเห็นตัวเลขที่แตกต่างกันของ Lighthouse สาเหตุหลักประการหนึ่งของความแตกต่างก็คือ /measure เริ่มต้นการทดสอบทั้งหมดจากสหรัฐอเมริกา (เนื่องจากก่อนหน้านี้มีแบ็กเอนด์ระบบคลาวด์อยู่ในสหรัฐอเมริกา)
การใช้ /measure การเรียกใช้ API เดียวกันกับ PSI UI โดยตรงจะทำให้นักพัฒนาแอปได้รับประสบการณ์ที่สอดคล้องกันมากขึ้นเมื่อใช้ PSI และ /measure และเรายังได้ปรับเปลี่ยน /วัดผล ตามวิธีที่ผู้ใช้ใช้เครื่องมือด้วย ซึ่งหมายความว่าประสบการณ์การลงชื่อเข้าใช้สำหรับ /measure จะหายไป แต่ฟังก์ชันที่มีการใช้งานมากที่สุด เช่น การดูหลายหมวดหมู่ จะยังคงใช้งานได้
PSI วันนี้
ลองย้อนกลับไปดูหน่อยว่ารายงาน PageSpeed Insights ปัจจุบันนำเสนออะไรบ้าง รายงาน PSI มีข้อมูลประสิทธิภาพของทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อปในแต่ละแท็บและแนะนำวิธีปรับปรุงหน้าเว็บ องค์ประกอบหลักของรายงานในแต่ละกรณีจะคล้ายคลึงกันและประกอบด้วยสิ่งต่อไปนี้
คะแนนประสิทธิภาพ: คะแนนประสิทธิภาพจะปรากฏที่ด้านบนของรายงาน PSI และสรุปประสิทธิภาพของหน้าเว็บโดยรวม คะแนนนี้จะได้จากการเรียกใช้ Lighthouse เพื่อรวบรวมและวิเคราะห์ข้อมูลห้องทดลองเกี่ยวกับหน้าเว็บ คะแนน 90 ขึ้นไปถือว่าดี 50-90 ต้องปรับปรุง และต่ำกว่า 50 ถือว่าไม่ดี
ข้อมูลภาคสนาม: ข้อมูลภาคสนามที่มาจากชุดข้อมูลรายงาน CrUX ให้ข้อมูลเชิงลึกเกี่ยวกับประสบการณ์ของผู้ใช้ในการใช้งานจริง ข้อมูลดังกล่าว รวมถึงเมตริก เช่น First Contentful Paint (FCP) และวัดผล Core Web Vitals (First Input Delay (FID), Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) นอกจากค่าเมตริกแล้ว คุณยังสามารถดูการกระจายของหน้าเว็บที่มีค่าของเมตริกหนึ่งๆ คือ "ดี" "ต้องปรับปรุง" หรือ "ไม่ดี" ซึ่งระบุด้วยแถบสีเขียว เหลืองอำพัน และสีแดงตามลำดับ การกระจายและคะแนนจะแสดงตามการโหลดหน้าเว็บสำหรับผู้ใช้ในชุดข้อมูล CrUX โดยคะแนนจะคำนวณจาก 28 วันที่ผ่านมาและไม่สามารถใช้ได้สำหรับหน้าเว็บใหม่ที่ไม่มีข้อมูลผู้ใช้จริงที่เพียงพอ
สรุปแหล่งที่มา: ผู้ใช้สามารถคลิกช่องทําเครื่องหมายแสดงสรุปแหล่งที่มาเพื่อดูคะแนนรวมของเมตริกสําหรับหน้าเว็บทั้งหมดที่แสดงจากแหล่งที่มาเดียวกันในช่วง 28 วันที่ผ่านมา
ข้อมูล Lab: คะแนนประสิทธิภาพของห้องปฏิบัติการที่คำนวณโดยใช้ Lighthouse จะช่วยแก้ไขข้อบกพร่องด้านประสิทธิภาพเมื่อรวบรวมในสภาพแวดล้อมที่มีการควบคุม รายงานนี้แสดงประสิทธิภาพโดยใช้เมตริกต่างๆ เช่น First Contentful Paint, Largest Contentful Paint, ดัชนีความเร็ว, Cumulative Layout Shift, Time to Interactive และ Total Blocked Time เมตริกแต่ละรายการจะมีคะแนน และมีป้ายกำกับเป็นไอคอนที่แสดงถึง "ดี" "ต้องปรับปรุง" หรือ "แย่" เนื้อหาส่วนนี้แสดงลักษณะปัญหาคอขวดด้านประสิทธิภาพที่ดีก่อนเปิดตัวและจะช่วยวินิจฉัยปัญหา แต่อาจไม่จับประเด็นปัญหาในชีวิตจริง
การตรวจสอบ: ส่วนนี้จะแสดงการตรวจสอบทั้งหมดที่ดำเนินการโดย Lighthouse และแสดงรายการการตรวจสอบที่ผ่านแล้ว พร้อมโอกาสในการปรับปรุงและข้อมูลการวินิจฉัยเพิ่มเติม
ความท้าทายของการออกแบบ PSI ในปัจจุบัน
ดังที่เห็นในภาพหน้าจอด้านบน จุดข้อมูลต่างๆ จากข้อมูลห้องทดลองและข้อมูลภาคสนามไม่ได้แยกไว้อย่างชัดเจน และนักพัฒนาแอปที่เพิ่งเริ่มใช้ PSI อาจไม่เข้าใจบริบทของข้อมูลและสิ่งที่ต้องทําต่อไปได้โดยง่าย ความสับสนนี้ส่งผลให้บล็อกโพสต์ "วิธีการ" จำนวนมากเกี่ยวข้องกับการถอดรหัสรายงาน PSI
ในการออกแบบใหม่นี้ เราหวังว่าจะทำให้นักพัฒนาซอฟต์แวร์ตีความรายงานได้ง่ายขึ้น เพื่อให้นักพัฒนาแอปเปลี่ยนจากการสร้างรายงาน PSI ไปอย่างรวดเร็ว แล้วดำเนินการตามข้อมูลเชิงลึกที่รวมอยู่ในรายงาน
ดูข้อมูลเพิ่มเติม
ดูรายละเอียดเพิ่มเติมเกี่ยวกับการอัปเดตเครื่องมือด้านประสิทธิภาพได้ที่งาน Chrome Dev Summit 2021 เราจะแจ้งให้คุณทราบเกี่ยวกับวันที่เผยแพร่สำหรับ PSI และการเปลี่ยนแปลงใน web.dev/measure
ขอขอบคุณ Milica Mihajlija, Philip Walton, Brendan Kenny และ Ewa Gasperowicz ที่แสดงความคิดเห็นเกี่ยวกับบทความนี้