אתרי החדשות בארץ – כמה מהירים הם?

הם לא, הם פשוט לא מהירים, הם איטיים להחריד.

באמצעות WebPageTest.org ערכתי מספר בדיקות מהירות (בדיקה המדמה גולש שמשתמש ב-IE8 בישראל עם חיבור 5/1 עם זכרון מטמון נקי), הנה סרטון המציג את הליך הטעינה בהילוך איטי:

והנה חלק מהמסקנות:

  • כל אתרי החדשות הגדולים משתמשים ב-CDN, זה פותר המון בעיות עומס (חס וחלילה וקורה פיגוע, יש עלייה מטורפת של תעבורה באתר), הם מקבלים מחיר זול מאוד (וחברות ה-CDN נהנות "ממוניטין" בתמורה) ושני הצדדים יוצאים מרוצים, אין בעיות עם ה-BackEnd.
  • Nrg הוא אתר "איטי-מהיר", הדפדפן מתחיל לרנדר את העמוד רק אחרי 6.6 שניות (וזה בגלל קובץ JS שתקוע איי שם בשורה 1306 בקוד),  והוא הראשון לסיים טעינה מלאה תוך 13.9 שניות. לשאר האתרים לוקח עוד 2 שניות נוספות.
  • כל התוכן באתרים נטען בממוצע תוך 6.8 שניות, ייקח עוד 6.8 שניות בממוצע עד לטעינת כל הפרסומות ולשליחת סטטיסטיקות של הדפדפן לחברות ניטור.
  • אף אחד מהם לא משתמש ב-Lazy Loading.
  • אפשר וניתן לשפר את זמן הטעינה של כל האתרים בצורה ניכרת.

בכל האתרים האלו, יש המון השקעה ב-BackEnd (שרתי Web, שרתי Cache, Load Balance ועוד), אבל אין שום תכנון לשימוש יעיל ב-FrontEnd, אפשר להשוות את זה לנסיעה עם Ferrari במגרש חצץ.

אז איך אפשר לשפר את ה-FrontEnd?

ישנם המון תהליכים שאפשר לעשות כדי לשפר ביצועי טעינה ב-FrontEnd, ככל שהאתר גדול ומכיל יותר תוכן, כך יש יותר "עבודות שיפוץ", אתן דוגמא ל-3 תהליכים שישפרו את טעינת האתר (במקרה הזה, ב-Ynet):

  • שימוש ב-Cache-Control וב-Expires לעתיד הרחוק, מרכיבי העיצוב הינם קבועים (כמו הלוגו למשל), ולכן אין טעם להוריד את הלוגו שוב ושוב ושוב.
  • שימוש ב-Image Map: התמונה המצורפת (המדורים באתר) מורכבת מ-17 תמונות שונות:שימוש ב-Image Map מאפשר להשתמש בתמונה אחת (תמונה מחוברת של 17 התמונות) ובאמצעות קורדינטות בקוד ה-HTML להגדיר קישור שונה לכל חלק מהתמונה. שימוש בטכניקה זו יחסוך הורדה של 16 תמונות, אם ה-TTFB (הזמן מרגע בקשת הקובץ עד שהשרת שולח את הבייט הראשון) האופטימלי עומד על 0.05 שנייה, אנחנו חוסכים לפחות 0.8 שניה בטעינת האתר.
  • שימוש ב-Css Sprites,  ניקח את התאריך באתר שמשתנה מיום ליום:

