เพิ่มประสิทธิภาพการเข้ารหัสและขนาดการโอนของเนื้อหาแบบข้อความ

Ilya Grigorik

Jeremy Wagner

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

การบีบอัดข้อมูล 101

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

การมอบประสิทธิภาพที่ดีที่สุดต้องใช้เทคนิคต่อไปนี้ร่วมกัน

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

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

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

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

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. ข้อความอาจมีคำอธิบายประกอบที่ไม่เจาะจง ซึ่งบางครั้งเรียกว่าความคิดเห็น ซึ่งระบุด้วยคำนำหน้า "#" คําอธิบายประกอบจะไม่ส่งผลต่อความหมายของข้อความหรือลักษณะการทํางานของข้อความ
2. ข้อความอาจมีส่วนหัว ซึ่งเป็นคู่คีย์-ค่า (คั่นด้วย ":" ในตัวอย่างก่อนหน้านี้) ที่ปรากฏขึ้นที่จุดเริ่มต้นของข้อความ
3. ข้อความมีเพย์โหลดข้อความ

ฉันจะลดขนาดของข้อความก่อนหน้าซึ่งมีความยาวตั้งแต่ 200 อักขระขึ้นไปได้อย่างไร

1. ความคิดเห็นนี้น่าสนใจ แต่จะไม่ส่งผลต่อความหมายของข้อความ ลบออกเมื่อส่งข้อความ
2. มีเทคนิคที่ดีในการเข้ารหัสส่วนหัวอย่างมีประสิทธิภาพ เช่น หากคุณรู้ว่าข้อความทั้งหมดมี "รูปแบบ" และ "วันที่" คุณสามารถแปลงทั้ง 2 อย่างนี้เป็นรหัสจำนวนเต็มสั้นๆ และส่งรหัสเหล่านั้น อย่างไรก็ตาม ข้อมูลดังกล่าวอาจไม่ถูกต้อง ดังนั้นคุณจึงควรปล่อยไว้ก่อน
3. เพย์โหลดเป็นข้อความเท่านั้น แม้ว่าเราจะไม่ทราบเนื้อหาที่แท้จริงของไฟล์ (ดูเหมือนว่าจะใช้ "secret-cipher") แต่เพียงดูที่ข้อความก็พบว่ามีข้อมูลซ้ำซ้อนกันมาก หรือแทนที่จะส่งตัวอักษรที่ซ้ำกัน คุณสามารถนับจำนวนตัวอักษรที่ซ้ำและเข้ารหัสอย่างมีประสิทธิภาพมากขึ้น เช่น "AAA" จะกลายเป็น "3A" ที่แสดงลำดับของ A 3 ตัว

การรวมเทคนิคเหล่านี้เข้าด้วยกันจะทำให้ได้ผลลัพธ์ต่อไปนี้

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

ข้อความใหม่มีความยาว 56 อักขระ ซึ่งหมายความว่าคุณได้บีบอัดข้อความต้นฉบับลง 72% นี่เป็นจำนวนที่ลดลงอย่างมาก

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

การทำให้ไฟล์มีขนาดเล็ก: การจัดเตรียมล่วงหน้า และการเพิ่มประสิทธิภาพตามบริบท

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

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

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

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

พิจารณาตัวอย่างข้อมูล HTML ก่อนหน้าและเนื้อหา 3 ประเภทที่แตกต่างกันซึ่งมีดังนี้

1. มาร์กอัป HTML
2. CSS เพื่อปรับแต่งการนำเสนอหน้าเว็บ
3. JavaScript เพื่อขับเคลื่อนการโต้ตอบและความสามารถขั้นสูงอื่นๆ ของหน้าเว็บ

เนื้อหาแต่ละประเภทเหล่านี้มีกฎที่แตกต่างกันสำหรับสิ่งที่ถือเป็นเนื้อหาที่ถูกต้อง กฎที่แตกต่างกันสำหรับการระบุความคิดเห็น และอื่นๆ แต่คำถามที่ยังคงอยู่คือ "จะลดขนาดของหน้าเว็บนี้ได้อย่างไร"

