Preload Prefetch และ Preconnect
แจ้งเบราว์เซอร์ให้ดึงทรัพยากรสำคัญล่วงหน้า
Preload Prefetch และ Preconnect เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงต้องใช้คำใบ้ทรัพยากร
เบราว์เซอร์สมัยใหม่จะค้นพบทรัพยากรเมื่อแยกวิเคราะห์ HTML เท่านั้น คำใบ้ทรัพยากร (แอตทริบิวต์ rel ของลิงก์ใน <head>) ช่วยบอกเบราว์เซอร์ว่า “อีกไม่นานฉันจะต้องใช้สิ่งนี้” ทำให้คำขอเครือข่ายเริ่มต้นเร็วกว่าที่การค้นพบตามปกติจะทำได้
preload โหลดทันที
<link rel="preload" as="..." href="..."> บอกให้เบราว์เซอร์ดึงทรัพยากรทันทีด้วยลำดับความสำคัญที่เหมาะสมกับชนิดของ as ใช้กับทรัพยากรที่หน้าเว็บจำเป็นต้องใช้แน่นอน เช่น ภาพหลัก ฟอนต์สำคัญ และ JavaScript ระดับเส้นทาง
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>แอตทริบิวต์ as
ตั้งค่า as เสมอ เพราะแอตทริบิวต์นี้กำหนดลำดับความสำคัญของคำขอ ส่วนหัว Accept และการบังคับใช้ CSP ค่าที่พบบ่อย ได้แก่ "script", "style", "font", "image" และ "fetch" หากไม่มี as เบราว์เซอร์จะละเว้น preload และบันทึกคำเตือน
crossorigin สำหรับฟอนต์
การโหลดฟอนต์ล่วงหน้าต้องใช้ crossorigin แม้ฟอนต์จะมาจากต้นทางเดียวกันก็ตาม หากไม่มีแอตทริบิวต์นี้ เบราว์เซอร์จะดึงฟอนต์สำหรับการใช้งานจริงในโหมด CORS แต่ดึงสำหรับ preload ในโหมดไม่ระบุตัวตน ทำให้ดาวน์โหลดซ้ำสองครั้ง ซึ่งเป็นข้อผิดพลาดด้านประสิทธิภาพที่ละเอียดอ่อนและพบได้บ่อย
prefetch โหลดภายหลัง
<link rel="prefetch" href="..."> บอกเป็นนัยว่าทรัพยากรนี้จะจำเป็นสำหรับการนำทางในอนาคต เบราว์เซอร์จะดึงทรัพยากรด้วยลำดับความสำคัญต่ำสุดในช่วงที่ไม่มีงาน จากนั้นจะแคชไว้เพื่อให้หน้าเว็บถัดไปแสดงผลได้ทันที
<link rel="prefetch" href="/next-page.html">preconnect อุ่นการเชื่อมต่อ
<link rel="preconnect" href="https://api.example.com"> บอกให้เบราว์เซอร์ทำการจับมือ DNS, TCP และ TLS กับต้นทางของบุคคลที่สามก่อนที่คำขอแรกจะมาถึง ใช้กับโฮสต์ API และ CDN ที่หน้าของคุณจะเรียกใช้
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch เป็นตัวเลือกที่เบากว่า
<link rel="dns-prefetch"> จะทำเฉพาะการค้นหา DNS ซึ่งใช้ทรัพยากรน้อยกว่า preconnect ใช้กับโฮสต์ของบุคคลที่สามจำนวนมากที่คุณไม่สามารถเชื่อมต่อล่วงหน้าแบบเต็มรูปแบบกับทุกโฮสต์ได้ และใช้ preconnect กับต้นทางสำคัญที่สุดเพียงไม่กี่แห่ง
จำกัดคำใบ้
preload จำนวนมากเกินไปจะแย่งแบนด์วิดท์เดียวกันและทำให้หน้าเว็บช้าลง ให้โหลดล่วงหน้าเฉพาะทรัพยากรที่ขัดขวางเส้นทางการแสดงผลสำคัญ โดยทั่วไปคือภาพหลักหนึ่งภาพและฟอนต์สำคัญหนึ่งหรือสองแบบ ส่วนที่เหลือสามารถให้เบราว์เซอร์ค้นพบตามปกติได้
modulepreload สำหรับโมดูล ES
<link rel="modulepreload" href="/app.js"> จะโหลดล่วงหน้าไม่เพียงไฟล์โมดูลเท่านั้น แต่ยังรวมถึงแผนผังการพึ่งพาของโมดูลด้วย วิธีนี้ช่วยหลีกเลี่ยงน้ำตกการดาวน์โหลดแบบต่อเนื่องที่มักเกิดกับโมดูล ES แบบเนทีฟ ซึ่งการนำเข้าแต่ละรายการต้องรอให้รายการก่อนหน้าแยกวิเคราะห์เสร็จ
การวัดผลกระทบ
ใช้คอลัมน์ Initiator ในแผง Network เพื่อตรวจสอบว่าทรัพยากรที่โหลดล่วงหน้าถูกดึงมาเร็วกว่าปกติจริง และใช้การตรวจสอบ “Preconnect to required origins” ของ Lighthouse เพื่อค้นหาโอกาสที่พลาดไป การนำ preload ที่ช้าแต่ไม่ได้ใช้ออก มักให้ผลดีได้พอ ๆ กับการเพิ่ม preload ที่เหมาะสม
ลักษณะเฉพาะของคำใบ้แต่ละแบบ
preload จะทำให้เกิดคำเตือนในคอนโซลหากไม่มีการใช้ทรัพยากรภายในเวลาประมาณ 3 วินาที เบราว์เซอร์อาจยกเลิก prefetch เมื่อเครือข่ายหรือหน่วยความจำมีแรงกดดัน การเชื่อมต่อ preconnect จะปิดลงหลังไม่มีการใช้งานประมาณ 10 วินาที ดังนั้นควรใช้กับทรัพยากรที่จะถูกเรียกใช้ในเร็ว ๆ นี้
ตรวจสอบความรู้
preconnect ทำสิ่งใดที่ dns-prefetch ไม่ได้ทำ
สรุป
preload จะดึงทรัพยากรสำคัญทันที โดยใช้ as และ crossorigin เมื่อจำเป็น prefetch จะแคชทรัพยากรที่น่าจะใช้ในการนำทางครั้งถัดไปในช่วงที่ไม่มีงาน preconnect (TCP+TLS) และ dns-prefetch (DNS เท่านั้น) จะอุ่นการเชื่อมต่อไปยังต้นทางของบุคคลที่สาม ส่วน modulepreload จะขยายการโหลดล่วงหน้าไปยังแผนผังการพึ่งพาของโมดูล ES ควรใช้คำใบ้อย่างพอเหมาะและวัดผลเสมอ
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “Preload Prefetch และ Preconnect” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Preload Prefetch และ Preconnect” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Preload Prefetch และ Preconnect”
แจ้งเบราว์เซอร์ให้ดึงทรัพยากรสำคัญล่วงหน้า คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Preload Prefetch และ Preconnect” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แอตทริบิวต์ async และ defer
- Preload Prefetch และ Preconnect
- การโหลดรูปภาพแบบขี้เกียจ loading=lazy
- คำใบ้ทรัพยากร modulepreload