ส่วนโอกาสของรายงาน Lighthouse จะแสดงคำขอหลักทั้งหมดที่ยังไม่ได้จัดลำดับความสำคัญคำขอดึงข้อมูลด้วย <link rel=preconnect>
ดังนี้
![ภาพหน้าจอของ Lighthouse Preconnect ไปยังการตรวจสอบต้นทางที่จำเป็น](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preconnect/image/a-screenshot-the-lightho-689699d0527e1.png?authuser=6&hl=th)
ความเข้ากันได้กับเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่รองรับ <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
ใช้โมดูลที่รองรับคำแนะนำเกี่ยวกับทรัพยากรของ User Agent เพื่อให้คุณสามารถติดตั้งและกำหนดค่าคำแนะนำด้านทรัพยากรสำหรับ DNS ล่วงหน้าหรือการเชื่อมต่อล่วงหน้า
Magento
แก้ไขเลย์เอาต์ของธีม และเพิ่มคำแนะนำด้านทรัพยากรการเชื่อมต่อล่วงหน้าหรือการดึงข้อมูล DNS ล่วงหน้า