วิธีปรับปรุง First Contentful Paint (FCP) ใน WordPress

คะแนน First Contentful Paint (FCP) ช่วยให้คุณทราบว่าต้องใช้เวลาเท่าใดในการแสดงผลไซต์ของคุณ คะแนนที่ไม่ดีหมายความว่าผู้เข้าชมของคุณอาจต้องรอนานกว่าที่ควร

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

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

First Contentful Paint (FCP) คืออะไร?

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

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

• Largest Contentful Paint (LCP) : การวัดประสิทธิภาพการโหลด
• First Input Delay (FID) : การวัดการโต้ตอบ
• Cumulative Layout Shift (CLS) : การวัดความเสถียรของภาพ

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

Google ต้องการส่งผู้ค้นหาไปยังไซต์ที่มอบประสบการณ์ที่ยอดเยี่ยม ดังนั้นคะแนนที่ยอดเยี่ยมจึงไม่เพียงแต่เป็นเป้าหมายสำหรับประสบการณ์ของผู้ใช้ที่มีคุณภาพเท่านั้น แต่ยังอาจส่งผลให้อันดับการค้นหาดีขึ้นอีกด้วย

FCP ส่งผลต่อประสบการณ์ของผู้ใช้อย่างไร

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

First Contentful Paint ทำเครื่องหมายเวลาที่ผู้เข้าชมจะเห็นองค์ประกอบแรกบนหน้าเว็บ

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

สาเหตุที่เป็นไปได้ของคะแนน FCP ที่ไม่ดี

จากข้อมูลของ Google คะแนน FCP ในอุดมคติควรต่ำกว่า 1.8 วินาที หากคุณมีคะแนนต่ำ อาจเป็นผลมาจากปัจจัยบางประการ:

• เวลาตอบสนองของเซิร์ฟเวอร์ช้า : หากเว็บไซต์ของคุณมีคะแนน Time to First Byte (TTFB) สูง อาจส่งผลต่อ First Contentful Paint
• Render-blocking JavaScript and CSS : คิวสคริปต์ที่ไม่มีประสิทธิภาพสามารถหยุดกระบวนการเรนเดอร์ได้จนกว่าจะมีการประมวลผลสคริปต์จำนวนมาก
• องค์ประกอบที่ขึ้นกับสคริปต์ในครึ่งหน้าบน : เนื่องจาก JavaScript โหลดจากบนลงล่าง สิ่งสำคัญคือต้องหลีกเลี่ยงองค์ประกอบที่ใช้ JavaScript ในครึ่งหน้าบน
• รูปภาพโหลดแบบขี้เกียจในครึ่งหน้าบน : แม้ว่ารูปภาพที่โหลดแบบ Lazy Loading สามารถปรับปรุงความเร็วของหน้าได้ แต่กระบวนการนี้ใช้ JavaScript ซึ่งสามารถเพิ่ม FCP ได้
• การโหลดฟอนต์ที่ไม่มีประสิทธิภาพ : ฟอนต์สามารถมีไฟล์ขนาดใหญ่ที่ทำให้การแสดงข้อความล่าช้า
• ขนาด Document Object Model (DOM) ที่ มากเกินไป : การมีโหนดมากเกินไปใน DOM ของคุณอาจทำให้การโหลดไม่มีประสิทธิภาพ

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

วิธีวัด First Contentful Paint ของเว็บไซต์ของคุณ

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

PageSpeed ​​Insights

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

PageSpeed ​​Insights เป็นเครื่องมือที่สามารถประเมินเว็บไซต์ของคุณโดยใช้ ทั้ง ผลลัพธ์ในห้องปฏิบัติการและภาคสนาม คุณสามารถป้อน URL ของไซต์และวิเคราะห์เมตริก Core Web Vitals ได้ทันที

