การแสดงผลที่มีความหมายครั้งแรก

First Meaningful Paint (FMP) เป็น 1 ใน 6 เมตริกที่ติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse แต่ละเมตริกจะแสดงข้อมูลของความเร็วในการโหลดหน้าเว็บ

Lighthouse แสดง FMP ในไม่กี่วินาที

ภาพหน้าจอของการตรวจสอบการตรวจสอบ First Meaningful Paint ของ Lighthouse

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: ส่วนโอกาส

ดูหน้า Landing Page ของการตรวจสอบประสิทธิภาพเพื่อดูวิธีจัดการกับโอกาสที่ระบุไว้ในรายงาน Lighthouse

แหล่งข้อมูล