למרות שהמטרה של כולם היא לצמצם את תקציב ביצועי האינטרנט, עדיין יש צורך להשתמש בשירותי צד שלישי. בעת שימוש בשירותים אלה, "בדיקת DNS" זמנים יכולים לצרוך חלק ניכר מהתקציב, בהתאם למספר השירותים. עומסים אלו משפיעים על היבטים שונים של מהירות הדף, כולל First Contentful Paint (FCP).
מטרת שני המושגים הללו היא לייעל את זמני החיבור של צד שלישי. לפני הבנת ההבדלים בין שני המושגים הללו, יש צורך להבין מה בדיוק קורה כאשר מוגשת בקשת צד שלישי:
- הדומיין נפתר לקבלת כתובת IP.
- נוצר חיבור עם השרת.
- החיבור מוצפן כדי להבטיח אבטחה.
היררכיה זו חוזרת על עצמה עבור כל חיבור של צד שלישי. כאן נכנס לתמונה ההבדל בין preconnect ל-dns-prefetch.
- חיבור מראש: מבטיח שכל שלושת השלבים שהוזכרו לעיל מוגדרים מראש.
- אחזור DNS מראש: משמש רק להמרת שם הדומיין לכתובת IP בשלב הראשון.
כפי שאתה יכול לראות, חיבור מוקדם יותר מקיף ומועיל. עם זאת, הכל כרוך בתשלום. שימוש בחיבור מראש עבור כל החיבורים שלך עלול להשפיע לרעה על האופטימיזציה של הדף שלך. לכן, יעליך להשתמש ב-preconnect רק עבור חיבורים קריטיים ולהשתמש ב-dns-prefetch עבור כל שאר החיבורים של צד שלישי.
סיכום השימוש
בהתחשב במידע לעיל, הנה סיכום מהיר של השימוש בהם:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">
תאימות דפדפן
תוך כדי דיון על השימוש בהם, חשוב גם להזכיר את תאימות הדפדפן. שני מושגים הקשורים זה לזה זוכים לתמיכה רחבה על ידי דפדפנים מודרניים, אך השימוש בהם אינו חופף לחלוטין. Preconnect נתמך על ידי כ-97% מהדפדפניםתוך dns-prefetch נתמך על ידי 83% מהדפדפנים (נכון ליוני 2024).
תרומה לתקציב ביצועי אינטרנט
- Preconnect יכול לספק שיפור מהירות כולל של 100-500ms.
- DNS-prefetch יכול להאיץ כל חיבור על ידי 20-120ms.
אנו מתכננים לערוך בדיקות משלנו כדי לספק דוגמאות מקומיות מספקות יותר.
לבסוף, אני רוצה להמליץ ולתת קרדיט על הבלוג של Ceyhun Enki Aksan, שתרם רבות להבנתי בעת הכנת מאמר זה: הבלוג של Ceyhun Enki Aksan.