ค้นหาโอกาสในการปรับปรุงประสบการณ์ของผู้ใช้ด้วยเครื่องมือทางเว็บของ 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 Blocking 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 ได้ การตรวจสอบ"เลื่อนรูปภาพนอกหน้าจอ" จะช่วยแก้ปัญหานี้ได้
ไม่ควรใช้ Lazy Loading กับรูปภาพครึ่งหน้าบนที่สําคัญ เช่น รูปภาพ Largest Contentful Paint เนื่องจากอาจทำให้การโหลดรูปภาพ 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 จากรูปภาพที่ไม่มีมิติข้อมูล
หากต้องการจำกัดการเปลี่ยนแปลงเลย์เอาต์แบบสะสมที่เกิดจากรูปภาพที่ไม่มีมิติข้อมูล ให้ใส่แอตทริบิวต์ขนาดความกว้างและความสูงในองค์ประกอบรูปภาพและวิดีโอ วิธีนี้ช่วยให้มั่นใจว่าเบราว์เซอร์จะจัดสรรพื้นที่ในเอกสารได้อย่างถูกต้องขณะที่รูปภาพกำลังโหลด
ดูบทความการกำหนดความสูงและความกว้างของรูปภาพมีความสำคัญอีกเพื่ออ่านบทความที่เป็นประโยชน์เกี่ยวกับความสำคัญของการพิจารณาขนาดรูปภาพและสัดส่วนภาพ
การระบุ CLS จากโฆษณา
โฆษณาของผู้เผยแพร่โฆษณาสําหรับ Lighthouse ช่วยให้คุณค้นหาโอกาสในการปรับปรุงประสบการณ์การโหลดโฆษณาในหน้าเว็บ ซึ่งรวมถึงการมีส่วนร่วมในการเปลี่ยนแปลงเลย์เอาต์และงานที่ใช้เวลานานซึ่งอาจทำให้ผู้ใช้ใช้งานหน้าเว็บได้ช้าลง ใน Lighthouse คุณสามารถเปิดใช้ฟีเจอร์นี้ได้ผ่านปลั๊กอินชุมชน
โปรดทราบว่าโฆษณาเป็นหนึ่งในปัจจัยสําคัญที่ทําให้เลย์เอาต์บนเว็บเปลี่ยนแปลง สิ่งสำคัญคือ
- โปรดระมัดระวังเมื่อวางโฆษณาแบบไม่ติดหนึบไว้ใกล้กับด้านบนของวิวพอร์ต
- กำจัดการเปลี่ยนแปลงโดยจองขนาดที่ใหญ่ที่สุดที่เป็นไปได้สําหรับช่องโฆษณา
หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite
ภาพเคลื่อนไหวที่ไม่ได้ทำการคอมโพสิทอาจแสดงผลอย่างกระตุกในอุปกรณ์ระดับล่างหากมีงาน JavaScript จำนวนมากทำให้เธรดหลักทำงานอยู่ ภาพเคลื่อนไหวดังกล่าวอาจทำให้เลย์เอาต์เปลี่ยน
หาก Chrome พบว่าภาพเคลื่อนไหวไม่สามารถคอมโพสิทได้ ก็จะรายงานไปยังการติดตามของ DevTools ที่ Lighthouse อ่านได้ ซึ่งจะช่วยให้ระบุได้ว่าองค์ประกอบใดที่มีภาพเคลื่อนไหวที่คอมโพสิทไม่ได้และสาเหตุใด ซึ่งจะอยู่ในการตรวจสอบหลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้คอมโพส
แก้ไขข้อบกพร่อง First Input Delay / เวลาทั้งหมดในการบล็อก / งานที่มีระยะเวลานาน
อินพุตแรกจะวัดเวลาตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก (เช่น เมื่อคลิกลิงก์ แตะปุ่ม หรือใช้ส่วนควบคุมที่ขับเคลื่อนโดย JavaScript ที่กําหนดเอง) จนถึงตอนที่เบราว์เซอร์เริ่มประมวลผลตัวแฮนเดิลเหตุการณ์เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง งานที่ใช้เวลานานของ JavaScript อาจส่งผลต่อเมตริกนี้และพร็อกซีสําหรับเมตริกนี้ ซึ่งก็คือเวลาการบล็อกทั้งหมด
Lighthouse มีการตรวจสอบหลีกเลี่ยงงานในเทรดหลักที่ใช้เวลานาน ซึ่งจะแสดงงานที่ใช้เวลานานที่สุดในเทรดหลัก ซึ่งจะเป็นประโยชน์ในการระบุปัจจัยที่แย่ที่สุดที่ทำให้อินพุตล่าช้า ในคอลัมน์ด้านซ้าย เราจะเห็น URL ของสคริปต์ที่รับผิดชอบงานในเทรดหลักเป็นเวลานาน
ทางด้านขวาเราจะเห็นระยะเวลาของงานเหล่านี้ โปรดทราบว่างานที่ใช้เวลานานคืองานที่ดำเนินการนานกว่า 50 มิลลิวินาที ซึ่งถือว่ามีการบล็อกเทรดหลักเป็นเวลานานพอที่จะส่งผลต่ออัตราเฟรมหรือเวลาในการตอบสนองของอินพุต
หากพิจารณาใช้บริการของบุคคลที่สามในการตรวจสอบ เรายังชอบภาพไทม์ไลน์การดําเนินการของด้ายหลักของ Calibre ในการแสดงให้เห็นถึงต้นทุนเหล่านี้ ซึ่งจะไฮไลต์ทั้งงานหลักและงานย่อยที่ทําให้งานใช้เวลานานและส่งผลต่อการโต้ตอบ
บล็อกคำขอเครือข่ายเพื่อดูผลกระทบก่อน/หลังใน Lighthouse
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับการบล็อกคำขอเครือข่ายเพื่อดูผลกระทบที่เกิดจากการนำทรัพยากรแต่ละรายการออกหรือไม่พร้อมใช้งาน ซึ่งอาจมีประโยชน์ในการทําความเข้าใจค่าใช้จ่ายของสคริปต์แต่ละรายการ (เช่น แทรกหรือเครื่องมือติดตามของบุคคลที่สาม) ที่มีต่อเมตริกต่างๆ เช่น เวลาในการบล็อกทั้งหมด (TBT) และเวลาในการโต้ตอบ
การบล็อกคำขอจากเครือข่ายยังใช้ได้กับ Lighthouse ด้วย มาดูรายงาน Lighthouse สําหรับเว็บไซต์กันคร่าวๆ คะแนนประสิทธิภาพคือ 63/100 โดยมี TBT ที่ 400 มิลลิวินาที จากการตรวจสอบโค้ด เราพบว่าเว็บไซต์นี้โหลด Intersection Observer polyfill ใน Chrome ซึ่งไม่จำเป็น มาบล็อกกัน
เราสามารถคลิกขวาที่สคริปต์ในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิก Block Request URL เพื่อบล็อกสคริปต์ได้ เราจะทำเช่นนี้สำหรับ Intersection Observer polyfill
ต่อไปเราจะเรียกใช้ Lighthouse อีกครั้ง ครั้งนี้เราเห็นว่าคะแนนประสิทธิภาพดีขึ้น (70/100) เนื่องจากมีเวลาในการบล็อกทั้งหมด (400ms มากกว่าหรือเท่ากับ 300ms)
แทนที่การฝังของบุคคลที่สามที่มีค่าใช้จ่ายด้วย Facade
การใช้แหล่งข้อมูลของบุคคลที่สามเพื่อฝังวิดีโอ โพสต์โซเชียลมีเดีย หรือวิดเจ็ตลงในหน้าเว็บเป็นแนวทางปฏิบัติทั่วไป โดยค่าเริ่มต้น ชิ้นงานแบบฝังส่วนใหญ่จะโหลดทันทีและอาจมีเพย์โหลดที่มีค่าใช้จ่ายสูงซึ่งส่งผลเสียต่อประสบการณ์ของผู้ใช้ ซึ่งจะสิ้นเปลืองหากบุคคลที่สามไม่สำคัญ (เช่น หากผู้ใช้ต้องเลื่อนดูจึงจะเห็น)
รูปแบบหนึ่งในการปรับปรุงประสิทธิภาพของวิดเจ็ตดังกล่าวคือการโหลดแบบเลื่อนเวลาเมื่อผู้ใช้โต้ตอบ ซึ่งทำได้โดยการแสดงตัวอย่างวิดเจ็ตแบบเบา (Facade) และโหลดเวอร์ชันเต็มก็ต่อเมื่อผู้ใช้โต้ตอบกับวิดเจ็ต Lighthouse มีการตรวจสอบที่จะแนะนำทรัพยากรของบุคคลที่สามซึ่งสามารถโหลดแบบ Lazy Loading ได้ด้วย Facade เช่น การฝังวิดีโอ YouTube
โปรดทราบว่า Lighthouse จะไฮไลต์โค้ดของบุคคลที่สามที่บล็อกชุดข้อความหลักเป็นเวลานานกว่า 250 มิลลิวินาที ซึ่งอาจแสดงสคริปต์ของบุคคลที่สามทุกประเภท (รวมถึงสคริปต์ที่ Google เป็นผู้เขียน) ที่ควรเลื่อนออกไปหรือใช้การโหลดแบบเลื่อนดูดีกว่าหากสิ่งที่แสดงผลต้องเลื่อนดู
นอกเหนือจาก Core Web Vitals
นอกจากการไฮไลต์ Core Web Vitals แล้ว Lighthouse และ PageSpeed Insights เวอร์ชันล่าสุดยังพยายามให้คําแนะนําที่ชัดเจนซึ่งคุณสามารถทําตามเพื่อปรับปรุงความเร็วในการโหลดเว็บแอปพลิเคชันที่มี JavaScript มาก หากคุณเปิด Source Map ไว้
ซึ่งรวมถึงชุดการตรวจสอบที่เพิ่มขึ้นเพื่อลดต้นทุนของ JavaScript ในหน้าเว็บ เช่น การลดการพึ่งพา polyfill และรายการที่ซ้ำกันซึ่งอาจไม่จำเป็นต่อประสบการณ์ของผู้ใช้
ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือของ Core Web Vitals ได้ที่บัญชี Twitter ของทีม Lighthouse และมีอะไรใหม่ใน DevTools