ทรัพยากรแบบข้อความควรแสดงผลโดยมีการบีบอัด เพื่อลดจำนวนไบต์ของเครือข่ายทั้งหมด ส่วนโอกาสของรายงาน 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
ตรวจสอบว่ามีการบีบอัดการตอบกลับในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หรือไม่
หากต้องการตรวจสอบว่าเซิร์ฟเวอร์บีบอัดการตอบกลับหรือไม่ ให้ทำดังนี้
กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บ Network
[ความคิดเห็น]: <> (รายการต่อไปนี้เป็นรหัสย่อจาก web.dev แต่ไม่ได้แปลจากภาษาอังกฤษสำหรับทุกภาษา)
1. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. คลิกคำขอที่ทำให้เกิดการตอบสนองที่คุณสนใจ
4. คลิกแท็บส่วนหัว
5. ตรวจสอบส่วนหัว content-encoding ในส่วน ส่วนหัวการตอบกลับ
content-encoding
วิธีเปรียบเทียบขนาดของการตอบกลับที่บีบอัดและคลายการบีบอัด
[ความคิดเห็น]: <> (รายการต่อไปนี้เป็นรหัสย่อจาก web.dev แต่ไม่ได้แปลจากภาษาอังกฤษสำหรับทุกภาษา)
1. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. เปิดใช้แถวคำขอขนาดใหญ่
โปรดดูหัวข้อใช้แถวคำขอขนาดใหญ่
4. ดูคอลัมน์ขนาดเพื่อดูคำตอบที่คุณสนใจ ค่าบนสุดคือขนาดที่บีบอัด ค่าด้านล่างคือขนาดที่บีบอัด
โปรดดูหัวข้อลดขนาดและบีบอัดเพย์โหลดของเครือข่าย
คำแนะนำเฉพาะกลุ่ม
จูมลา
เปิดใช้การตั้งค่าการบีบอัดหน้าเว็บ Gzip (ระบบ > การกำหนดค่าส่วนกลาง > เซิร์ฟเวอร์)
WordPress
เปิดใช้การบีบอัดข้อความในการกำหนดค่าเว็บเซิร์ฟเวอร์