First Contentful Paint (FCP)

Philip Walton

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

• 60
• 79
• 84
• 14.1

แหล่งที่มา

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

FCP คืออะไร

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

ประเด็นสําคัญ: โปรดทราบว่า FCP รวมเวลาการยกเลิกการโหลดจากหน้าก่อนหน้า เวลาตั้งค่าการเชื่อมต่อ เวลาเปลี่ยนเส้นทาง และ เวลาในการรับไบต์แรก (TTFB) ซึ่งอาจสําคัญเมื่อวัดผลในพื้นที่จริง และอาจทําให้การวัดผลในพื้นที่จริงและในห้องทดลองแตกต่างกัน

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

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

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

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

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

ค่า FCP ที่ดีคือ 1.8 วินาทีหรือน้อยกว่า ค่าที่ไม่ดีคือมากกว่า 3.0 วินาที

วิธีวัด FCP

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

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

• PageSpeed Insights
• รายงานประสบการณ์ของผู้ใช้ Chrome
• Search Console (รายงานความเร็ว)
• web-vitals ไลบรารี JavaScript

เครื่องมือของห้องทดลอง

• Lighthouse
• เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
• PageSpeed Insights

วัด 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 ใน JavaScript มีความซับซ้อนกว่า อ่านต่อเพื่อดูรายละเอียดเพิ่มเติม

ในข้อมูลโค้ดก่อนหน้า รายการ 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()

หมายเหตุ: ในบางกรณี (เช่น iframe ข้ามแหล่งที่มา) คุณจะวัด FCP ใน JavaScript ไม่ได้ ดูรายละเอียดได้ที่ส่วนข้อจำกัดของไลบรารี web-vitals

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

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

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

• กำจัดทรัพยากรที่บล็อกการแสดงผล
• ลดขนาด CSS
• นำ CSS ที่ไม่ได้ใช้ออก
• นํา JavaScript ที่ไม่ได้ใช้ออก
• เชื่อมต่อกับต้นทางที่จำเป็นล่วงหน้า
• ลดเวลาในการตอบกลับของเซิร์ฟเวอร์ (TTFB)
• หลีกเลี่ยงการเปลี่ยนเส้นทางหน้าเว็บหลายครั้ง
• โหลดคำขอคีย์ล่วงหน้า
• หลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก
• แสดงชิ้นงานแบบคงที่ที่มีนโยบายแคชที่มีประสิทธิภาพ
• หลีกเลี่ยง DOM ที่มีขนาดใหญ่เกินไป
• ลดความลึกของคำขอที่สำคัญ
• ตรวจสอบว่าข้อความจะยังมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์
• ควบคุมให้จำนวนคำขอมีไม่มากและการโอนมีขนาดเล็ก

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

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

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

หากมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดแสดงความคิดเห็นในกลุ่ม Google สำหรับ Web Vitals Feedback