ดูข้อมูลเกี่ยวกับคำแนะนำทรัพยากร 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 รูปภาพ ซึ่งเส้นทางที่แน่นอนของรูปภาพจะขึ้นอยู่กับการค้นหาสื่อหรือการตรวจสอบฟีเจอร์รันไทม์ในเบราว์เซอร์ของผู้ใช้
ในสถานการณ์เหล่านี้ หากทรัพยากรที่คุณจะดึงข้อมูลมีความสำคัญ คุณควรประหยัดเวลาให้มากที่สุดเท่าที่ทำได้ด้วยการเชื่อมต่อกับเซิร์ฟเวอร์ล่วงหน้า เบราว์เซอร์จะไม่ดาวน์โหลดไฟล์จนกว่าหน้าเว็บของคุณจะร้องขอ แต่อย่างน้อยก็สามารถจัดการการเชื่อมต่อในด้านต่างๆ ล่วงหน้า ทำให้ผู้ใช้ไม่ต้องรอหลายรอบ
การสตรีมสื่อ
อีกตัวอย่างหนึ่งที่คุณอาจต้องการประหยัดเวลาในระยะการเชื่อมต่อ แต่ไม่จำเป็นต้องเริ่มดึงข้อมูลเนื้อหาทันทีคือเมื่อสตรีมสื่อจากต้นทางอื่น
คุณอาจต้องรอจนกว่าสคริปต์จะโหลดและพร้อมประมวลผลสตรีม ทั้งนี้ขึ้นอยู่กับวิธีที่หน้าเว็บจัดการเนื้อหาที่สตรีม การเชื่อมต่อล่วงหน้าช่วยลดเวลารอเป็น 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 สำหรับส่วนที่เหลือ และวัดผลในชีวิตจริงเสมอ