อธิบายสีเนื้อหาที่ใหญ่ที่สุด: วิธีปรับปรุงเวลาของคุณ

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

ไม่ว่าคุณจะเริ่มต้นจากที่ไหน โพสต์นี้เหมาะสำหรับคุณ เพราะคุณจะได้เรียนรู้ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ Largest Contentful Paint

ซึ่งรวมถึงความหมายของ Largest Contentful Paint เหตุใดจึงสำคัญ วิธีวัดผล และวิธีปรับปรุง

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

Contentful Paint (LCP) ที่ใหญ่ที่สุดคืออะไร? อธิบายความหมายสีเนื้อหาที่ใหญ่ที่สุด

Largest Contentful Paint เป็นเมตริกประสิทธิภาพที่วัดระยะเวลาที่เนื้อหาหลักของหน้าเว็บโหลด

Largest Contentful Paint เป็นส่วนหนึ่งของเมตริก Core Web Vitals ของ Google พร้อมด้วย Cumulative Layout Shift (CLS) และ First Input Delay (FID)

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

“เนื้อหาหลัก” หมายถึงอะไรในแง่ของ LCP

เนื้อหาหลักจะขึ้นอยู่กับหน้าจริงที่เป็นปัญหา แต่อาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้:

• ข้อความ – โดยเฉพาะอย่างยิ่ง องค์ประกอบระดับบล็อกใดๆ ที่มีโหนดข้อความหรือองค์ประกอบข้อความระดับอินไลน์อื่นๆ
• รูปภาพ – องค์ประกอบภายในองค์ประกอบ <img> หรือองค์ประกอบ <image> ภายในองค์ประกอบ <svg>
• วิดีโอ – องค์ประกอบ <video> ใดๆ (ใช้ภาพโปสเตอร์)
• องค์ประกอบที่มีภาพพื้นหลัง – เฉพาะเมื่อโหลดผ่านฟังก์ชัน CSS url() เท่านั้น (ใช้ไม่ได้กับการไล่ระดับสี CSS)

ภายหลังในโพสต์นี้ คุณจะได้เรียนรู้วิธีค้นหาองค์ประกอบ Largest Contentful Paint สำหรับหน้าใดๆ บนไซต์ของคุณ

สีเนื้อหาที่ใหญ่ที่สุดเทียบกับสีเนื้อหาแรก

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

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

โดยทั่วไป:

• LCP = เนื้อหาหลักเท่านั้น
• FCP = เนื้อหาชิ้นแรก โดยไม่คำนึงว่าเนื้อหานั้นคืออะไร

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

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

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

1. ประสบการณ์การใช้งาน
2. การเพิ่มประสิทธิภาพเครื่องมือค้นหา

ประสบการณ์ผู้ใช้

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

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

Largest Contentful Paint ทำงานได้ดีในการพยายามวัดช่วงเวลา "คุณค่า" นั้นด้วยการดูว่าเนื้อหาหลักใช้เวลานานเท่าใดในการโหลด

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

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

การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO)

ในส่วนของการเพิ่มประสิทธิภาพเครื่องมือค้นหานั้น Largest Contentful Paint เป็นส่วนหนึ่งของเมตริก Core Web Vitals สามรายการของ Google ซึ่ง Google เริ่มใช้เป็นปัจจัยการจัดอันดับ SEO ในการอัปเดตอัลกอริทึมประสบการณ์หน้าเพจปี 2565

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

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

อะไรจะส่งผลต่อคะแนนระบายสีที่มีเนื้อหามากที่สุด?

ปัญหาประเภท "หลัก" สองประเภทอาจส่งผลต่อเวลาระบายสีเนื้อหาที่ใหญ่ที่สุดของเพจ:

1. เซิร์ฟเวอร์ของคุณใช้เวลานานเท่าใดในการตอบกลับด้วยเอกสาร HTML เริ่มต้น
2. ใช้เวลานานเท่าใดในการโหลดทรัพยากร LCP จริง

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

ต่อไปนี้คือปัญหาทั่วไปบางส่วนที่ส่งผลต่อสิ่งนี้:

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

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

