First Contentful Paint (FCP)

Philip Walton

การรองรับเบราว์เซอร์

  • Chrome: 60
  • Edge: 79
  • Firefox: 84
  • Safari: 14.1

แหล่งที่มา

FCP คืออะไร

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

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

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

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

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

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

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

วิธีวัด FCP

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 เมื่อมีการกู้คืนหน้าเว็บจากแคชย้อนกลับ/ไปข้างหน้า แต่ควรวัด 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