เรียนรู้เกี่ยวกับ rel=preconnect และ rel=dns-prefetch คำแนะนำเกี่ยวกับทรัพยากร และวิธีใช้
เบราว์เซอร์ต้องมีการเชื่อมต่อก่อน จึงจะขอทรัพยากรจากเซิร์ฟเวอร์ได้ การสร้างการเชื่อมต่อที่ปลอดภัยประกอบด้วย 3 ขั้นตอน ดังนี้
ค้นหาชื่อโดเมนและแก้ไขเป็นที่อยู่ IP
ตั้งค่าการเชื่อมต่อกับเซิร์ฟเวอร์
เข้ารหัสการเชื่อมต่อเพื่อความปลอดภัย
ในแต่ละขั้นตอนเหล่านี้ เบราว์เซอร์จะส่งข้อมูลไปยังเซิร์ฟเวอร์ และเซิร์ฟเวอร์จะส่งการตอบกลับกลับมา การเดินทางนั้น ตั้งแต่ต้นทางไปจนถึงจุดหมายและกลับนี้เรียกว่าไป-กลับ
การเดินทางไป-กลับ 1 ครั้งอาจใช้เวลาสักครู่ ทั้งนี้ขึ้นอยู่กับสภาพของเครือข่าย กระบวนการตั้งค่าการเชื่อมต่ออาจมีการเดินทางไป-กลับถึง 3 รอบ และในกรณีอื่นๆ ที่ไม่ได้เพิ่มประสิทธิภาพ
การดูแลทั้งหมดล่วงหน้าจะทำให้แอปพลิเคชันรู้สึกว่าเร็วขึ้นมาก โพสต์นี้อธิบายวิธีบรรลุเป้าหมายด้วยคำแนะนำด้านแหล่งข้อมูล 2 รายการ คือ <link rel=preconnect> และ <link rel=dns-prefetch>
สร้างความสนิทสนมกับ rel=preconnect ตั้งแต่เนิ่นๆ
เบราว์เซอร์ที่ทันสมัยจะพยายามอย่างดีที่สุดในการคาดเดาว่าหน้าเว็บจะต้องมีการเชื่อมต่อแบบใด แต่จะไม่สามารถคาดการณ์ได้ทั้งหมด แต่ข่าวดีคือคุณบอกใบ้ (แหล่งข้อมูล) ได้นะ
การเพิ่ม rel=preconnect ลงใน <link> จะเป็นการแจ้งเบราว์เซอร์ว่าหน้าเว็บของคุณตั้งใจที่จะสร้างการเชื่อมต่อกับโดเมนอื่น และคุณต้องการให้กระบวนการนี้เริ่มต้นโดยเร็วที่สุด ทรัพยากรจะโหลดเร็วขึ้นเนื่องจากขั้นตอนการตั้งค่ามีการดำเนินการเสร็จสิ้นแล้วในขณะที่เบราว์เซอร์ขอ
คำแนะนำแหล่งข้อมูลได้รับชื่อของคำแนะนำเนื่องจากไม่ใช่วิธีการบังคับ หน้าเว็บเหล่านี้จะให้ข้อมูลเกี่ยวกับสิ่งที่คุณต้องการให้เกิดขึ้น แต่ท้ายที่สุดแล้ว ขึ้นอยู่กับเบราว์เซอร์ที่จะตัดสินใจว่าจะดำเนินการหรือไม่ การตั้งค่าและการเปิดการเชื่อมต่อค้างไว้เป็นงานหนัก ดังนั้นเบราว์เซอร์อาจเลือกที่จะไม่สนใจคำแนะนำด้านแหล่งข้อมูลหรือเรียกใช้คำแนะนำเพียงบางส่วน ทั้งนี้ขึ้นอยู่กับสถานการณ์
การแจ้งเจตนาให้เบราว์เซอร์ทราบง่ายๆ เพียงเพิ่มแท็ก <link> ลงในหน้าเว็บ
<link rel="preconnect" href="https://example.com">
คุณสามารถเพิ่มความเร็วการโหลดได้ 100-500 มิลลิวินาที โดยสร้างการเชื่อมต่อกับต้นทางที่สำคัญของบุคคลที่สามตั้งแต่เนิ่นๆ ตัวเลขเหล่านี้อาจดูเล็กน้อย แต่ก็สร้างความแตกต่างในวิธีที่ผู้ใช้รับรู้ประสิทธิภาพของหน้าเว็บได้
กรณีการใช้งานสำหรับ rel=preconnect
การรู้ว่าคุณกำลังดึงข้อมูลจากที่ใด แต่ไม่ใช่อะไร
เนื่องจากทรัพยากร Dependency ที่มีเวอร์ชันที่มีหลายเวอร์ชัน บางครั้งคุณกลับตกอยู่ในสถานการณ์ที่คุณทราบว่าจะขอทรัพยากรจาก CDN ที่เฉพาะเจาะจง แต่ไม่ใช่เส้นทางที่แน่นอนของ CDN
กรณีทั่วไปอีกกรณีหนึ่งคือการโหลดรูปภาพจาก CDN รูปภาพ ซึ่งเส้นทางที่แน่นอนของรูปภาพจะขึ้นอยู่กับคิวรี่สื่อหรือการตรวจสอบฟีเจอร์รันไทม์ในเบราว์เซอร์ของผู้ใช้
ในสถานการณ์เช่นนี้ หากทรัพยากรที่คุณจะดึงข้อมูลมีความสำคัญ คุณควรประหยัดเวลาให้ได้มากที่สุดโดยการเชื่อมต่อกับเซิร์ฟเวอร์ล่วงหน้า เบราว์เซอร์จะไม่ดาวน์โหลดไฟล์จนกว่าหน้าเว็บของคุณจะขอ แต่อย่างน้อยก็สามารถจัดการลักษณะการเชื่อมต่อได้ล่วงหน้า ช่วยให้ผู้ใช้ไม่ต้องรอหลายๆ รอบ
การสตรีมสื่อ
อีกตัวอย่างหนึ่งที่คุณอาจต้องการประหยัดเวลาในขั้นตอนการเชื่อมต่อ แต่ไม่จำเป็นต้องเริ่มดึงเนื้อหาทันที คือเมื่อสตรีมสื่อจากต้นทางอื่น
คุณอาจต้องรอจนกว่าสคริปต์จะโหลดและพร้อมประมวลผลสตรีมแล้ว ทั้งนี้ขึ้นอยู่กับวิธีที่หน้าเว็บของคุณจัดการกับเนื้อหาที่สตรีม การเชื่อมต่อล่วงหน้าจะช่วยลดเวลาในการรอการเดินทางไปยังรอบเดียวเมื่อคุณพร้อมเริ่มดึงข้อมูล
วิธีใช้ rel=preconnect
วิธีหนึ่งในการเริ่มต้น preconnect คือการเพิ่มแท็ก <link> ลงใน <head> ของเอกสาร
<head>
<link rel="preconnect" href="https://example.com">
</head>
การเชื่อมต่อล่วงหน้าจะมีผลเฉพาะกับโดเมนที่ไม่ใช่โดเมนต้นทางเท่านั้น คุณจึงไม่ควรใช้กับเว็บไซต์ดังกล่าว
นอกจากนี้ คุณยังเริ่มการเชื่อมต่อล่วงหน้าผ่านส่วนหัว HTTP ของ Link ได้ด้วย โดยทำดังนี้
Link: <https://example.com/>; rel=preconnect
ทรัพยากรบางประเภท เช่น แบบอักษร จะโหลดในโหมดไม่ระบุตัวตน สำหรับผู้ที่ต้องตั้งค่าแอตทริบิวต์ crossorigin โดยมีคำแนะนำ preconnect ดังนี้
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
หากคุณไม่ระบุแอตทริบิวต์ crossorigin เบราว์เซอร์จะดำเนินการค้นหา DNS เท่านั้น
แก้ไขปัญหาชื่อโดเมนเนิ่นๆ ด้วย rel=dns-prefetch
คุณจำเว็บไซต์ได้จากชื่อ แต่เซิร์ฟเวอร์จะจดจำตามที่อยู่ IP นี่คือสาเหตุที่ระบบชื่อโดเมน (DNS) มีอยู่ เบราว์เซอร์ใช้ DNS เพื่อแปลงชื่อเว็บไซต์เป็นที่อยู่ IP กระบวนการนี้คือการแก้ไขชื่อโดเมนเป็นขั้นตอนแรกในการสร้างการเชื่อมต่อ
หากหน้าเว็บจำเป็นต้องเชื่อมต่อกับโดเมนบุคคลที่สามจำนวนมาก การเชื่อมต่อโดเมนทั้งหมดล่วงหน้าจะส่งผลเสียต่อการทำงาน คำแนะนำ preconnect เหมาะสำหรับการเชื่อมต่อที่สำคัญที่สุดเท่านั้น สำหรับส่วนที่เหลือ ให้ใช้ <link rel=dns-prefetch> เพื่อประหยัดเวลาในขั้นตอนแรก ซึ่งก็คือการค้นหา DNS ซึ่งโดยปกติจะใช้เวลาประมาณ 20-120 มิลลิวินาที
การแปลง DNS เริ่มต้นในลักษณะเดียวกับ preconnect คือการเพิ่มแท็ก <link> ลงใน <head> ของเอกสาร
<link rel="dns-prefetch" href="http://example.com">
การรองรับเบราว์เซอร์สำหรับ dns-prefetch จะแตกต่างจากการรองรับ preconnect เล็กน้อย ดังนั้น dns-prefetch จึงเป็นเบราว์เซอร์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ preconnect ได้
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">หากต้องการใช้เทคนิคสำรองอย่างปลอดภัย ให้ใช้แท็กลิงก์แยกต่างหาก
<link rel="preconnect dns-prefetch" href="http://example.com">การใช้วิดีโอสำรอง
dns-prefetch ในแท็ก <link> เดียวกันจะทำให้เกิดข้อบกพร่องใน Safari ที่ preconnect จะถูกยกเลิก
ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)
การใช้ dns-prefetch และ preconnect ช่วยให้เว็บไซต์ลดระยะเวลาในการเชื่อมต่อกับต้นทางอื่นได้ จุดมุ่งหมายสูงสุดคือควรลดเวลาที่ใช้ในการโหลดทรัพยากรจากต้นทางอื่นให้น้อยที่สุด
ในส่วนของ Largest Contentful Paint (LCP) ที่ควรค้นหาทรัพยากรนั้นได้ทันที เนื่องจากตัวเลือก LCP เป็นส่วนสำคัญในประสบการณ์ของผู้ใช้ ค่า fetchpriority มูลค่า "high" ในทรัพยากร LCP ยังช่วยปรับปรุงการปรับปรุงนี้ให้ดียิ่งขึ้นด้วยการส่งสัญญาณความสำคัญของเนื้อหานี้ต่อเบราว์เซอร์เพื่อให้สามารถดึงข้อมูลได้ตั้งแต่เนิ่นๆ
ในกรณีที่ไม่สามารถทำให้เนื้อหา LCP ค้นพบได้ทันที ลิงก์ preload ซึ่งมีค่า fetchpriority เป็น "high" จะยังคงช่วยให้เบราว์เซอร์โหลดทรัพยากรได้โดยเร็วที่สุด
หากไม่มีตัวเลือกใดเหล่านี้เลย เนื่องจากระบบไม่รู้จักทรัพยากรที่แน่นอนจนกว่าจะโหลดหน้าเว็บในภายหลัง คุณสามารถใช้ preconnect ในทรัพยากรแบบข้ามต้นทางเพื่อลดผลกระทบของการค้นพบทรัพยากรที่ล่าช้าให้ได้มากที่สุด
นอกจากนี้ preconnect ยังมีราคาถูกกว่า preload ในแง่ของการใช้งานแบนด์วิดท์ แต่ก็ถือว่าไม่มีความเสี่ยงใดๆ เช่นเดียวกับในกรณีที่มีคำแนะนำ preload มากเกินไป คำแนะนำ preconnect ที่มากเกินไปยังคงใช้แบนด์วิดท์ในกรณีที่ต้องกังวลเรื่องใบรับรอง TLS โปรดระวังอย่าเชื่อมต่อกับต้นทางมากเกินไปเนื่องจากอาจทำให้เกิดการช่วงชิงแบนด์วิดท์
บทสรุป
คำแนะนำเกี่ยวกับแหล่งข้อมูลทั้ง 2 อย่างนี้มีประโยชน์ในการปรับปรุงความเร็วของหน้าเมื่อคุณทราบว่าจะดาวน์โหลดข้อมูลจากโดเมนของบุคคลที่สามเร็วๆ นี้ แต่คุณไม่ทราบ URL ที่แน่ชัดของทรัพยากรนั้นๆ ตัวอย่างเช่น CDN ที่กระจายไลบรารี JavaScript, รูปภาพ หรือแบบอักษร คำนึงถึงข้อจำกัดต่างๆ ใช้ preconnect สำหรับทรัพยากรที่สำคัญที่สุดเท่านั้น ใช้ dns-prefetch สำหรับทรัพยากรที่เหลือและวัดผลกระทบในชีวิตจริงเสมอ