First Contentful Paint (FCP)

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

  • 60
  • 79
  • 84
  • 14.1

แหล่งที่มา

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

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

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

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

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

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

ค่า FCP ที่ดีคือไม่เกิน 1.8 วินาที ค่าที่ไม่ดีควรมากกว่า 3.0 วินาที และอะไรอื่นๆ ที่อยู่ระหว่างนั้นต้องปรับปรุง
ค่า 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);

โปรดดูซอร์สโค้ดของ onFCP() เพื่อดูตัวอย่างทั้งหมดเกี่ยวกับวิธีวัด FCP ใน JavaScript

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

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

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

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

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

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

หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดระบุไว้ในกลุ่ม Google web-vitals-feedback