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

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

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

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

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