אופטימיזציה לאתר אינטרנט

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

נתחיל עם זה שמחקרים מראים ש -40% מהגולשים ינטשו דף אינטרנט שלוקח לו יותר מ-3 שניות להיטען. ובאתרי מסחר ואיקומרס זה אפילו יותר חשוב, משום שיותר מ-50% מהקונים המקוונים ציינו בסקרים שונים שמהירות האתר היא פרמטר חשוב למיהמנות שלו. כ-20% ציינו שאם טעינת הדפים איטית הם ינטשו את האתר וברובם אף לא יחזרו לאתר זה.

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

אופטימיזציה לאתר שלי:

אופטימיזציה לאתר שלי

בחירת שרת

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

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

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

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

דחיסת נתונים

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

ישנם 2 שיטות לדחיסת קבצים:

  1. שיטת GZIP compression. כששיטה זו מופעלת – היא מוחלת בשווה על כל הקבצים. הכוונה, או שהיא מופעלת וכל הקבצים שבאתר ידחסו, או שהיא כבויה וכל הקבצים אינם דחוסים.
  2. שיטת  Minification – יכולה להיות מופעלת עבור קובץ אחד וכבויה עבור קובץ אחר.

ב-GZIP השיטה מקודדת את המידע מחדש תוך שימוש בפחות ביטים מהמידע המקורי, כך שהמידע מצטמצם אך לא משתנה. ואילו ב-Minification מתבצע תהליך של הסרת כל התווים המיותרים מקוד המקור מבלי לשנות את המידע. הכוונה לאותם תווים של רווח, ירידת שורה והערות. תווים אלו אינם נצרכים לפונקציונליות הקוד ומשמשים אך ורק לקריאות נכונה של הקובץ על מנת שיהיה ברור למפתחים.

דוגמה לקוד שעבר כיווץ:

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

הפחתת בקשות HTTP

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

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

אופטימזציה של תמונות

ישנן 2 שיטות לאפוטימיזציה של תמונות:

  1. שיטה הנקראת LOSSY, באמצעותה אנו מסירים חלק מנתוני הפיקסלים.
  2. שיטה הנקראת LOSSLESS, באמצעותה איננו מסירים אף פיקסל, אלא פשוט דוחסים אותם.

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

קבצי JavaScript & CSS

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

למעשה, אנו רוצים לספק מהר ככל האפשר את הדברים הראשונים שהמשתמש אמור לראות בדפים שלנו, מה שנקרא 'Above-the-Fold'. ולכן כל דבר שהוא 'Bellow-the-Fold', דהיינו כל מה שהמשתמש צריך לגלול כדי לראות, יכול לחכות מבחינת הטעינה שלו.

טעינה אסינכרונית

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

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

מטמון (Caching)

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

מה זה בדיוק מטמון אינטרנטי?

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

2 סיבות עיקריות לשימוש ב- Cach:

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

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

תוכן העניינים