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

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

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

1. כיווץ ויעול תמונות

לתמונות גדולות לוקח זמן רב יותר להטען, כך שחשוב לשמור את התמונות שלכם קטנות ככל האפשר בגודל שהגדרתם באתר.
למשל, אם הגדרתם רוחב 570px לדף ואתם מעוניינים להכניס תמונה ברוחב הזה, תשמרו את רוחב התמונה גם ברוחב 570px ולא יותר! אין טעם לשמור תמונה גדולה יותר מהרוחב שהגדרתם בcss – דפדפנים עדיין צריכים לטעון את התמונות בגודל מלאה לקבצי HTML לשנות את גודלם, מה שיכול להאט מאוד את זמן הטעינה שלך.

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

optim1
כלי מעולה לכיווץ תמונות מבלי לפגוע באיכות שלהם

 

2. נקו את הקוד שלכם

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

3. צמצום הפניות

חשוב מאוד לצמם הפניות מקוד הHTML. כלומר, אם יש לי קוד HTML  שיש לו מספר רב של הפניות לקבצי CSS/JavaScript חשוב שאני אאחד קבצים ובכך אחסוך את מספר ההפניות.
 feedthebot –  מאפשר לכם לבצע בדיקה מהירה ע"י הכנסת כתובת אתרכם, ואומר לכם לכמה קבצי CSS/JavaScript אתם מפנים באתרכם.

website-647013_1280
קוד נקי מרווחים מיותרים יחסוך לכם הרבה

 

4. קבצי CSS בראש העמוד וקבצי JavaScript בתחתית

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

5. העזרו באתרים שבוחנים את ביצועי האתר שלכם

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

Pingdom – כלי חינמי וקל לתפעול, מזינים כתובת אתר ומקבלים מידע כמו: מספר הפניות, זמני טעינת האתר ועוד. ישנה אפשרות להירשם לאתר (הרשמה בחינם) ובכך נפתחות אופציות נוספות לבחון את ביצועי אתרך.
Gtmetrix – בוחן את ביצועי האתר ומציע לכם דרכים לשפר אותם. באתר יש המלצות לשיפור ביצועים לבעלי אתר בוורדפרס.
Google’s PageSpeed Module – אם אנחנו מנסים לרצות את גוגל, למה לא ללכת ישירות לחברה הגדולה בעצמה? PageSpeed הוא כלי שיעזור לכם לייעל את אתר האינטרנט שלכם ויגביר את מהירות טעינתו.

pingdom
כלי חינמי מעולה שיעזור לכם לשפר את ביצועי האתר שלכם

לסיכום

מחקרים מוכיחים כי משתמשים נוטשים את האתר אם האתר לא נטען תוך 4 שניות! מחקר של Amazon הראה גם כי מהירות טעינת האתר משפיעה על אמינתו של הגולש באתר. מהירות טעינת האתר חיונית לחויית משתמש, שיפור המרות באתר ובנוסף משפיעה באופן ישיר על כמה האתר יהיה מקודם בגוגל.
חשוב להשקיע את המאמץ הנוסף כדי לוודא שאתרכם יעלה מהר ובכך תרוויחו מכל הבחינות.

כתיבת תגובה

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