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