Css Sprites מאפשר לנו להשתמש בתמונה שמכילה המון אלמנטים, ובאמצעות קורדינטות להציג חלק מהתמונה שאנו מעוניינים להציג במקומות שונים, בגלל שבשונה מהמדורים ב-Ynet שלא משתנים, התאריך משתנה מיום ליום, והוא מורכב מ-3 תמונות שונות (יום, חודש, שנה), קובץ התמונה והחודש מורכב מ-31 קבצים (מ-01.jpg עד 31.jpg), הקובץ מכיל את המספר ונקודה (01.jpg יכיל את הספרה 1 ונקודה), וקובץ השנה (מ-00.jpg עד-015.jpg) מורכב מצירוף מהספרות בלבד).סה"כ יש 47 קבצים שונים בתיקיה, הקובץ הקל ביותר הוא 1.gif ששוקל 264 ביט, הקובץ הכבד ביותר הוא 013.jpg והוא שוקל 1188 ביט. (כל התיקייה שוקלת 192K).

אם ניקח את הספרות 0-9 ואת הנקודה ונחבר אותם לקובץ אחד, נקבל קובץ ששוקל 6776 ביט (ניתן להקטין את המשקל עוד יותר עם דחיסה/פורמט שונה):

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

מעבר לחיסכון בתעבורה וטעינה מהירה יותר של האתר, שימוש ב-Css Sprites ו-Image Map חוסכים המון משאבים לשרת ה-Web.

לעוד חומרים בנושא האצת אתרים

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

6 תגובות על אתרי החדשות בארץ – כמה מהירים הם?

  1. מאת חץ בן חמו‏:

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

  2. מאת משה‏:

    חבל שלא דגמת גם את ערוץ 7…. נסה ותופתע.

  3. מאת Avi Keinan‏:

    משה,

    דגמתי את ערוץ 7, רואים שיש השקעה בתכנון Frontend מהיר, אם כי יש כמה נקודות לשיפור:
    – לצמצם במס' הסאב דומיינים (אע"פ שביצועי ה-DNS בארץ דיי טובים).
    – לא להשתמש בסקריפט כדי לעשות Resize לתמונות, ניתן להשתמש בקאשינג עם TTL במקום להריץ סקריפט כל פעם.
    – ה-Combine רץ מסקריפט, בשביל מה? ה-JS/CSS לא הולך להשתנות בקרוב.
    – כרגע יש שגיאת 404 אחת.
    – שרת הפרוקסי לתמונות קצת מזייף, TTFB של 3.5 שניות זה רצח.

    חץ,
    Ynet הם דוגמה מעולה לחשיבה עקומה ואני מאמין שעד העיצוב הבא הם יתעוררו,
    הם יכולים לחסוך המון כסף לעצמם, המון תעבורה בישראל, והמון זמן המתנה ($$$ להמון עסקים בארץ) אם רק יפעילו expire headers (הפעולה הכי פשוטה שלא דורשת מתכנת, מעצב ו-5000 שעות בדיקות)

  4. מאת משה‏:

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

    2. יש Cache למבצע ה-Resize, גם בפנים (שרת פרוקסי שמגיש את התוכן ללקוחות מהקאש) וגם בחוץ – TTL של חודש לפלט של המקטין.
    3. הוא אכן רץ מסקריפט, אבל רק פעם אחת. מבפנים הוא מוגדר עם TTL נצחי ומבחוץ גם כן. בשביל לשנות את התוכן שלו אני משנה את הMD5 (החתוך) של הקבצים, ע"מ לקבל תוכן מעודכן.
    4. הנושא מוכר, וכואב. וטעון טיפול.

    תודה 🙂

  5. מאת Avi Keinan‏:

    היי משה,

    חלק מהתגובה הבהרתי במייל ששלחתי לך, אתייחס כאן לשאר:
    1. Ynet – בבדיקה של WPT נראה כי 80% מהפרסומות נטען החל מבקשה מס' 200 והלאה – בערך 4 שניות לטעינת "התאכלס" של Ynet, אפשר לצמצם את הזמן הזה לפחות בחצי. בנוסף, את כל הפרסומות אפשר לטעון לאחר טעינת "התאכלס" – אף אחד לא עושה את זה.
    2-3. דיברנו במייל.
    4. זה פרוקסי של קוטנדו?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *