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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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

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