ที่ด้านบนของหน้า คุณจะเห็น Core Web Vitals Assessment สิ่งนี้จะระบุว่าคุณผ่านการทดสอบหรือผ่านการทดสอบ เช่น LCP, FID, CLS และอื่นๆ

คุณจะพบคะแนน First Contentful Paint ของคุณภายใต้ เกณฑ์ชี้วัดอื่นๆ หากไม่เกิน 1.8 วินาที คุณจะได้รับคะแนน 'ดี' คะแนนใดๆ ที่เกิน 1.8 วินาทีจะต้องได้รับการปรับปรุง

ผลลัพธ์เหล่านี้จะถูกตั้งค่าเป็น มือถือ โดยอัตโนมัติ คุณสามารถคลิกที่ เดสก์ท็อป เพื่อดูคะแนน FCP ของคุณสำหรับอุปกรณ์เหล่านั้น

หากคุณเห็นคะแนน "แย่" หรือ "ต้องปรับปรุง" สำหรับส่วน FCP คุณจะต้องใช้วิธีการเพิ่มประสิทธิภาพบางอย่าง

ประภาคาร

Lighthouse เป็นเครื่องมือในห้องปฏิบัติการที่สามารถตรวจสอบหน้าเว็บใดก็ได้สำหรับการช่วยสำหรับการเข้าถึง Core Web Vitals และอื่นๆ ซอฟต์แวร์นี้จะเปรียบเทียบเวลา FCP ของคุณกับเว็บไซต์อื่น

ในการใช้ Lighthouse ให้คลิกขวาที่หน้าที่คุณต้องการวิเคราะห์ในเบราว์เซอร์ Google Chrome แล้วเลือก ตรวจสอบ

ในหน้าต่าง Chrome DevTools ให้ค้นหาไอคอนลูกศรคู่ จากนั้นเลือก Lighthouse จากเมนูที่ขยายลงมา

ถัดไป คุณสามารถเลือกองค์ประกอบที่คุณต้องการรวมไว้ในรายงาน Lighthouse เมื่อเสร็จแล้ว ให้คลิกที่ วิเคราะห์การโหลดหน้า

หลังจากที่ Lighthouse ประมวลผลเว็บไซต์ของคุณแล้ว คุณจะเห็นคะแนนประสิทธิภาพโดยรวมของคุณ ด้านล่างนี้ คุณจะพบ First Contentful Paint ของคุณ

หากคุณเห็นวงกลมสีเขียวถัดจากส่วนนี้ แสดงว่าคุณมีคะแนน FCP ที่ดี หากคุณได้สี่เหลี่ยมสีเหลืองหรือสามเหลี่ยมสีแดง แสดงว่าเนื้อหาของคุณใช้เวลาในการแสดงผลนานเกินไป

GTmetrix

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

ขั้นแรก วาง URL ของคุณลงในแถบค้นหา แล้วคลิก ทดสอบไซต์ของคุณ

จากนั้น คุณสามารถดูคะแนน First Contentful Paint ได้ในกราฟ Speed ​​Visualization

หาก FCP ของคุณช้าเกินไป จะอยู่ภายใต้ ปัญหายอดนิยม ในการตรวจสอบ FCP นี้ คุณจะเห็นว่าทรัพยากรเฉพาะส่งผลต่อคะแนนของคุณอย่างไร

การระบุสาเหตุของปัญหาจะช่วยให้คุณดำเนินการแก้ไขได้อย่างถูกต้อง นอกจากนี้ GTmetrix จะให้คำแนะนำเพื่อช่วยปรับปรุงคะแนน FCP ของคุณ

วิธีลดเวลา First Contentful Paint ใน WordPress

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

1. ติดตั้งปลั๊กอินการเพิ่มประสิทธิภาพ Web Vitals หลัก

