นอกจากการกำจัดการดาวน์โหลดทรัพยากรที่ไม่จำเป็นแล้ว สิ่งที่ดีที่สุดที่คุณสามารถทำได้เพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บคือการลดขนาดการดาวน์โหลดโดยรวมโดยการเพิ่มประสิทธิภาพและบีบอัดทรัพยากรที่เหลือ
การบีบอัดข้อมูล 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
- ข้อความอาจมีคำอธิบายประกอบที่ไม่เจาะจง ซึ่งบางครั้งเรียกว่าความคิดเห็น ซึ่งระบุด้วยคำนำหน้า "#" คําอธิบายประกอบจะไม่ส่งผลต่อความหมายของข้อความหรือลักษณะการทํางานของข้อความ
- ข้อความอาจมีส่วนหัว ซึ่งเป็นคู่คีย์-ค่า (คั่นด้วย
":"
ในตัวอย่างก่อนหน้านี้) ที่ปรากฏขึ้นที่จุดเริ่มต้นของข้อความ - ข้อความมีเพย์โหลดข้อความ
ฉันจะลดขนาดของข้อความก่อนหน้าซึ่งมีความยาวตั้งแต่ 200 อักขระขึ้นไปได้อย่างไร
- ความคิดเห็นนี้น่าสนใจ แต่จะไม่ส่งผลต่อความหมายของข้อความ ลบออกเมื่อส่งข้อความ
- มีเทคนิคที่ดีในการเข้ารหัสส่วนหัวอย่างมีประสิทธิภาพ เช่น หากคุณรู้ว่าข้อความทั้งหมดมี "รูปแบบ" และ "วันที่" คุณสามารถแปลงทั้ง 2 อย่างนี้เป็นรหัสจำนวนเต็มสั้นๆ และส่งรหัสเหล่านั้น อย่างไรก็ตาม ข้อมูลดังกล่าวอาจไม่ถูกต้อง ดังนั้นคุณจึงควรปล่อยไว้ก่อน
- เพย์โหลดเป็นข้อความเท่านั้น แม้ว่าเราจะไม่ทราบเนื้อหาที่แท้จริงของไฟล์ (ดูเหมือนว่าจะใช้
"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 ประเภทที่แตกต่างกันซึ่งมีดังนี้
- มาร์กอัป HTML
- CSS เพื่อปรับแต่งการนำเสนอหน้าเว็บ
- JavaScript เพื่อขับเคลื่อนการโต้ตอบและความสามารถขั้นสูงอื่นๆ ของหน้าเว็บ
เนื้อหาแต่ละประเภทเหล่านี้มีกฎที่แตกต่างกันสำหรับสิ่งที่ถือเป็นเนื้อหาที่ถูกต้อง กฎที่แตกต่างกันสำหรับการระบุความคิดเห็น และอื่นๆ แต่คำถามที่ยังคงอยู่คือ "จะลดขนาดของหน้าเว็บนี้ได้อย่างไร"
- ความคิดเห็นโค้ดเป็นเพื่อนที่ดีที่สุดของนักพัฒนาซอฟต์แวร์ แต่เบราว์เซอร์ไม่ต้องการความคิดเห็นเหล่านั้น การลบความคิดเห็น CSS (
/* ... */
), HTML (<!-- ... -->
) และ JavaScript (// ...
) จะลดขนาดการโอนทั้งหมดของหน้าเว็บและทรัพยากรย่อย - คอมเพรสเซอร์ CSS ที่ "ชาญฉลาด" อาจสังเกตได้ว่าเรากำลังใช้วิธีกำหนดกฎสำหรับ
.awesome-container
ที่ไม่มีประสิทธิภาพ และยุบการประกาศทั้ง 2 รายการให้เหลือเพียง 1 รายการโดยไม่ส่งผลกระทบต่อรูปแบบอื่นๆ ทำให้ประหยัดไบต์ได้มากขึ้น สำหรับกฎ 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
อย่างไรก็ตาม ผู้ให้บริการโฮสติ้งมีหน้าที่ตรวจสอบว่าเว็บเซิร์ฟเวอร์ได้รับการกำหนดค่าอย่างเหมาะสมเพื่อให้บริการทรัพยากรที่บีบอัดเมื่อไคลเอ็นต์ร้องขอ
ไฟล์ | อัลกอริทึม | ขนาดที่ไม่ได้บีบอัด | ขนาดไฟล์ที่บีบอัด | อัตราส่วนการบีบอัด |
---|---|---|---|---|
angular-1.8.3.js | บรอทลี | 1,346 KiB | 256 KB | 81% |
angular-1.8.3.js | gzip | 1,346 KiB | 329 KiB | 76% |
angular-1.8.3.min.js | Brotli | 173 KiB | 53 KB | 69% |
angular-1.8.3.min.js | gzip | 173 KiB | 60 KiB | 65% |
jquery-3.7.1.js | บรอทลี | 302 KiB | 69 KiB | 77% |
jquery-3.7.1.js | gzip | 302 KB | 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 KB | 73 KiB | 86% |
lodash-4.17.21.js | gzip | 531 KB | 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, เปิดแผงเครือข่าย โหลดหน้าที่ต้องการ และสังเกตที่ส่วนล่างสุดของแผงเครือข่าย
คุณควรเห็นรายละเอียดต่อไปนี้เช่นเดียวกับในรูปภาพก่อนหน้า
- จํานวนคําขอ ซึ่งเป็นจํานวนทรัพยากรที่โหลดสําหรับหน้าเว็บ
- ขนาดการโอนของคำขอทั้งหมด สิ่งนี้แสดงถึงประสิทธิภาพของการบีบอัดที่ใช้กับทรัพยากรของหน้า
- ขนาดทรัพยากรของคำขอทั้งหมด ค่านี้แสดงขนาดของทรัพยากรสำหรับหน้าเว็บหลังจากการขยายไฟล์
ผลต่อ 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 ที่เป็นไปได้อาจเกิดขึ้นได้เร็วขึ้น
บทสรุป
วิธีการเพิ่มประสิทธิภาพการเข้ารหัสและการโอนเนื้อหาแบบข้อความเป็นแนวคิดด้านประสิทธิภาพขั้นพื้นฐาน แต่ก็เป็นแนวคิดที่มีผลกระทบอย่างมาก โปรดแน่ใจว่าคุณได้ทำทุกอย่างที่ทำได้เพื่อให้มั่นใจว่าทรัพยากรที่มีสิทธิ์สำหรับการลดขนาดและการบีบอัดจะได้รับประโยชน์จากการเพิ่มประสิทธิภาพเหล่านั้น
และที่สำคัญกว่านั้นคือ ตรวจสอบว่ากระบวนการเหล่านี้ทำงานโดยอัตโนมัติ สําหรับการลดขนาด ให้ใช้เครื่องมือรวมเพื่อใช้การลดขนาดกับทรัพยากรที่มีสิทธิ์ ตรวจสอบว่าการกำหนดค่าเว็บเซิร์ฟเวอร์รองรับการบีบอัด แต่นอกเหนือจากนั้น ให้ใช้การบีบอัดที่มีประสิทธิภาพมากที่สุดที่มีอยู่ ในการทำให้ข้อมูลนี้เป็นเรื่องเล็กๆ น้อยๆ ให้ใช้ CDN เพื่อบีบอัดโดยอัตโนมัติเพราะนอกจากจะบีบอัดทรัพยากรให้คุณได้แล้ว ยังบีบอัดทรัพยากรให้คุณได้อย่างรวดเร็วอีกด้วย
เมื่อนำแนวคิดด้านประสิทธิภาพพื้นฐานเหล่านี้มาปรับใช้กับโครงสร้างเว็บไซต์ของคุณ คุณจะมั่นใจได้ว่าความพยายามในการเพิ่มประสิทธิภาพของคุณจะเป็นไปในทางที่ดี และการเพิ่มประสิทธิภาพในครั้งต่อๆ ไปจะเป็นรากฐานที่มั่นคงของแนวทางปฏิบัติพื้นฐานที่ดีได้