יש דרכים רבות לשפר את ביצועי האינטרנט. אחד מהם הוא טעינת תוכן מראש שיהיה צורך בהמשך. עיבוד מקדים של CSS, עיבוד מקדים של עמוד מלא או פתרון שם דומיין. אנחנו עושים הכל מראש, ואז מציגים מיד את התוצאה! נשמע מגניב.

מה שעוד יותר מגניב הוא שזה מיושם בצורה פשוטה מאוד. חמישה תגים תן לדפדפן פקודה לבצע פעולות מקדימות:

<link rel="prefetch" href="/iw/style.css" as="style" />
<link rel="preload" href="/iw/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

בואו נסביר בקצרה מה הם עושים ומתי להשתמש בהם.

קפוץ אל: preload · להביא מראש · להתחבר מראש · dns-prefetch · עיבוד מראש

preload

<link rel= "preload"> אומר לדפדפן לטעון ולשמור במטמון משאב (כגון סקריפט או גיליון סגנונות) בהקדם האפשרי. זה שימושי כאשר יש צורך במשאב מספר שניות לאחר טעינת הדף - ואתה רוצה לזרז את התהליך.

הדפדפן לא עושה כלום עם המשאב לאחר הטעינה. סקריפטים אינם מבוצעים, גיליונות סגנונות אינם מוחלים. המשאב פשוט שמור במטמון ומיד זמין לפי בקשה.

תחביר

<link rel="preload" href="/iw/style.css" as="style" />

href מצביע על המשאב שברצונך להוריד.

as יכול להיות כל דבר שניתן להוריד בדפדפן:

• style עבור גיליונות סגנונות,
• script עבור תסריטים,
• font עבור גופנים,
• fetch עבור משאבים שנטענו באמצעות fetch() או XMLHttpRequest,
• ראה רשימה מלאה ב-MDN.

חשוב לציין את התכונה as - זה עוזר לדפדפן לתעדף נכון ולתזמן הורדות.

מתי להשתמש

השתמש בטעינה מראש כאשר יש צורך במשאב בעתיד הקרוב מאוד. לדוגמה:

• גופנים לא סטנדרטיים מקובץ חיצוני:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  ברירת מחדל comic-sans.woff2 יתחיל לטעון רק לאחר הורדה וניתוח index.css. כדי להימנע מהמתנה כל כך ארוכה, אתה יכול להוריד את הגופן מוקדם יותר באמצעות <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• אם תפריד את הסגנונות שלך לפי הגישה CSS קריטי לשני חלקים, קריטי (לעיבוד מיידי) ולא קריטי:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  עם גישה זו, סגנונות לא קריטיים יתחילו לטעון רק כאשר JavaScript פועל, מה שיכול לקרות כמה שניות לאחר העיבוד. במקום לחכות השתמש JS <link rel= "preload">כדי להתחיל להוריד מוקדם יותר:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/iw/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

אל תשתמש יתר על המידה בטעינה מוקדמת. אם תטען הכל ברצף, האתר לא יאיץ בצורה קסומה, להיפך, הוא ימנע מהדפדפן לתכנן נכון את עבודתו.

אין לבלבל עם אחזור מראש. אל תשתמש <link rel= "preload">, אם אינך זקוק למשאב מיד לאחר טעינת הדף. אם אתה צריך את זה מאוחר יותר, למשל עבור העמוד הבא, אז השתמש <link rel= "prefetch">.

פרטים

זהו תג חובה לביצוע על ידי הדפדפן (אם הוא תומך בכך), בניגוד לכל שאר התגים קשור לטעינה מוקדמת. הדפדפן חייב להוריד את המשאב שצוין ב <link rel="preload">. במקרים אחרים היא עשויה להתעלם מטעינה מוקדמת, למשל אם היא פועלת בחיבור איטי.

