איך שיפרתי את מהירות אתר לקוח במספר פעולות פשוטות

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

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

  1. בחירת שרת אחסון מתאים
  2. בחירת תבנית עיצוב מתאימה
  3. דחיסה וכיווץ תמונות
  4. תוסף קאש
  5. Lazy load
  6. שימוש בCDN

1. בחירת שרת אחסון מתאים

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

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

2. בחירת תבנית עיצוב מתאימה

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

3. דחיסה וכיווץ תמונות

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

4. תוסף קאש

WordPress plugins for caching: WP Rocket

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

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

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

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 בחינם.

והרי התוצאות

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

:GT-METRIX

:Google PageSpeed Insights

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

פוסטים נוספים

מה חשבת על הכתבה?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

השאר תגובה

גלילה למעלה