First Contentful Paint (FCP)

การสนับสนุนเบราว์เซอร์

  • 60
  • 79
  • 84
  • 14.1

แหล่งที่มา

FCP คืออะไร

เมตริก First Contentful Paint (FCP) วัดระยะเวลาตั้งแต่ตอนที่ผู้ใช้ไปที่หน้าเว็บเป็นครั้งแรกจนถึงตอนที่ระบบแสดงส่วนใดส่วนหนึ่งของเนื้อหาในหน้าบนหน้าจอ สำหรับเมตริกนี้ "เนื้อหา" หมายถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) องค์ประกอบ <svg> หรือองค์ประกอบ <canvas> ที่ไม่ใช่สีขาว

ไทม์ไลน์ของ FCP จาก google.com

ในไทม์ไลน์การโหลดด้านบน FCP จะเกิดขึ้นในเฟรมที่ 2 เนื่องจากเป็นเวลาที่องค์ประกอบข้อความและรูปภาพแรกแสดงผลในหน้าจอ

คุณจะเห็นว่าแม้เนื้อหาบางส่วนจะแสดงผลไปแล้ว แต่ไม่ได้แสดงทั้งหมด นี่เป็นความแตกต่างสำคัญที่ควรจะทำระหว่าง First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) ซึ่งมีเป้าหมายเพื่อวัดว่าเนื้อหาหลักของหน้าโหลดเสร็จแล้วเมื่อใด

คะแนน FCP ที่ดีคืออะไร

เว็บไซต์ควรพยายามให้ First Contentful Paint มีความยาวไม่เกิน 1.8 วินาที เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นต์ไทล์ที่ 75 ของการโหลดหน้าเว็บที่แบ่งกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป เพื่อให้มั่นใจว่าคุณจะบรรลุเป้าหมายนี้สำหรับผู้ใช้ส่วนใหญ่

ค่า FCP ที่ดีคือไม่เกิน 1.8 วินาที ค่าที่ไม่ดีควรมากกว่า 3.0 วินาที และอะไรอื่นๆ ที่อยู่ระหว่างนั้นต้องปรับปรุง

วิธีวัด FCP

FCP สามารถวัดได้ในห้องทดลองหรือในการทดลอง และมีให้ใช้งานในเครื่องมือต่อไปนี้

เครื่องมือภาคสนาม

เครื่องมือสำหรับห้องทดลอง

วัด 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);

คุณสามารถดูตัวอย่างวิธีวัด FCP ใน JavaScript ได้จากซอร์สโค้ดของ onFCP()

วิธีปรับปรุง FCP

หากต้องการดูวิธีปรับปรุง FCP สำหรับเว็บไซต์หนึ่งๆ คุณสามารถเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse และใส่ใจกับโอกาสหรือการวินิจฉัยที่การตรวจสอบแนะนำ

หากต้องการดูวิธีปรับปรุง FCP โดยทั่วไป (สำหรับเว็บไซต์ใดก็ตาม) โปรดดูคู่มือประสิทธิภาพต่อไปนี้

บันทึกการเปลี่ยนแปลง

ในบางครั้ง ระบบจะพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งพบในคำนิยามของเมตริกด้วย ด้วยเหตุนี้ บางครั้งต้องมีการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือการถดถอยในรายงานและแดชบอร์ดภายในของคุณ

การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยคุณจัดการ

หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ คุณสามารถให้ข้อมูลไว้ในกลุ่ม Google web-vitals-feedback