ต่อไปนี้คือปัญหาทั่วไปบางส่วนที่ส่งผลต่อสิ่งนี้:

• Render-blocking JavaScript หรือ CSS (หรือโค้ดที่ไม่ได้เพิ่มประสิทธิภาพ/ไม่จำเป็นโดยทั่วไป) – หากเบราว์เซอร์ของผู้ใช้จำเป็นต้องดาวน์โหลดและ/หรือประมวลผล JavaScript หรือ CSS ที่ไม่จำเป็นก่อนที่จะสามารถโหลดองค์ประกอบหลักได้ นั่นจะทำให้ LCP ของคุณช้าลง
• ภาพที่ไม่ได้เพิ่มประสิทธิภาพ – หากองค์ประกอบ LCP เป็นภาพ การใช้ภาพที่ไม่ได้เพิ่มประสิทธิภาพจะทำให้เวลาของคุณช้าลง เนื่องจากภาพขนาดใหญ่จะใช้เวลาดาวน์โหลดนานขึ้น
• การโหลดแบบอักษรที่ไม่ได้เพิ่มประสิทธิภาพ – หากองค์ประกอบ LCP เป็นข้อความ การโหลดแบบอักษรที่กำหนดเองด้วยวิธีที่ไม่ได้เพิ่มประสิทธิภาพอาจทำให้ข้อความนั้นใช้เวลานานขึ้นในการแสดง
• ไฟล์ที่ไม่บีบอัด – หากคุณไม่ได้ใช้เทคโนโลยีการบีบอัด เช่น Gzip หรือ Brotli จะทำให้เบราว์เซอร์ของผู้ใช้ใช้เวลานานขึ้นในการดาวน์โหลดไฟล์ของไซต์ของคุณ

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

เวลาระบายสีเนื้อหาที่ใหญ่ที่สุดที่ดีคืออะไร?

Google กำหนดเวลาระบายสีเนื้อหาที่ใหญ่ที่สุดที่ "ดี" คือไม่เกิน 2.5 วินาที

หากเวลาระบายสีเนื้อหาที่ใหญ่ที่สุดในเพจของคุณอยู่ระหว่าง 2.5 ถึง 4.0 วินาที Google จะจัดประเภทเป็น "ต้องการการปรับปรุง" และหากเวลาของเพจของคุณเกิน 4.0 วินาที Google จะนิยามว่า "แย่"

นี่คือกราฟิกจาก Google ที่แสดงเป็นภาพ:

วิธีการวัดสีเนื้อหาที่ใหญ่ที่สุด: เครื่องมือทดสอบ LCP ที่ดีที่สุด

มีเครื่องมือมากมายที่คุณสามารถใช้เพื่อทดสอบประสิทธิภาพของไซต์ของคุณสำหรับ Largest Contentful Paint – มาดูเครื่องมือที่มีประโยชน์มากที่สุด...

ข้อมูลเชิงลึกของ PageSpeed

PageSpeed ​​Insights เป็นหนึ่งในเครื่องมือที่ดีที่สุดสำหรับการประเมิน Largest Contentful Paint เนื่องจากให้ข้อมูลที่มีประโยชน์สี่ส่วน:

1. คุณสามารถดูเวลาระบายสีเนื้อหาที่ใหญ่ที่สุดในไซต์ของคุณกับผู้ใช้จริงได้จากรายงาน Chrome UX ( หากไซต์ของคุณมีการเข้าชมเพียงพอที่จะรวมไว้ในรายงาน )
2. คุณสามารถเรียกใช้การทดสอบจำลองเพื่อดูว่าไซต์ของคุณทำงานเป็นอย่างไร
3. Google จะบอกคุณถึงองค์ประกอบ LCP จริงที่ใช้สำหรับการทดสอบ ซึ่งช่วยให้คุณทราบว่าองค์ประกอบใดควรเพิ่มประสิทธิภาพ
4. Google จะให้คำแนะนำเกี่ยวกับวิธีปรับปรุงเวลา LCP ของคุณ

นี่คือวิธีการใช้งาน:

1. ไปที่เว็บไซต์ PageSpeed ​​Insights
2. ป้อน URL ของหน้าเว็บที่คุณต้องการทดสอบ
3. คลิก วิเคราะห์