มีปลั๊กอิน WordPress มากมายที่คุณสามารถใช้ปรับปรุงคะแนน First Contentful Paint ของคุณได้ แม้ว่าคุณจะสามารถติดตั้งเครื่องมือต่างๆ เพื่อลดขนาดไฟล์ของไซต์หรือกำจัดทรัพยากรที่บล็อกการแสดงผลได้ แต่วิธีที่ดีที่สุดคือหาปลั๊กอิน Core Web Vitals แบบครบวงจร

Jetpack Boost เป็นเครื่องมือฟรีที่สามารถเพิ่มประสิทธิภาพเว็บไซต์ของคุณได้หลายวิธี พัฒนาโดย Automattic บริษัทที่อยู่เบื้องหลัง WordPress.com ปลั๊กอินนี้สามารถช่วยคุณปรับปรุงคะแนน Core Web Vitals ของคุณได้ด้วยการคลิกเพียงไม่กี่ครั้ง

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

นอกจากนี้ยังให้ตัวเลือกการเพิ่มประสิทธิภาพบางอย่างแก่คุณอีกด้วย เมื่อเปิดใช้การตั้งค่าเหล่านี้ คุณจะปรับ CSS ให้เหมาะสม เลื่อน JavaScript ที่ไม่จำเป็น และใช้การโหลดรูปภาพแบบ Lazy ได้อย่างง่ายดาย

จากนั้น คุณสามารถเรียกใช้การทดสอบความเร็วอีกครั้งเพื่อดูว่าคะแนนประสิทธิภาพของคุณดีขึ้นหรือไม่ อย่างที่คุณเห็น การใช้ Jetpack เป็นหนึ่งในวิธีที่เร็วและง่ายที่สุดในการปรับปรุง First Contentful Paint ใน WordPress

2. ลดเวลาตอบสนองของเซิร์ฟเวอร์

เวลาตอบสนองของเซิร์ฟเวอร์หรือ Time to First Byte (TTFB) คือเวลาที่เซิร์ฟเวอร์ใช้เพื่อส่งข้อมูลไบต์แรกกลับไปยังเบราว์เซอร์ สิ่งนี้จะวัดความล่าช้าระหว่างการเริ่มต้นคำขอและการเริ่มต้นการตอบกลับ

First Contentful Paint ขึ้นอยู่กับ TTFB ต่อไปนี้คือตัวอย่างวิธีที่ FCP และ TTFB ทำงานร่วมกันในกระบวนการโหลด:

FCP = TTFB + เวลาแสดงผล

ซึ่งหมายความว่าการลดเวลาตอบสนองของเซิร์ฟเวอร์เป็นวิธีที่มีประสิทธิภาพในการปรับปรุง First Contentful Paint ใน WordPress วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการหาบริการเว็บโฮสติ้งที่มีคุณภาพ

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

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

เมื่อคุณเลือกผู้ให้บริการโฮสติ้งรายใหม่แล้ว คุณสามารถย้ายไซต์ WordPress ของคุณได้อย่างง่ายดาย จากนั้น คุณสามารถเพลิดเพลินกับความเร็วในการโหลดที่เร็วขึ้น เวลาตอบสนองของเซิร์ฟเวอร์ที่ลดลง และปรับปรุง FCP

3. กำจัดทรัพยากรการบล็อกการแสดงผล

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

ขออภัย อาจมีทรัพยากรบล็อกการแสดงผลที่ป้องกันไม่ให้โหลดหน้า ในกรณีนี้ จะต้องแสดงผลไฟล์ HTML, CSS หรือ JavaScript ที่ไม่จำเป็น ซึ่งจะทำให้เบราว์เซอร์ไม่สามารถโหลดเนื้อหาที่สำคัญได้

ไฟล์เหล่านี้มักมีขนาดใหญ่และไม่มีข้อมูลสำคัญ เมื่อทรัพยากรการบล็อกการแสดงภาพได้รับการประมวลผลที่ด้านบนสุดของคิว รูปภาพ ข้อความ หรือองค์ประกอบภาพที่จำเป็นอื่นๆ อาจใช้เวลานานขึ้นกว่าจะปรากฏ อย่างที่คุณจินตนาการได้ การทำเช่นนี้อาจส่งผลเสียต่อ FCP ของคุณ เช่นเดียวกับ LCP และ Total Blocking Time (TBT)

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

