אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » HTTP 2 PUSH

HTTP 2 PUSH

רן בר-זיק ינואר 26, 2020 7:07 am 4 תגובות

האצה ושיפור של האתר באמצעות ניצול מיטבי של הפרוטוקול HTTP 2/

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

פרוטוקול HTTP2 הגיח לפני כמה שנים לחיינו, אבל דומה שפחות מדי מתכנתים/בוני אתרים מכירים אותו ואת הפיצ'רים שיש בו ובמיוחד אחד הפיצ'רים החשובים: Push. מדובר בפיצ'ר שיכול להאיץ ביצועים ללא בעיות ותופעות לוואי (אם לא מגזימים, ועל כך בהמשך) כי הוא מאפשר לנו "לדחוף" דברים לצד הלקוח ובכך להאיץ את הביצועים דרמטית.

כדי להבין את הדחיפה הזו (שהיא שונה מדחיפה כמו סוקטים), צריך לעשות הקדמה קלה על איך בדיוק אנו עובדים עם משאבים בפרוטוקול הקודם – HTTP Ver 1.1. בגדול, הטעינה עם HTTP V1 עובדת כך – הדפדפן טוען את ה-HTML. לאחר הטעינה, ה-HTML אומר לדפדפן שיש עוד משאבים שצריך להשתמש בהם והדפדפן משגר קריאות טעינה למשאבים האחרים: קבצי CSS, ג'אווהסקריפט ותמונות. אם נכניס את זה לתוך דיאגרמה זה יהיה ברור יותר:

ראשית אנו קוראים ל-HTML ואז הקריאות למשאבים

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

מי שיוזם את ההורדה הוא index.
כלי המפתחים - קודם בקשת ה-HTML ואז השאר.

זה סדר הדברים הרגיל שהיינו מורגלים אליו, אבל עם פרוטקול HTTP2 אפשר לעבוד באופן יותר חכם. למה לחכות לדפדפן שיבקש את המשאבים אחרי שהוא יוריד את ה-HTML כשאני יכול לדחוף לו את שאר המשאבים יחד עם ה-HTML? זה בעצם חוסך קריאות מיותרות. הרי כשהדפדפן קורא לקובץ ה-HTML, אני בעצם יודע שהוא יצטרך גם את ה-CSS, גם את הג'אווהסקריפט, גם את התמונות וכו' וכו' – למה לא לשגר לו את מה שאני יודע בוודאות שהוא צריך יחד עם ה-HTML?

מייד לאחר בקשת ה-HTTP, השרת שולח את כל הקבצים ללקוח.

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

מה שקורה הוא שיש האצה דרמטית של טעינת המשאבים:

אם נסתכל על כלי המפתחים, נוכל לראות שמי שיוזם את ההורדה הוא "other".

initiator: Push\Other

ההשפעה על הביצועים? מעולה. המאמץ ליישום? אפסי. אם יש לכם שרת, עליכם לבדוק שהוא תומך ב -HTTP V2. רובם כבר תומכים והבדיקה היא פשוטה – באמצעות האתר הזה. אם אתם מנהלים את השרת בעצמכם, הוספת התמיכה אמורה להיות קלה.

עכשיו עליכם לדאוג שב-headers יהיו את ה-link הרלוונטיים. אפשר לעשות את זה ידנית. כך למשל, אם אתם משתמשים בפריימוורק כמו Node.js\ Express, אז אתם צריכים לפרט באמצעות מידלוור את הקבצים שאותם אתם דוחפים. זה לא כזה מסובך כמו שזה נשמע וכאן יש הסבר נאה.

בוורדפרס זה פשוט – יש תוספים לכך (לא בדקתי את האיכות שלהם) או לחלופין, אם אתם משתמשים בקלאודפלייר, עליכם להתקין את התוסף הפשוט של קלאודפלייר ולהוסיף את השורה הבא ל- wp-config שלכם:

define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);

זה הכל 🙂 פשוט וקל. במאמר הבא נדבר על איך אני בודק את שיפור הביצועים.

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

והנה האתר שלי אחרי:

השגתי חסכון של חצי שניה שלמה בטעינה ו-200 מילישניות ב-first paint וכל זה מבלי להתאמץ במיוחד. וזה? זה נחמד.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
תשתית

4 תגובות

  1. יאיר הגב ינואר 26, 2020 בשעה 3:04 pm

    פרוטוקול HTTP2 זה קשור להגדלת כתובת ה IP שבגרסה IPv6 ?

    • בנימין מאיר הגב ינואר 26, 2020 בשעה 9:10 pm

      לא, שתי שכבות תעבורה שונות.

  2. יובל פרוס הגב ינואר 28, 2020 בשעה 4:54 pm

    אחלה פיצ'ר!

  3. אבי הגב ינואר 30, 2020 בשעה 11:25 pm

    האם זה חל גם על מקומחת אחרים כמו cdn או storages למי הם?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד