ดูข้อมูลเกี่ยวกับคำแนะนำทรัพยากร 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
ทราบที่มา แต่ไม่ทราบสิ่งที่ดึงข้อมูล
บางครั้งคุณอาจพบว่าตัวเองอยู่ในสถานการณ์ที่รู้ว่าจะขอทรัพยากรจาก CDN บางรายการ แต่ไม่ทราบเส้นทางที่แน่นอนของทรัพยากรนั้น เนื่องจากมีการพึ่งพาเวอร์ชัน
อีกกรณีหนึ่งที่พบบ่อยคือการโหลดรูปภาพจาก CDN รูปภาพ ซึ่งเส้นทางที่แน่นอนของรูปภาพจะขึ้นอยู่กับการค้นหาสื่อหรือการตรวจสอบฟีเจอร์รันไทม์ในเบราว์เซอร์ของผู้ใช้
ในกรณีเช่นนี้ หากทรัพยากรที่จะดึงข้อมูลมีความสำคัญ คุณควรประหยัดเวลาให้มากที่สุดโดยเชื่อมต่อกับเซิร์ฟเวอร์ล่วงหน้า เบราว์เซอร์จะไม่ดาวน์โหลดไฟล์จนกว่าหน้าเว็บจะขอ แต่อย่างน้อยก็จัดการด้านการเชื่อมต่อล่วงหน้าได้ ซึ่งช่วยให้ผู้ใช้ไม่ต้องรอหลายรอบ
การสตรีมสื่อ
อีกตัวอย่างหนึ่งที่คุณอาจต้องการประหยัดเวลาในระยะการเชื่อมต่อ แต่ไม่จำเป็นต้องเริ่มดึงข้อมูลเนื้อหาทันทีคือเมื่อสตรีมสื่อจากต้นทางอื่น
คุณอาจต้องรอจนกว่าสคริปต์จะโหลดและพร้อมประมวลผลสตรีม ทั้งนี้ขึ้นอยู่กับวิธีที่หน้าเว็บจัดการเนื้อหาที่สตรีม การเชื่อมต่อล่วงหน้าจะช่วยลดความล่าช้าในการรอให้เหลือเพียง 1 รอบเมื่อคุณพร้อมเริ่มดึงข้อมูล
วิธีติดตั้งใช้งาน 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
ผลต่อ Largest Contentful Paint (LCP)
การใช้ dns-prefetch และ preconnect ช่วยให้เว็บไซต์ลดเวลาในการเชื่อมต่อกับต้นทางอื่นได้ เป้าหมายสูงสุดคือลดเวลาในการโหลดทรัพยากรจากต้นทางอื่นให้น้อยที่สุด
สําหรับ Largest Contentful Paint (LCP) การที่ทรัพยากรค้นพบได้ทันทีจะดีกว่า เนื่องจาก LCP Candidate เป็นส่วนสําคัญของประสบการณ์ของผู้ใช้ ค่า fetchpriority เท่ากับ "high" ในทรัพยากร LCP สามารถปรับปรุงเรื่องนี้ให้ดียิ่งขึ้นได้ด้วยการส่งสัญญาณความสำคัญของชิ้นงานนี้ไปยังเบราว์เซอร์เพื่อให้ดึงข้อมูลได้ตั้งแต่เนิ่นๆ
ในกรณีที่ทำให้ชิ้นงาน LCP ค้นพบได้ทันทีไม่ได้ ลิงก์ preload ที่มีค่า fetchpriority เป็น "high" จะยังคงอนุญาตให้เบราว์เซอร์โหลดทรัพยากรโดยเร็วที่สุด
หากไม่มีตัวเลือกใดเลย เนื่องจากระบบจะไม่ทราบว่าทรัพยากรที่แน่นอนคืออะไรจนกว่าจะโหลดหน้าเว็บในภายหลัง คุณสามารถใช้ preconnect ในทรัพยากรข้ามแหล่งที่มาเพื่อลดผลกระทบจากการค้นพบทรัพยากรช้าที่สุดเท่าที่จะเป็นไปได้
นอกจากนี้ preconnect ยังใช้แบนด์วิดท์น้อยกว่า preload แต่ก็ยังมีความไม่แน่นอนอยู่ เช่นเดียวกับคำแนะนำ preload มากเกินไป คำแนะนำ preconnect มากเกินไปจะยังคงใช้แบนด์วิดท์ในกรณีที่เกี่ยวข้องกับใบรับรอง TLS โปรดระวังอย่าเชื่อมต่อกับต้นทางล่วงหน้ามากเกินไป เนื่องจากอาจทำให้เกิดปัญหาการแย่งแบนด์วิดท์
บทสรุป
คำแนะนำเกี่ยวกับทรัพยากร 2 รายการนี้มีประโยชน์ในการปรับปรุงความเร็วหน้าเว็บเมื่อคุณรู้ว่าจะดาวน์โหลดบางอย่างจากโดเมนของบุคคลที่สามในเร็วๆ นี้ แต่ไม่ทราบ URL ที่แน่นอนของทรัพยากร เช่น CDN ที่เผยแพร่ไลบรารี JavaScript, รูปภาพ หรือแบบอักษร โปรดคำนึงถึงข้อจำกัดต่างๆ ใช้ preconnect กับทรัพยากรที่สำคัญที่สุดเท่านั้น และใช้ dns-prefetch กับทรัพยากรที่เหลือ และวัดผลลัพธ์ในการใช้งานจริงเสมอ