ทรัพยากรแบบข้อความควรแสดงผลโดยมีการบีบอัดเพื่อลดจำนวนไบต์เครือข่ายทั้งหมด ส่วนโอกาสในรายงาน Lighthouse จะแสดงทรัพยากรที่เป็นข้อความทั้งหมดที่ไม่ได้บีบอัด
วิธีที่ Lighthouse จัดการการบีบอัดข้อความ
Lighthouse รวบรวมการตอบกลับทั้งหมดที่มีลักษณะดังนี้
- มีประเภททรัพยากรที่เป็นข้อความ
- อย่าใส่ส่วนหัว
content-encodingที่ตั้งค่าเป็นbr,gzipหรือdeflate
จากนั้น Lighthouse จะบีบอัดแต่ละรายการด้วย GZIP เพื่อคำนวณการประหยัดที่อาจเกิดขึ้น
หากขนาดเดิมของการตอบกลับน้อยกว่า 1.4 KiB หรือหาก การประหยัดที่อาจเกิดขึ้นจากการบีบอัดน้อยกว่า 10% ของขนาดเดิม Lighthouse จะไม่แจ้งการตอบกลับนั้นในผลลัพธ์
เปิดใช้การบีบอัดข้อความในเซิร์ฟเวอร์
เปิดใช้การบีบอัดข้อความในเซิร์ฟเวอร์ที่แสดงการตอบกลับเหล่านี้เพื่อ ผ่านการตรวจสอบนี้
เมื่อเบราว์เซอร์ขอทรัพยากร เบราว์เซอร์จะใช้ส่วนหัวของคำขอ HTTP Accept-Encoding
เพื่อระบุอัลกอริทึมการบีบอัดที่รองรับ
Accept-Encoding: gzip, compress, br
หากเบราว์เซอร์รองรับ Brotli
(br) คุณควรใช้ Brotli เนื่องจากสามารถลดขนาดไฟล์ของทรัพยากรได้มากกว่า
อัลกอริทึมการบีบอัดอื่นๆ ค้นหา how to enable Brotli compression in <X> โดยที่
<X> คือชื่อเซิร์ฟเวอร์ ตั้งแต่เดือนธันวาคม 2022 เป็นต้นมา เบราว์เซอร์หลักทั้งหมดรองรับ Brotli ยกเว้น Safari ใน iOS ดูข้อมูลอัปเดตได้ที่
ความเข้ากันได้กับเบราว์เซอร์
ใช้ GZIP เป็นทางเลือกสำรองแทน Brotli GZIP ใช้ได้กับเบราว์เซอร์หลักทั้งหมด แต่มีประสิทธิภาพน้อยกว่า Brotli ดูตัวอย่างได้ที่การกำหนดค่าเซิร์ฟเวอร์
เซิร์ฟเวอร์ควรส่งส่วนหัวการตอบกลับ HTTP
Content-Encoding
เพื่อระบุอัลกอริทึมการบีบอัดที่ใช้
Content-Encoding: br
ตรวจสอบการบีบอัดการตอบกลับ
วิธีตรวจสอบว่าเซิร์ฟเวอร์บีบอัดการตอบกลับหรือไม่
กด Control+Shift+J (หรือ Command+Option+J บน Mac) เพื่อเปิด DevTools
คลิกแท็บเครือข่าย
- กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- คลิกคำขอที่ทำให้เกิดการตอบกลับที่คุณสนใจ
- คลิกแท็บส่วนหัว
- ตรวจสอบส่วนหัว
content-encodingในส่วนส่วนหัวของการตอบกลับ
content-encoding
วิธีเปรียบเทียบขนาดของคำตอบที่บีบอัดและไม่ได้บีบอัด
- กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- เปิดใช้แถวคำขอขนาดใหญ่ ดูใช้แถวคำขอขนาดใหญ่
- ดูคอลัมน์ขนาดสำหรับคำตอบที่คุณสนใจ ค่าสูงสุดคือขนาดที่บีบอัด ค่าด้านล่างคือขนาดที่ บีบอัดแล้ว
ดูลดขนาดและบีบอัดเพย์โหลดของเครือข่ายด้วย
คำแนะนำเฉพาะสำหรับกองซ้อน
- Drupal: ทรัพยากรแบบข้อความควรแสดงผลโดยมีการบีบอัด (Gzip, Deflate หรือ Brotli) เพื่อลดจำนวนไบต์เครือข่ายทั้งหมด ลองใช้ CDN ที่รองรับการดำเนินการนี้ตามปกติ หรือกำหนดค่าเว็บเซิร์ฟเวอร์ให้ดำเนินการนี้ ดูข้อมูลเพิ่มเติม
- Joomla: เปิดใช้การตั้งค่าการบีบอัดหน้าของ Gzip (ระบบ > การกำหนดค่าส่วนกลาง > เซิร์ฟเวอร์)
- WordPress: เปิดใช้การบีบอัดข้อความในการกำหนดค่าเว็บเซิร์ฟเวอร์