เพย์โหลดปริมาณมากของเครือข่ายสัมพันธ์กับเวลาการโหลดที่นานเป็นอย่างมาก ยังทำให้ผู้ใช้มีค่าใช้จ่าย เช่น ผู้ใช้อาจต้องจ่ายค่าอินเทอร์เน็ตมือถือเพิ่มเติม ดังนั้น การลดขนาดโดยรวมของคำขอเครือข่ายของหน้าเว็บจึงส่งผลดีต่อประสบการณ์ของผู้ใช้ในเว็บไซต์และกระเป๋าเงิน
วิธีที่การตรวจสอบเพย์โหลดเครือข่ายของ Lighthouse ล้มเหลว
Lighthouse แสดงขนาดรวมเป็นกิบิไบต์ (KiB) ของทรัพยากรทั้งหมดที่หน้าเว็บขอ คำขอที่มากที่สุดจะแสดงก่อน:
ตามข้อมูล HTTP Archive เพย์โหลดเครือข่ายจะอยู่ระหว่าง 1,700 ถึง 1,900 KiB Lighthouse จะแจ้งหน้าที่มีคำขอเครือข่ายทั้งหมดเกิน 5,000 KiB เพื่อช่วยแสดงเพย์โหลดสูงสุด
วิธีลดขนาดเพย์โหลด
พยายามรักษาขนาดไบต์รวมให้ต่ำกว่า 1,600 KiB เป้าหมายนี้อิงตามปริมาณข้อมูลที่ดาวน์โหลดตามหลักการใช้การเชื่อมต่อ 3G ได้ขณะที่ยังมีเวลาในการโต้ตอบไม่เกิน 10 วินาที
วิธีลดขนาดเพย์โหลดมีดังนี้
- เลื่อนคำขอจนกว่าจะจำเป็นต้องใช้ โปรดดูรูปแบบ PRPL เพื่อดูวิธีที่เป็นไปได้
- เพิ่มประสิทธิภาพคำขอให้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ เทคนิคที่เป็นไปได้มีดังนี้
- แคชคำขอเพื่อให้หน้าไม่ดาวน์โหลดทรัพยากรอีกครั้งเมื่อเข้าชมซ้ำ (ดูหน้า Landing Page ด้านความเสถียรของเครือข่าย เพื่อเรียนรู้วิธีการทำงานของการแคชและการนำไปใช้งาน)
คำแนะนำเฉพาะกลุ่ม
Angular
ใช้การแยกโค้ดระดับเส้นทางเพื่อลดขนาดกลุ่ม JavaScript และลองแคชเนื้อหาล่วงหน้าด้วย Angular Service Worker
Drupal
ลองใช้สไตล์รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เพื่อลดขนาดของรูปภาพที่โหลดในหน้า หากคุณใช้ข้อมูลพร็อพเพอร์ตี้เพื่อแสดงรายการเนื้อหาหลายรายการในหน้าเว็บ ให้ลองใช้การใส่เลขหน้าเพื่อจำกัดจำนวนของรายการเนื้อหาที่แสดงในหน้าหนึ่งๆ
จูมลา
ลองแสดงข้อความที่ตัดตอนมาในหมวดหมู่บทความ (โซลูชันที่ได้รับความนิยมอย่างหนึ่งคือลิงก์ "อ่านเพิ่มเติม") ลดจำนวนบทความที่แสดงในหน้าหนึ่งๆ แบ่งโพสต์ยาวๆ เป็นหลายหน้า หรือใช้ปลั๊กอินเพื่อโหลดความคิดเห็นแบบ Lazy Loading
WordPress
ลองแสดงข้อความที่ตัดตอนมาในรายการโพสต์ (คุณสามารถใช้แท็ก "เพิ่มเติม") ลดจำนวนโพสต์ที่แสดงในหน้าหนึ่งๆ แบ่งโพสต์ยาวๆ เป็นหลายหน้า หรือใช้ปลั๊กอินเพื่อโหลดความคิดเห็นแบบ Lazy Loading
แหล่งข้อมูล
ซอร์สโค้ดสำหรับการตรวจสอบหลีกเลี่ยงเปย์โหลดเครือข่ายปริมาณมาก