จากนั้น Google จะแสดงผลลัพธ์สำหรับทั้งมือถือและเดสก์ท็อป อย่าลืมเลือกทั้งสองอย่าง

หากต้องการค้นหาองค์ประกอบหลักที่ Google ใช้ในการคำนวณ LCP คุณสามารถเลื่อนลงไปที่ส่วน การวินิจฉัย และขยายส่วน องค์ประกอบระบายสีเนื้อหาที่ใหญ่ที่สุด :

อีกครั้ง ตรวจสอบให้แน่ใจว่าได้ตรวจสอบทั้งมือถือและเดสก์ท็อป เนื่องจากองค์ประกอบ LCP อาจแตกต่างกันสำหรับแต่ละองค์ประกอบ

เครื่องมือสำหรับนักพัฒนา Chrome

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

นี่คือวิธีการเริ่มต้น:

1. เปิดเพจที่คุณต้องการทดสอบ
2. เปิดเครื่องมือสำหรับนักพัฒนา Chrome
3. ไปที่แท็บ ประสิทธิภาพ
4. ตรวจสอบให้แน่ใจว่าได้เลือกช่อง Web Vitals แล้ว
5. คลิกปุ่ม โหลดใหม่ ( ระบุไว้ด้านล่าง )

ตอนนี้คุณควรเห็นการวิเคราะห์ไซต์ของคุณอย่างสมบูรณ์

หากคุณวางเมาส์เหนือ LCP ในแท็บ เครือข่าย คุณจะเห็นเวลา:

หากคุณวางเมาส์เหนือ LCP ในแท็บ Timings คุณจะเห็นองค์ประกอบ LCP จริง:

คอนโซลการค้นหาของ Google

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

แต่ละหน้าในไซต์ของคุณจะมีเวลา LCP ที่แตกต่างกัน ดังนั้นคุณจึงไม่สามารถทดสอบหน้าแรกของคุณและเรียกมันว่าวันต่อวันได้

ด้วย Google Search Console คุณจะสามารถดูว่าแต่ละหน้าในไซต์ของคุณจัดอยู่ในหมวดหมู่ "ดี" "ต้องปรับปรุง" และ "แย่" ของ Google ได้ที่ใด ข้อมูลประสิทธิภาพมาจากรายงาน Chrome UX ดังนั้นจึงอิงจากข้อมูลผู้ใช้จริง

หากคุณยังไม่ได้ดำเนินการ คุณจะต้องยืนยันไซต์ของคุณกับ Google Search Console ก่อน

เมื่อคุณทำเสร็จแล้ว ต่อไปนี้เป็นวิธีการเข้าถึงรายงาน LCP:

1. เปิด Google Search Console สำหรับไซต์ของคุณ
2. ไปที่ Core Web Vitals ใต้แท็บ ประสบการณ์
3. คลิก เปิดรายงาน ถัดจากแผนภูมิมือถือหรือเดสก์ท็อป
4. มองหาปัญหาใดๆ ใน หัวข้อเหตุใดจึงไม่ถือว่า URL นั้นดี หากคุณคลิกที่ปัญหา คุณจะเห็นข้อมูลเพิ่มเติมเกี่ยวกับ URL ที่ทำให้เกิดปัญหา

*อย่าลืมตรวจสอบผลลัพธ์ทั้งเดสก์ท็อปและมือถือ เนื่องจากข้อมูลอาจแตกต่างกันในแต่ละรายการ

การทดสอบหน้าเว็บ

WebPageTest เป็นอีกตัวเลือกที่มีประโยชน์สำหรับการเรียกใช้การทดสอบประสิทธิภาพแบบจำลอง

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

ต่อไปนี้เป็นวิธีการเรียกใช้การทดสอบ:

1. ไปที่ WebPageTest
2. เพิ่ม URL ของหน้าที่คุณต้องการทดสอบ
3. ขยายตัวเลือก การกำหนดค่าขั้นสูง เพื่อกำหนดค่าการทดสอบของคุณอย่างสมบูรณ์

