การเพิ่มประสิทธิภาพ Web Vitals โดยใช้ Lighthouse

การค้นหาโอกาสในการปรับปรุงประสบการณ์ของผู้ใช้ด้วยเครื่องมือเว็บของ Chrome

Addy Osmani

เผยแพร่เมื่อวันที่ 11 พฤษภาคม 2021

วันนี้เราจะพูดถึงฟีเจอร์เครื่องมือใหม่ๆ ใน Lighthouse, PageSpeed และ DevTools เพื่อช่วยระบุวิธีที่เว็บไซต์ของคุณจะปรับปรุง 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 และเวลาทั้งหมดในการบล็อก (พร็อกซีในห้องทดลองสำหรับ First Input Delay) เมตริกเหล่านี้แสดงถึงการโหลด ความเสถียรของเลย์เอาต์ และความพร้อมในการโต้ตอบ นอกจากนี้ยังมีเมตริกอื่นๆ เช่น First Contentful Paint ที่ไฮไลต์ในอนาคตของ Core Web Vitals ด้วย

ส่วน "เมตริก" ของรายงาน Lighthouse จะมีเมตริกเหล่านี้ในเวอร์ชัน Lab คุณสามารถใช้รายงานนี้เป็นมุมมองสรุปว่าประสบการณ์ของผู้ใช้ด้านใดที่ต้องให้ความสนใจ

เมตริกภาคสนาม เช่น เมตริกที่พบในรายงาน Chrome UX หรือ 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 ก่อนจึงจะค้นพบรูปภาพได้

มีคำถามที่พบบ่อยบางข้อที่เราได้รับเกี่ยวกับการโหลดรูปภาพ 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> จะเป็นตัวเลือกหากพบที่ความลึกของ Waterfall ตั้งแต่ 3 ขึ้นไป

การโหลดแบบ Lazy Loading รูปภาพนอกหน้าจอและหลีกเลี่ยงการดำเนินการนี้สำหรับ LCP

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

รูปภาพครึ่งหน้าบนที่สำคัญ เช่น รูปภาพ Largest Contentful Paint ไม่ควรโหลดแบบ Lazy Loading การทำเช่นนี้อาจทำให้การโหลดรูปภาพ LCP ล่าช้า Lighthouse จะไฮไลต์หากรูปภาพ LCP มีการโหลดแบบ Lazy Loading อย่างไม่ถูกต้องผ่านการตรวจสอบ "รูปภาพ Largest Contentful Paint มีการโหลดแบบ Lazy Loading"

ระบุการมีส่วนร่วมของ CLS

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

การตรวจสอบนี้จะไฮไลต์องค์ประกอบ DOM ที่มีส่วนอย่างมากที่สุดต่อการเปลี่ยนหน้า ในคอลัมน์ "องค์ประกอบ" ทางด้านซ้าย คุณจะเห็นรายการองค์ประกอบ DOM เหล่านี้ และทางด้านขวาจะเห็นการมีส่วนร่วมต่อ CLS โดยรวม

ฟีเจอร์ภาพหน้าจอองค์ประกอบใหม่ของ Lighthouse ช่วยให้เราเห็นทั้งตัวอย่างภาพขององค์ประกอบหลักที่ระบุไว้ในการตรวจสอบ รวมถึงคลิกเพื่อซูมเพื่อให้เห็นภาพที่ชัดเจนยิ่งขึ้น

สำหรับ CLS หลังการโหลด การแสดงภาพด้วยสี่เหลี่ยมผืนผ้าอย่างต่อเนื่องอาจมีประโยชน์ว่าองค์ประกอบใดมีส่วนทำให้เกิด CLS มากที่สุด ฟีเจอร์นี้มีอยู่ในเครื่องมือของบุคคลที่สาม เช่น แดชบอร์ด Core Web Vitals ของ SpeedCurve และฉันชอบใช้ Layout Shift GIF Generator ของ Defaced เพื่อทำสิ่งต่อไปนี้

สำหรับมุมมองทั้งเว็บไซต์ของปัญหาการเปลี่ยนเลย์เอาต์ ฉันได้รับประโยชน์อย่างมากจากรายงาน Core Web Vitals ของ Search Console ซึ่งช่วยให้ฉันเห็นประเภทของหน้าเว็บในเว็บไซต์ที่มี CLS สูง (ในกรณีนี้ช่วยระบุได้ว่าฉันต้องใช้เวลาไปกับเทมเพลตบางส่วนใดบ้าง)

