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

ส่วนโอกาสของรายงาน 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

เพิ่มคำแนะนำด้านทรัพยากร Preconnect หรือ dns-prefetch ได้โดยติดตั้งและกำหนดค่าโมดูลที่มีพื้นที่สำหรับคำแนะนำด้านทรัพยากรของ User Agent

Magento

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

แหล่งข้อมูล