ในหน้าผลลัพธ์ คุณจะเห็นข้อมูล LCP พร้อมด้วยเมตริกประสิทธิภาพอื่นๆ มากมาย (รวมถึงการวิเคราะห์น้ำตก)

วิธีค้นหาองค์ประกอบสีที่มีเนื้อหามากที่สุด

หากคุณต้องการปรับปรุง Largest Contentful Paint การรู้แน่ชัดว่าองค์ประกอบใดที่ Google ใช้ในการคำนวณเวลา LCP ของคุณอาจเป็นประโยชน์อย่างมาก

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

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ คุณสามารถค้นหาองค์ประกอบ Largest Contentful Paint โดยใช้ PageSpeed ​​Insights หรือ Chrome Developer Tools

ตรวจสอบให้แน่ใจว่าได้ตรวจสอบผลลัพธ์ทั้งบนมือถือและเดสก์ท็อป เนื่องจากองค์ประกอบ LCP ของคุณอาจแตกต่างกันในอุปกรณ์ต่างๆ

วิธีปรับปรุง Contentful Paint ที่ใหญ่ที่สุดใน WordPress (หรือแพลตฟอร์มอื่นๆ)

ตอนนี้คุณรู้ทั้งหมดเกี่ยวกับ Largest Contentful Paint แล้ว มาดูเคล็ดลับที่นำไปใช้ได้จริงสำหรับวิธีปรับปรุง Largest Contentful Paint ใน WordPress

แม้ว่าเราจะมุ่งเน้นไปที่ WordPress สำหรับเคล็ดลับเหล่านี้ แต่เคล็ดลับทั้งหมดนั้นเป็นสากลและนำไปใช้กับเว็บไซต์ประเภทอื่นๆ ได้

ตั้งค่าการแคชเพื่อปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์

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

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

หากคุณโฮสต์ที่อื่น คุณสามารถเปิดใช้งานการแคชบนเว็บไซต์ของคุณโดยใช้ปลั๊กอินฟรี เช่น WP Super Cache หรือปลั๊กอินแบบชำระเงิน เช่น WP Rocket

สำหรับตัวเลือกเพิ่มเติม โปรดดูโพสต์ของเราที่มีปลั๊กอินแคช WordPress ที่ดีที่สุด

อัปเกรดเป็นโฮสติ้ง WordPress ที่เร็วขึ้น

แม้ว่ากลวิธีทั้งหมดในรายการนี้สามารถช่วยคุณปรับปรุงเวลา LCP ของคุณ แต่ก็ไม่มีการทำอะไรเกินเลย:

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

คุณอาจทำสิ่งต่างๆ ให้ดีขึ้นได้เล็กน้อย แต่คุณจะต้องดิ้นรนเพื่อให้ได้เวลา LCP ที่ต่ำกว่า 2.5 วินาทีเสมอ หากโฮสต์ของคุณทำงานช้า

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

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

หากคุณสนใจ Kinsta จะ ย้ายเว็บไซต์ไม่จำกัดจากโฮสต์ใดๆ ฟรี – เรียนรู้เพิ่มเติมเกี่ยวกับการย้ายฟรีที่นี่

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

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

หากไม่มี CDN ผู้เข้าชมไซต์ทั้งหมดของคุณจะต้องดาวน์โหลด HTML ของหน้าและเนื้อหาแบบสแตติกจากเซิร์ฟเวอร์โฮสติ้งของคุณ

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

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

หากคุณโฮสต์กับ Kinsta เราขอแนะนำให้ใช้ฟีเจอร์ Edge Caching ของ Kinsta เพื่อผลลัพธ์ที่ดีที่สุด

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

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

หากต้องการเปิดใช้งาน Edge Caching ของ Kinsta ให้ไปที่แท็บ Edge Caching ในแดชบอร์ดของไซต์ของคุณใน MyKinsta

หากคุณโฮสต์ที่อื่น คุณสามารถตั้งค่า CDN สำหรับเนื้อหาคงที่ของไซต์ของคุณโดยใช้บริการ CDN ยอดนิยม เช่น KeyCDN, Bunny, StackPath และอื่นๆ

