วิธีการวัดสีเนื้อหาที่ใหญ่ที่สุดของเว็บไซต์ของคุณ
เรียกใช้การทดสอบความเร็วเว็บไซต์ฟรีเพื่อค้นหา ความเร็ว LCP ของคุณจะแสดงทันที
ผลการทดสอบความเร็วของคุณจะบอกคุณว่า:
- เป็นไปตามเกณฑ์ LCP
- คุณต้องเพิ่มประสิทธิภาพ Core Web Vital อื่นๆ
การคำนวณสีเนื้อหาที่ใหญ่ที่สุดเป็นอย่างไร
Google พิจารณาที่เปอร์เซ็นไทล์ที่ 75 ของประสบการณ์ ซึ่งหมายความว่า 25% ของผู้เข้าชมเว็บไซต์จริงพบเวลาในการโหลด LCP ที่ 3.09 วินาทีหรือสูงกว่า ในขณะที่ 75% ของผู้ใช้ LCP ต่ำกว่า 3.09 วินาที
ในตัวอย่างนี้ LCP ของผู้ใช้จริงแสดงเป็น 3.09 วินาที
ภาพหน้าจอของข้อมูล Core Web Vitals ของ DebugBear.com เดือนพฤศจิกายน 2022
ผลการทดสอบในห้องปฏิบัติการเกี่ยวกับข้อมูล Core Web Vitals ของฉันเป็นอย่างไร
ด้วยการทดสอบความเร็วเว็บเฉพาะนี้ คุณจะเห็นเมตริกในห้องปฏิบัติการที่รวบรวมในสภาพแวดล้อมการทดสอบที่มีการควบคุม แม้ว่าเมตริกเหล่านี้จะไม่ส่งผลกระทบโดยตรงต่อการจัดอันดับของ Google แต่ก็มีข้อดีสองประการของข้อมูลนี้:
- เมตริกจะอัปเดตทันทีที่คุณปรับปรุงเว็บไซต์ของคุณ ในขณะที่ข้อมูลตามเวลาจริงของ Google จะใช้เวลา 28 วันในการอัปเดตทั้งหมด
- คุณจะได้รับรายงานโดยละเอียดนอกเหนือจากเมตริก ซึ่งจะช่วยคุณเพิ่มประสิทธิภาพเว็บไซต์ได้
นอกจากนี้ PageSpeed Insights ยังให้ข้อมูลห้องปฏิบัติการ แต่โปรดทราบว่าข้อมูลที่รายงานอาจทำให้เข้าใจผิดได้ในบางครั้ง เนื่องจากการจำลองการควบคุมปริมาณที่ใช้เพื่อจำลองการเชื่อมต่อเครือข่ายที่ช้าลง
คุณจะหาองค์ประกอบสีที่น่าพึงพอใจที่ใหญ่ที่สุดของคุณได้อย่างไร?
เมื่อคุณรันการทดสอบความเร็วเพจด้วย DebugBear องค์ประกอบ LCP จะถูกเน้นในผลการทดสอบ
บางครั้ง องค์ประกอบ LCP อาจเป็นรูปภาพขนาดใหญ่ และในบางครั้ง องค์ประกอบดังกล่าวอาจเป็นข้อความส่วนใหญ่
ไม่ว่าองค์ประกอบ LCP ของคุณจะเป็นรูปภาพหรือข้อความ เนื้อหา LCP จะไม่ปรากฏจนกว่าหน้าของคุณจะเริ่มแสดงผล
ตัวอย่างเช่น ในหน้าด้านล่าง ภาพพื้นหลังมีหน้าที่รับผิดชอบในการระบายสีที่ใหญ่ที่สุด
ภาพหน้าจอของ DebugBear.com เดือนพฤศจิกายน 2022
ในทางตรงกันข้าม LCP ของหน้านี้เป็นย่อหน้าของข้อความ
ภาพหน้าจอของ DebugBear.com เดือนพฤศจิกายน 2022
หากต้องการปรับปรุง Largest Contentful Paint (LCP) ของเว็บไซต์ของคุณ คุณต้องแน่ใจว่าองค์ประกอบ HTML ที่รับผิดชอบ LCP ปรากฏขึ้นอย่างรวดเร็ว

