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

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

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

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

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

บทสรุป

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

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

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