นอกจากการกำจัดการดาวน์โหลดทรัพยากรที่ไม่จำเป็นแล้ว สิ่งที่ดีที่สุดที่คุณสามารถทำได้เพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บคือการลดขนาดการดาวน์โหลดโดยรวมโดยการเพิ่มประสิทธิภาพและบีบอัดทรัพยากรที่เหลือ
การบีบอัดข้อมูลขั้นพื้นฐาน
เมื่อตั้งค่าเว็บไซต์เพื่อหลีกเลี่ยงการดาวน์โหลดทรัพยากรที่ไม่ได้ใช้งานแล้ว ขั้นตอนถัดไปคือบีบอัดทรัพยากรที่มีสิทธิ์ซึ่งเบราว์เซอร์จะต้องดาวน์โหลด เรามีเทคนิคมากมายหลายแบบให้เลือกใช้ ได้แก่ เครื่องมือทั่วไปที่เปิดใช้ในเว็บเซิร์ฟเวอร์ได้ การเพิ่มประสิทธิภาพก่อนการประมวลผลสำหรับประเภทเนื้อหาที่เจาะจง และการเพิ่มประสิทธิภาพเฉพาะทรัพยากรซึ่งต้องใช้อินพุตจากนักพัฒนาซอฟต์แวร์ ทั้งนี้ขึ้นอยู่กับประเภทของทรัพยากร เช่น ข้อความ รูปภาพ แบบอักษร และอื่นๆ
การมอบประสิทธิภาพที่ดีที่สุดต้องผสมผสานเทคนิคต่อไปนี้ทั้งหมด
- การบีบอัดคือกระบวนการเข้ารหัสข้อมูลโดยใช้บิตน้อยลง
- การกำจัดข้อมูลที่ไม่จำเป็นให้ผลลัพธ์ดีที่สุดเสมอ
- มีเทคนิคและอัลกอริทึมในการบีบอัดมากมาย
- คุณต้องอาศัยเทคนิคหลายๆ อย่างเพื่อให้ได้การบีบอัดที่ดีที่สุด
ขั้นตอนการลดขนาดข้อมูลคือการบีบอัดข้อมูล ผู้ใช้หลายคนได้ร่วมให้ข้อมูลอัลกอริทึม เทคนิค และการเพิ่มประสิทธิภาพเพื่อปรับปรุงอัตราส่วนการบีบอัด ความเร็วในการบีบอัด และหน่วยความจำที่อัลกอริทึมการบีบอัดต่างๆ ต้องการ
การสนทนาฉบับเต็มเกี่ยวกับการบีบอัดข้อมูลอยู่นอกเหนือขอบเขตของคู่มือนี้ อย่างไรก็ตาม คุณต้องทำความเข้าใจวิธีการทำงานของการบีบอัดในระดับสูงและเทคนิคที่คุณสามารถใช้ในการลดขนาดของเนื้อหาต่างๆ ที่หน้าเว็บของคุณต้องการ
ในการอธิบายหลักการสำคัญของเทคนิคเหล่านี้ให้เห็นภาพ เราขอให้คุณดูขั้นตอนการเพิ่มประสิทธิภาพรูปแบบข้อความง่ายๆ ที่คิดค้นขึ้นสำหรับตัวอย่างนี้โดยเฉพาะ
# 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
- ข้อความอาจมีคำอธิบายประกอบที่กำหนดเอง ซึ่งบางครั้งเรียกว่าความคิดเห็น ซึ่งระบุด้วยคำนำหน้า "#" หมายเหตุจะไม่ส่งผลต่อความหมายของข้อความหรือลักษณะการทำงานของข้อความ
- ข้อความอาจมีheadersซึ่งเป็นคู่คีย์-ค่า (คั่นด้วย
":"
ในตัวอย่างก่อนหน้านี้) ซึ่งปรากฏในช่วงต้นข้อความ - ข้อความมีเพย์โหลดข้อความ
คุณจะทำอะไรได้บ้างเพื่อลดขนาดของข้อความก่อนหน้า ซึ่งจะเริ่มต้นที่ 200 อักขระ
- ความคิดเห็นนี้มีความน่าสนใจ แต่จะไม่ส่งผลต่อความหมายของข้อความ ให้กำจัดความคิดเห็นเมื่อส่งข้อความ
- มีเทคนิคดีๆ ในการเข้ารหัสส่วนหัวอย่างมีประสิทธิภาพ เช่น หากคุณทราบว่าข้อความทั้งหมดมี "รูปแบบ" และ "วันที่" ให้แปลงข้อมูลเหล่านั้นเป็นรหัสจำนวนเต็มสั้นๆ และส่งเพียงรหัสเหล่านั้น อย่างไรก็ตาม เรื่องนี้อาจไม่จริง ดังนั้นคุณควรปล่อยไว้เช่นนั้นก่อน
- เพย์โหลดจะเป็นแบบข้อความเท่านั้น แม้ว่าเราจะไม่ทราบว่าเนื้อหาที่แท้จริงคืออะไร (เห็นได้ชัดว่าใช้
"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 ประเภทที่มีอยู่ในข้อมูลโค้ดดังกล่าว ดังนี้
- มาร์กอัป HTML
- CSS เพื่อปรับแต่งการนำเสนอของหน้าเว็บ
- 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 อื่นๆ จึงมีความสำคัญ
ในทำนองเดียวกัน เทคนิคที่อธิบายไว้ข้างต้นสามารถขยายขอบเขตไปได้นอกเหนือจากเนื้อหาแบบข้อความ รูปภาพ วิดีโอ และเนื้อหาประเภทอื่นๆ ทั้งหมดมีรูปแบบข้อมูลเมตาของตัวเองและเพย์โหลดที่หลากหลาย ตัวอย่างเช่น เมื่อคุณถ่ายรูปด้วยกล้อง ไฟล์มักจะฝังข้อมูลเพิ่มเติมมากมาย เช่น การตั้งค่ากล้อง ตำแหน่ง และอื่นๆ ข้อมูลนี้อาจมีความสำคัญมาก (เช่น เว็บไซต์แชร์รูปภาพ) หรืออาจไม่มีประโยชน์เลย ทั้งนี้ขึ้นอยู่กับแอปพลิเคชันของคุณ คุณควรพิจารณาว่าคุ้มค่าหรือไม่ ในทางปฏิบัติ ข้อมูลเมตานี้สามารถเพิ่มกิโลไบต์เป็นสิบๆ กิโลไบต์ต่อรูป
กล่าวโดยสรุปคือขั้นตอนแรกในการเพิ่มประสิทธิภาพของเนื้อหาคือสร้างพื้นที่โฆษณาสำหรับประเภทเนื้อหาที่แตกต่างกัน และพิจารณาว่าการเพิ่มประสิทธิภาพเฉพาะเนื้อหาประเภทใดที่คุณจะใช้เพื่อลดขนาดเนื้อหาได้ จากนั้นเมื่อเข้าใจแล้วว่ามีอะไรบ้าง ให้ทำการเพิ่มประสิทธิภาพโดยอัตโนมัติด้วยการเพิ่มไว้ในขั้นตอนการสร้างและรุ่น เพื่อให้แน่ใจว่าจะมีการเพิ่มประสิทธิภาพที่สอดคล้องกันสำหรับรุ่นใหม่ในเวอร์ชันที่ใช้งานจริงทั้งหมด
การบีบอัดข้อความด้วยอัลกอริทึมการบีบอัด
ขั้นตอนถัดไปในการลดขนาดของเนื้อหาแบบข้อความคือการใช้อัลกอริทึมการบีบอัดกับเนื้อหาเหล่านั้น วิธีนี้พัฒนาไปอีกขั้นด้วยการค้นหารูปแบบที่ทำซ้ำได้ในเพย์โหลดแบบข้อความอย่างจริงจังก่อนส่งให้ผู้ใช้ และคลายการบีบอัดเมื่อเข้าถึงเบราว์เซอร์ของผู้ใช้ ผลที่ได้คือ ทรัพยากรเหล่านั้นลดลงอย่างมากและใช้เวลาดาวน์โหลดเร็วขึ้นด้วย
- 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 และ 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 เปิดแผงเครือข่าย โหลดหน้าเว็บที่ต้องการ และสังเกตที่ด้านล่างของแผงเครือข่าย
เช่นเดียวกับภาพก่อนหน้า คุณควรเห็นรายละเอียดต่อไปนี้
- จำนวนคำขอ ซึ่งเป็นจำนวนทรัพยากรที่โหลดสำหรับหน้าเว็บ
- ขนาดการโอนของคำขอทั้งหมด ข้อมูลนี้แสดงให้เห็นถึงประสิทธิภาพของการบีบอัดที่ใช้กับทรัพยากรในหน้าเว็บ
- ขนาดทรัพยากรของคำขอทั้งหมด ข้อมูลนี้สะท้อนให้เห็นว่าทรัพยากรของหน้ามีขนาดเท่าไรหลังจากที่มีการแยกการบีบอัดแล้ว
ผลกระทบต่อ 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 เพื่อบีบอัดโดยอัตโนมัติสำหรับคุณ เพราะไม่เพียงสามารถบีบอัดทรัพยากรให้คุณเท่านั้น แต่ยังบีบอัดอย่างรวดเร็วอีกด้วย
ด้วยการใส่แนวคิดประสิทธิภาพพื้นฐานเหล่านี้ไว้ในสถาปัตยกรรมของเว็บไซต์ คุณจะมั่นใจได้ว่าการเพิ่มประสิทธิภาพนั้นดำเนินไปในทิศทางที่ดี และการเพิ่มประสิทธิภาพที่ตามมาจะวางอยู่บนรากฐานที่มั่นคงของแนวทางปฏิบัติพื้นฐานที่ดี