ปรับแต่ง Web Vitals ด้วย Lighthouse

• วัดผล Core Web Vitals

• ค้นหาอ็อบเจ็กต์ Largest Contentful Paint

• ทำ preload เพื่อปรับปรุง LCP

• ค้นหาอ็อบเจ็กต์ที่ส่งผลต่อ Cumulative Layout Shift

→ รูปภาพที่ไม่มีการกำหนดขนาด

→ โฆษณา

→ แอนิเมชันแบบ non-composited

• ดีบัก First Input Delay / Total Blocking Time / Long Tasks

[alstjr7375]

วิธีเพิ่มประสิทธิภาพรูปภาพที่เกี่ยวข้อง

https://smashingmagazine.com/2021/04/…

ทวีตสรุป

https://twitter.com/addyosmani/status/1388031656355794945

[xguru]

Google นำตัวชี้วัด Page Experience มาใช้กับอันดับผลการค้นหา https://th.news.hada.io/topic?id=2197

• Core Web Vitals

→ LCP : Largest Contentful Paint

→ FID : First Input Delay

→ CLS : Cumulative Layout Shift

Lighthouse 6.0 เปิดตัว https://th.news.hada.io/topic?id=2122

→ เพิ่มเมตริก LCP, CLS, TBT

Cumulative Layout Shift (CLS) คืออะไร? https://th.news.hada.io/topic?id=1697

→ วัดว่าเลย์เอาต์ของหน้าเว็บเปลี่ยนแปลงไปมากแค่ไหนจากการโหลดรูปภาพ/โฆษณาที่ช้า การทำงานแบบอะซิงโครนัส การเปลี่ยน DOM แบบไดนามิก ฯลฯ

→ ตัวชี้วัดประสิทธิภาพที่ยึดผู้ใช้เป็นศูนย์กลางสำหรับตรวจสอบความไม่เสถียรทางภาพซึ่งอาจทำให้ผู้ใช้คลิกผิดพลาด