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