• ความคิดเห็นโค้ดเป็นเพื่อนที่ดีที่สุดของนักพัฒนาซอฟต์แวร์ แต่เบราว์เซอร์ไม่ต้องการความคิดเห็นเหล่านั้น การลบความคิดเห็น CSS (/* ... */), HTML (<!-- ... -->) และ JavaScript (// ...) จะลดขนาดการโอนทั้งหมดของหน้าเว็บและทรัพยากรย่อย
• คอมเพรสเซอร์ CSS ที่ "ชาญฉลาด" อาจสังเกตได้ว่าเรากำลังใช้วิธีกำหนดกฎสำหรับ .awesome-container ที่ไม่มีประสิทธิภาพ และยุบการประกาศทั้ง 2 รายการให้เหลือเพียง 1 รายการโดยไม่ส่งผลกระทบต่อรูปแบบอื่นๆ ทำให้ประหยัดไบต์ได้มากขึ้น สำหรับกฎ CSS ขนาดใหญ่ การนำความซ้ำซ้อนประเภทนี้ออกอาจเพิ่มมากขึ้นได้ แต่ก็อาจไม่ใช่สิ่งที่จะนำไปใช้ได้จริง เนื่องจากตัวเลือกมักจะซ้ำกันในบริบทที่แตกต่างกัน เช่น ภายในคำค้นหาสื่อ
• การเว้นวรรคและการแท็บเป็นสิ่งที่อำนวยความสะดวกให้แก่นักพัฒนาซอฟต์แวร์ใน HTML, CSS และ JavaScript โปรแกรมบีบอัดเพิ่มเติมอาจตัดแท็บและเว้นวรรคทั้งหมดออก การเพิ่มประสิทธิภาพประเภทนี้ต่างจากเทคนิคการกรองข้อมูลที่ซ้ำกันออกอื่นๆ ตรงที่สามารถนำมาใช้ได้ค่อนข้างมาก ตราบใดที่ไม่จำเป็นต้องมีการเว้นวรรคหรือแท็บดังกล่าวในการนำเสนอหน้าเว็บ เช่น คุณต้องการรักษาพื้นที่ภายในรันข้อความในเอกสาร HTML ไว้เพราะจะทำให้อ่านเนื้อหาได้ง่ายซึ่งผู้ใช้จะเห็นจริงๆ

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

หลังจากทำตามขั้นตอนก่อนหน้า หน้าเว็บมีความยาวจาก 516 เป็น 204 อักขระ ซึ่งประหยัดพื้นที่ได้ประมาณ 60% โค้ดนี้อ่านยาก แต่ไม่จำเป็นต้องอ่านเพื่อให้ใช้งานได้ แนวทางปฏิบัติด้านการพัฒนาสมัยใหม่ยังช่วยให้คุณจัดเก็บซอร์สโค้ดเวอร์ชันที่มีการจัดรูปแบบและอ่านได้ง่ายแยกจากโค้ดที่เพิ่มประสิทธิภาพอย่างดีซึ่งคุณนำไปใช้งานจริงได้อีกด้วย เมื่อใช้ร่วมกับสําเนาที่มา ซึ่งแสดงการนําเสนอโค้ดที่แปลงแล้วในเวอร์ชันที่อ่านได้ คุณจะสามารถแก้ปัญหาข้อบกพร่องในเวอร์ชันที่ใช้งานจริงได้ง่ายขึ้น ทั้งยังได้รับประสบการณ์การใช้งานที่ดีในฐานะนักพัฒนาซอฟต์แวร์ไปพร้อมกับการเพิ่มประสิทธิภาพเพื่อประสบการณ์ของผู้ใช้

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

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

หมายเหตุ: ในกรณีนี้ เวอร์ชันพัฒนาที่ไม่มีการบีบอัดของเฟรมเวิร์กยอดนิยมจะมีปริมาณมากกว่าขอบเขตที่เทียบเท่ากันสำหรับใช้ในเวอร์ชันที่ใช้งานจริง ตัวอย่างเช่น เวอร์ชันสำหรับนักพัฒนาซอฟต์แวร์ของ Angular 1.8.3 มีขนาดใหญ่เกือบ 1.4 เมกะไบต์ เวอร์ชันที่ใช้งานจริงมีขนาด 177 กิโลไบต์ ตัวเลขนี้แสดงให้เห็นถึงศักยภาพของการเพิ่มประสิทธิภาพเหล่านี้อย่างชัดเจน

ในทํานองเดียวกัน เทคนิคที่อธิบายไว้ข้างต้นยังใช้กับชิ้นงานอื่นๆ นอกเหนือจากชิ้นงานแบบข้อความได้ด้วย รูปภาพ วิดีโอ และเนื้อหาประเภทอื่นๆ ทั้งหมดมีรูปแบบข้อมูลเมตาและเพย์โหลดที่หลากหลายเป็นของตัวเอง ตัวอย่างเช่น เมื่อคุณถ่ายรูปด้วยกล้อง โดยทั่วไปไฟล์ของรูปภาพจะฝังข้อมูลอื่นๆ ไว้มากมาย เช่น การตั้งค่ากล้อง ตำแหน่ง และอื่นๆ ข้อมูลนี้อาจมีความสำคัญ (เช่น เว็บไซต์การแชร์รูปภาพ) หรืออาจไม่มีประโยชน์ใดๆ เลย ทั้งนี้ขึ้นอยู่กับแอปพลิเคชันของคุณ คุณควรพิจารณาว่าควรนำออกไหม ในทางปฏิบัติ ข้อมูลเมตานี้อาจเพิ่มขนาดไฟล์ได้สูงสุด 10-20 KB สำหรับรูปภาพแต่ละรูป

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

การบีบอัดข้อความด้วยอัลกอริทึมการบีบอัด

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

• gzip และ Brotli เป็นอัลกอริทึมการบีบอัดที่ใช้กันโดยทั่วไปซึ่งมีประสิทธิภาพดีที่สุดกับชิ้นงานแบบข้อความ เช่น CSS, JavaScript, HTML
• เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับการบีบอัด Gzip และ Brotli และจะแสดงโฆษณาการรองรับทั้ง 2 รูปแบบในส่วนหัวของคำขอ HTTP Accept-Encoding
• คุณต้องกำหนดค่าเซิร์ฟเวอร์เพื่อเปิดใช้การบีบอัด ซอฟต์แวร์เว็บเซิร์ฟเวอร์มักจะเปิดใช้โมดูลเพื่อบีบอัดทรัพยากรแบบข้อความโดยค่าเริ่มต้น
• ทั้ง gzip และ Brotli สามารถปรับแต่งเพื่อปรับปรุงอัตราส่วนการบีบอัดได้โดยการปรับระดับการบีบอัด สําหรับ Gzip การตั้งค่าการบีบอัดมีตั้งแต่ 1 ถึง 9 โดย 9 เป็นค่าที่ดีที่สุด สำหรับ Brotli ช่วงนี้คือ 0 ถึง 11 โดย 11 คือดีที่สุด อย่างไรก็ตาม การตั้งค่าการบีบอัดที่สูงขึ้นจะใช้เวลานานขึ้น สำหรับทรัพยากรที่บีบอัดแบบไดนามิก ซึ่งก็คือเมื่อมีการขอ การตั้งค่าในช่วงกลางของช่วงมีแนวโน้มที่จะให้ผลลัพธ์ที่ดีที่สุดระหว่างอัตราส่วนการบีบอัดกับความเร็ว อย่างไรก็ตาม อาจมีการบีบอัดแบบคงที่ ซึ่งก็คือเมื่อมีการบีบอัดการตอบสนองก่อนเวลา ดังนั้นจึงใช้การตั้งค่าการบีบอัดที่เข้มงวดที่สุดที่มีสำหรับอัลกอริทึมการบีบอัดแต่ละรายการได้
• เครือข่ายนำส่งข้อมูล (CDN) มักเสนอการบีบอัดอัตโนมัติของทรัพยากรที่มีคุณสมบัติตามเกณฑ์ CDN ยังจัดการการบีบอัดแบบไดนามิกและแบบคงที่ให้คุณได้ คุณจึงไม่ต้องกังวลเกี่ยวกับการบีบอัด

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

หมายเหตุ: หากต้องการคำอธิบายเชิงลึกเพิ่มเติมเกี่ยวกับวิธีการทำงานของการบีบอัด โปรดดูคำอธิบายระดับล่างที่ยอดเยี่ยมเกี่ยวกับ gzip นี้ หากต้องการทดสอบการบีบอัดข้อความ ให้ลองใช้ Codelab gzip และ Brotli

ในทางปฏิบัติ ทั้ง gzip และ Brotli จะทำงานได้ดีที่สุดกับเนื้อหาที่เป็นข้อความ โดยมักจะมีอัตราการบีบอัดสูงถึง 70-90% สำหรับไฟล์ขนาดใหญ่ อย่างไรก็ตาม การใช้อัลกอริทึมเหล่านี้กับชิ้นงานที่บีบอัดโดยใช้อัลกอริทึมอื่นอยู่แล้ว เช่น รูปแบบรูปภาพส่วนใหญ่ที่ใช้เทคนิคการบีบอัดแบบไม่สูญเสียหรือแบบสูญเสียคุณภาพ จะให้ผลลัพธ์เพียงเล็กน้อยหรือไม่ได้ผลลัพธ์ใดๆ เลย

เบราว์เซอร์สมัยใหม่ทั้งหมดจะแสดงการรองรับ gzip และ Brotli ในส่วนหัวของคำขอ HTTP Accept-Encoding อย่างไรก็ตาม ผู้ให้บริการโฮสติ้งมีหน้าที่ตรวจสอบว่าเว็บเซิร์ฟเวอร์ได้รับการกำหนดค่าอย่างเหมาะสมเพื่อให้บริการทรัพยากรที่บีบอัดเมื่อไคลเอ็นต์ร้องขอ

ไฟล์	อัลกอริทึม	ขนาดที่ไม่ได้บีบอัด	ขนาดไฟล์ที่บีบอัด	อัตราส่วนการบีบอัด
angular-1.8.3.js	บรอทลี	1,346 KiB	256 KB	81%
angular-1.8.3.js	gzip	1,346 KiB	329 KiB	76%
angular-1.8.3.min.js	Brotli	173 KiB	53 KB	69%
angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	บรอทลี	302 KiB	69 KiB	77%
jquery-3.7.1.js	gzip	302 KB	83 KiB	73%
jquery-3.7.1.min.js	Brotli	85 KiB	27 KiB	68%
jquery-3.7.1.min.js	gzip	85 KiB	30 KiB	65%
lodash-4.17.21.js	Brotli	531 KB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KB	94 KiB	82%
lodash-4.17.21.min.js	Brotli	71 KiB	23 KiB	68%
lodash-4.17.21.min.js	gzip	71 KiB	25 KiB	65%

ตารางก่อนหน้านี้แสดงการประหยัดที่ทั้งการบีบอัด Brotli และ gzip สามารถมอบให้สำหรับไลบรารี JavaScript ที่รู้จักกันดีจำนวนหนึ่ง โดยการประหยัดจะอยู่ที่ 65% ถึง 86% โดยขึ้นอยู่กับไฟล์และอัลกอริทึม ข้อมูลอ้างอิงคือมีการใช้ระดับการบีบอัดสูงสุดกับไฟล์แต่ละไฟล์สำหรับทั้ง Brotli และ gzip ใช้ Brotli แทน gzip ทุกครั้งที่เป็นไปได้

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

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

วิธีที่รวดเร็วในการดูการทำงานของการบีบอัดคือการเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, เปิดแผงเครือข่าย โหลดหน้าที่ต้องการ และสังเกตที่ส่วนล่างสุดของแผงเครือข่าย

การแสดงขนาดการโอน (นั่นคือ ข้อมูลที่บีบอัด) ของทรัพยากรหน้าเว็บทั้งหมดเทียบกับขนาดจริงตามที่แสดงในแผงเครือข่ายของ Chrome DevTools

คุณควรเห็นรายละเอียดต่อไปนี้เช่นเดียวกับในรูปภาพก่อนหน้า

• จํานวนคําขอ ซึ่งเป็นจํานวนทรัพยากรที่โหลดสําหรับหน้าเว็บ
• ขนาดการโอนของคำขอทั้งหมด สิ่งนี้แสดงถึงประสิทธิภาพของการบีบอัดที่ใช้กับทรัพยากรของหน้า
• ขนาดทรัพยากรของคำขอทั้งหมด ค่านี้แสดงขนาดของทรัพยากรสำหรับหน้าเว็บหลังจากการขยายไฟล์

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

ผลต่อ Core Web Vitals

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

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

• ทรัพยากร HTML ที่ถูกลดขนาดและบีบอัดจะช่วยปรับปรุงการโหลด HTML นั้น ซึ่งจะช่วยให้ค้นพบทรัพยากรย่อยได้ง่ายขึ้น และทำให้การโหลดทรัพยากรดังกล่าวดีขึ้น ซึ่งอาจส่งผลดีต่อ Largest Contentful Paint (LCP) ของหน้าเว็บ แม้ว่าการใช้คำแนะนำทรัพยากร เช่น rel="preload" จะส่งผลต่อความสามารถในการค้นพบทรัพยากรได้ แต่การใช้คำแนะนำมากเกินไปอาจทำให้เกิดปัญหาการแย่งแบนด์วิดท์ เครื่องมือสแกนการโหลดล่วงหน้าจะค้นพบทรัพยากรภายในได้เร็วที่สุดเมื่อมีการบีบอัดการตอบกลับ HTML สําหรับคําขอไปยังส่วนต่างๆ
• ตัวเลือก LCP บางรายการอาจโหลดได้เร็วขึ้นโดยใช้การบีบอัด ตัวอย่างเช่น รูปภาพ SVG ที่อาจเป็น LCP สามารถลดระยะเวลาในการโหลดทรัพยากรได้ผ่านการบีบอัดแบบข้อความ ซึ่งแตกต่างจากการเพิ่มประสิทธิภาพที่คุณจะทำกับรูปภาพประเภทอื่นๆ ซึ่งมีการบีบอัดอยู่แล้วโดยวิธีการบีบอัดอื่นๆ เช่น วิธีที่รูปภาพ JPEG ใช้การบีบอัดแบบสูญเสียบางส่วน
• นอกจากนี้ โหนดข้อความยังอาจเป็น LCP ได้ด้วย ประสิทธิภาพของเทคนิคที่อธิบายไว้ในคู่มือนี้ขึ้นอยู่กับว่าคุณใช้แบบอักษรเว็บสำหรับข้อความในหน้าเว็บหรือไม่ หากคุณใช้แบบอักษรเว็บ โปรดใช้แนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพแบบอักษรเว็บ อย่างไรก็ตาม หากคุณไม่ได้ใช้แบบอักษรเว็บ แต่ใช้แบบอักษรของระบบที่แสดงโดยไม่มีระยะเวลาการโหลดทรัพยากร การลดและบีบอัด CSS จะลดระยะเวลานี้ ซึ่งหมายความว่าการแสดงผลโหนดข้อความ LCP ที่เป็นไปได้อาจเกิดขึ้นได้เร็วขึ้น

บทสรุป

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

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

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