หลีกเลี่ยง JavaScript ที่ปิดกั้นการแสดงผล (เลื่อนหรือลบ)

Render-blocking JavaScript คือ JavaScript ที่โหลดก่อนองค์ประกอบ LCP หลักของคุณ แม้ว่าจะไม่จำเป็นต้องใช้ในขณะนั้นก็ตาม

การโหลดองค์ประกอบ LCP ล่าช้าจะทำให้เวลาในการโหลด LCP ของคุณช้าลง

ในการแก้ไขปัญหานี้ มีกลยุทธ์บางอย่างที่คุณสามารถนำไปใช้ได้:

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

สำหรับคนส่วนใหญ่ วิธีที่ง่ายที่สุดในการใช้ฟังก์ชันนี้คือการใช้ปลั๊กอิน เช่น Autoptimize หรือ WP Rocket

สำหรับคำแนะนำฉบับสมบูรณ์เกี่ยวกับวิธีการดำเนินการนี้ เรามีโพสต์ที่มีรายละเอียดมากสองโพสต์:

• วิธีกำจัดทรัพยากรการบล็อกการเรนเดอร์บน WordPress
• วิธีเลื่อนการแยกวิเคราะห์ JavaScript

หลีกเลี่ยง Render-Blocking CSS และเพิ่มประสิทธิภาพการนำส่ง CSS

เช่นเดียวกับที่ JavaScript ที่ไม่ได้รับการปรับปรุงอาจทำให้ไซต์ของคุณช้าลงได้ CSS ที่ไม่ได้รับการปรับปรุงก็สามารถทำได้เช่นเดียวกัน

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

หากคุณไม่ใช่นักพัฒนา วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือการใช้ปลั๊กอินเพิ่มประสิทธิภาพ เช่น Perfmatters, WP Rocket หรือ FlyingPress

ตัวอย่างเช่น WP Rocket นำเสนอคุณสมบัติในตัวเพื่อลบ CSS ที่ไม่ได้ใช้ออกทีละหน้าและให้บริการ CSS ด้วยวิธีที่เหมาะสมที่สุด

หากคุณต้องการดูวิธีการทำทั้งหมดนี้อย่างละเอียดยิ่งขึ้น โปรดดูคู่มือฉบับสมบูรณ์ของเราเกี่ยวกับวิธีเพิ่มประสิทธิภาพ CSS

ลดขนาด HTML, CSS และ JavaScript ของคุณ

นอกจากเทคนิคการเพิ่มประสิทธิภาพโค้ดด้านบนแล้ว คุณจะต้องลด HTML, CSS และ JavaScript ของไซต์ของคุณให้เล็กลงด้วย

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

หากคุณโฮสต์กับ Kinsta Kinsta สามารถจัดการการลดขนาดโดยอัตโนมัติผ่านการรวม Cloudflare ของเรา วิธีควบคุมฟีเจอร์นี้มีดังนี้

1. เปิดแดชบอร์ดของไซต์ของคุณใน MyKinsta
2. ไปที่แท็บ CDN
3. คลิก การตั้งค่า ถัดจาก การเพิ่มประสิทธิภาพรูปภาพ
4. ทำเครื่องหมายในช่องสำหรับ CSS และ JS และบันทึกการตั้งค่า

หากคุณโฮสต์ไซต์ของคุณที่อื่น คุณสามารถใช้ปลั๊กอินฟรี เช่น Autoptimize เพื่อย่อขนาดโค้ดของคุณ หรือหนึ่งในปลั๊กอินพรีเมียมที่ครอบคลุม เช่น Perfmatters, WP Rocket หรือ FlyingPress

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

ใช้การบีบอัดระดับเซิร์ฟเวอร์ (Gzip หรือ Brotli)

การบีบอัดระดับเซิร์ฟเวอร์ช่วยให้คุณลดขนาดไฟล์ของไซต์ของคุณโดยใช้เทคโนโลยีเช่น Gzip หรือ Brotli

ตัวอย่างเช่น การบีบอัดที่เราใช้สำหรับเว็บไซต์ Kinsta ลดขนาดไฟล์ของหน้าแรกของ Kinsta ลง 85.82%

