จัดลำดับการรันสคริปต์ของคุณด้วย defer และ async จากนั้นบังคับเครือข่ายด้วย preload, preconnect และ prefetch
เปิดบทเรียนนี้ใน Kodokon<script src> แบบคลาสสิกบล็อกการแยกวิเคราะห์ HTML: เบราว์เซอร์หยุด, ดาวน์โหลด, รัน แล้วจึงทำต่อ สองแอตทริบิวต์เปลี่ยนเกม defer ดาวน์โหลดขนานไปกับการแยกวิเคราะห์และรันสคริปต์ตามลำดับในเอกสาร ก่อน DOMContentLoaded เล็กน้อย: มันเป็นตัวเลือกเริ่มต้นสำหรับโค้ดแอปพลิเคชันของคุณ ซึ่งอาจขึ้นอยู่กับ DOM และสคริปต์อื่น ๆ ส่วน async ก็ดาวน์โหลดขนานเช่นกันแต่รันทันทีที่ไฟล์มาถึง โดยไม่รับประกันลำดับ: สงวนมันไว้สำหรับสคริปต์ที่เป็นอิสระอย่าง analytics ซึ่งไม่ขึ้นกับอะไรเลย
<script src="/js/analytics.js" async></script>
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>เบราว์เซอร์ค้นพบทรัพยากรวิกฤตบางอย่างช้ามาก: ฟอนต์ที่ถูกอ้างอิงภายในไฟล์ CSS, รูปภาพที่โหลดใน JavaScript <link rel="preload"> แก้ปัญหาการค้นพบที่ล่าช้านั้นด้วยการประกาศทรัพยากรตรงใน <head> พร้อมแอตทริบิวต์ as ที่บังคับ เพื่อให้เบราว์เซอร์ใช้ลำดับความสำคัญและแคชที่ถูกต้อง กรณีตัวอย่าง: webfonts ซึ่งมิฉะนั้นจะถูกร้องขอหลังจาก CSS ถูกดาวน์โหลดและแยกวิเคราะห์แล้วเท่านั้น
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>
<link rel="preload" as="image"
href="/img/hero-1600.jpg" fetchpriority="high">ตระกูลสุดท้าย: คำใบ้เครือข่ายลำดับความสำคัญต่ำ <link rel="preconnect"> สร้างการเชื่อมต่อเต็มรูปแบบล่วงหน้า (DNS, TCP, TLS) ไปยังต้นทางบุคคลที่สามที่คุณจะใช้แน่นอน: ประหยัดได้ถึง 300 ms ในคำขอแรก dns-prefetch เป็นญาติที่เบากว่า (แค่การแปลง DNS) มีประโยชน์เป็นทางสำรองสำหรับต้นทางที่ไม่แน่นอนนัก และ prefetch ดาวน์โหลดทรัพยากรที่ตั้งใจไว้สำหรับการนำทางครั้งถัดไปในช่วงเวลาว่าง: เช่นหน้าชำระเงินจากตะกร้าสินค้า การแลกเปลี่ยนชัดเจน: preload รับใช้หน้าปัจจุบัน ส่วน prefetch เดิมพันกับหน้าถัดไป
<link rel="preconnect"
href="https://api.example.com">
<link rel="dns-prefetch"
href="https://cdn.example.com">
<link rel="prefetch" href="/checkout.html">