First Contentful Paint (FCP) เป็นหนึ่งในเมตริก 6 รายการที่ติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse เมตริกแต่ละรายการจะจับภาพแง่มุมบางอย่างของความเร็วในการโหลดหน้าเว็บ
Lighthouse แสดง FCP เป็นวินาที ดังนี้
สิ่งที่ FCP วัด
FCP จะวัดระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงผลเนื้อหา DOM ชิ้นแรกหลังจากที่ผู้ใช้ไปยังหน้าเว็บ
ระบบจะถือว่ารูปภาพ องค์ประกอบ <canvas> ที่ไม่ใช่สีขาว และ SVG ในหน้าเว็บเป็นเนื้อหา DOM ส่วนเนื้อหาภายใน iframe จะไม่รวมอยู่ด้วย
วิธีที่ Lighthouse กำหนดคะแนน FCP
คะแนน FCP คือการเปรียบเทียบเวลา FCP ของหน้าเว็บกับเวลา FCP ของเว็บไซต์จริง โดยอิงตามข้อมูลจาก HTTP Archive ตัวอย่างเช่น เว็บไซต์ที่มีประสิทธิภาพอยู่ในเปอร์เซ็นไทล์ที่ 99 จะแสดงผล FCP ในประมาณ 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 ต่อไปนี้แสดงให้เห็นว่าการกำจัดทรัพยากรที่บล็อกการแสดงผลจะให้ผลลัพธ์ที่ดีที่สุด
ดูการตรวจสอบประสิทธิภาพเพื่อดูวิธีแก้ไขโอกาสที่ระบุไว้ในรายงาน Lighthouse