ควบคุมให้จำนวนคำขอมีไม่มากและการโอนมีขนาดเล็ก

Lighthouse รายงานจำนวนคำขอเครือข่ายและ จำนวนข้อมูลที่มีการโอนขณะที่หน้าโหลด:

ภาพหน้าจอของคําขอ Lighthouse Keep มีจำนวนต่ำและมีการตรวจสอบขนาดเล็ก
  • ค่า Requests และ Transfersize สำหรับแถว Total จะคำนวณโดยการเพิ่มค่าสำหรับแถว Image, Script, Font, Stylesheet, Other, Document และ Media
  • คอลัมน์บุคคลที่สามจะไม่รวมค่าของแถวทั้งหมด จุดประสงค์คือเพื่อให้คุณทราบจำนวนคำขอทั้งหมด และปริมาณการโอนทั้งหมดที่มาจากโดเมนของบุคคลที่สาม คำขอของบุคคลที่สามอาจเป็นการรวมกันของทรัพยากรประเภทอื่นๆ ก็ได้

วิธีลดจำนวนทรัพยากรและขนาดการโอน

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

CSS และ JavaScript

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

เมตริกที่ได้รับผลกระทบ: ทั้งหมด

รูปภาพ

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

เมตริกที่ได้รับผลกระทบ ได้แก่ First Contentful Paint, First Meaningful Paint, ดัชนีความเร็ว

แบบอักษร

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

เมตริกที่ได้รับผลกระทบ: First Contentful Paint

เอกสาร

หากไฟล์ HTML มีขนาดใหญ่ เบราว์เซอร์จะใช้เวลานานขึ้นในการแยกวิเคราะห์ HTML และสร้างโครงสร้าง DOM จาก HTML ที่แยกวิเคราะห์แล้ว

เมตริกที่ได้รับผลกระทบ: First Contentful Paint

สื่อ

ไฟล์ GIF แบบเคลื่อนไหวมักมีขนาดใหญ่มาก ดูแทนที่ GIF ด้วยวิดีโอเพื่อดูวิธีโหลดภาพเคลื่อนไหวให้เร็วขึ้น

เมตริกที่ได้รับผลกระทบ: First Contentful Paint

ใช้งบประมาณประสิทธิภาพเพื่อป้องกันการถดถอย

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

แหล่งข้อมูล

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