אופטימיזציה למהירות אתר אינטרנט – במספר פעולות פשוטות

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

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

הקדמה

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

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

אחד הדברים שהכי משפיעים על הביצועים הוא מהירות האתר. אתרים איטיים מחד, מתסכלים גולשים, גורמים להם לנטוש מהר ולהיות חסרי סבלנות כלפי המותג ומאידך, הדירוג שלהם בתוצאות החיפוש נפגע מכיוון שלפי ההערכות, ציון האתר מהווה כ25% מהדירוג הכללי של גוגל (SEO) כך שגוגל שולח אליהם פחות תנועה אורגנית. בעצם המותג מפסיד פעמיים – הן בכמות הלקוחות שיצליחו להגיע אליו בצורה אורגנית והן בכמות הלקוחות שיגלשו באתר, יישארו בו ויקבלו את כל הערך הרצוי.

לאור הנתונים הללו, המציאות מחייבת אופטימיזציה למהירות האתר כחלק אינהרנטי מהתהליך המקיף של הקמת אתר וקידומו. הדרך האופטימלית ביותר למקסם את מהירות האתר היא לבנות אותו מלכתחילה לאור ההגדרות והצעדים הטכנולוגיים הנדרשים הנוגעים למהירות האתר. אך ניתן גם לאחר בנייתו, לבצע פעולות "אחורנית" שייטיבו את הציונים שלו בבדיקות המהירות המקובלות (Googlespeed Insights, GTMETRIX) ויעלו אותו בדירוג האיכות של Google.

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

פעולה 1 - בחירת שרת אחסון מתאים

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

בהקשר לנושא שלנו – מהירות טעינת האתר. לשרת יש חשיבות עצומה בנושא, מכיוון שכל המשאבים של האתר מקורם בשרת אחסון. הלקוח שלי בחר לבנות את הבלוג שלו באחת חברות האחסון (שלא אזכיר את שמה), שמציעים חבילות אחסון בהחלט מהזולות ביותר שראיתי (מתחיל מסביבות ה-5 דולר לחודש לחבילה הבסיסית) אבל חשוב מאוד להבין – התמורה היא בהתאם! כבר בבדיקה הראשונית האתר היה כל כך איטי שאפילו היה לי קשה לעבוד עליו. אז כמובן שאחת הפעולות הראשונות שעשינו הייתה לשדרג את האחסון לחברה אמינה יותר, עם חבילה משודרגת יותר – עם נפח SSD גדול יותר, עם אופציה ל-CDN (עליו נפרט בהמשך) וכו'.

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

אני ממליץ בחום על חברת Cloudways. יש לה הרבה סוגי חבילות וניתן להתאים את החבילה הנכונה ביותר עבור הצרכים של האתר. 

פעולה 2 - בחירת תבנית עיצוב מתאימה

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

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

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

 

פעולה 3 - דחיסה וכיווץ תמונות

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

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

  1. תוכלו לבצע זאת ע"י תוסף כדוגמת compress JPEG & PNG images שידחוס ויכווץ לכם את כל התמונות שקיימות בספריית המדיה שלכם בעת העלאת התמונות.
  2. נבצע את הפעולה לפני ההעלאה. הפעולה הזו תקטין משמעותית את משקל התמונות באתרכם, לעיתים ב90% (!) ובכך תשפרו את זמני הטעינה.

פעולה 4 - התקנת תוסף קאש

התקנה של תוספי קאש מסוגלים לשפר פלאים את הציון של האתר מכמה סיבות:

  1. הם מציעים שמירת זיכרון מטמון למשתמשים חוזרים ובכך חוסכים טעינות חוזרות של עמודים שכבר ביקרו בהם בעבר. 
  2. הם מאפשרים כיווץ ודחיסה של שורות קוד (JS, CSS, HTML).
  3. הם מבצעים ניקוי ואופטימיזציה של טיוטות, גרסאות ישנות של דפים וכדומה.
  4. אינטגרציה של CDN.
  5. טעינת עצלה של תמונות וסרטונים.

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

באופן אישי, אני ממליץ בחום על התוסף – WP-Rocket. 

WordPress plugins for caching: WP Rocket

פעולה 5 - Lazy Load של קבצי מדיה

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

Lazy Load היא תכונה שהמשמעות שלה היא טעינת קבצי המדיה רק לאחר שהגולש מגיע לנקודה הספציפית באתר (הם לא נטענים מראש בטעינה של הדף). 

כמו שאפשר לדמיין, הוספת התכונה לאתר הובילה לשיפור משמעותי במהירות הגלישה ומה שהכי חשוב הוא שחווית המשתמש לא נפגעה בכלל (לעיתים יש משחק של Give&take – שיפור הזמן טעינה אל מול פגיעה בחויית המשתמש, וכאן בצורה די חד משמעית – יש Give ואין Take)

Lazy Load הוא לרוב פיצ'ר של תוספי קאש, לכן כדאי להשתמש בתכונה הזו באמצעות אחד כזה. בנוסף, ניתן למצוא תוספים מיועדים לכך או לחילופין אם אתם מתכנתים עקבו אחר המדריך הבא:

https://wptips.dev/lazyload-without-plugin/

פעולה 6 - שימוש ב-CDN

מה זה CDN?

CDN (Content Delivery Network), הינה רשת של שרתים הפרוסים ברחבי העולם אשר מטרתם היא האצה של אתרים לפי המיקום הגאוגרפי של הגולש. לרוב שרתי CDN יאחסנו תמונות וקבצי וידאו של האתר, אך במקרים מיוחדים הם יכילו גם את קבצי האתר הסטטיים כגון CSS, JavaScript ו-HTML. יתרון נוסף ל-CDN מעבר לשיפור המהירות של האתר הוא שמדובר כאן על שיפור באבטחת האתר מפני פריצות פוטנציאליות.

איך מפעילים את זה?

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

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

 

מדידת המהירות והשוואת נתונים

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

  • הציונים מחולקים לשתי קטגוריות – מובייל ומחשב שולחני.
  • ישנם 4 ציונים שונים שהפלטפורמה מספקת – Performance, SEO, Best practice, Accessibility. בדו”ח זה אנו מתייחסים אך ורק לפרמטר – Performance הנוגע למהירות האתר.
  • ציון של 90 ומעלה נחשב ציון טוב, 50-90 נחשב ממוצע, ומתחת ל-50 נחשב נמוך.
  • ציון האתר אינו קבוע והוא זז בסטייה של כמה נק' מבדיקה לבדיקה, כתלות בפרמטרים שונים.
ציון מהירות אתר

לסיכום

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

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

מדריכים נוספים חמים מהתנור

אלמנטור

תוסף מומלץ ליצירת טפסים מורכבים באלמנטור

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