บทสรุปของโพสต์โดย durumis AI
เบราว์เซอร์จะโหลดและแสดงผลทรัพยากรต่างๆ เช่น HTML, CSS, JavaScript และรูปภาพ ตามลำดับ แต่เราสามารถเพิ่มประสิทธิภาพความเร็วในการโหลดได้โดยใช้แอตทริบิวต์ต่างๆ เช่น `async`, `defer`, `preload`, `media`, `loading="lazy"`, `srcset`, `sizes` โดยเฉพาะอย่างยิ่งสำหรับรูปภาพ การใช้แอตทริบิวต์ `loading="lazy"`, `srcset`, `sizes` จะช่วยให้เลือกใช้รูปภาพที่เหมาะสมกับขนาดหน้าจอและเลื่อนการโหลดรูปภาพที่ไม่จำเป็นออกไป ช่วยเพิ่มความเร็วในการโหลดเพจ แอตทริบิวต์อย่าง prefetch, preconnect, dns-prefetch มีประสิทธิภาพในการปรับปรุงความเร็วในการเปลี่ยนหน้าเว็บโดยการโหลดทรัพยากรของเพจถัดไปล่วงหน้า โดยทั่วไปแล้ว เบราว์เซอร์จะเรนเดอร์ตามลำดับต่อไปนี้
- การแยกวิเคราะห์ HTML (จากบนลงล่าง head -> body) :
1. การแยกวิเคราะห์ HTML และการสร้าง DOM 2. การโหลดและการใช้ CSS (การบล็อกการเรนเดอร์) 3. การโหลดและการรันสคริปต์ (การบล็อกการเรนเดอร์)
4. การเรนเดอร์เนื้อหาของส่วน (รูปภาพ ข้อความ ฯลฯ)
การควบคุมลำดับความสำคัญของทรัพยากรของเบราว์เซอร์สามารถเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บได้
ฉันต้องการบันทึกแอตทริบิวต์หลักต่อไปนี้ที่สามารถปรับปรุงลำดับการเรนเดอร์ด้านล่างได้
- JavaScript: async, defer, module - CSS: preload, media - รูปภาพ: loading="lazy", srcset, sizes - อื่นๆ: prefetch, preconnect, dns-prefetch
JavaScript async : ดาวน์โหลดแบบขนานกับการแยกวิเคราะห์ HTML และรันทันทีหลังจากดาวน์โหลดเสร็จสมบูรณ์ หากทรัพยากรใดๆ บนหน้าเว็บเกี่ยวข้องกับ js นี้ ควรลบแอตทริบิวต์ async
defer : ดาวน์โหลดแบบขนานกับการแยกวิเคราะห์ HTML และรันหลังจากการแยกวิเคราะห์ HTML เสร็จสมบูรณ์ = ลำดับได้รับการรับประกัน หากต้องการรันหลังจากที่ HTML ทั้งหมดเรนเดอร์แล้ว ควรเพิ่มแอตทริบิวต์ defer
โดยทั่วไปแล้ว เบราว์เซอร์จะโหลด HTML ก่อน หากมีแหล่งที่มาของสคริปต์ในแท็ก head การเรนเดอร์จะถูกบล็อก การเพิ่มแท็กทั้งสองข้างต้นสามารถป้องกันการบล็อกการเรนเดอร์ HTML ได้
CSS styleshee : ค่าเริ่มต้น เป็นองค์ประกอบที่บล็อกการเรนเดอร์ ใช้เมื่อจำเป็นต้องโหลด CSS
preload : ดาวน์โหลดล่วงหน้าโดยไม่บล็อกการเรนเดอร์ จะเปลี่ยนเป็น stylesheet เมื่อเกิดเหตุการณ์ onload และใช้สไตล์
media: เรนเดอร์เมื่อตรงตามเงื่อนไขขนาดหน้าจอ
รูปภาพ loading="lazy" : โหลดรูปภาพเมื่อปรากฏบนหน้าจอ (เมื่อตำแหน่งการเลื่อนอยู่ใกล้กับองค์ประกอบที่มีรูปภาพ)
srcset : เลือกรูปภาพที่ดีที่สุดตามขนาดหน้าจอ (การเพิ่มประสิทธิภาพขนาดรูปภาพ)
sizes : ให้คำแนะนำแก่เบราว์เซอร์ในการเลือกรูปภาพที่เหมาะสมตามขนาดของวิวพอร์ต
ในกรณีของแท็ก img ตัวสุดท้าย เมื่อมีรูปภาพที่มีความกว้าง 480px และ 1024px แอตทริบิวต์ size จะทำให้แสดงรูปภาพขนาด 480px เมื่อ max-width เป็น 600px และแสดงรูปภาพขนาด 1024px ในกรณีอื่นๆ
* ในอีคอมเมิร์ซ เนื่องจากมีรูปภาพหลายสิบรูปในหน้าเดียว การลดขนาดของรูปภาพจึงมีประสิทธิภาพมาก
ตัวอย่างเช่น ในหน้าผลลัพธ์การค้นหาจะมีรูปภาพอย่างน้อย 20 รูปขึ้นไป และการค้นหาจะดำเนินการ 100,000 ครั้งต่อวัน...
อื่นๆ rel="prefetch" : ดาวน์โหลดทรัพยากรล่วงหน้าก่อนที่จะเปลี่ยนไปยังหน้าอื่นเพื่อปรับปรุงความเร็วในการโหลดของหน้าถัดไป
rel="preconnect" : ตั้งค่าการเชื่อมต่อเครือข่ายล่วงหน้าสำหรับลิงก์เฉพาะ (วิดีโอขนาดใหญ่ แบบอักษร ฯลฯ)
rel="dns-prefetch" : ค้นหา DNS ของทรัพยากรภายนอกเพื่อโหลดทรัพยากรได้เร็วขึ้น (ส่วนใหญ่คือ CDN ภายนอก)
* preconnect กับ dns-prefetch
preconnect คือการเชื่อมต่อ TCP (DNS - การยืนยัน TCP - การยืนยัน TLS) ดังนั้นจึงเป็นการทำงานที่หนักซึ่งใช้ทรัพยากรของเบราว์เซอร์ ใช้เมื่อต้องโหลดทรัพยากรภายนอกอย่างรวดเร็ว (เมื่อทรัพยากรมีความสำคัญมากและการเรนเดอร์ที่รวดเร็วมีความสำคัญ)
dns-prefetch เป็นเพียงการค้นหา DNS เท่านั้น ดังนั้นจึงเป็นการทำงานที่เบากว่า เหมาะสำหรับทรัพยากรที่ไม่สำคัญและจะโหลดในภายหลัง