สร้างการเชื่อมต่อเครือข่ายตั้งแต่เนิ่นๆ เพื่อปรับปรุงความเร็วหน้าเว็บที่รับรู้ได้

ดูข้อมูลเกี่ยวกับ 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 นั้น

วันที่ URL ของสคริปต์พร้อมชื่อเวอร์ชัน
ตัวอย่างของ URL ที่มีเวอร์ชัน

กรณีทั่วไปอีกกรณีคือการโหลดรูปภาพจาก CDN รูปภาพ ซึ่งเส้นทางที่แน่นอนสำหรับรูปภาพจะขึ้นอยู่กับคำค้นหาสื่อหรือการตรวจสอบฟีเจอร์รันไทม์ในเบราว์เซอร์ของผู้ใช้

วันที่ URL ของ CDN รูปภาพที่มีพารามิเตอร์ size=300x400 และ Quality=auto
ตัวอย่าง URL ของ 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 สำหรับส่วนที่เหลือ และวัดผลในชีวิตจริงเสมอ