First Contentful Paint (FCP) เป็น 1 ใน 6 เมตริกที่ติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse แต่ละเมตริกจะแสดงข้อมูลของความเร็วในการโหลดหน้าเว็บ
Lighthouse แสดง FCP ในไม่กี่วินาที
FCP ใดบ้างที่วัด
FCP จะวัดระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงผลเนื้อหา DOM ชิ้นแรกหลังจากที่ผู้ใช้เข้าชมหน้าเว็บของคุณ
รูปภาพ, องค์ประกอบ <canvas> ที่ไม่ใช่สีขาว และ SVG ในหน้าเว็บจะถือว่าเป็นเนื้อหา DOM ซึ่งทุกอย่างใน iframe จะไม่รวมอยู่ด้วย
วิธีที่ Lighthouse กำหนดคะแนน FCP
คะแนน FCP เป็นการเปรียบเทียบเวลา FCP ของหน้าเว็บกับเวลา FCP สำหรับเว็บไซต์จริง โดยอิงตามข้อมูลจากที่เก็บถาวรของ HTTP เช่น เว็บไซต์ที่จะแสดงผล FCP ในการแสดงผลเปอร์เซ็นไทล์ที่ 99 ภายในประมาณ 1.2 วินาที หาก FCP ของเว็บไซต์คือ 1.2 วินาที คะแนน FCP ของคุณคือ 99 ดูวิธีกำหนดคะแนนเมตริก เพื่อดูวิธีกำหนดเกณฑ์คะแนนของ Lighthouse
ตารางนี้แสดงวิธีตีความคะแนน FCP
| เวลา FCP (วินาที) |
การเขียนโค้ดสี |
|---|---|
| 0-1.8 | เขียว (เร็ว) |
| 1.8-3 | ส้ม (ปานกลาง) |
| มากกว่า 3 คน | แดง (ช้า) |
วิธีปรับปรุงคะแนน FCP
ปัญหาหนึ่งที่สำคัญอย่างยิ่งสำหรับ FCP คือเวลาที่ใช้ในการโหลดแบบอักษร ลองดูโพสต์ตรวจสอบว่าข้อความยังคงมองเห็นได้ระหว่างการโหลดเว็บฟอนต์เพื่อดูวิธีเร่งการโหลดแบบอักษร
การติดตาม FCP บนอุปกรณ์ของผู้ใช้จริง
หากต้องการดูวิธีวัดเมื่อ FCP เกิดขึ้นจริงในอุปกรณ์ของผู้ใช้ โปรดดูหน้าเมตริกประสิทธิภาพที่ให้ความสำคัญกับผู้ใช้เป็นหลักของ Google ส่วน FP/FCP การติดตามจะอธิบายวิธีเข้าถึงข้อมูล FCP แบบเป็นโปรแกรมและส่งข้อมูลไปยัง Google Analytics
ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวบรวมเมตริกของผู้ใช้จริงได้ที่การประเมินประสิทธิภาพการโหลดในชีวิตจริงด้วยการนำทางและระยะเวลาของทรัพยากรของ Google
วิธีปรับปรุงคะแนนประสิทธิภาพโดยรวม
หากคุณไม่มีเหตุผลเฉพาะเจาะจงที่มุ่งเน้นไปที่เมตริกใดโดยเฉพาะ การมุ่งเน้นไปที่การปรับปรุงคะแนนประสิทธิภาพโดยรวมจะดีกว่า
ใช้ส่วนโอกาสของรายงาน Lighthouse เพื่อดูว่าการปรับปรุงใดจะสร้างประโยชน์สูงสุดสำหรับหน้าเว็บของคุณ ยิ่งโอกาสมีนัยสำคัญมากเท่าไร ก็ยิ่งมีผลกระทบต่อคะแนนประสิทธิภาพมากเท่านั้น ตัวอย่างเช่น ภาพหน้าจอของ Lighthouse ด้านล่างแสดงให้เห็นว่าการกำจัดทรัพยากรที่บล็อกการแสดงผลจะให้ผลลัพธ์การปรับปรุงที่ดีที่สุดดังนี้
ดูหน้า Landing Page ของการตรวจสอบประสิทธิภาพเพื่อดูวิธีจัดการกับโอกาสที่ระบุไว้ในรายงาน Lighthouse