แม้ว่าเป้าหมายของทุกคนคือการลดงบประมาณประสิทธิภาพของเว็บ แต่ก็ยังจำเป็นต้องใช้บริการของบุคคลที่สาม เมื่อใช้บริการเหล่านี้ "ค้นหา DNS" เวลาอาจใช้งบประมาณส่วนสำคัญ ขึ้นอยู่กับจำนวนบริการ การโหลดเหล่านี้ส่งผลต่อความเร็วเพจในด้านต่างๆ รวมถึง First Contentful Paint (FCP)
วัตถุประสงค์ของแนวคิดทั้งสองนี้คือเพื่อเพิ่มประสิทธิภาพเวลาการเชื่อมต่อของบุคคลที่สาม ก่อนที่จะเข้าใจความแตกต่างระหว่างแนวคิดทั้งสองนี้ จำเป็นต้องทำความเข้าใจว่าจะเกิดอะไรขึ้นเมื่อมีการส่งคำขอจากบุคคลที่สาม:
- โดเมนได้รับการแก้ไขเพื่อรับที่อยู่ IP
- มีการเชื่อมต่อกับเซิร์ฟเวอร์
- การเชื่อมต่อถูกเข้ารหัสเพื่อความปลอดภัย
ลำดับชั้นนี้เกิดขึ้นซ้ำสำหรับการเชื่อมต่อของบุคคลที่สามแต่ละรายการ นี่คือจุดที่ความแตกต่างระหว่างการเชื่อมต่อล่วงหน้าและการดึงข้อมูล DNS ล่วงหน้าเข้ามามีบทบาท
- เชื่อมต่อล่วงหน้า: ตรวจสอบให้แน่ใจว่าทั้งสามขั้นตอนที่กล่าวถึงข้างต้นได้รับการกำหนดค่าไว้ล่วงหน้า
- DNS-ดึงข้อมูลล่วงหน้า: ทำหน้าที่แปลงชื่อโดเมนเป็นที่อยู่ IP ในขั้นตอนแรกเท่านั้น
อย่างที่คุณเห็น การเชื่อมต่อล่วงหน้ามีความครอบคลุมและเป็นประโยชน์มากกว่า อย่างไรก็ตามทุกอย่างมีค่าใช้จ่าย การใช้การเชื่อมต่อล่วงหน้าสำหรับการเชื่อมต่อทั้งหมดของคุณอาจส่งผลเสียต่อการเพิ่มประสิทธิภาพเพจของคุณได้ ดังนั้น ยคุณควรใช้การเชื่อมต่อล่วงหน้าสำหรับการเชื่อมต่อที่สำคัญเท่านั้น และใช้ dns-prefetch สำหรับการเชื่อมต่อของบุคคลที่สามอื่นๆ ทั้งหมด.
สรุปการใช้งาน
จากข้อมูลข้างต้น ต่อไปนี้เป็นข้อมูลสรุปโดยย่อเกี่ยวกับการใช้งาน:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">ความเข้ากันได้ของเบราว์เซอร์
ในขณะที่พูดคุยเกี่ยวกับการใช้งาน สิ่งสำคัญที่ต้องพูดถึงความเข้ากันได้ของเบราว์เซอร์ด้วย แนวคิดทั้งสองที่เกี่ยวข้องอย่างใกล้ชิดนี้ได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์สมัยใหม่ แต่การใช้งานไม่ได้ทับซ้อนกันโดยสิ้นเชิง การเชื่อมต่อล่วงหน้าได้รับการสนับสนุนโดยเบราว์เซอร์ประมาณ 97%ในขณะที่ dns-prefetch รองรับเบราว์เซอร์ 83% (ณ เดือนมิถุนายน 2024).
การมีส่วนร่วมในงบประมาณประสิทธิภาพของเว็บ
- การเชื่อมต่อล่วงหน้าสามารถช่วยเพิ่มความเร็วโดยรวมได้ 100-500ms.
- DNS-Prefetch สามารถเพิ่มความเร็วการเชื่อมต่อแต่ละครั้งได้ 20-120ms.
เราวางแผนที่จะดำเนินการทดสอบของเราเองเพื่อแสดงตัวอย่างในท้องถิ่นที่น่าพึงพอใจยิ่งขึ้น
สุดท้ายนี้ ฉันอยากจะแนะนำและให้เครดิตบล็อกของ Ceyhun Enki Aksan ซึ่งมีส่วนช่วยอย่างมากต่อความเข้าใจของฉันในขณะที่เตรียมบทความนี้: บล็อกของ Ceyhun Enki Aksan
