ส่วนโอกาสของรายงาน Lighthouse จะแสดงคําขอหลักทั้งหมดที่ยังไม่ได้จัดลําดับความสําคัญของคําขอดึงข้อมูลด้วย <link rel=preconnect> ดังนี้
ความเข้ากันได้กับเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่รองรับ <link rel=preconnect> ดูความเข้ากันได้กับเบราว์เซอร์
ปรับปรุงความเร็วในการโหลดหน้าเว็บด้วยการเชื่อมต่อล่วงหน้า
พิจารณาเพิ่ม preconnect หรือ dns-prefetch ซึ่งบอกถึงทรัพยากรเพื่อสร้างการเชื่อมต่อกับต้นทางที่สำคัญของบุคคลที่สามตั้งแต่เนิ่นๆ
<link rel="preconnect"> แจ้งให้เบราว์เซอร์ทราบว่าหน้าเว็บของคุณตั้งใจจะสร้างการเชื่อมต่อกับต้นทางอื่น และคุณต้องการให้กระบวนการเริ่มต้นโดยเร็วที่สุด
การสร้างการเชื่อมต่อมักใช้เวลานานมากในเครือข่ายที่ทำงานช้า โดยเฉพาะอย่างยิ่งเมื่อเป็นการเชื่อมต่อที่ปลอดภัย เนื่องจากอาจเกี่ยวข้องกับการค้นหา DNS, การเปลี่ยนเส้นทาง และการไปกลับหลายรอบไปยังเซิร์ฟเวอร์สุดท้ายที่จัดการคําขอของผู้ใช้
การจัดการสิ่งเหล่านี้ล่วงหน้าจะช่วยให้แอปพลิเคชันทำงานได้เร็วขึ้นมากสำหรับผู้ใช้โดยไม่ส่งผลเสียต่อการใช้แบนด์วิดท์ ส่วนใหญ่เวลาในการเชื่อมต่อจะหมดไปกับการเฝ้ารอ แทนที่จะแลกเปลี่ยนข้อมูล
การแสดงเจตนาของคุณต่อเบราว์เซอร์นั้นง่ายเพียงเพิ่มแท็กลิงก์ลงในหน้าเว็บ
<link rel="preconnect" href="https://example.com">
ซึ่งจะช่วยให้เบราว์เซอร์ทราบว่าหน้าเว็บตั้งใจจะเชื่อมต่อกับ example.com และดึงข้อมูลเนื้อหาจากที่นั่น
โปรดทราบว่าแม้ <link rel="preconnect"> จะมีราคาถูก แต่ก็อาจต้องรอ CPU อย่างคุ้มค่าได้ โดยเฉพาะอย่างยิ่งในการเชื่อมต่อที่ปลอดภัย
ซึ่งเป็นสิ่งที่แย่มากหากไม่ได้ใช้งานการเชื่อมต่อภายใน 10 วินาที ขณะที่เบราว์เซอร์ปิด ทำให้สูญเสียการเชื่อมต่อในช่วงแรก
โดยทั่วไปแล้ว ให้ลองใช้ <link rel="preload"> เนื่องจากเป็นการปรับแต่งประสิทธิภาพที่ครอบคลุมมากกว่า แต่อย่าลืมเก็บ <link rel="preconnect"> ไว้ในกล่องเครื่องมือสำหรับกรณีพิเศษ เช่น
<link rel="dns-prefetch"> เป็น <link> อีกประเภทหนึ่งที่เกี่ยวข้องกับการเชื่อมต่อ
ซึ่งจะจัดการการค้นหา DNS เท่านั้น แต่รองรับเบราว์เซอร์ได้หลากหลายกว่า จึงอาจใช้เป็นทางเลือกสำรองได้
คุณใช้แอปนี้ในลักษณะเดียวกันทุกประการ ดังนี้
<link rel="dns-prefetch" href="https://example.com" />.
คำแนะนำเฉพาะสแต็ก
Drupal
เพิ่มคำแนะนำด้านทรัพยากร Preconnect หรือ dns-prefetch ได้โดยติดตั้งและกำหนดค่าโมดูลที่มีพื้นที่สำหรับคำแนะนำด้านทรัพยากรของ User Agent
Magento
แก้ไขเลย์เอาต์ของธีม และเพิ่มการเชื่อมต่อล่วงหน้าหรือคำแนะนำด้านทรัพยากรที่ DNS ดึงมาล่วงหน้า