ในการแก้ไขปัญหานี้ คุณสามารถใช้ปลั๊กอิน Jetpack Boost เพื่อปรับ CSS ให้เหมาะสม เลื่อน JavaScript ที่ไม่จำเป็น และเลื่อนรูปภาพนอกหน้าจอ วิธีนี้จะช่วยปรับปรุงโครงสร้างไฟล์ของคุณให้โหลดเร็วขึ้น

หากคุณต้องการแก้ไขสคริปต์ด้วยตนเอง คุณสามารถติดตั้งปลั๊กอิน Async JavaScript

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

4. ปรับโครงสร้าง CSS ของคุณให้เหมาะสม

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

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

Jetpack Boost ให้คุณทำสิ่งนี้ได้ด้วยขั้นตอนง่ายๆ เพียงขั้นตอนเดียว เมื่อเปิดใช้งานการตั้งค่า Optimize CSS Loading ปลั๊กอินจะย่อขนาดไฟล์ของคุณให้โหลดเฉพาะ CSS ที่สำคัญเท่านั้น

ด้วย Jetpack Boost คุณสามารถสร้าง Critical Path CSS สำหรับเพจได้ด้วยการคลิกปุ่ม นี่คือจำนวนโค้ด CSS ขั้นต่ำที่จำเป็นสำหรับการแสดงเนื้อหาครึ่งหน้าบน

การสร้าง CSS Critical Path ด้วยตนเองอาจเป็นงานที่น่ากลัว แต่คุณสามารถใช้เครื่องมืออย่าง Pegasaas เพื่อทำให้กระบวนการเป็นอัตโนมัติได้ เพียงแค่ป้อน URL ของไซต์ของคุณ คุณก็จะสามารถเข้าถึงโค้ดนี้ได้

จากนั้น คุณสามารถเพิ่ม CSS นี้ในส่วน <head> ของ HTML ของคุณได้ เมื่อทำอย่างถูกต้อง จะแสดงเนื้อหาครึ่งหน้าบนทันทีโดยไม่มีสไตล์ชีตแบบอะซิงโครนัส

5. หลีกเลี่ยงองค์ประกอบที่ขึ้นกับ JavaScript ครึ่งหน้าบน

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

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

ต่อไปนี้คือองค์ประกอบ JavaScript บางส่วนที่ควรย้ายมาอยู่ครึ่งหน้าล่าง:

• แอนิเมชั่นหนักๆ
• สไลเดอร์
• วิดเจ็ตโซเชียลมีเดีย
• Google Ads

เนื่องจากโค้ด JavaScript ถูกเรียกใช้จากบนลงล่าง การย้ายองค์ประกอบเหล่านี้ไปยังด้านล่างของหน้าจึงเป็นประโยชน์ หากอยู่ในครึ่งหน้าล่าง ผู้เข้าชมจะเห็นเนื้อหาของคุณเร็วขึ้นมาก

6. หลีกเลี่ยงการโหลดรูปภาพที่ครึ่งหน้าบนแบบขี้เกียจ

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

แม้ว่าการโหลดรูปภาพแบบ Lazy Loading อาจมีประโยชน์มากมาย แต่จริง ๆ แล้วอาจส่งผลเสียต่อ First Contentful Paint การโหลดแบบขี้เกียจใช้สคริปต์ที่ขัดขวางการโหลดรูปภาพ เนื่องจากใช้ JavaScript จึงอาจทำให้คะแนน FCP ของคุณล่าช้า

เมื่อใช้ Jetpack Boost คุณสามารถระบุรูปภาพที่จะแยกออกจากการโหลดแบบ Lazy Loading ได้ สำหรับรูปภาพครึ่งหน้าบน คุณสามารถเพิ่มคลาส CSS ข้ามได้

