หลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก

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

วิธีที่การตรวจสอบเพย์โหลดของเครือข่าย Lighthouse ล้มเหลว

Lighthouse จะแสดงขนาดรวมเป็น กิบิไบต์ (KiB) ของทรัพยากรทั้งหมดที่หน้าเว็บขอ ระบบจะแสดงคำขอที่มีขนาดใหญ่ที่สุดก่อน

ภาพหน้าจอของการตรวจสอบ "หลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก" ของ Lighthouse

ข้อมูลพร็อพเพอร์ตี้ HTTP Archive ระบุว่าค่ามัธยฐานของเพย์โหลดเครือข่ายอยู่ระห��่า�� 1,700 ��ึง 1,900 KiB Lighthouse จะแจ้งว่าหน้าเว็บที่มีคำขอเครือข่ายทั้งหมดเกิน 5,000 KiB เพื่อแสดงเพย์โหลดที่สูงที่สุด

วิธีลดขนาดเพย์โหลด

พยายามทำให้ขนาดไบต์รวมต่ำกว่า 1,600 KiB เป้าหมายนี้อิงตามปริมาณข้อมูลที่ดาวน์โหลดได้ในทางทฤษฎีในการเชื่อมต่อ 3G ขณะยังคงมีเวลาในการตอบสนองไม่เกิน 10 วินาที

ต่อไปนี้เป็นวิธีต่างๆ ในการรักษาขนาดเพย์โหลดให้ต่ำ

คำแนะนำเฉพาะสแต็ก

Angular

ใช้การแยกโค้ดระดับเส้นทางเพื่อลดขนาดกลุ่ม JavaScript และลองแคชเนื้อหาล่วงหน้าด้วย Angular Service Worker

Drupal

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

Joomla

ลองแสดงข้อความที่ตัดตอนมาในหมวดหมู่บทความ (วิธีแก้ปัญหายอดนิยมอย่างหนึ่งคือลิงก์ "อ่านเพิ่มเติม") ลดจำนวนบทความที่แสดงในหน้าหนึ่งๆ แบ่งโพสต์ยาวๆ เป็นหลายหน้า หรือใช้ปลั๊กอินเพื่อโหลดความคิดเห็นแบบ Lazy Loading

WordPress

ลองแสดงข้อความที่ตัดตอนมาในรายการโพสต์ (ใช้แท็ก "เพิ่มเติม" ได้) ลดจำนวนโพสต์ที่แสดงในหน้าหนึ่งๆ แบ่งโพสต์ยาวๆ เป็นหลายหน้า หรือใช้ปลั๊กอินเพื่อโหลดความคิดเห็นแบบ Lazy Loading

แหล่งข้อมูล

ซอร์สโค้ดสําหรับการตรวจสอบหลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก