איך משפרים את זמן טעינת האתר?

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

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

מהו זמן טעינת אתר?

זמן טעינת אתר מתחלק לכמה גורמים.

זמן טעינה מלא

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

כלומר, תמונות, סרטונים, טקסטים, קבצי Javascript, CSS וכו’.

זמן ביט ראשון

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

טעינה חוזרת

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

אילו גורמים משפיעים על זמן טעינת אתר

ישנם מספר גורמים המשפיעים על זמן טעינת האתר:

גודל דף הבית

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

במידה וסיימתם לעבוד על הפרויקט שלכם תוכלו לבצע Minify לדף האינדקס שלכם על מנת שיצמצם כל רווח מיותר בקוד ויאפשר לטעינה להתבצע מהר יותר.

גודל קבצי התמונות, הסרטונים, JS\CSS

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

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

ההמלצה השניה היא – קבצו את התמונות! כיום כל התמונות ברובן מכילות META DATA שמעלה את גודל התמונות שלכם פלאים.

תעשו טובה ותכווצו את תמונות שלכם בעזרת האתרים הבאים: tinypng + tinyjpg.

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

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

אחד הכללים החשבנים ביותר שרבים שוכחים הוא לבצע Minify לקבצי CSS ו-JS.

כאשר אתם מסיימים לתכנת את האתר תוכלו להיכנס לאתרים מיוחדים אשר עושים את העבודה בשבילכם, העתיקו את הקוד של הקבצים (לדוג’ https://cssminifier.com),

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

מספר פניות (CSS\JS)

כל פעם שאתם טוענים קבצי JS\CSS אתם מוסיפים לזמן טעינה של האתר. למה? מכיוון שהטעינה שלהם מתבצעת אחת אחרי השניה ולא בו זמנית.

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

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

<script async type=”text/javascript” src=”js/slides.min.jquery.js”>

מאפשר לכם טעינה אסינכרונית של הקבצי JS שלכם, ובכך להאיץ את טעינת האתר.

אחסון אתרים וזמן טעינת אתר

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

למה? מכיוון שרוב החברות לא משקיעות מאמצים להתאים את החשבון אחסון שלכם לאתר שלכם וקורה רבות שהשרתים רק מאטים את הטעינה.

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

אחד הדברים היותר חשובים שצריך להגדיר ב-NGINX הוא Gzip אשר יאפשר לכווץ לכם את האתר בצורה חכמה.

gzip         on;
gzip_disable “MSIE [1-6]\.(?!.*SV1)”;
gzip_proxied any;
gzip_types   text/plain text/css application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary    on;

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

נדבר עליהם בהרחבה באחד הפוסטים הבאים שלנו.

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