หากคุณโฮสต์เว็บไซต์ WordPress กับ Kinsta คุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ เนื่องจาก Kinsta เปิดใช้งานการบีบอัด Brotli สำหรับทุกไซต์โดยอัตโนมัติ

หากคุณโฮสต์ไซต์ของคุณที่อื่น คุณสามารถใช้เครื่องมือฟรีนี้จาก GiftOfSpeed ​​เพื่อตรวจสอบว่าไซต์ของคุณเปิดใช้งาน Gzip หรือ Brotli หรือไม่

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

หากคุณใช้ Cloudflare เพื่อให้บริการเนื้อหาของไซต์ของคุณ Cloudflare ยังมีการตั้งค่าในตัวเพื่อเปิดใช้งานการบีบอัด Brotli:

1. เปิดไซต์ของคุณในแดชบอร์ด Cloudflare
2. ไปที่ Speed ​​→ Optimization ในเมนูแถบด้านข้าง
3. เปิดใช้งานการสลับ Brotli

บีบอัดและปรับขนาดรูปภาพ

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

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

แนวทางนี้เป็นเพียง แนวปฏิบัติที่ดีที่สุดในการปรับประสิทธิภาพการทำงาน เท่านั้น ไม่เฉพาะเจาะจงสำหรับ Largest Contentful Paint

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

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

วิธีเปิดใช้ฟีเจอร์นี้มีดังนี้

1. เปิดแดชบอร์ดของไซต์ของคุณใน MyKinsta
2. ไปที่แท็บ CDN
3. คลิก การตั้งค่า ถัดจาก การเพิ่มประสิทธิภาพรูปภาพ
4. เลือกระดับการปรับแต่งรูปภาพที่คุณต้องการและบันทึกการตั้งค่า – การใช้ Lossy จะเสนอการปรับปรุงความเร็วที่ใหญ่ที่สุด แม้ว่าอาจมีผลกระทบเล็กน้อยต่อคุณภาพของภาพ

โหลดภาพระบายสีเนื้อหาขนาดใหญ่ที่สุดไว้ล่วงหน้า

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

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

วิธีที่ไม่ใช่ทางเทคนิคที่สุดในการโหลดภาพ LCP ล่วงหน้าคือการใช้ปลั๊กอิน เช่น Perfmatters ซึ่งมีคุณลักษณะ โหลดภาพที่สำคัญล่วงหน้า โดยเฉพาะ สิ่งที่คุณต้องทำคือระบุจำนวนภาพที่จะโหลดล่วงหน้า เราขอแนะนำให้เริ่มต้นด้วยภาพเดียว เนื่องจากการโหลดเนื้อหาล่วงหน้ามากเกินไปอาจส่งผลเสียได้

นอกจากนี้ยังมีปลั๊กอินฟรีบางตัวที่ WordPress.org เพื่อให้บรรลุเป้าหมายนี้ เช่น ปลั๊กอิน Preload Featured Images ของ WPZOOM รวมถึงปลั๊กอินพรีเมียมอื่นๆ เช่น FlyingPress

ตรวจสอบปัญหา Lazy Loading

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

หรือสิ่งนี้ยังสามารถทริกเกอร์คำเตือน “รูปภาพระบายสีเนื้อหาขนาดใหญ่ที่สุดถูกโหลดอย่างขี้เกียจ” ใน PageSpeed ​​Insights

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

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

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

หากคุณต้องการยกเว้นมากกว่าภาพแรก คุณสามารถ ใช้ฟังก์ชัน wp_omit_loading_attr_threshold (แต่คนส่วนใหญ่ไม่จำเป็นต้องทำอะไรที่นี่)

อย่างไรก็ตาม หากคุณใช้ปลั๊กอินการโหลดแบบ Lazy Loading ที่ขับเคลื่อนด้วย JavaScript คุณอาจต้องตั้งค่าการยกเว้นนี้ด้วยตนเองในการตั้งค่าของปลั๊กอิน ตัวอย่างเช่น ปลั๊กอิน Perfmatters มีตัวเลือกเพื่อให้คุณยกเว้นภาพ "X" ภาพแรกจากการโหลดแบบ Lazy Loading

หากปลั๊กอินโหลดแบบ Lazy Loading ไม่อนุญาตให้คุณตั้งค่าการยกเว้นประเภทนี้ คุณสามารถเปลี่ยนไปใช้ปลั๊กอินอื่นที่ทำได้

เพิ่มประสิทธิภาพการโหลดแบบอักษรด้วยการแสดงแบบอักษร: ทางเลือก

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

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

ในการแก้ไขปัญหานี้ คุณสามารถใช้ Font-Display: Optional CSS descriptor

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

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

นอกจากนี้ คุณยังสามารถใช้ Font-Display: Swap ซึ่งจะโหลดฟอนต์ทางเลือกทันที จากนั้นจึง "สลับ" ในฟอนต์แบบกำหนดเองเมื่อโหลดฟอนต์แบบกำหนดเองแล้ว อย่างไรก็ตาม วิธีการนี้อาจทำให้เกิดปัญหากับ Cumulative Layout Shift ถ้าฟอนต์มีขนาดต่างกัน คุณจึงต้องระมัดระวัง

เว้นแต่ว่าแบบอักษรที่กำหนดเองของคุณมีความจำเป็นอย่างยิ่งต่อการออกแบบเว็บไซต์ของคุณ การใช้ Font-Display: ตัวเลือกเป็นตัวเลือกที่ดีที่สุดจากมุมมองของ Core Web Vitals

หากคุณสะดวกใจที่จะใช้ CSS โดยตรง คุณสามารถแก้ไขคุณสมบัติ Font-Display ในสไตล์ชีตของธีมลูกของคุณได้ด้วยตนเอง

หากคุณไม่ต้องการใช้ CSS คุณยังสามารถหาปลั๊กอินเพื่อช่วยในการดำเนินการนี้ แม้ว่าปลั๊กอินส่วนใหญ่จะเน้นไปที่การปรับให้เหมาะสมสำหรับ Google Fonts:

• Asset CleanUp – รองรับ Google Fonts สำหรับฟอนต์ในเครื่องฟรีและกำหนดเองด้วยรุ่น Pro
• Perfmatters – เสนอคุณสมบัติสำหรับ Google Fonts

หากคุณใช้ Elementor ในการออกแบบไซต์ของคุณ Elementor ยังมีตัวเลือกในตัวเพื่อให้คุณใช้สำหรับหน้าเว็บที่คุณสร้างด้วย Elementor:

1. ไปที่ Elementor → การตั้งค่า
2. เปิดแท็บ ขั้นสูง
3. ตั้งค่าแบบเลื่อนลง Google Fonts Load ให้เท่ากับ Optional

สรุป

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

โดยทั่วไปมีสองส่วนในการปรับปรุง Largest Contentful Paint – เร่งเวลาตอบสนองของเซิร์ฟเวอร์ของคุณ จากนั้นปรับโค้ดของไซต์ของคุณให้เหมาะสมเพื่อแสดงผลองค์ประกอบ LCP โดยเร็วที่สุด

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

นอกจากนี้ ด้วยคุณสมบัติ Edge Caching ของ Kinsta คุณสามารถแคชหน้าไซต์ของคุณไปยังเครือข่ายทั่วโลกของ Cloudflare ซึ่งหมายความว่าผู้เยี่ยมชมจากทั่วโลกจะเพลิดเพลินไปกับเวลาตอบสนองของเซิร์ฟเวอร์ที่รวดเร็วปานสายฟ้าแลบ (และผลก็คือ เวลา LCP ที่เร็วปานสายฟ้าแลบ)

หากต้องการเรียนรู้เพิ่มเติม คุณสามารถดูหน้าเหล่านี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับโฮสติ้ง WordPress ที่มีการจัดการของ Kinsta หรือโฮสติ้ง WooCommerce ที่มีการจัดการของ Kinsta

หากคุณต้องการให้ผู้เชี่ยวชาญช่วยคุณปรับแต่งประสิทธิภาพ LCP แบบกำหนดเอง คุณสามารถค้นหาผู้ให้บริการได้ใน Kinsta Agency Directory