การระบุ CLS จากรูปภาพที่ไม่มีขนาด

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

ดูบทความการตั้งค่าความสูงและความกว้างของรูปภาพมีความสำคัญอีกครั้งเพื่ออ่านบทความดีๆ เกี่ยวกับความสำคัญของการพิจารณาขนาดและสัดส่วนภาพของรูปภาพ

การระบุ CLS จากโฆษณา

Publisher Ads for Lighthouse ช่วยให้คุณค้นพบโอกาสในการปรับปรุงประสบการณ์การโหลดโฆษณาในหน้าเว็บ ซึ่งรวมถึงการมีส่วนร่วมในการเปลี่ยนเลย์เอาต์และงานที่ใช้เวลานานซึ่งอาจทำให้ผู้ใช้ใช้งานหน้าเว็บได้ช้าลง ใน Lighthouse คุณสามารถเปิดใช้ฟีเจอร์นี้ผ่านปลั๊กอินชุมชน

โปรดทราบว่าโฆษณาเป็นหนึ่งในสาเหตุที่ใหญ่ที่สุดของการเปลี่ยนแปลงเลย์เอาต์บนเว็บ สิ่งสำคัญที่ควรทำมีดังนี้

• ใช้ความระมัดระวังเมื่อวางโฆษณาที่ไม่ใช่โฆษณา Sticky ไว้ใกล้กับด้านบนของวิวพอร์ต
• กำจัดการเลื่อนโดยจองขนาดที่ใหญ่ที่สุดเท่าที่จะเป็นไปได้สำหรับช่องโฆษณา

หลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite

ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite อาจแสดงเป็นภาพกระตุกในอุปกรณ์ระดับล่างหากงาน JavaScript ที่หนักหน่วงทำให้เทรดหลักทำงานอยู่ตลอดเวลา ภาพเคลื่อนไหวดังกล่าวอาจทำให้เกิดการเปลี่ยนเลย์เอาต์

หาก Chrome พบว่าภาพเคลื่อนไหวไม่สามารถจัดองค์ประกอบได้ ก็จะรายงานไปยังการติดตาม DevTools ที่ Lighthouse อ่าน ซึ่งช่วยให้แสดงรายการองค์ประกอบที่มีภาพเคลื่อนไหวซึ่งไม่ได้จัดองค์ประกอบและเหตุผลได้ คุณจะเห็นข้อมูลเหล่านี้ในการตรวจสอบหลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้จัดองค์ประกอบ

แก้ไขข้อบกพร่องของ First Input Delay / เวลาทั้งหมดในการบล็อก / งานที่ใช้เวลานาน

First Input จะวัดระยะเวลาตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก (เช่น เมื่อคลิกลิงก์ แตะปุ่ม หรือใช้การควบคุมที่กำหนดเองซึ่งทำงานด้วย JavaScript) จนถึงตอนที่เบราว์เซอร์เริ่มประมวลผลเครื่องจัดการเหตุการณ์เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง งาน JavaScript ที่ใช้เวลานานอาจส่งผลต่อเมตริกนี้และพร็อกซีสำหรับเมตริกนี้ ซึ่งก็คือเวลาทั้งหมดในการบล็อก

Lighthouse มีการตรวจสอบหลีกเลี่ยงงานที่ใช้เวลานานในเทรดหลัก ซึ่งจะแสดงรายการงานที่ใช้เวลานานที่สุดในเทรดหลัก ซึ่งเหมาะสำหรับการระบุปัจจัยที่แย่ที่สุดที่ทำให้อินพุตล่าช้า ในคอลัมน์ด้านซ้าย เราจะเห็น URL ของสคริปต์ที่ทำให้เกิดงานในเทรดหลักที่ใช้เวลานาน

ทางด้านขวา เราจะเห็นระยะเวลาของงานเหล่านี้ โปรดทราบว่างานที่ใช้เวลานานคืองานที่ใช้เวลาดำเนินการนานกว่า 50 มิลลิวินาที ซึ่งถือเป็นการบล็อกเทรดหลักเป็นเวลานานพอที่จะส่งผลต่ออัตราเฟรมหรือเวลาในการตอบสนองของอินพุต

หากพิจารณาใช้บริการของบุคคลที่สามสำหรับการตรวจสอบ ฉันก็ค่อนข้างชอบภาพไทม์ไลน์การดำเนินการของเทรดหลักที่ Calibre มีสำหรับการแสดงภาพต้นทุนเหล่านี้ ซึ่งจะไฮไลต์ทั้งงานหลักและงานย่อยที่ทำให้เกิดงานที่ใช้เวลานานซึ่งส่งผลต่อความสามารถในการโต้ตอบ