סדרי עדיפויות. דפדפנים בדרך כלל מקצים עדיפויות שונות למשאבים שונים (סגנונות, סקריפטים, גופנים וכו') על מנת לטעון תחילה את המשאבים החשובים ביותר. במקרה זה, הדפדפן קובע עדיפות לפי תכונה as. עבור דפדפן כרום אתה יכול להסתכל על טבלת עדיפות מלאה.

להביא מראש

<link rel= "prefetch"> מבקש מהדפדפן להוריד ולאחסן משאב (כגון סקריפט או גיליון סגנונות) ברקע. הטעינה מתרחשת בעדיפות נמוכה כך שהיא לא מפריעה למשאבים חשובים יותר. זה שימושי אם יש צורך במשאב בעמוד הבא וברצונך לשמור אותו במטמון מראש.

גם כאן הדפדפן לא עושה כלום עם המשאב לאחר הטעינה. סקריפטים אינם מבוצעים, גיליונות סגנונות אינם מוחלים. המשאב פשוט שמור במטמון ומיד זמין לפי בקשה.

תחביר

<link rel="prefetch" href="/iw/style.css" as="style" />

href מצביע על המשאב שברצונך להוריד.

as יכול להיות כל דבר שניתן להוריד בדפדפן:

• style עבור גיליונות סגנונות,
• script עבור תסריטים,
• font עבור גופנים,
• fetch עבור משאבים שנטענו באמצעות fetch() או XMLHttpRequest,
• ראה רשימה מלאה ב-MDN.

חשוב לציין את התכונה as - זה עוזר לדפדפן לתעדף נכון ולתזמן הורדות.

מתי להשתמש

לטעינת משאבים מדפים אחרים, אם אתה צריך משאב מדף אחר, ואתה רוצה לטעון אותו מראש כדי להאיץ את העיבוד של הדף הזה. לדוגמה:

• יש לך חנות מקוונת, ו-40% מהמשתמשים עוזבים את דף הבית של דף המוצר. להשתמש <link rel= "prefetch">, טעינת קובצי CSS ו-JS לעיבוד דפי מוצר.
• יש לך אפליקציית עמוד בודד, ודפים שונים טוענים חבילות שונות. כאשר משתמש מבקר בדף, ניתן לטעון מראש חבילות עבור כל הדפים שאליהם הוא מקשר.

סביר להניח שניתן להשתמש בתג זה בבטחה בכל היקף.. דפדפנים בדרך כלל מתזמנים אחזור מראש עם העדיפות הנמוכה ביותר, כך שזה לא מפריע לאף אחד. רק זכור שזה צורך תעבורת משתמשים, שעלולה לעלות כסף.

לא לבקשות דחופות. אל תשתמש <link rel= "prefetch">, כאשר יש צורך במשאב תוך מספר שניות. במקרה זה, השתמש <link rel= "preload">.

פרטים

תג אופציונלי. הדפדפן אינו נדרש לבצע הוראה זו; הוא עלול להתעלם ממנה, למשל, בחיבור איטי.

עדיפות בכרום. בכרום <link rel= "prefetch"> מבוצע בדרך כלל בעדיפות מינימלית (ראה טבלת עדיפות מלאה), כלומר לאחר טעינת כל השאר.

להתחבר מראש

<link rel= "preconnect"> מבקש מהדפדפן להתחבר לדומיין מראש כאשר תרצו להאיץ את הגדרת החיבור בעתיד.

הדפדפן חייב ליצור חיבור אם הוא מאחזר משאבים כלשהם מדומיין חדש של צד שלישי. לדוגמה, אם הוא טוען גופנים של Google, גופני React מ-CDN, או מבקש תגובת JSON משרת API.

יצירת חיבור חדש אורכת בדרך כלל כמה מאות אלפיות שניות. זה נעשה פעם אחת, אבל עדיין לוקח זמן. אם יצרת חיבור מראש, תחסוך זמן ותוריד משאבים מהדומיין הזה מהר יותר.

תחביר

<link rel= "preconnect" href="https://api.my-app.com" />

href מציין את שם הדומיין שעבורו ברצונך לקבוע את כתובת ה-IP. ניתן לציין עם קידומת (https://domain.com) או בלעדיו (//domain.com).

מתי להשתמש

השתמש עבור דומיינים שיהיה צורך בקרוב כדי להוריד משם סגנון, סקריפט או תמונה חשובים, אך אינך יודע עדיין את כתובת האתר של המשאב. לדוגמה:

• האפליקציה שלך מתארחת ב- my-app.com ועושה בקשות AJAX ל api.my-app.com: אינך מכיר את השאילתות הספציפיות מראש מכיוון שהן נעשות באופן דינמי מ-JS. כאן זה די מתאים להשתמש בתג כדי להתחבר מראש לדומיין.
• האפליקציה שלך מתארחת ב- my-app.com ומשתמש בגוגל גופנים. מורידים אותם בשני שלבים: ראשית, קובץ ה-CSS מוריד מהדומיין fonts.googleapis.com, אז הקובץ הזה מבקש גופנים עם fonts.gstatic.com. אתה לא יכול לדעת מאיזה קובצי גופן ספציפיים fonts.gstatic.com תצטרך עד שתטען את קובץ ה-CSS, כך שנוכל רק ליצור חיבור ראשוני מראש.

השתמש בתג זה כדי להאיץ מעט סקריפט או סגנון של צד שלישי עקב חיבור שנקבע מראש.

אין לעשות שימוש יתר. הקמה ותחזוקה של חיבור היא פעולה יקרה הן ללקוח והן לשרת. השתמש בתג זה עבור מקסימום 4-6 דומיינים.

פרטים

תג אופציונלי. הדפדפן אינו נדרש לפעול לפי הוראה זו ועלול להתעלם ממנה, למשל, אם כבר נוצרו חיבורים רבים או במקרה אחר.

מה כולל תהליך החיבור?. כדי להתחבר לכל אתר, על הדפדפן לבצע את הפעולות הבאות:

• רזולוציית DNS. מצא כתובת IP של שרת (216.58.215.78) עבור שם הדומיין שצוין (google.com).
• לחיצת יד של TCP. החלף מנות (לקוח → שרת → לקוח) כדי ליזום חיבור TCP עם השרת.
• לחיצת יד TLS (אתרי HTTPS בלבד). שני סבבים של החלפת מנות (לקוח → שרת → לקוח → שרת → לקוח) כדי להתחיל הפעלת TLS מאובטחת.

הערה: HTTP/3 ישפר ויאיץ את מנגנון לחיצת היד, אבל זה עדיין רחוק.

dns-prefetch

<link rel= "dns-prefetch"> מבקש מהדפדפן לבצע רזולוציית DNS עבור הדומיין מראש אם תתחברו אליו בקרוב ותרצו לזרז את החיבור הראשוני.

הדפדפן חייב לקבוע את כתובת ה-IP של הדומיין אם הוא יאחזר משאבים כלשהם מדומיין חדש של צד שלישי. לדוגמה, טעינת גופנים של Google, גופני React מ-CDN, או בקשת תגובת JSON משרת API.

עבור כל תחום חדש, רזולוציית רשומת DNS אורכת בדרך כלל כ-20-120 אלפיות השנייה. זה משפיע רק על הטעינה של המשאב הראשון מתחום נתון, אבל עדיין מכניס עיכוב. אם נבצע רזולוציית DNS מראש, נחסוך זמן ונטען את המשאב מהר יותר.

תחביר

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href מציין את שם הדומיין שעבורו ברצונך להגדיר את כתובת ה-IP. ניתן לציין עם קידומת (https://domain.com) או בלעדיו (//domain.com).

מתי להשתמש

השתמש עבור דומיינים שיהיה צורך בקרוב להוריד משם משאבים שהדפדפן לא יודע עליהם מראש. לדוגמה:

• האפליקציה שלך מתארחת ב- my-app.com ועושה בקשות AJAX ל api.my-app.com: אינך מכיר את השאילתות הספציפיות מראש מכיוון שהן נעשות באופן דינמי מ-JS. כאן זה די מתאים להשתמש בתג כדי להתחבר מראש לדומיין.
• האפליקציה שלך מתארחת ב- my-app.com, ומשתמש בגוגל גופנים. מורידים אותם בשני שלבים: ראשית, הורדת קובץ ה-CSS מהדומיין fonts.googleapis.com, אז הקובץ הזה מבקש גופנים עם fonts.gstatic.com. אתה לא יכול לדעת מאיזה קובצי גופן ספציפיים fonts.gstatic.com תזדקק לו עד שתטען את קובץ ה-CSS, כך שנוכל רק ליצור חיבור ראשוני מראש.

השתמש בתג זה כדי להאיץ מעט סקריפט או סגנון של צד שלישי עקב חיבור שנקבע מראש.

שימו לב למאפיינים דומים ל <link rel= "dns-prefetch"/> и <link rel= "preconnect">. בדרך כלל זה לא הגיוני להשתמש בהם יחד עבור תחום אחד: <link rel= "preconnect"> כבר כולל <link rel= "dns-prefetch"/> ועוד הרבה. ניתן להצדיק זאת בשני מקרים:

• האם אתה רוצה לתמוך בדפדפנים ישנים יותר?. <link rel= "dns-prefetch" /> נתמך על ידי מאז IE10 וספארי 5. <link rel= "preconnect"> נתמך במשך זמן מה בכרום ובפיירפוקס, אך התווסף ל-Safari רק ב-11.1 ו- עדיין לא נתמך ב-IE/Edge. אם אתה צריך לתמוך בדפדפנים אלה, השתמש <link rel= "dns-prefetch" /> כאפשרות גיבוי עבור <link rel= "preconnect">.
• אתה רוצה להאיץ את החיבורים ליותר מ-4-6 דומיינים. תָג <link rel= "preconnect"> לא מומלץ להשתמש עם יותר מ-4-6 דומיינים, שכן הקמת ותחזוקה של חיבור היא פעולה יקרה. <link rel= "dns-prefetch" /> צורך פחות משאבים, אז השתמש בו במידת הצורך.

פרטים

תג אופציונלי. הדפדפן אינו נדרש לעקוב אחר הוראה זו, כך שהוא עשוי שלא לבצע רזולוציית DNS, למשל, אם יש הרבה תגים כאלה בדף או במקרה אחר.

מה זה DNS. לכל שרת באינטרנט יש כתובת IP ייחודית, שנראית כך 216.58.215.78. שם האתר מוזן בדרך כלל בשורת הכתובת של הדפדפן (לדוגמה, google.com), ושרתי DNS (Domain Name System) מתאימים אותו לכתובת ה-IP של השרת (216.58.215.78).

כדי לקבוע כתובת IP, על הדפדפן לבצע שאילתות בשרת ה-DNS. זה לוקח 20-120 אלפיות השנייה בעת חיבור לדומיין חדש של צד שלישי.

DNS שמור במטמון, אם כי אינו אמין במיוחד. חלק ממערכות הפעלה ודפדפנים מאחסנים שאילתות DNS במטמון: זה יחסוך זמן בשאילתות חוזרות, אך לא ניתן לסמוך על שמירה במטמון. בלינוקס זה בדרך כלל לא עובד בכלל. לכרום יש מטמון DNS, אבל הוא נמשך רק לדקה. Windows מאחסן במטמון תגובות DNS למשך חמישה ימים.

עיבוד מראש

<link rel= "prerender"> מבקש מהדפדפן להוריד את כתובת האתר ולהציג אותה בלשונית בלתי נראית. כאשר המשתמש לוחץ על הקישור, הדף אמור להיות מוצג מיד. זה שימושי אם אתה בטוח שהמשתמש יבקר בדף מסוים ורוצה להאיץ את התצוגה שלו.

למרות (או בגלל) היעילות יוצאת הדופן של תג זה, בשנת 2019 <link rel= "prerender"> תמיכה גרועה בדפדפנים הגדולים. ראה פרטים נוספים. להלן.

תחביר

<link rel="prerender" href="https://my-app.com/pricing" />

href מצביע על כתובת האתר שברצונך להתחיל לעבד ברקע.

מתי להשתמש

כאשר אתה באמת בטוח שהמשתמש יעבור לדף מסוים. אם יש לך "מנהרה" שדרכה 70% מהמבקרים בדף א' עוברים לעמוד ב', אז <link rel= "prerender"> בעמוד א' יעזור להציג את עמוד ב' במהירות רבה.

אין לעשות שימוש יתר. עיבוד מקדים יקר מאוד מבחינת רוחב פס וזיכרון. אל תשתמש <link rel= "prerender"> ליותר מעמוד אחד.

פרטים

תג אופציונלי. הדפדפן אינו נדרש לבצע הוראה זו ועלול להתעלם ממנה, למשל בחיבור איטי או כאשר אין מספיק זיכרון פנוי.

כדי לחסוך בזיכרון Chrome לא עושה רינדור מלאו - רק טען מראש את NoState. המשמעות היא ש-Chrome טוען את הדף ואת כל המשאבים שלו, אך אינו מעבד או מפעיל JavaScript.

פיירפוקס וספארי אינם תומכים בתג זה כלל. זה לא מפר את המפרט, מאחר שהדפדפנים אינם נדרשים לפעול לפי הוראה זו; אבל עדיין עצוב. באג יישום פיירפוקס פתוח כבר שבע שנים. יש דיווחים שספארי גם לא תומך בתג הזה.

תקציר

להשתמש:

• <link rel= "preload"> - כאשר אתה צריך משאב תוך כמה שניות
• <link rel= "prefetch"> - כאשר אתה צריך את המשאב בעמוד הבא
• <link rel= "preconnect"> - כאשר אתה יודע שתצטרך משאב בקרוב, אבל אתה עדיין לא יודע את כתובת האתר המלאה שלו
• <link rel= "dns-prefetch"> - באופן דומה, כאשר אתה יודע שתזדקק למשאב בקרוב, אך אינך יודע עדיין את כתובת האתר המלאה שלו (עבור דפדפנים ישנים יותר)
• <link rel= "prerender"> - כאשר אתה בטוח שמשתמשים יעברו לדף מסוים, ואתה רוצה להאיץ את התצוגה שלו

מקור: www.habr.com