כיצד להאיץ את האתר עם תג

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

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

רענון על בקשות HTTP

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

הנה מה שקורה בהמשך:

1. ג 'ו הקלדת כתובת האתר של האדם לזכור בסרגל הכתובות של הדפדפן ולחץ על "Enter".
2. לאחר קבלת כתובת זו, הדפדפן שואל שרת DNS (מחמאות של ספק שירותי האינטרנט) עבור כתובת ה- IP של הכתובת שניתנה על ידי ג'ו.
3. שרת ה- DNS מחייב.
4. עכשיו, כי הדפדפן יודע את כתובת ה- IP, הוא שולח הודעה (ב ניב TCP) לשרת של האתר, מבקש חיבור.
5. אם השרת חי וקיים, הוא שולח תשובה המאשרת את בקשת הדפדפן והדפדפן מגיב ומכיר בהודעת השרת. (הערה: כן, זוהי גרסה מושפעת ביותר של לחיצת יד TCP בין לקוח לשרת).
6. כאשר לחיצות הידיים נגמרות, נוצר קשר בין השניים.
7. עכשיו, הדפדפן משנה את סגנון הדיאלקט שלה ל- HTTP ושואל את השרת עבור האתר.
8. השרת, לדעת את דף הבית של האתר מחזיר רק את זה, אשר מתקבל על ידי הדפדפן והראה ג 'ו מי מחכה בסבלנות רבה מול המחשב.

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

קישור HTML קישורים

W3C מציין 4 קשרי קישור HTML (rel עבור מערכת יחסים) בשם dns-prefetch, מקושרים, Prefetch, ו prerender. יחד הם נקראים (על ידי W3C) את "רמזים למשאבים"עכשיו, נראה מה הם יכולים לעשות ו שם ניתן להשתמש בהם.

1. DNS Prefetch

ב prefetch DNS, רזולוציה שם תחום (aka מקבל את כתובת ה- IP תואמת משרת ה- DNS) נעשה מראש.

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

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

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

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

תכונה זו זמינה כמעט בכל הדפדפנים המודרניים מלבד ספארי החל מחודש מרץ 2016.

2. חיבור מראש

Preconnect הוא צעד נוסף מ- Prefetch של DNS, הוא יוצר חיבור לשרת שאליו עשויה להיות בקשה שנשלחו מאוחר יותר בעתיד.

W3C מפרט מקרה אידיאלי לשימוש מראש: הפניות. מפתחים משתמשים בהפניות מחדש ממספר סיבות.

במקרה זה, הבקשה הבאה של הדפדפן (אתר מנותב) היא 100% צפוי, ויכול להיות מקושרים, ל להפחית את זמן האחזור של הניווט.

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

נכון למרץ 2016, אפשרות זו זמינה ב- Chrome, Opera ו- Firefox.

3. Prefetch

עם Prefetch, עבור משאב, הדפדפן מתחיל ליישם את הרזולוציה DNS של שם התחום של המשאב, לאחר מכן מבצע חיבור TCP עם שרת המשאב, עושה את בקשת HTTP, ולבסוף מאחזר ומאחסן את המשאב שנקבע מראש בקובץ המטמון של הדפדפן.

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

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

Prefetch נתמך ב- Chrome, Firefox ו- Opera.

4. Prerender

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

לכן, prerender צריך להיות נהג בזהירות, ולא overuse. הוספת הקוד הבא תציג מראש את הדף "אודות".

Prerender כבר זמין ב- Chrome, IE ו- Opera בחודש מרץ 2016.

כמה דברים לשים לב

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

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

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

(2) W3C מציין מאפיין קישור HTML שקוראים לו הסתברות רמז, יחסי ציבור (עם ערך 0 עד 1) עבור רמזים משאבים אלה, אשר ניתן להשתמש בהם כדי לספק את ההסתברות של בקשות שיבוצעו בעתיד. לא ראיתי תכונה זו מיושמת על ידי כל דפדפן עדיין. כדוגמה, את הקוד הבא קובע כי יש סיכוי 80% xyzsite תתבקש בעתיד ו 30% עבור הדף.

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