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

Ilya Grigorik

เจเรมี แวกเนอร์

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

การบีบอัดข้อมูลขั้นพื้นฐาน

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

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

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

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

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

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

# 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. ข้อความอาจมีheadersซึ่งเป็นคู่คีย์-ค่า (คั่นด้วย ":" ในตัวอย่างก่อนหน้านี้) ซึ่งปรากฏในช่วงต้นข้อความ
3. ข้อความมีเพย์โหลดข้อความ

คุณจะทำอะไรได้บ้างเพื่อลดขนาดของข้อความก่อนหน้า ซึ่งจะเริ่มต้นที่ 200 อักขระ

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

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

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

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

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

การลดขนาด: การประมวลผลล่วงหน้าและการเพิ่มประสิทธิภาพเฉพาะบริบท

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

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

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

<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 รายการให้เหลือเพียงประกาศเดียวโดยไม่ส่งผลกระทบต่อรูปแบบอื่นซึ่งจะช่วยประหยัดไบต์ได้ จากชุดกฎ 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 กิโลไบต์ ซึ่งแสดงให้เห็นศักยภาพของการเพิ่มประสิทธิภาพเหล่านี้อย่างชัดเจน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: บางครั้งอัลกอริทึมการบีบอัดอาจเพิ่มขนาดของเนื้อหา โดยปกติแล้ว กรณีนี้จะเกิดขึ้นเมื่อเนื้อหาที่ไม่ได้บีบอัดมีขนาดเล็กมาก และโอเวอร์เฮ็ดของอัลกอริทึมจะสูงกว่าการลดการบีบอัด หรือเมื่อทรัพยากรได้รับการบีบอัดอย่างดีแล้ว วิธีหลีกเลี่ยงปัญหานี้คือเซิร์ฟเวอร์บางแห่งให้คุณระบุเกณฑ์ขนาดไฟล์ขั้นต่ำ ซึ่งโดยทั่วไปจะน้อยกว่า 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 ที่เป็นไปได้จะเกิดขึ้นได้เร็วขึ้น

บทสรุป

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

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

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