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

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

เผยแพร่: 11 พฤษภาคม 2021

วันนี้เราจะมาพูดถึงฟีเจอร์เครื่องมือใหม่ใน Lighthouse, PageSpeed และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อช่วยระบุวิธีปรับปรุงเว็บไซต์ใน Web Vitals

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

Lighthouse 7.x มีฟีเจอร์ใหม่ เช่น ภาพหน้าจอองค์ประกอบ เพื่อให้ตรวจสอบส่วนต่างๆ ของ UI ที่ส่งผลต่อเมตริกประสบการณ์ของผู้ใช้ได้ง่ายขึ้น (เช่น โหนดที่ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์)

นอกจากนี้ เรายังได้เพิ่มการรองรับภาพหน้าจอองค์ประกอบใน PageSpeed Insights ซึ่งช่วยให้คุณพบปัญหาในการเรียกใช้ประสิทธิภาพของหน้าเว็บแบบครั้งเดียวได้ง่ายขึ้น

ภาพหน้าจอขององค์ประกอบที่ไฮไลต์โหนด DOM ที่ทําให้เลย์เอาต์ในหน้าเว็บเปลี่ยน

วัดผล 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 มีเมตริกเหล่านี้ในเวอร์ชันห้องทดลอง คุณสามารถใช้ข้อมูลนี้เป็นการดูภาพรวมว่าประสบการณ์ของผู้ใช้ด้านใดบ้างที่คุณต้องให้ความสำคัญ

เมตริกประสิทธิภาพของ Lighthouse
เลน Web Vitals ในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ
ตัวเลือก Web Vitals ใหม่ในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแทร็กซึ่งไฮไลต์ช่วงเวลาของเมตริก เช่น การเปลี่ยนเลย์เอาต์ (LS) ที่แสดงด้านบน

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

ระบุจุดที่คุณสามารถปรับปรุงใน Web Vitals

ระบุองค์ประกอบ Largest Contentful Paint

LCP คือการวัดประสบการณ์การโหลดที่รับรู้ ซึ่งจะระบุจุดระหว่างการโหลดหน้าเว็บเมื่อเนื้อหาหลักหรือ "เนื้อหาที่ใหญ่ที่สุด" โหลดและแสดงต่อผู้ใช้แล้ว

Lighthouse มีการตรวจสอบ "องค์ประกอบ Largest Contentful Paint" ซึ่งจะระบุองค์ประกอบที่เป็น Largest Contentful Paint การวางเมาส์เหนือองค์ประกอบจะไฮไลต์องค์ประกอบนั้นในหน้าต่างเบราว์เซอร์หลัก

องค์ประกอบ Largest Contentful Paint

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

การตรวจสอบขนาดรูปภาพที่เหมาะสม

นอกจากนี้ คุณยังอาจพบว่า LCP Bookmarklet ของ Annie Sullivan มีประโยชน์ในการระบุองค์ประกอบ LCP อย่างรวดเร็วด้วยสี่เหลี่ยมผืนผ้าสีแดงในคลิกเดียว

การไฮไลต์องค์ประกอบ LCP ด้วยบุ๊กมาร์กเลต

โหลดรูปภาพที่ค้นพบช้ากว่าล่วงหน้าเพื่อปรับปรุง LCP

หากต้องการปรับปรุง Largest Contentful Paint ให้โหลดล่วงหน้ารูปภาพหลักที่สำคัญหากเบราว์เซอร์ค้นพบรูปภาพเหล่านั้นช้า การค้นพบที่ล่าช้าอาจเกิดขึ้นได้หากต้องโหลดแพ็กเกจ JavaScript ก่อนจึงจะค้นพบรูปภาพได้

โหลดรูปภาพ Largest Contentful Paint ล่วงหน้า

เรามีคำถามที่พบบ่อย 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 แล้ว"

หลีกเลี่ยงการโหลดรูปภาพ LCP แบบ Lazy Loading

ระบุปัจจัยที่ทำให้เกิด CLS

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

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

การตรวจสอบการหลีกเลี่ยงการเลื่อนเลย์เอาต์ขนาดใหญ่ใน Lighthouse ซึ่งไฮไลต์โหนด DOM ที่เกี่ยวข้องซึ่งส่งผลต่อ CLS

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

การคลิกภาพหน้าจอขององค์ประกอบจะเป็นการขยายองค์ประกอบนั้น

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

เครื่องมือสร้างการเปลี่ยนแปลงเลย์เอาต์ที่ไฮไลต์การเปลี่ยนแปลง

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

Search Console แสดงปัญหา CLS

การระบุ CLS จากรูปภาพที่ไม่มีมิติข้อมูล

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

ตรวจสอบองค์ประกอบรูปภาพที่ไม่มีความกว้างและความสูงที่ชัดเจน

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

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

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

การตรวจสอบที่เกี่ยวข้องกับโฆษณาซึ่งไฮไลต์โอกาสในการลดเวลาในการส่งคําขอและการเปลี่ยนแปลงเลย์เอาต์

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

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

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

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

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

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

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

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

ตรวจสอบเพื่อหลีกเลี่ยงงานในเทรดหลักที่ใช้เวลานาน

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

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

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

ไทม์ไลน์การดําเนินการของเธรดหลักที่ Calibre มี

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

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

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

การบล็อกคำขอจากเครือข่าย

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

บล็อก URL คำขอในเครื่องมือสำหรับนักพัฒนาเว็บ

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

มุมมองหลังการบล็อกคําขอเครือข่ายที่มีค่าใช้จ่ายสูง

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

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

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

การตรวจสอบที่ไฮไลต์ว่าทรัพยากรบางอย่างของบุคคลที่สามที่มีราคาแพงสามารถแทนที่ได้ด้วยทรัพยากรอื่น

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

ลดค่าใช้จ่ายในการตรวจสอบ JavaScript ของบุคคลที่สาม

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

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

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

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

รูปภาพหลักโดย Mercedes Mehling ใน Unsplash