ดูข้อมูลเกี่ยวกับคำแนะนำด้านทรัพยากร rel=preconnect และ rel=dns-prefetch รวมถึงวิธีใช้
เบราว์เซอร์ต้องสร้างการเชื่อมต่อก่อนจึงจะขอทรัพยากรจากเซิร์ฟเวอร์ได้ การสร้างการเชื่อมต่อที่ปลอดภัยมี 3 ขั้นตอนดังนี้
ค้นหาชื่อโดเมนและแปลงเป็นที่อยู่ IP
ตั้งค่าการเชื่อมต่อกับเซิร์ฟเวอร์
เข้ารหัสการเชื่อมต่อเพื่อความปลอดภัย
ในแต่ละขั้นตอนเหล่านี้ เบราว์เซอร์จะส่งข้อมูลไปยังเซิร์ฟเวอร์ และเซิร์ฟเวอร์จะส่งการตอบกลับกลับมา การเดินทางจากต้นทางไปยังปลายทางและกลับมานี้เรียกว่าการเดินทางไปกลับ
การเดินทางไปกลับครั้งเดียวอาจใช้เวลานานพอสมควร ทั้งนี้ขึ้นอยู่กับสภาพเครือข่าย กระบวนการตั้งค่าการเชื่อมต่ออาจเกี่ยวข้องกับการเดินทางไปกลับสูงสุด 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 รูปภาพ ซึ่งเส้นทางที่แน่นอนของรูปภาพจะขึ้นอยู่กับสื่อที่กำหนดหรือการตรวจสอบฟีเจอร์รันไทม์ในเบราว์เซอร์ของผู้ใช้
ในสถานการณ์เหล่านี้ หากทรัพยากรที่คุณกำลังจะดึงข้อมูลมีความสำคัญ คุณควรประหยัดเวลาให้ได้มากที่สุดโดยเชื่อมต่อล่วงหน้ากับเซิร์ฟเวอร์ เบราว์เซอร์จะไม่ดาวน์โหลดไฟล์จนกว่าหน้าเว็บจะขอ แต่เบราว์เซอร์จะจัดการด้านการเชื่อมต่อล่วงหน้าได้ ซึ่งจะช่วยให้ผู้ใช้ไม่ต้องรอการเดินทางไปกลับหลายครั้ง
การสตรีมสื่อ
อีกตัวอย่างหนึ่งที่คุณอาจต้องการประหยัดเวลาในระยะการเชื่อมต่อ แต่ไม่จำเป็นต้องเริ่มดึงข้อมูลเนื้อหาทันทีคือเมื่อสตรีมสื่อจากต้นทางอื่น
คุณอาจต้องการรอจนกว่าสคริปต์จะโหลดและพร้อมประมวลผลสตรีม ทั้งนี้ขึ้นอยู่กับวิธีที่หน้าเว็บจัดการเนื้อหาที่สตรีม การเชื่อมต่อล่วงหน้าจะช่วยลดเวลารอให้เหลือการเดินทางไปกลับครั้งเดียวเมื่อคุณพร้อมที่จะเริ่มดึงข้อมูล
วิธีใช้ 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 Lookup เท่านั้น
แปลงชื่อโดเมนล่วงหน้าด้วย 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 เป็นส่วนสำคัญของประสบการณ์ของผู้ใช้ ค่า fetchpriority เป็น "high" ในทรัพยากร LCP สามารถปรับปรุงส่วนนี้ได้เพิ่มเติมโดยส่งสัญญาณความสำคัญของเนื้อหานี้ไปยังเบราว์เซอร์เพื่อให้เบราว์เซอร์ดึงข้อมูลเนื้อหาได้เร็วขึ้น
ในกรณีที่ไม่สามารถทำให้เนื้อหา LCP ค้นพบได้ทันที ลิงก์ preload ซึ่งมีค่า fetchpriority เป็น "high" เช่นกันจะยังคงอนุญาตให้เบราว์เซอร์โหลดทรัพยากรโดยเร็วที่สุด
หากไม่มีตัวเลือกใดตัวเลือกหนึ่งเหล่านี้ เนื่องจากระบบจะไม่ทราบทรัพยากรที่แน่นอนจนกว่าจะถึงช่วงหลังของการโหลดหน้าเว็บ คุณสามารถใช้ preconnect กับทรัพยากรข้ามต้นทางเพื่อลดผลกระทบของการค้นพบทรัพยากรที่ล่าช้าให้ได้มากที่สุด
นอกจากนี้ preconnect ยังใช้แบนด์วิดท์น้อยกว่า preload แต่ก็ยังมีความเสี่ยงอยู่ เช่นเดียวกับคำแนะนำ preload ที่มากเกินไป คำแนะนำ preconnect ที่มากเกินไปจะยังคงใช้แบนด์วิดท์ในส่วนของใบรับรอง TLS โปรดระวังอย่าเชื่อมต่อล่วงหน้ากับต้นทางมากเกินไป เนื่องจากอาจทำให้เกิดการแย่งชิงแบนด์วิดท์
บทสรุป
คำแนะนำด้านทรัพยากร 2 รายการนี้มีประโยชน์ในการปรับปรุง Page Speed เมื่อคุณทราบว่าจะดาวน์โหลดบางอย่างจากโดเมนของบุคคลที่สามในเร็วๆ นี้ แต่ไม่ทราบ URL ที่แน่นอนของทรัพยากร ตัวอย่างเช่น CDN ที่เผยแพร่ไลบรารี JavaScript รูปภาพ หรือฟอนต์ โปรดคำนึงถึงข้อจำกัด ใช้ preconnect เฉพาะกับทรัพยากรที่สำคัญที่สุด ใช้ dns-prefetch กับทรัพยากรอื่นๆ และวัดผลกระทบในโลกแห่งความเป็นจริงเสมอ