คุณยังสามารถใช้ตัวกรอง jetpack_lazy_images_blocked_classes สิ่งนี้จะแจ้งให้ Jetpack หลีกเลี่ยงการโหลดแบบ Lazy Loading กับรูปภาพใด ๆ ที่มีคลาสใดคลาสหนึ่ง

นี่คือลักษณะของโค้ดในทางปฏิบัติ:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

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

7. เพิ่มประสิทธิภาพและบีบอัดภาพ

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

ขั้นแรก คุณสามารถเปลี่ยนรูปแบบไฟล์ของคุณเป็น SVG หรือ WebP ไซต์ของคุณน่าจะใช้ไฟล์ภาพ JPG, PNG หรือ GIF ด้วยการใช้รูปแบบที่มีการบีบอัดที่ดีขึ้น คุณอาจลด First Contentful Paint ลงได้

คุณยังสามารถใช้ปลั๊กอินบีบอัดรูปภาพได้อีกด้วย ด้วยเครื่องมืออย่าง TinyPNG คุณสามารถปรับรูปภาพ JPEG, PNG และ WebP ให้เหมาะสมโดยอัตโนมัติเมื่อคุณอัปโหลดไปยัง WordPress

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

หากต้องการแทรกรูปภาพ คุณต้องแปลงเป็นรูปแบบ Base64 หรือ SVG เครื่องมือ Base64 Image สามารถเปลี่ยนไฟล์ JPG, PNG, GIF, WebP, SVG และ BMP เป็นไฟล์ Base64 ได้โดยอัตโนมัติ

จากนั้นคุณสามารถเพิ่มภาพ Base64 ลงในเว็บไซต์ของคุณได้ นี่คือรหัส HTML ที่คุณสามารถใช้ได้:

 <img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">

สำหรับ CSS ต่อไปนี้คือวิธีแทรกไฟล์ Base64:

 .custom-class {    background: url('data:image/jpeg;base64,/9j/…[content]...'); }

หากคุณกำลังใช้ไฟล์ SVG คุณสามารถอินไลน์รูปภาพใน HTML:

 <body>  <!-- Insert SVG code here, and the image will show up! -->    <svg xmlns="http://www.w3.org/2000/svg">        <circle cx='50' cy='25' r='20'/>    </svg> </body>

โปรดทราบว่ารูปภาพในบรรทัดสามารถเพิ่มขนาดได้ เช่นเดียวกับขนาดหน้าโดยรวม นอกจากนี้ เครือข่ายการจัดส่งเนื้อหา (CDN) ของคุณไม่สามารถส่งรูปภาพเหล่านี้ได้

8. ใช้ประโยชน์จากการแคชระดับเซิร์ฟเวอร์

เมื่อมีคนคลิกที่เว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขาจะร้องขอข้อมูลจากเซิร์ฟเวอร์ของคุณ จากนั้นเซิร์ฟเวอร์จะประมวลผลคำขอและส่งทรัพยากรที่เกี่ยวข้องกลับคืนมา

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

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

ในการเริ่มใช้แคชระดับเซิร์ฟเวอร์ คุณสามารถติดตั้งปลั๊กอินแคช เช่น WP Super Cache จากนั้นเซิร์ฟเวอร์ของคุณจะส่งไฟล์ HTML แบบคงที่ที่สร้างขึ้นแทนการประมวลผลสคริปต์ PHP

นอกจากนี้ คุณยังสามารถตั้งค่าแคชของคุณได้อย่างง่ายดายในการตั้งค่า WP Super Cache สิ่งที่คุณต้องทำคือเลือก Caching On

นี่อาจเป็นวิธีที่ง่ายที่สุดในการลดเวลาในการประมวลผลของเซิร์ฟเวอร์ ด้วยการแคช คุณสามารถรับรองประสบการณ์ที่รวดเร็วและน่าพึงพอใจสำหรับผู้เยี่ยมชมซ้ำ

9. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

อีกวิธีหนึ่งในการปรับปรุงคะแนน FCP ของคุณคือการใช้เครือข่ายการจัดส่งเนื้อหา (CDN) CDN คือเครือข่ายเซิร์ฟเวอร์ที่สามารถส่งเนื้อหาออนไลน์ได้ในระยะไกล เมื่อมีผู้เยี่ยมชมไซต์ของคุณ CDN จะส่งเนื้อหาของคุณจากเซิร์ฟเวอร์ที่ใกล้กับตำแหน่งของพวกเขามากที่สุด

การใช้ CDN ช่วยลดระยะห่างระหว่างเซิร์ฟเวอร์และผู้เยี่ยมชมได้ ส่งผลให้ผู้เข้าชมเหล่านี้สามารถโหลดได้เร็วขึ้น

โชคดีที่ Jetpack มาพร้อมกับ WordPress CDN ในตัวฟรี หลังจากเปิดใช้งาน คุณสามารถไปที่ Jetpack → การตั้งค่า → ประสิทธิภาพ & ความเร็ว และเปิดใช้งานตัวเร่งไซต์

สิ่งนี้สามารถเร่งการส่งรูปภาพและไฟล์คงที่ของคุณได้อย่างมีประสิทธิภาพ ไม่ว่าพวกเขาจะอยู่ที่ใด ผู้เข้าชมจะสามารถเข้าถึงเนื้อหาของคุณได้โดยไม่ชักช้า

10. ลดขนาด DOM ของคุณ

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

Lighthouse จะแจ้งให้คุณทราบหากคุณมีขนาด DOM มากเกินไป โดยทั่วไป คุณจะได้รับคำเตือนก็ต่อเมื่อองค์ประกอบเนื้อหามีโหนดมากกว่า 800 โหนด หากมีโหนดมากกว่า 1,400 โหนด คุณจะได้รับข้อความแสดงข้อผิดพลาด

หากคุณกำลังแก้ไข DOM ด้วยตนเอง คุณจะต้องแน่ใจว่าคุณสร้างเฉพาะโหนดที่จำเป็นและลบโหนดที่ไม่จำเป็น หากคุณมีไซต์ WordPress งานเหล่านี้จะเสร็จสมบูรณ์โดยธีม ปลั๊กอิน ซอฟต์แวร์หลัก และผู้สร้างเพจ

ต่อไปนี้เป็นวิธีอื่นในการลดขนาด DOM ของคุณใน WordPress:

• แยกหน้ายาวๆ ให้เล็กลง
• ลดจำนวนโพสต์ในไฟล์เก็บถาวรและหน้าแรกของคุณ
• หลีกเลี่ยงการใช้แท็ก <div> ที่ไม่จำเป็น
• ใช้ตัวเลือก CSS น้อยลง

นอกจากนี้ยังเป็นประโยชน์ในการเลือกธีม WordPress ที่ปรับให้เหมาะสม การใช้ตัวเลือกที่รวดเร็วและน้ำหนักเบา เช่น Twenty Twenty-Two สามารถช่วยให้คุณลดขนาด DOM ได้

11. ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏให้เห็นในระหว่างการโหลดเว็บฟอนต์

บ่อยครั้ง ฟอนต์มีไฟล์ขนาดใหญ่ที่ใช้เวลานานในการโหลด ในบางกรณี เบราว์เซอร์จะชะลอการแสดงข้อความจนกว่าแบบอักษรจะโหลดจนเต็ม สิ่งนี้เรียกว่า Flash of Invisible Text (FOIT)

เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น คุณสามารถแสดงแบบอักษรของระบบชั่วคราว สิ่งนี้เกี่ยวข้องกับการแสดงแบบอักษร: สลับในสไตล์ @font-face

