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

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

מה זה זמן טעינה של עמוד אינטרנט 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  מקוצר , תמצות שטחי קוד מתים וכו’ אבל התועלת ביחס לכמות זמן העבודה היא בדרך כלל נמוכה במיוחד.

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