ถัดจากการขจัดการดาวน์โหลดทรัพยากรที่ไม่จำเป็น วิธีที่ดีที่สุดที่คุณสามารถทำได้ ปรับปรุงความเร็วในการโหลดหน้าเว็บคือการลดขนาดการดาวน์โหลดโดยรวมด้วยการเพิ่มประสิทธิภาพ และบีบอัดทรัพยากรที่เหลือ
การบีบอัดข้อมูลขั้นพื้นฐาน
เมื่อคุณตั้งค่าเว็บไซต์เพื่อหลีกเลี่ยงการดาวน์โหลดทรัพยากรที่ไม่ได้ใช้แล้ว ขั้นตอนถัดไปคือบีบอัด ทรัพยากรที่มีสิทธิ์ซึ่งเบราว์เซอร์มี เพื่อดาวน์โหลด ขึ้นอยู่กับประเภทของทรัพยากร เช่น ข้อความ รูปภาพ แบบอักษร และอื่นๆ มีเทคนิคต่างๆ มากมายให้เลือก เช่น เครื่องมือทั่วไปที่สามารถ เปิดอยู่ในเว็บเซิร์ฟเวอร์ เพื่อประมวลผลการเพิ่มประสิทธิภาพล่วงหน้าสำหรับเนื้อหาที่เฉพาะเจาะจง และการเพิ่มประสิทธิภาพเฉพาะทรัพยากรที่ต้องการอินพุต
การมอบประสิทธิภาพที่ดีที่สุดต้องอาศัยปัจจัยต่อไปนี้ร่วมกัน เทคนิค
- การบีบอัดเป็นกระบวนการเข้ารหัสข้อมูลโดยใช้บิตน้อยลง
- การกำจัดข้อมูลที่ไม่จำเป็นให้ผลลัพธ์ที่ดีที่สุดเสมอ
- มีเทคนิคและอัลกอริทึมสำหรับการบีบอัดที่ต่างกันมากมาย
- คุณจะต้องใช้เทคนิคที่หลากหลายเพื่อให้การบีบอัดดีที่สุด
ขั้นตอนการลดขนาดข้อมูลคือการบีบอัดข้อมูล ผู้คนจำนวนมากต้อง อัลกอริทึม เทคนิค และการเพิ่มประสิทธิภาพที่ส่งเข้ามาเพื่อปรับปรุงการบีบอัด อัตราส่วน ความเร็วในการบีบอัด และหน่วยความจำที่การบีบอัดต่างๆ ต้องการ อัลกอริทึม
เนื้อหาทั้งหมดเกี่ยวกับการบีบอัดข้อมูลอยู่นอกเหนือขอบเขตของคู่มือนี้ อย่างไรก็ตาม สิ่งสำคัญคือจะต้องทำความเข้าใจในระดับสูง ว่าการบีบอัดทำงานอย่างไร และ เทคนิคที่คุณสามารถใช้ในการลดขนาดของเนื้อหาต่างๆ ที่หน้าเว็บของคุณ ต้องการ
เพื่ออธิบายหลักการสำคัญของเทคนิคเหล่านี้ให้เห็นภาพ ให้คำนึงถึงกระบวนการ การเพิ่มประสิทธิภาพรูปแบบข้อความง่ายๆ ที่สร้างขึ้นสำหรับตัวอย่างนี้โดยเฉพาะ:
# 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 อักขระ
- ความคิดเห็นนี้น่าสนใจ แต่จะไม่ส่งผลต่อความหมายของข้อความ ให้กำจัดความคิดเห็นเมื่อส่งข้อความ
- มีเทคนิคดีๆ ในการเข้ารหัสส่วนหัวอย่างมีประสิทธิภาพ สำหรับ เช่น หากคุณทราบว่าข้อความทั้งหมดมี "รูปแบบ" และ "วันที่" คุณ แปลงรหัสเหล่านั้นให้เป็นรหัสจำนวนเต็มสั้นๆ แล้วส่งรหัสเหล่านั้น อย่างไรก็ตาม อาจเป็นไปได้ว่า ไม่จริง ดังนั้นวิธีที่ดีที่สุดคือตอนนี้ปล่อยไว้เฉยๆ
- เพย์โหลดเป็นแบบข้อความเท่านั้น แม้ว่าเราจะไม่รู้ว่าเนื้อหาจริงๆ แล้วเป็นอย่างไร
คือ (เห็นได้ชัดว่าใช้
"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 หรือเนื้อหาที่เจาะจงอื่นๆ อีกมากมาย การเพิ่มประสิทธิภาพ ซึ่งเป็นสาเหตุที่การประมวลผลล่วงหน้า การลดขนาด และที่มีการคำนึงถึงบริบทอื่นๆ การเพิ่มประสิทธิภาพเป็นสิ่งที่สำคัญ
ในทํานองเดียวกัน คุณสามารถขยายเทคนิคที่อธิบายไว้ข้างต้นออกไปได้นอกเหนือจากการใช้ข้อความ เนื้อหา รูปภาพ วิดีโอ และเนื้อหาประเภทอื่นๆ ต่างก็มีรูปแบบเป็นของตัวเอง ข้อมูลเมตาและเพย์โหลดต่างๆ เช่น เมื่อคุณถ่ายภาพที่มี กล้องมักจะฝังข้อมูลเพิ่มเติมหลายอย่าง เช่น การตั้งค่ากล้อง ตำแหน่ง และอื่นๆ ข้อมูลนี้อาจสําคัญโดยขึ้นอยู่กับแอปพลิเคชันของคุณ (เช่น เว็บไซต์แชร์รูปภาพ) หรืออาจไร้ประโยชน์โดยสิ้นเชิง คุณ ควรพิจารณาว่าควรนำออกไหม ในทางปฏิบัติ ข้อมูลเมตานี้สามารถเพิ่ม ไม่เกิน 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 และ 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 เปิด เครือข่าย ให้โหลดหน้าที่ต้องการ และสังเกตส่วนล่างสุดของ แผงเครือข่าย
![ค่าที่อ่านได้จากเครื่องมือสำหรับนักพัฒนาเว็บในขนาดจริงเทียบกับขนาดการโอน](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-optimize-encoding-and-transfer/image/resource-size-fig.png?authuser=5&hl=th)
คุณควรเห็นรายละเอียดดังต่อไปนี้ เช่นเดียวกับรูปภาพก่อนหน้านี้
- จำนวนคำขอ ซึ่งเป็นจำนวนทรัพยากรที่โหลดสำหรับ
- ขนาดการโอนของคำขอทั้งหมด สิ่งนี้แสดงถึงประสิทธิภาพของ ที่มีผลกับทรัพยากรของหน้าเว็บ
- ขนาดทรัพยากรของคำขอทั้งหมด ข้อมูลนี้แสดงถึงขนาดทรัพยากรสำหรับ หน้าเว็บหลังจากถูกบีบอัด
ผลต่อ 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 เพื่อบีบอัดโดยอัตโนมัติ เพราะไม่เพียงบีบอัดได้ ทรัพยากรอื่นๆ ของคุณโดยเฉพาะ แต่ก็สามารถทำได้อย่างรวดเร็วเช่นกัน
ด้วยการประสานแนวคิดประสิทธิภาพพื้นฐานเหล่านี้ลงใน คุณสามารถมั่นใจได้ว่าความพยายามในการเพิ่มประสิทธิภาพของคุณ การดำเนินงานที่ดี และการเพิ่มประสิทธิภาพในครั้งต่อๆ ไปจะเป็นรากฐานที่มั่นคง แนวทางปฏิบัติพื้นฐานที่ดี