นี่คือสิ่งที่อาจดูเหมือน:

 @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); font-display: swap; }

หรือคุณอาจต้องการนำเข้าแบบอักษรจาก Google Fonts ในกรณีนี้ คุณสามารถใช้พารามิเตอร์ &display=swap กับลิงก์ Google Fonts ของคุณ:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

แทนที่จะแสดงแฟลชของข้อความที่มองไม่เห็น เว็บไซต์ของคุณจะแสดง Flash of Unstyled Text (FOUT) ซึ่งจะทำให้เว็บไซต์ของคุณสามารถแสดงเนื้อหาได้ทันที ปรับปรุง First Contentful Paint

คำถามที่พบบ่อย (FAQ) เกี่ยวกับ First Contentful Paint

มาดูคำถามทั่วไปเกี่ยวกับ First Contentful Paint กัน

ฉันจะวัดคะแนน FCP ของเว็บไซต์ WordPress ได้อย่างไร

คุณสามารถใช้เครื่องมือต่างๆ สองสามอย่างเพื่อวัด First Contentful Paint ของคุณ ด้วย PageSpeed ​​Insights, Lighthouse หรือ GTmetrix คุณจะสามารถระบุคะแนน FCP ของคุณและแก้ไขปัญหาเฉพาะได้

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

คะแนน FCP ที่ดีควรไม่เกิน 1.8 วินาที เมตริกระหว่าง 1.8 ถึง 3 วินาทีอาจต้องปรับปรุง อะไรที่สูงกว่า 3 วินาทีจะต้องได้รับการพิจารณาทันที

ฉันจะปรับคะแนน FCP ให้เหมาะสมได้อย่างง่ายดายได้อย่างไร

วิธีที่ง่ายที่สุดวิธีหนึ่งในการปรับปรุงคะแนน FCP ของคุณคือการใช้ปลั๊กอิน Jetpack Boost เครื่องมือฟรีนี้สามารถเพิ่มประสิทธิภาพ Core Web Vitals ของคุณได้ทั้งหมดในที่เดียว

ขั้นแรก ติดตั้งและเปิดใช้งาน Jetpack Boost จากนั้น คลิกที่ Jetpack เพื่อเริ่มอัปเกรดประสิทธิภาพของเว็บไซต์ของคุณ

ที่นี่ คุณสามารถเพิ่มประสิทธิภาพการโหลด CSS เลื่อน JavaScript ที่ไม่จำเป็น และใช้การโหลดรูปภาพแบบ Lazy Loading ได้ เพียงแค่เปิดใช้งานแต่ละคุณสมบัติ คุณสามารถปรับปรุง First Contentful Paint ใน WordPress ได้โดยอัตโนมัติ

แสดงเนื้อหาออนไลน์ของคุณทันที

ด้วยการปรับปรุง First Contentful Paint ของคุณ คุณสามารถมั่นใจได้ว่าเนื้อหาของคุณโหลดเร็วขึ้นสำหรับผู้เยี่ยมชม หากไม่มีมาตรการนี้ คุณอาจพบอัตราตีกลับที่สูงขึ้นมาก

ในการวัด FCP ของคุณ คุณสามารถวิเคราะห์เว็บไซต์ของคุณด้วย PageSpeed ​​Insights หากคุณได้คะแนนต่ำ คุณสามารถใช้ Jetpack Boost เพื่อเพิ่มประสิทธิภาพสคริปต์และไฟล์รูปภาพของคุณ นอกจากนี้ คุณสามารถใช้ปลั๊กอินเพื่อเปิดใช้งานการโหลดแบบ Lazy Loading และใช้ CDN

เมื่อคุณใช้มาตรการเหล่านี้แล้ว ผู้เยี่ยมชมของคุณสามารถเริ่มโหลดได้เร็วขึ้น นี่หมายถึงอัตราตีกลับที่ต่ำลงและผู้ชมที่มีส่วนร่วมมากขึ้น!