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

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

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

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

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

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

• 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 ถ้าคุณต้องการทดสอบกับข้อความ การบีบอัด โปรดลองดูที่ gzip และ Codelab ของ Brotli

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

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

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

บทสรุป

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

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

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