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

Ilya Grigorik

Jeremy Wagner

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

ข้อมูลเบื้องต้นเกี่ยวกับการบีบอัดข้อมูล

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

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

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

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

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

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

# 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. มีเทคนิคดีๆ ในการเข้ารหัสส่วนหัวอย่างมีประสิทธิภาพ ตัวอย่างเช่น หากคุณทราบว่าข้อความทั้งหมดมี "format" และ "date" คุณสามารถแปลงข้อความเหล่านั้นเป็นรหัสจำนวนเต็มแบบสั้นและส่งเฉพาะรหัสดังกล่าวได้ อย่างไรก็ตาม นั่นอาจไม่ใช่เรื่องจริง ดังนั้นจึงควรปล่อยไว้ก่อนในตอนนี้
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 หรือการเพิ่มประสิทธิภาพเฉพาะเนื้อหาอื่นๆ อีกหลายสิบรายการ ด้วยเหตุนี้ การประมวลผลล่วงหน้า การลดขนาด และการเพิ่มประสิทธิภาพอื่นๆ ที่คำนึงถึงบริบทจึงมีความสำคัญ

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

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

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

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

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

ไฟล์	อัลกอริทึม	ขนาดที่ไม่ได้บีบอัด	ขนาดไฟล์ที่บีบอัด	อัตราส่วนการบีบอัด
angular-1.8.3.js	Brotli	1,346 KiB	256 KiB	81%
angular-1.8.3.js	gzip	1,346 KiB	329 KiB	76%
angular-1.8.3.min.js	Brotli	173 KiB	53 KiB	69%
angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	Brotli	302 KiB	69 KiB	77%
jquery-3.7.1.js	gzip	302 KiB	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 KiB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KiB	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

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

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

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

ผลกระทบต่อ Core Web Vitals

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

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

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

บทสรุป

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

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

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