מכירים את האייקון המסתובב הזה? אתם מנסים להיכנס לאתר מסוים וזה מה שאתם מקבלים. אז אתם מחכים… ומחכים… ומחכים… מתסכל! ואז, ברגע מסוים נמאס לכם ואתם עוברים לאתר אחר/מתחרה.
טוב, אתם לא לבד. מחקרים מראים ש-30% מהגולשים יעזבו אתר לאחר המתנה של 3 שניות. במאמר הזה נעבור על הדרכים לשיפור אתר המבוסס על מערכת וורדפרס, בדומה לאתר קריית השרון שלי.
אתר קריית השרון שלי
מאור דאיה, מנהל האתר, פנה אלי בחודש שעבר להתייעץ על כמה דברים לטובת האתר. אחד מהם – האפשרות לעבור לאחסון אחר. הצעתי לו לעבור לאחסון שלי. בכדי לבחון את האפשרות הזו, ביקשתי לבדוק את האתר באחסון הנוכחי, ואיך לומר? די הזדעזעתי…
גיליתי שהאתר תופס כ-3.5GB. זה גודל עצום לאתר, אפילו לאתר יחסית גדול כ-קריית השרון שלי. אין ספק שלפני העברת האתר לשרת האחסון שלי, יש לבצע חריש עמוק באחסון הנוכחי. ואכן, אני ומאור הצלחנו להקטין את שטח האחסון של האתר ל-1.3GB בלבד, כאשר מתוכם 1.2GB תופסות התמונות לבדן.
עכשיו אפשר היה להעביר את האתר בקלות רבה יותר, וכך עשינו. אבל היות ומאור הוא חבר יקר, הגדלתי ראש והרצתי בדיקת מהירות טעינת האתר בכלים שונים. אני נוהג להשתמש בכלי של גוגל – Google pagespeed insights וכן בכלי של Pingdom.
התוצאות בשני הכלים היו נמוכות מאד.
בכלי של גוגל, שאינו מציג מהירות טעינת אתר כי אם ציון כללי, האתר קיבל 28 מתוך 100 לגרסת המחשב השולחני (דסקטופ) ו-32 לגרסת הסלולרי (מובייל), גם כן מתוך 100.
הכלי של Pingdom מדמה משתמש שגולש באתר ולכן גם מציג זמן טעינה. לפי תוצאת הבדיקה, לקח לאתר 5.71 שניות להיטען. זוכרים ש-30% מהגולשים לא היו ממתינים יותר מ-3 לטעינת האתר? אז מה יקרה בכמעט פי 2 מהזמן?
כמו כן, גודל העמוד הראשי שנטען הינו 3.9MB. אצטרך לשפר את זה לטובת האצת האתר.
יאללה לעבודה...
טוב, אין ספק שצריך להפשיל שרוולים ולהתחיל לעבוד. אבל! לפני שאני נוגע במשהו, חייבים לוודע שיש גיבוי עדכני של האתר. המלצתי למאור לגבות את האתר באמצעות תוסף לוורדפרס שנקרא UpdraftPlus, לפי מדריך שכתבתי באתר שלי וכך אכן עשה.
עכשיו שיש גיבוי, יכולתי לעבוד בראש שקט על האתר. הדבר הראשון שעשיתי היה לכווץ תמונות. כזכור, התמונות היוו כ-90% מגודל כל האתר. יש לוורדפרס מספר תוספים הטוענים לכיווץ מיטבי של תמונות. מנסיוני, התוספים בגרסתם החינמיים אינם מכווצים את התמונות באופן המיטבי ביותר, או שמאפשרים כיווץ מספר קטן של תמונות אחת לחודש. ובאתר קריית השרון שלי יש מעל 1500 תמונות!
אשר על כן, השתמשתי בכיווץ אופליין דרך האתר TinyPng. מנסיוני זה אחד הכלים הטובים והקלים ביותר בשימוש. אמנם יש מגבלה של 20 תמונות לכל פעם, אבל כיווצתי רק את התמונות הבעתיות ביותר מבחינת גודל (כ-200 תמונות).
לאחר מכן התקנתי תוסף קאש (Cache, זכרון מטמון) בשם W3 Total Cache. עם תוספי קאש נדרשת זהירות רבה מכיוון והם עלולים לשבור את האתר, לכן יש לבדוק את האתר על כל שינוי שנעשה. וכמובן לוודא שהגיבוי של האתר נמצא במקום בטוח לצורך שימוש, באם יהיה צורך.
חשבתי שסיימתי אבל כשצרות באות, הן באות בצרורות. אם בתחילת התהליך הבעיה היתה בשטח הדיסק שהאתר תופס, כעת זיהיתי שהאתר משתמש בנפח תעבורה עצום. תוך כעשרה ימים, נשאבו מהאתר יותר מ10GB של תעבורה, רובם של בוטים כמו גוגל ו-Yandex. אמנם תוסף הקאש היה אמור לשפר את המצב, אבל לא הסתפקתי בכך וחיברתי את האתר לשירות ה-CDN של Cloudflare.
השירות של Cloudflare יודע לנהל את הקאש של האתר, למנוע נסיונות תקיפה על האתר, ומעביר את תעבורת האתר דרך השרתים שלו, וזו הסיבה העיקרית לחיבור את האתר לשירות הנ"ל.
התוצאות
התוצאות אכן נראות לעין כשמריצים את אותן בדיקות שהרצנו מקודם על האתר.
כעת, בכלי של גוגל האתר מקבל 78/100 בגרסת המובייל ו-62/100 בגרסת הדסקטופ. הכלי של Pingdom, המדמה משתמש אמיתי, מציג מהירות טעינת האתר ב-2.2 שניות כאשר גודל העמוד הראשי שנטען הינו 2.3MB.
סיכום
לסיכום, שיפרתי את מהירות טעינת האתר מ-5.7 שניות ל-2.2 שניות, שיפור של יותר מפי 2.5 מהמהירות ההתחלתית. כמו כן, הבאתי את האתר לציון 78/100 לגרסת המובייל מ-32/100, גם כאן שיפור של כמעט פי 2.5 מהתוצאה הראשונית.
מה עשינו בשביל זה:
- מחקנו קבצים מיותרים
- כיווצנו תמונות באמצעות TinyPng
- התקנו תוסף קאש של W3 Total Cache
- חיברנו את האתר ל-CDN של Cloudflare
בכל הכלים שציינתי, השתמשתי בגרסאות החינמיות.
ומה אתכם? יש לכם אתר? בידקו בכלים שציינתי כמה הוא מהיר ושתפו בתגובות.
דוד ארוון
יליד 1972 (תעשו את החשבון לבד), נשוי להילה ואב לארבעה. מהנדס תעשיה וניהול ומנהל מערכות מידע בחברה גלובלית. בשנים האחרונות מפתח את עצמי כמפתח אתרי וורדפרס. תושב קרית השרון מ-2013, אחרי שחזרנו מרילוקיישן של 3 שנים בגרמניה (המבורג). שואף להיות ידידותי ונעים לסביבה. 😉
ניתן ליצור איתי קשר באמצעים הבאים:
