เชื่อมต่อกับต้นทางที่จำเป็นล่วงหน้า

ส่วนโอกาสของรายงาน Lighthouse จะแสดงคำขอหลักทั้งหมดที่ยังไม่ได้จัดลำดับความสำคัญคำขอดึงข้อมูลด้วย <link rel=preconnect> ดังนี้

ภาพหน้าจอของ Lighthouse 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

ใช้โมดูลที่รองรับคำแนะนำเกี่ยวกับทรัพยากรของ User Agent เพื่อให้คุณสามารถติดตั้งและกำหนดค่าคำแนะนำด้านทรัพยากรสำหรับ DNS ล่วงหน้าหรือการเชื่อมต่อล่วงหน้า

Magento

แก้ไขเลย์เอาต์ของธีม และเพิ่มคำแนะนำด้านทรัพยากรการเชื่อมต่อล่วงหน้าหรือการดึงข้อมูล DNS ล่วงหน้า

แหล่งข้อมูล