First Contentful Paint (FCP) เป็นเมตริกสำคัญที่เน้นผู้ใช้เป็นหลักสำหรับการวัดความเร็วในการโหลดที่รับรู้ ซึ่งจะทำเครื่องหมายเป็นจุดแรกบนไทม์ไลน์การโหลดหน้าเว็บที่ผู้ใช้สามารถเห็นทุกอย่างบนหน้าจอ FCP ที่รวดเร็วช่วยให้ผู้ใช้มั่นใจได้ว่ามีบางอย่างเกิดขึ้น
FCP จะวัดระยะเวลาตั้งแต่ที่ผู้ใช้ไปยังหน้าเว็บเป็นครั้งแรกจนถึงตอนที่เนื้อหาส่วนใดส่วนหนึ่งของหน้าแสดงผลบนหน้าจอ สำหรับเมตริกนี้ "เนื้อหา" หมายถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) องค์ประกอบ <svg>
หรือองค์ประกอบ <canvas>
ที่ไม่ใช่สีขาว
เนื้อหาบางส่วนอาจไม่แสดงผลเมื่อองค์ประกอบเนื้อหาแรกแสดงผล นี่เป็นความแตกต่างที่สำคัญระหว่าง FCP กับ Largest Contentful Paint (LCP) ซึ่งวัดเมื่อเนื้อหาหลักของหน้าโหลดเสร็จแล้ว
คะแนน FCP ที่ดีคืออะไร
เว็บไซต์ต้องมี FCP ไม่เกิน 1.8 วินาทีเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เพื่อให้มั่นใจว่าคุณจะบรรลุเป้าหมายนี้สำหรับผู้ใช้ส่วนใหญ่ เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นต์ไทล์ที่ 75 ของการโหลดหน้าเว็บที่แบ่งกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
วิธีวัด FCP
คุณสามารถวัด FCP ได้ในห้องทดลองหรือในการทดลอง และมีให้ใช้งานในเครื่องมือต่อไปนี้
เครื่องมือภาคสนาม
- PageSpeed Insights
- รายงานประสบการณ์ของผู้ใช้ Chrome
- Search Console (รายงานความเร็ว)
- ไลบรารี JavaScript
web-vitals
รายการ
เครื่องมือสำหรับห้องทดลอง
วัด FCP ใน JavaScript
หากต้องการวัด FCP ใน JavaScript ให้ใช้ Paint Timing API
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง PerformanceObserver
ที่รอรับรายการ paint
ชื่อ first-contentful-paint
และบันทึกไว้ในคอนโซล
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
ในตัวอย่างนี้ รายการ first-contentful-paint
ที่บันทึกไว้จะบอกคุณเมื่อมีการระบายสีองค์ประกอบที่มีเนื้อหาเต็มรายการแรก อย่างไรก็ตาม ในบางกรณีรายการนี้ก็ไม่สามารถใช้
สำหรับการวัด FCP ได้
ส่วนต่อไปนี้แสดงความแตกต่างระหว่างรายงาน API และวิธีคำนวณเมตริก
ความแตกต่างระหว่างเมตริกกับ API
- API จะส่งรายการ
first-contentful-paint
สําหรับหน้าที่โหลดในแท็บเบื้องหลัง แต่ไม่ควรสนใจหน้าเหล่านั้นเมื่อคํานวณ FCP ระบบจะพิจารณาเวลาการลงสีครั้งแรกก็ต่อเมื่อหน้าเว็บอยู่เบื้องหน้าตลอดเวลา - API จะไม่รายงาน
first-contentful-paint
รายการเมื่อกู้คืนหน้าจาก Back/Forward Cache แต่ควรวัด FCP ในกรณีเหล่านี้เนื่องจากผู้ใช้พบว่าหน้าเหล่านั้นเป็นการเข้าชมหน้าที่แตกต่างกัน - API อาจไม่รายงานช่วงเวลาของสีจาก iframe แบบข้ามต้นทาง แต่หากต้องการวัด FCP อย่างถูกต้อง คุณต้องพิจารณาเฟรมทั้งหมด เฟรมย่อยสามารถใช้ API เพื่อรายงานช่วงเวลาของสีไปยังเฟรมหลักเพื่อการรวม
- API จะวัด FCP ตั้งแต่เริ่มการนำทาง แต่สำหรับหน้าที่แสดงผลล่วงหน้า ควรวัด FCP จาก
activationStart
เนื่องจากสอดคล้องกับเวลา FCP ที่ผู้ใช้พบ
แทนที่จะจดจำความแตกต่างเล็กๆ น้อยๆ เหล่านี้ทั้งหมด นักพัฒนาแอปสามารถใช้web-vitals
ไลบรารี JavaScript เพื่อวัด FCP ซึ่งจะจัดการความแตกต่างเหล่านี้ให้คุณหากเป็นไปได้ (ยกเว้นใน iframe) ดังนี้
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
โปรดดูซอร์สโค้ดของ onFCP()
เพื่อดูตัวอย่างทั้งหมดเกี่ยวกับวิธีวัด FCP ใน JavaScript
วิธีปรับปรุง FCP
หากต้องการเรียนรู้เพื่อปรับปรุง FCP สำหรับเว็บไซต์หนึ่งๆ คุณสามารถเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse และใส่ใจกับโอกาสหรือการวินิจฉัยที่การตรวจสอบแนะนำ
หากต้องการดูวิธีปรับปรุง FCP โดยทั่วไป (สำหรับเว็บไซต์ใดก็ตาม) โปรดดูคู่มือประสิทธิภาพต่อไปนี้
- กำจัดทรัพยากรที่บล็อกการแสดงผล
- ลดขนาด CSS
- นำ CSS ที่ไม่ได้ใช้ออก
- นำ JavaScript ที่ไม่ได้ใช้ออก
- เชื่อมต่อกับต้นทางที่จำเป็นล่วงหน้า
- ลดเวลาในการตอบกลับของเซิร์ฟเวอร์ (TTFB)
- หลีกเลี่ยงการเปลี่ยนเส้นทางหลายหน้า
- โหลดคำขอสำคัญล่วงหน้า
- หลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก
- แสดงเนื้อหาแบบคงที่ที่มีนโยบายแคชที่มีประสิทธิภาพ
- หลีกเลี่ยง DOM ที่มีขนาดใหญ่เกินไป
- ลดความลึกของคำขอที่สำคัญ
- ตรวจสอบว่าข้อความจะยังมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์
- ทำให้จำนวนคำขอมีไม่มากและการโอนมีขนาดเล็ก
บันทึกการเปลี่ยนแปลง
ในบางครั้ง อาจพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งอาจพบในคำนิยามของเมตริกด้วย ด้วยเหตุนี้ บางครั้งต้องมีการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือการถดถอยในรายงานและแดชบอร์ดภายในของคุณ
การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยคุณจัดการการเปลี่ยนแปลง
หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดระบุไว้ในกลุ่ม Google web-vitals-feedback