אופטימיזציה לאתרים מקודמים והפעם זמני טעינה לאתר

13 בינואר 2013 /
גוגל אנליטיקס /

רקע כללי –  זמני טעינה ושרתים:

מה זה זמן טעינה של עמוד אינטרנט Page speed?

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

למה נרצה זמן טעינה נמוך ככל האפשר?

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

כלים לבדיקת זמן טעינה לאתר

לא חסר כלים לבדיקות מהירות דפי אינטרנט, אמליץ על שניים שעושים לי את העבודה:

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

מה הם הפרמטרים שמשפיעים על זמן טעינת האתר והעמוד?

  1. רוחב הפס של האתר משרת האחסון
  2. העומס על שרת האחסון
  3. תקינות חומרת השרתים
  4. ניהול ובנייה נכונה של קוד האתר

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

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

השפעת איכות השרת על כמות המידע המורדת,וגם על התנועה לאתר

ובמקביל רואים בגוגל אנליטיקס (קשה לזקוף את כל הקרדיט להחלפת השרת אבל אין ספק שמדובר בגורם חשוב):

החלפת השרת גרמה להגדלת מספר העמודים הנצפים ושיפור כמעט כל פרמטר נמדד

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

טיפים מעשיים לשיפור זמני הטעינה לעמודים:

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

 

  • לאפשר דחיסת GZIP בשרת בעזרת mod_gzip לשרתי Apache:
    דחיסה של הקבצים בעזרת GZIP מורדיה את גודל הקבצים שהדפדפן מוריד מהשרת לאחר הפנייה אליו, קבצים קטנים (יותר) להורדה = זמן הורדה קטן יותר = זמן טעינה קצר יותר.

 

  • שימוש נבון ב Expires Headers עבור יצירת גרסת מטמון (Broswer Caching) בשרת
    בעזרת Expires headers מגדירים עבור איזה אלמנטים ולמשך כמה זמן על הדפדפן לשמור את גרסת המטמון וכך לחסוך פניות http מיותרות לשרת, החסכון הזה מתבטא גם הוא בזמני הטעינה  וגם חוסך עומס על השרתים. השימוש בגרסת המטמון צריכה להעשות בתבונה ובדרך כלל עבור האלמנטים שלא מתעדכנים באופן קבוע באתר כמו תמונות לוגו, קצבי JS, CSS.

 

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

 

  • צמצום CSS , JS:
    עדיף להכניס את כל הCSS לקובץ אחד שיטען פעם אחת ולא כמה קבצים נפרדים, כנ"ל לגבי javascript, (הכל במידת האפשר, לא תמיד ניתן להפריד סקריפטים מכל מיני טכניות).

 

  • שימוש בLazy Load :
    לא תמיד ניתן להשתמש בSPRITE בעיקר שמדובר בדפים דינמיים, במקרים כאלה עדיין אפשר לשפר את טעינת הדף בעזרתJQUERY LAZY LOAD , מדובר בשימוש חכם בJQUERY שטוען רק את התמונות שנראות באותו רגע במסך, במידה ויש תמונות שנמצאות בתחתית העמוד (מתאים מאוד לעמודים אורכים) הם יטענו אך ורק כאשר נגלול למטה אל התמונות.

 

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

    קישור לא רלטיבי נראה בקוד העמוד כך:<a href="http://www.URL.com/filename.htm">
    לעומתו, קישור רלטיבי יראה בקוד העמוד כך: <a href=" /filename.htm">

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

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

נכתב ע"י: מוטי חמו

פוסטים שאולי יענינו אותך

6 ביולי 2015 /

מהעולם הריאלי לעולם הוירטואלי

נכתב ע"י ניסן בכר

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

1 באפריל 2014 /

הרפתקאות 1 באפריל גרסת 2014, איך יפתיעו אותנו השנה?

נכתב ע"י מנשה אברמוב

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

13 בפברואר 2014 /

קידום אתר וורדפרס מול לקדם אתר וויקס Wix Vs WordPress

נכתב ע"י מוטי חמו

הקדמה על חברת Wix   לפני שנתחיל לעשות את ההשוואה (הלא הכי הוגנת) בין מערכת ניהול התוכן WIX לבין מערכת ניהול התוכן (CMS) של WORDPRESS, אני רוצה לציין שאני מכיר את החבר'ה בWIX והם עושים אחלה עבודה כמה שנים רצופות, לא

4 תגובות על “אופטימיזציה לאתרים מקודמים והפעם זמני טעינה לאתר”

כתיבת תגובה


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

נגישות