วิธีการปรับปรุงสีเนื้อหาที่ใหญ่ที่สุด
ในการปรับปรุง LCP คุณต้อง:
- ค้นหาทรัพยากรที่จำเป็นในการทำให้องค์ประกอบ LCP ปรากฏขึ้น
- ดูวิธีที่คุณสามารถโหลดทรัพยากรเหล่านั้นได้เร็วขึ้น (หรือไม่โหลดเลย)
ตัวอย่างเช่น หากองค์ประกอบ LCP เป็นภาพถ่าย คุณสามารถลดขนาดไฟล์ของรูปภาพได้
หลังจากรันการทดสอบความเร็วของ DebugBear แล้ว คุณสามารถคลิกเมตริกประสิทธิภาพแต่ละรายการเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเพิ่มประสิทธิภาพ
ภาพหน้าจอของการวิเคราะห์ Largest Contentful Paint แบบละเอียดใน DebugBear.com เดือนพฤศจิกายน 2022
ทรัพยากรทั่วไปที่ส่งผลต่อ LCP คือ:
- ทรัพยากรการบล็อกการแสดงผล
- ภาพที่ไม่ได้รับการเพิ่มประสิทธิภาพ
- รูปแบบภาพที่ล้าสมัย
- แบบอักษรที่ไม่ได้ปรับให้เหมาะสม
วิธีลดทรัพยากรการบล็อกการแสดงผล
ทรัพยากรการบล็อกการแสดงผลคือไฟล์ที่ต้องดาวน์โหลดก่อนที่เบราว์เซอร์จะเริ่มวาดเนื้อหาของหน้าบนหน้าจอ สไตล์ชีต CSS มักจะบล็อกการแสดงผล เช่นเดียวกับแท็กสคริปต์จำนวนมาก
หากต้องการลดผลกระทบด้านประสิทธิภาพของทรัพยากรการบล็อกการแสดงผล คุณสามารถ:
- ระบุว่าทรัพยากรใดบ้างที่บล็อกการเรนเดอร์
- ทบทวนว่าทรัพยากรนั้นจำเป็นหรือไม่
- ตรวจสอบว่าทรัพยากรจำเป็นต้องบล็อกการแสดงผลหรือไม่
- ดูว่าสามารถโหลดทรัพยากรได้เร็วขึ้นหรือไม่ เช่น การใช้การบีบอัด
วิธีง่ายๆ: ใน Waterfall ของคำขอ DebugBear คำขอสำหรับทรัพยากรการบล็อกการแสดงผลจะถูกทำเครื่องหมายด้วยแท็ก "การบล็อก"
ภาพหน้าจอของ DebugBear.com เดือนพฤศจิกายน 2022
วิธีจัดลำดับความสำคัญและเพิ่มความเร็วคำขอภาพ LCP
ในส่วนนี้ เราจะใช้ประโยชน์จากแอตทริบิวต์ "fetchpriority" ใหม่บนรูปภาพเพื่อช่วยให้เบราว์เซอร์ของผู้เยี่ยมชมระบุได้อย่างรวดเร็วว่ารูปภาพใดควรโหลดก่อน
ใช้แอตทริบิวต์นี้กับองค์ประกอบ LCP ของคุณ
ทำไม
เมื่อดูที่ HTML เบราว์เซอร์มักจะไม่สามารถบอกได้ทันทีว่าภาพใดมีความสำคัญ ภาพหนึ่งอาจเป็นภาพพื้นหลังขนาดใหญ่ ในขณะที่อีกภาพหนึ่งอาจเป็นส่วนเล็กๆ ของส่วนท้ายของเว็บไซต์
ดังนั้น ในขั้นต้นรูปภาพทั้งหมดจะถือว่ามีลำดับความสำคัญต่ำ จนกว่าหน้าจะแสดงผลและเบราว์เซอร์รู้ว่ารูปภาพนั้นปรากฏที่ใด
อย่างไรก็ตาม นั่นอาจหมายความว่าเบราว์เซอร์เริ่มดาวน์โหลดอิมเมจ LCP ค่อนข้างช้าเท่านั้น
มาตรฐานเว็บ Priority Hints ใหม่ช่วยให้เจ้าของเว็บไซต์สามารถให้ข้อมูลเพิ่มเติมเพื่อช่วยให้เบราว์เซอร์จัดลำดับความสำคัญของรูปภาพและแหล่งข้อมูลอื่นๆ
ในตัวอย่างด้านล่าง เราจะเห็นว่าเบราว์เซอร์ใช้เวลารอนานตามที่ระบุโดยแถบสีเทา
ภาพหน้าจอของรูปภาพ LCP ที่มีลำดับความสำคัญต่ำบน DebugBear.com เดือนพฤศจิกายน 2022
เราจะเลือกภาพ LCP นี้เพื่อเพิ่มแอตทริบิวต์ "fetchpriority"
วิธีเพิ่มแอตทริบิวต์ “FetchPriority” ให้กับรูปภาพ
เพียงเพิ่มแอตทริบิวต์ fetchpriority=”high” ลงในแท็ก HTML img เบราว์เซอร์จะจัดลำดับความสำคัญในการดาวน์โหลดรูปภาพนั้นโดยเร็วที่สุด
<img src="photo.jpg" fetchpriority="high" />
วิธีใช้รูปแบบรูปภาพสมัยใหม่และขนาดรูปภาพอย่างเหมาะสม
รูปภาพที่มีความละเอียดสูงมักจะมีขนาดไฟล์ที่ใหญ่ ซึ่งหมายความว่าจะใช้เวลาดาวน์โหลดนาน
ในผลการทดสอบความเร็วด้านล่าง คุณสามารถดูได้โดยดูที่พื้นที่สีเทาสีน้ำเงินเข้ม แต่ละบรรทัดจะระบุรูปภาพบางส่วนที่เข้ามาในเบราว์เซอร์
ภาพหน้าจอของภาพ LCP ขนาดใหญ่บน DebugBear.com เดือนพฤศจิกายน 2022
มีสองวิธีในการลดขนาดรูปภาพ:
- ตรวจสอบให้แน่ใจว่าความละเอียดของภาพต่ำที่สุดเท่าที่จะเป็นไปได้ พิจารณาการแสดงภาพที่ความละเอียดต่างกันขึ้นอยู่กับขนาดอุปกรณ์ของผู้ใช้
- ใช้รูปแบบรูปภาพที่ทันสมัย เช่น WebP ซึ่งสามารถจัดเก็บรูปภาพที่มีคุณภาพเท่ากันในขนาดไฟล์ที่ต่ำกว่า
วิธีเพิ่มประสิทธิภาพเวลาในการโหลดแบบอักษร
หากองค์ประกอบ LCP เป็นส่วนหัวหรือย่อหน้า HTML สิ่งสำคัญคือต้องโหลดแบบอักษรสำหรับกลุ่มข้อความนี้อย่างรวดเร็ว
วิธีหนึ่งในการบรรลุเป้าหมายนี้คือการใช้แท็กโหลดล่วงหน้าที่สามารถบอกให้เบราว์เซอร์โหลดแบบอักษรก่อนเวลา
กฎ CSS ที่แสดงแบบอักษร: swap ยังสามารถรับประกันการแสดงผลที่รวดเร็วขึ้น เนื่องจากเบราว์เซอร์จะแสดงผลข้อความด้วยแบบอักษรเริ่มต้นทันทีก่อนที่จะเปลี่ยนเป็นแบบอักษรเว็บในภายหลัง
ภาพหน้าจอของแบบอักษรบนเว็บที่ทำให้ LCP ล่าช้าใน DebugBear.com เดือนพฤศจิกายน 2022
ตรวจสอบเว็บไซต์ของคุณเพื่อให้ LCP รวดเร็ว
การตรวจสอบเว็บไซต์ของคุณอย่างต่อเนื่องไม่เพียงแต่ช่วยให้คุณตรวจสอบว่าการเพิ่มประสิทธิภาพ LCP ของคุณใช้งานได้ แต่ยังทำให้แน่ใจว่าคุณได้รับการแจ้งเตือนหาก LCP ของคุณแย่ลง
DebugBear สามารถตรวจสอบ Core Web Vitals และเมตริกความเร็วไซต์อื่นๆ เมื่อเวลาผ่านไป นอกจากการทดสอบในห้องปฏิบัติการเชิงลึกแล้ว ผลิตภัณฑ์ยังติดตามเมตริกผู้ใช้จริงจาก Google อีกด้วย
ลอง DebugBear พร้อมทดลองใช้ฟรี 14 วัน
ภาพหน้าจอของข้อมูลการตรวจสอบความเร็วไซต์บน DebugBear.com เดือนพฤศจิกายน 2022