ค้นหาโอกาสในการปรับปรุงประสบการณ์ของผู้ใช้ด้วยเครื่องมือบนเว็บของ Chrome
เผยแพร่เมื่อวันที่ 11 พฤษภาคม 2021
วันนี้เราจะมาพูดถึงฟีเจอร์เครื่องมือใหม่ใน Lighthouse, PageSpeed และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อช่วยระบุวิธีปรับปรุงเว็บไซต์ใน Web Vitals
Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สสำหรับการปรับปรุงคุณภาพของหน้าเว็บ คุณจะค้นหาเครื่องมือนี้ได้ในชุด Chrome DevTools ในเครื่องมือแก้ไขข้อบกพร่องและเรียกใช้งานในหน้าเว็บ สาธารณะ หรือที่ต้องมีการตรวจสอบสิทธิ์ คุณยังค้นหา Lighthouse ได้ใน PageSpeed Insights, CI และ WebPageTest
Lighthouse 7.x มีฟีเจอร์ใหม่ๆ เช่น ภาพหน้าจอองค์ประกอบ เพื่อให้ตรวจสอบส่วนต่างๆ ของ UI ที่ส่งผลต่อเมตริกประสบการณ์ของผู้ใช้ได้ง่ายขึ้น (เช่น โหนดที่ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์)
นอกจากนี้ เรายังได้เพิ่มการรองรับภาพหน้าจอองค์ประกอบใน PageSpeed Insights ซึ่งช่วยให้คุณพบปัญหาในการเรียกใช้ประสิทธิภาพของหน้าเว็บแบบครั้งเดียวได้ง่ายขึ้น
วัด Core Web Vitals
Lighthouse สามารถวัดเมตริก Core Web Vitals โดยการสังเคราะห์ รวมถึง Largest Contentful Paint, Cumulative Layout Shift และ Total Block Time (พร็อกซีของห้องทดลองสำหรับFirst Input Delay) เมตริกเหล่านี้แสดงการโหลด ความเสถียรของเลย์เอาต์ และความพร้อมในการโต้ตอบ เมตริกอื่นๆ เช่น First Contentful Paint ที่ไฮไลต์ในอนาคตของ Core Web Vitals ก็มีเช่นกัน
ส่วน "เมตริก" ของรายงาน Lighthouse มีเมตริกเหล่านี้ในเวอร์ชันห้องทดลอง คุณสามารถใช้ข้อมูลนี้เป็นการดูภาพรวมว่าประสบการณ์ของผู้ใช้ด้านใดบ้างที่ต้องได้รับการปรับปรุง
เมตริกภาคสนาม เช่น เมตริกที่อยู่ในรายงานประสบการณ์ของผู้ใช้ Chrome หรือ RUM จะไม่มีข้อจํากัดนี้ และเป็นข้อมูลเสริมที่มีประโยชน์สําหรับข้อมูลในห้องทดลอง เนื่องจากแสดงถึงประสบการณ์ของผู้ใช้จริง ข้อมูลภาคสนามไม่สามารถให้ข้อมูลการวินิจฉัยประเภทที่คุณได้รับในห้องทดลองได้ ดังนั้นทั้ง 2 อย่างนี้จึงต้องใช้ร่วมกัน
ระบุจุดที่คุณปรับปรุงใน Web Vitals ได้
ระบุองค์ประกอบ Largest Contentful Paint
LCP คือการวัดประสบการณ์การโหลดที่รับรู้ โดยจะระบุจุดระหว่างการโหลดหน้าเว็บเมื่อเนื้อหาหลักหรือ "ใหญ่ที่สุด" โหลดและแสดงต่อผู้ใช้
Lighthouse มีการตรวจสอบ "องค์ประกอบ Largest Contentful Paint" ซึ่งจะระบุองค์ประกอบที่เป็น Largest Contentful Paint การวางเมาส์เหนือองค์ประกอบจะไฮไลต์องค์ประกอบนั้นในหน้าต่างเบราว์เซอร์หลัก
หากองค์ประกอบนี้เป็นรูปภาพ ข้อมูลนี้จะเป็นประโยชน์ซึ่งคุณอาจต้องการเพิ่มประสิทธิภาพการโหลดรูปภาพนี้ Lighthouse มีการตรวจสอบการเพิ่มประสิทธิภาพรูปภาพหลายรายการเพื่อช่วยให้ทราบว่าควรบีบอัด ปรับขนาด หรือส่งรูปภาพได้ดีขึ้นในรูปแบบรูปภาพที่ทันสมัยยิ่งขึ้นหรือไม่
นอกจากนี้ คุณอาจพบว่า LCP bookmarklet โดย Annie Sullivan มีประโยชน์ในการระบุองค์ประกอบ LCP ที่มีสี่เหลี่ยมผืนผ้าสีแดงได้อย่างรวดเร็วในคลิกเดียว
โหลดรูปภาพที่ค้นพบล่าช้าล่วงหน้าเพื่อปรับปรุง LCP
หากต้องการปรับปรุง Largest Contentful Paint ให้โหลดล่วงหน้ารูปภาพหลักที่สำคัญหากเบราว์เซอร์ค้นพบรูปภาพเหล่านั้นช้า การค้นพบล่าช้าอาจเกิดขึ้นหากต้องโหลดแพ็กเกจ JavaScript ก่อนที่จะค้นพบรูปภาพได้
เรามีคำถามที่พบบ่อย 2-3 ข้อเกี่ยวกับการโหลดรูปภาพ LCP ล่วงหน้าที่อาจมีคุณค่ากล่าวโดยสรุป
คุณโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าได้ไหม ใช่
สมมติว่าเรามีรูปภาพหลักที่ตอบสนองตามอุปกรณ์ตามที่ระบุโดยใช้ srcset และ sizes ด้านล่าง
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
การเพิ่มแอตทริบิวต์ imagesrcset และ imagesizes ลงในแอตทริบิวต์ link ทำให้เราสามารถโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าได้โดยใช้ตรรกะการเลือกรูปภาพเดียวกันกับที่ srcset และ sizes ใช้ ดังนี้
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
การตรวจสอบจะไฮไลต์โอกาสในการโหลดล่วงหน้าด้วยไหมหากมีการกําหนดรูปภาพ LCP ผ่านพื้นหลัง CSS ได้
รูปภาพที่แจ้งว่าเป็นรูปภาพ LCP ไม่ว่าจะผ่านพื้นหลัง CSS หรือ <img> จะเป็นตัวเลือกหากพบที่ความลึกการแสดงโฆษณาสื่อกลางตามลำดับขั้น 3 รายการขึ้นไป
การโหลดรูปภาพนอกหน้าจอแบบ Lazy Loading และการหลีกเลี่ยงสิ่งนี้สำหรับ LCP
รูปภาพที่ไม่ได้อยู่ในหน้าจอซึ่งไม่สำคัญต่อประสบการณ์การใช้งานครั้งแรกของผู้ใช้สามารถโหลดแบบเลื่อนได้ นี่เป็นเทคนิคที่เลื่อนเวลาการดาวน์โหลดรูปภาพไว้จนกว่าผู้ใช้จะเลื่อนมาใกล้รูปภาพ ซึ่งจะช่วยลดการช่วงชิงเนื้อหาสำคัญในเครือข่ายและในบางกรณีก็ช่วยปรับปรุง LCP ได้ การตรวจสอบ "เลื่อนรูปภาพนอกหน้าจอ" สามารถช่วยในเรื่องต่อไปนี้ได้
รูปภาพครึ่งหน้าบนที่สำคัญ เช่น รูปภาพ Largest Contentful Paint ไม่ควรโหลดแบบ Lazy Loading เนื่องจากอาจเป็นความล่าช้าในการโหลดรูปภาพ LCP Lighthouse จะไฮไลต์หากรูปภาพ LCP มีการโหลดแบบ Lazy Loading อย่างไม่ถูกต้องผ่านการตรวจสอบ "โหลดรูปภาพ Largest Contentful Paint แบบ Lazy Loading แล้ว"
ระบุการมีส่วนร่วม CLS
การเปลี่ยนเลย์เอาต์สะสมเป็นการวัดความเสถียรของภาพ ซึ่งจะวัดปริมาณการเลื่อนเนื้อหาของหน้าเว็บ Lighthouse มีการตรวจสอบเพื่อแก้ไขข้อบกพร่อง CLS ที่เรียกว่า "หลีกเลี่ยงการเลื่อนเลย์เอาต์ขนาดใหญ่"
การตรวจสอบนี้จะไฮไลต์องค์ประกอบ DOM ที่ทําให้หน้าเว็บเปลี่ยนมากที่สุด ในคอลัมน์องค์ประกอบทางด้านซ้าย คุณจะเห็นรายการองค์ประกอบ DOM เหล่านี้ และทางด้านขวาจะเห็นส่วนที่เป็น CLS โดยรวม
ฟีเจอร์ใหม่ "ภาพหน้าจอองค์ประกอบ Lighthouse" ช่วยให้เราดูตัวอย่างภาพขององค์ประกอบหลักที่ระบุไว้ในการตรวจสอบได้เช่นเดียวกับการคลิกเพื่อซูมเพื่อให้เห็นภาพชัดเจนขึ้น
สําหรับ CLS หลังการโหลด การแสดงภาพด้วยสี่เหลี่ยมผืนผ้าอย่างต่อเนื่องอาจมีประโยชน์ในการระบุองค์ประกอบที่ทําให้ CLS เพิ่มขึ้นมากที่สุด ฟีเจอร์นี้จะอยู่ในเครื่องมือของบุคคลที่สาม เช่น หน้าแดชบอร์ด Core Web Vitals ของ SpeedCurve และฉันชอบใช้ Defaced's Layout Shift GIF Generator เพื่อดำเนินการต่อไปนี้
สำหรับมุมมองปัญหาการเปลี่ยนเลย์เอาต์ทั้งเว็บไซต์ เราได้รับประโยชน์อย่างมากจากรายงาน Core Web Vitals ของ Search Console วิธีนี้จะช่วยให้ผมเห็นประเภทหน้าต่างๆ บนเว็บไซต์ที่มี CLS สูง (ในกรณีนี้ ซึ่งช่วยให้ระบุได้ด้วยตัวเองว่าส่วนเทมเพลตใดที่ต้องใช้เวลาบ้าง)
การระบุ CLS จากรูปภาพที่ไม่มีขนาด
หากต้องการจำกัด Cumulative Layout Shift ที่เกิดจากรูปภาพที่ไม่มีขนาด ให้ใส่แอตทริบิวต์ขนาดความกว้างและความสูงในองค์ประกอบรูปภาพและวิดีโอ วิธีนี้ช่วยให้มั่นใจว่าเบราว์เซอร์จะจัดสรรพื้นที่ในเอกสารได้อย่างถูกต้องขณะที่โหลดรูปภาพ
ดูบทความการกำหนดความสูงและความกว้างของรูปภาพมีความสำคัญอีกเพื่ออ่านบทความที่เป็นประโยชน์เกี่ยวกับความสำคัญของการพิจารณาขนาดรูปภาพและสัดส่วนภาพ
การระบุ CLS จากโฆษณา
โฆษณาของผู้เผยแพร่โฆษณาสําหรับ Lighthouse ช่วยให้คุณค้นหาโอกาสในการปรับปรุงประสบการณ์การโหลดโฆษณาในหน้าเว็บ ซึ่งรวมถึงการมีส่วนร่วมในการเปลี่ยนแปลงเลย์เอาต์และงานที่ใช้เวลานานซึ่งอาจทำให้ผู้ใช้ใช้งานหน้าเว็บได้ช้าลง ใน Lighthouse คุณสามารถเปิดใช้ฟีเจอร์นี้ได้ผ่านปลั๊กอินชุมชน
โปรดทราบว่าโฆษณาเป็นหนึ่งในปัจจัยสําคัญที่ทําให้เลย์เอาต์บนเว็บเปลี่ยนแปลง สิ่งสำคัญคือ
- ระมัดระวังเมื่อวางโฆษณาที่ไม่ยึดติดไว้ใกล้กับด้านบนของวิวพอร์ต
- ขจัดการเปลี่ยนแปลงด้วยการจองขนาดที่ใหญ่ที่สุดที่เป็นไปได้สำหรับช่องโฆษณา
หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite
ภาพเคลื่อนไหวที่ไม่ได้ทำการคอมโพสิตอาจนำเสนอตัวเองว่ามีปัญหาในอุปกรณ์ระดับล่าง หากงาน JavaScript จำนวนมากทำให้เทรดหลักไม่ว่าง ภาพเคลื่อนไหวดังกล่าวอาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ได้
หาก Chrome พบว่าไม่สามารถทำการประกอบภาพเคลื่อนไหวได้ Chrome จะรายงานไปยังการติดตามการอ่าน Lighthouse ของเครื่องมือสำหรับนักพัฒนาเว็บซึ่งช่วยให้แสดงรายการองค์ประกอบที่มีภาพเคลื่อนไหวที่ไม่ได้ประกอบขึ้นได้และอธิบายด้วยเหตุผลใด ซึ่งจะอยู่ในการตรวจสอบหลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้คอมโพส
แก้ไขข้อบกพร่อง First Input Delay / เวลาทั้งหมดในการบล็อก / งานที่มีระยะเวลานาน
อินพุตแรกจะวัดเวลาตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก (เช่น เมื่อคลิกลิงก์ แตะปุ่ม หรือใช้ส่วนควบคุมที่ขับเคลื่อนโดย JavaScript ที่กําหนดเอง) จนถึงตอนที่เบราว์เซอร์เริ่มประมวลผลตัวแฮนเดิลเหตุการณ์เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง งาน JavaScript ที่ยาวอาจส่งผลต่อเมตริกนี้และพร็อกซีสำหรับเมตริกนี้ ซึ่งก็คือระยะเวลาทั้งหมดในการบล็อก
Lighthouse มีการตรวจสอบหลีกเลี่ยงงานในเทรดหลักที่ใช้เวลานาน ซึ่งจะแสดงงานที่ใช้เวลานานที่สุดในเทรดหลัก ซึ่งจะเป็นประโยชน์ในการระบุปัจจัยที่แย่ที่สุดที่ทำให้อินพุตล่าช้า ในคอลัมน์ด้านซ้าย เราจะเห็น URL ของสคริปต์ที่รับผิดชอบงานในเทรดหลักเป็นเวลานาน
ทางด้านขวาเราจะเห็นระยะเวลาของงานเหล่านี้ โปรดทราบว่างานที่ใช้เวลานานคืองานที่ดำเนินการนานกว่า 50 มิลลิวินาที ซึ่งถือว่ามีการบล็อกเทรดหลักเป็นเวลานานพอที่จะส่งผลต่ออัตราเฟรมหรือเวลาในการตอบสนองของอินพุต
หากพิจารณาบริการของบุคคลที่สามสำหรับการตรวจสอบ ผมก็ชอบภาพของไทม์ไลน์การดำเนินการเทรดหลักของ Calibre ในการแสดงภาพค่าใช้จ่ายเหล่านี้ ซึ่งไฮไลต์ทั้งงานหลักและงานย่อยที่มีส่วนทำให้เกิดงานที่ใช้เวลานานซึ่งส่งผลต่อการโต้ตอบ
บล็อกคำขอเครือข่ายเพื่อดูผลกระทบก่อน/หลังผลกระทบใน Lighthouse
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับการบล็อกคำขอเครือข่ายเพื่อดูผลกระทบของการนำทรัพยากรแต่ละรายการออกหรือไม่พร้อมใช้งาน ซึ่งอาจเป็นประโยชน์สำหรับการทำความเข้าใจค่าใช้จ่ายของแต่ละสคริปต์ (เช่น การฝังหรือเครื่องมือติดตามของบุคคลที่สาม) ที่มีต่อเมตริก เช่น Total Block Time (TBT) และ Time to Interactive
การบล็อกคำขอจากเครือข่ายยังใช้ได้กับ Lighthouse ด้วย มาดูรายงาน Lighthouse สําหรับเว็บไซต์กันคร่าวๆ คะแนนประสิทธิภาพคือ 63/100 โดยมี TBT 400ms จากการตรวจสอบโค้ด เราพบว่าเว็บไซต์นี้โหลด Intersection Observer polyfill ใน Chrome ซึ่งไม่จำเป็น มาบล็อกกัน
เราสามารถคลิกขวาที่สคริปต์ในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิก Block Request URL เพื่อบล็อกสคริปต์ได้ ในที่นี้เราจะนำไปพิจารณาสำหรับ Polyfill ของ Intersection Observer
ต่อไปเราจะเรียกใช้ Lighthouse อีกครั้ง คราวนี้เราเห็นว่าคะแนนประสิทธิภาพดีขึ้น (70/100) เช่นเดียวกับเวลาทั้งหมดในการบล็อก (400 มิลลิวินาที => 300 มิลลิวินาที)
แทนที่การฝังของบุคคลที่สามที่มีราคาสูงด้วย Facade
ปกติแล้วการใช้ทรัพยากรของบุคคลที่สามเพื่อฝังวิดีโอ โพสต์โซเชียลมีเดีย หรือวิดเจ็ตลงในหน้าเว็บ โดยค่าเริ่มต้น ชิ้นงานแบบฝังส่วนใหญ่จะโหลดทันทีและอาจมีเพย์โหลดที่มีค่าใช้จ่ายสูงซึ่งส่งผลเสียต่อประสบการณ์ของผู้ใช้ ซึ่งจะสิ้นเปลืองหากบุคคลที่สามไม่สำคัญ (เช่น หากผู้ใช้ต้องเลื่อนดูจึงจะเห็น)
รูปแบบหนึ่งในการปรับปรุงประสิทธิภาพของวิดเจ็ตดังกล่าวคือการโหลดแบบเลื่อนเวลาเมื่อผู้ใช้โต้ตอบ ซึ่งทำได้โดยการแสดงตัวอย่างวิดเจ็ตแบบเบา (Facade) และโหลดเวอร์ชันเต็มเฉพาะในกรณีที่ผู้ใช้โต้ตอบกับวิดเจ็ต Lighthouse มีการตรวจสอบที่จะแนะนำทรัพยากรของบุคคลที่สามซึ่งสามารถโหลดแบบ Lazy Loading ได้ด้วย Facade เช่น การฝังวิดีโอ YouTube
โปรดทราบว่า Lighthouse จะไฮไลต์โค้ดของบุคคลที่สามที่บล็อกชุดข้อความหลักเป็นเวลานานกว่า 250 มิลลิวินาที ซึ่งอาจแสดงสคริปต์ของบุคคลที่สามทุกประเภท (รวมถึงสคริปต์ที่ Google เป็นผู้เขียน) ที่ควรเลื่อนออกไปหรือใช้การโหลดแบบเลื่อนดูดีกว่าหากสิ่งที่แสดงผลต้องเลื่อนดู
นอกเหนือจาก Core Web Vitals
นอกเหนือจากการใช้ Core Web Vitals แล้ว Lighthouse และ PageSpeed Insights เวอร์ชันล่าสุดยังพยายามให้คำแนะนำที่เป็นรูปธรรมซึ่งคุณปฏิบัติตามได้เพื่อปรับปรุงความเร็วในการโหลดเว็บแอปพลิเคชันที่ใช้ JavaScript สูงหากคุณเปิดแผนที่แหล่งที่มาไว้
ซึ่งรวมถึงชุดการตรวจสอบที่เพิ่มขึ้นเพื่อลดต้นทุนของ JavaScript ในหน้าเว็บ เช่น การลดการพึ่งพา polyfill และรายการที่ซ้ำกันซึ่งอาจไม่จำเป็นต่อประสบการณ์ของผู้ใช้
ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือของ Core Web Vitals ได้ที่บัญชี Twitter ของทีม Lighthouse และมีอะไรใหม่ใน DevTools