บล็อกคำขอเครือข่ายเพื่อดูผลกระทบก่อน/หลังใน Lighthouse

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับการบล็อกคำขอเครือข่ายเพื่อดูผลกระทบของการนำทรัพยากรแต่ละรายการออกหรือทรัพยากรไม่พร้อมใช้งาน ซึ่งจะเป็นประโยชน์ต่อการทำความเข้าใจต้นทุนของสคริปต์แต่ละรายการ (เช่น การฝังหรือเครื่องมือติดตามของบุคคลที่สาม) ที่มีต่อเมตริกต่างๆ เช่น เวลาทั้งหมดในการบล็อก (TBT) และเวลาในการตอบสนอง

การบล็อกคำขอเครือข่ายยังทำงานร่วมกับ Lighthouse ได้ด้วย มาดูรายงาน Lighthouse ของเว็บไซต์กันแบบคร่าวๆ คะแนนประสิทธิภาพคือ 63/100 โดยมี TBT 400 มิลลิวินาที เมื่อเจาะลึกโค้ด เราพบว่าเว็บไซต์นี้โหลด Polyfill ของ Intersection Observer ใน Chrome ซึ่งไม่จำเป็น มาบล็อกกันเลย

เราสามารถคลิกขวาที่สคริปต์ในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิกBlock Request URLเพื่อบล็อกได้ ในที่นี้เราจะดำเนินการนี้สำหรับ Polyfill ของ Intersection Observer

จากนั้นเราจะเรียกใช้ Lighthouse อีกครั้งได้ ครั้งนี้เราจะเห็นว่าคะแนนประสิทธิภาพดีขึ้น (70/100) เช่นเดียวกับเวลาทั้งหมดในการบล็อก (400 มิลลิวินาที => 300 มิลลิวินาที)

แทนที่การฝังของบุคคลที่สามซึ่งมีค่าใช้จ่ายสูงด้วย Facade

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

รูปแบบหนึ่งในการปรับปรุงประสิทธิภาพของวิดเจ็ตดังกล่าวคือการโหลดแบบ Lazy Loading เมื่อผู้ใช้โต้ตอบ ซึ่งทำได้โดยการแสดงตัวอย่างวิดเจ็ตแบบง่าย (ส่วนหน้า) และโหลดเวอร์ชันเต็มก็ต่อเมื่อผู้ใช้โต้ตอบกับวิดเจ็ตเท่านั้น Lighthouse มีการตรวจสอบที่จะแนะนำทรัพยากรของบุคคลที่สามซึ่งสามารถโหลดแบบ Lazy Loading ด้วย Facade ได้ เช่น การฝังวิดีโอ YouTube

โปรดทราบว่า Lighthouse จะไฮไลต์โค้ดของบุคคลที่สามที่บล็อกเทรดหลักนานกว่า 250 มิลลิวินาที ซึ่งจะแสดงสคริปต์ของบุคคลที่สามทุกประเภท (รวมถึงสคริปต์ที่ Google เขียนขึ้น) ที่อาจควรเลื่อนเวลาหรือโหลดแบบ Lazy Loading หากสิ่งที่แสดงผลต้องเลื่อนเพื่อดู

นอกเหนือจาก Core Web Vitals

นอกเหนือจากการไฮไลต์ Core Web Vitals แล้ว Lighthouse และ PageSpeed Insights เวอร์ชันล่าสุดยังพยายามให้คำแนะนำที่เป็นรูปธรรมซึ่งคุณสามารถทำตามเพื่อปรับปรุงความเร็วในการโหลดเว็บแอปพลิเคชันที่ใช้ JavaScript จำนวนมากได้หากคุณเปิดแผนที่แหล่งที่มาไว้

ซึ่งรวมถึงคอลเล็กชันการตรวจสอบที่เพิ่มขึ้นเรื่อยๆ เพื่อลดต้นทุนของ JavaScript ในหน้าเว็บ เช่น การลดการพึ่งพา Polyfill และรายการที่ซ้ำกันซึ่งอาจไม่จำเป็นสำหรับประสบการณ์ของผู้ใช้

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือ Core Web Vitals ได้โดยติดตามบัญชี Twitter ของทีม Lighthouse และมีอะไรใหม่ใน DevTools