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 คน | สีแดง (ช้า) |
โครงการริเริ่ม Web Vitals แนะนำให้ใช้เกณฑ์เดียวกันโดยไม่คำนึงถึงอุปกรณ์ ซึ่งโดยทั่วไปจะใช้เกณฑ์สำหรับอุปกรณ์เคลื่อนที่ อย่างไรก็ตาม เนื่องจาก Lighthouse เป็นเครื่องมือทดสอบ จึงอาจมีประโยชน์ที่ควรเข้มงวดมากขึ้นเมื่อทดสอบอุปกรณ์เดสก์ท็อปที่เร็วขึ้น ซึ่งจะใช้เกณฑ์ที่ต่างกัน
ตารางต่อไปนี้แสดงวิธีตีความคะแนน FCP บนเดสก์ท็อป
| เวลา FCP (เป็นวินาที) |
การเขียนโค้ดสี |
|---|---|
| 0–0.9 | สีเขียว (เร็ว) |
| 0.9–1.6 | สีส้ม (ปานกลาง) |
| มากกว่า 1.6 | สีแดง (ช้า) |
วิธีปรับปรุงคะแนน FCP
ปัญหาหนึ่งที่สําคัญอย่างยิ่งสําหรับ FCP คือเวลาในการโหลดแบบอักษร ดูวิธีเร่งความเร็วในการโหลดแบบอักษรได้จากโพสต์ตรวจสอบว่าข้อความจะยังมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์
วัด FCP ในอุปกรณ์ของผู้ใช้จริง
ดูวิธีวัดเมื่อ FCP เกิดขึ้นจริงในอุปกรณ์ของผู้ใช้ได้ที่วัด FCP ใน JavaScript
ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวบรวมเมตริกของผู้ใช้จริงได้ที่การประเมินประสิทธิภาพการโหลดในการใช้งานจริงด้วยการนำทางและระยะเวลาของทรัพยากรของ Google
วิธีปรับปรุงคะแนนประสิทธิภาพโดยรวม
โดยทั่วไปแล้ว คุณควรมุ่งเน้นที่การปรับปรุงคะแนนประสิทธิภาพโดยรวม เว้นแต่จะมีเหตุผลที่เฉพาะเจาะจงในการมุ่งเน้นที่เมตริกหนึ่งๆ
ใช้ส่วนการวินิจฉัยของรายงาน Lighthouse เพื่อพิจารณาการปรับปรุงที่จะมีคุณค่ามากที่สุดสําหรับหน้าเว็บ ยิ่งโอกาสมีนัยสำคัญมากเท่าใด โอกาสนั้นก็จะมีผลต่อคะแนนประสิทธิภาพมากเท่านั้น เช่น ภาพหน้าจอ Lighthouse ต่อไปนี้แสดงให้เห็นว่าการกำจัดทรัพยากรที่บล็อกการแสดงผลจะให้ผลลัพธ์ที่ดีที่สุด
ดูการตรวจสอบประสิทธิภาพเพื่อดูวิธีแก้ไขโอกาสที่ระบุไว้ในรายงาน Lighthouse