First Meaningful Paint (FMP) เป็น 1 ใน 6 เมตริกที่ติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse แต่ละเมตริกจะแสดงข้อมูลของความเร็วในการโหลดหน้าเว็บ
Lighthouse แสดง FMP ในไม่กี่วินาที
![ภาพหน้าจอของการตรวจสอบการตรวจสอบ First Meaningful Paint ของ Lighthouse](https://developer.chrome.com/static/docs/lighthouse/performance/first-meaningful-paint/image/a-screenshot-the-lightho-e809924255474.png?authuser=2&hl=th)
FMP วัดอะไรบ้าง
FMP วัดเมื่อเนื้อหาหลักของหน้าเว็บปรากฏต่อผู้ใช้ คะแนนดิบของ FMP คือเวลาเป็นวินาทีระหว่างที่ผู้ใช้เริ่มโหลดหน้าเว็บ และแสดงผลเนื้อหาหลักครึ่งหน้าบน โดย FMP จะแสดงระยะเวลาของการแสดงผล หลังจากที่มีการเปลี่ยนแปลงเลย์เอาต์ครึ่งหน้าบนมากที่สุด ดูข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียดทางเทคนิคของ FMP ได้ในTime to First Meaningful Paint: วิธีการที่อิงตามเลย์เอาต์ของ Google
First Contentful Paint (FCP) และ FMP มักเหมือนกันเมื่อเนื้อหาส่วนแรกที่แสดงผลในหน้ามีเนื้อหาในครึ่งหน้าบน อย่างไรก็ตาม เมตริกเหล่านี้อาจแตกต่างกัน เช่น เมื่อมีเนื้อหาครึ่งหน้าบนภายใน iframe FMP จะบันทึกเมื่อผู้ใช้มองเห็นเนื้อหาภายใน iframe ส่วน FCP ไม่รวมเนื้อหา iframe
วิธีที่ Lighthouse กำหนดคะแนน FMP
FMP จะอิงตามข้อมูลประสิทธิภาพของเว็บไซต์จริงจากที่เก็บถาวรของ HTTP เช่นเดียวกับ FCP
เมื่อ FMP และ FCP เหมือนกัน คะแนนจะเหมือนกัน หาก FMP เกิดขึ้นหลังจาก FCP เช่น เมื่อหน้าเว็บมีเนื้อหา iframe คะแนน FMP จะต่ำกว่าคะแนน FCP
ตัวอย่างเช่น สมมติว่า FCP ของคุณเท่ากับ 1.5 วินาที และ FMP คือ 3 วินาที คะแนนของ FCP จะเท่ากับ 99 แต่คะแนนของ FMP จะเท่ากับ 75
ตารางนี้แสดงวิธีตีความคะแนน FMP
เมตริก FMP (วินาที) |
การเขียนโค้ดสี | คะแนน FMP (เปอร์เซ็นไทล์ของที่เก็บถาวรสำหรับ HTTP ของ FCP) |
---|---|---|
0-2 | เขียว (เร็ว) | 75-100 |
2-4 คน | ส้ม (ปานกลาง) | 50-74 ปี |
มากกว่า 4 คน | แดง (ช้า) | 0-49 |
วิธีปรับปรุงคะแนน FMP
ดูวิธีปรับปรุง Largest Contentful Paint ในเว็บไซต์ กลยุทธ์ในการปรับปรุง FMP โดยส่วนใหญ่จะเหมือนกับกลยุทธ์ในการปรับปรุง Largest Contentful Paint
การติดตาม FMP ในอุปกรณ์ของผู้ใช้จริง
หากต้องการดูวิธีวัดผลเมื่อ FMP เกิดขึ้นจริงในอุปกรณ์ของผู้ใช้ โปรดดูหน้าเมตริกประสิทธิภาพที่ให้ความสำคัญกับผู้ใช้เป็นหลักของ Google ส่วนการติดตาม FMP โดยใช้องค์ประกอบหลักจะอธิบายวิธีเข้าถึงข้อมูล FCP แบบเป็นโปรแกรมและส่งไปยัง Google Analytics
ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวบรวมเมตริกของผู้ใช้จริงได้ที่การประเมินประสิทธิภาพการโหลดในชีวิตจริงด้วยการนำทางและระยะเวลาของทรัพยากรของ Google เครื่องหมายระยะเวลาของผู้ใช้และการวัดการตรวจสอบ Lighthouse ช่วยให้คุณดูข้อมูลระยะเวลาของผู้ใช้ในรายงานได้
วิธีปรับปรุงคะแนนประสิทธิภาพโดยรวม
หากคุณไม่มีเหตุผลเฉพาะเจาะจงที่มุ่งเน้นไปที่เมตริกใดโดยเฉพาะ การมุ่งเน้นไปที่การปรับปรุงคะแนนประสิทธิภาพโดยรวมจะดีกว่า
ใช้ส่วนโอกาสของรายงาน Lighthouse เพื่อดูว่าการปรับปรุงใดจะสร้างประโยชน์สูงสุดสำหรับหน้าเว็บของคุณ ยิ่งโอกาสมีนัยสำคัญมากเท่าไร ก็ยิ่งมีผลกระทบต่อคะแนนประสิทธิภาพมากเท่านั้น ตัวอย่างเช่น ภาพหน้าจอของ Lighthouse ด้านล่างแสดงให้เห็นว่าการกำจัดทรัพยากรที่บล็อกการแสดงผลจะให้ผลลัพธ์การปรับปรุงที่ดีที่สุดดังนี้
![Lighthouse: ส่วนโอกาส](https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=2&hl=th)
ดูหน้า Landing Page ของการตรวจสอบประสิทธิภาพเพื่อดูวิธีจัดการกับโอกาสที่ระบุไว้ในรายงาน Lighthouse