אז איך הגדלתי את מהירות אתר הWordPress שלי והורדתי את זמן הטעינה

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

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

הבעיה

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

4.2.15-start

במילים פשוטות – מרגע הכנסת הכתובת לדפדפן והקשה על אנטר (או כניסה מגוגל…) לאתר לקח כמעט 10 שניות להיטען – וזה במקרה הטוב. היו לנו גם בדיקות שהראו על 15-20 שניות.

הנתונים של האתר היו יחסית טובים:

  • שרת VPS ישראלי תקין.
  • תבנית WP פופולרית עם תחזוקה טובה וביצועים יפים.

ועדיין – זמן הטעינה של האתר הוא נורא ואיום.

המטרה

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

האמצעי

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

ומכאן הבעיות שהחלטנו להתמקד בהן על מנת לשפר את מהירות האתר:

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

לונג סטורי שורט – הנה התוצאות לאחר 21 ימים של חפירות, ניסויים, טעיות, תהיות והצלחה רבתי:

24.2.15-end

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

אז איך עשינו את זה?

צמצום גודל התמונות

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

אז מה עשינו?

הורדנו את כל תיקיית התמונות למחשב (בWordpress זה קל – מורידים את תיקיית uploads ואתה יורדות כל התיקיות וכל הקבצים שהועלו לאתר)

השתמשנו ב FastStone Photo Resizer כלי מדהים שפשוט רץ על כל התמונות וכיווץ אותן על פי הגדרתנו לאיכות JPG של 45. התוצאות היו מדהימות. התמונות כווצו מ100-200 KB לסביבות 20-30. והאיכות נשארה כמעט אותו הדבר.

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

וכמובן שמעתה והלאה – התמונות שעלו לאתר עלו בכיווץ הנ"ל.

צמצום השימוש בסקריפטים ותוספים

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

אז בתור התחלה עשינו התייעלות בעמוד הבית.

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

טיפול בזמני טעינה של תוספים

  • היו לנו המון תוספים כבויים – מה שלא התכוונו להשתמש בעתיד – מחקנו.
  • תוספים פעילים – היו לנו המון תוספים שעשו פעולות שהיה אפשר לוותר. למשל: תוספים שנשארו מתבנית קודמת אבל התבנית הנוכחית כבר הכילה את הפונקציות של התוסף. או תוספים לא יעילים כמו תוספי שיתוף ולייקים – שהחלפנו בתוספים יעילים יותר. ועוד.

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

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

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

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

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

CDN

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

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

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

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

וכך חסכנו עוד שניית טעינה

עדיין נשארנו עם 6-7 שניות של טעינת אתר.

תוספי Cache

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

  • W3TC – התוסף הפופולרי. בלתי נסבל להגדיר אותו. השתמשנו ב3 מדריכים שכל אחד מהם ייעץ לנו משהו אחר. בסופו של דבר – עשה עבודה נחמדה. הוריד את הטעינה ל5-6 שניות. לא יותר. בעיקר התנגש עם כל מני תוספים אחרים ולא ממש ידענו מה הוא עושה.
  • WP SuperCache – תוסף פופולרי לא פחות. עשה בעיקר בלגן. לא שיפר לנו את המהירות אפילו ברגע. לא השתמשנו בו יותר מדי.
  • Better WordPress Minify– בעיקר דפק את האתר. מרגע ההפעלה הפך את כל האתר לג'יבריש אחד גדול.
  • Far Future Expiration Plugin – העלה מאוד את ציון ביצועי האתר – אבל בפועל לא שיפר את זמן הטעינה.
  • Tribe Object Cache – היה אמור לעשות סדר בקאש – לא הראה יותר מדי שיפור או שעשה משהו.
  • WP Performance Score Boosterלא העלה את ציון הביצועים ולא עשה כלום.

בקיצור – היינו מיואשים.

אף תוסף קאש לא עשה את מה שהוא הבטיח. הפופולריים שיפרו קצת אבל היו עמוסי אופציות ומאוד לא ברורים.

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

אז החלטנו לשלוף את הארנק

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

BINGO

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

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

סיכום

אלו הפעולות שביצענו על מנת לשפר את ביצועי האתר

  • כיווץ התמונות ב65%. לא מעלים לאתר תמונה מעל 40K.
  • גירוש פלאגינים זוללנים והמעטת שימוש בסקריפטים מיותרים.
  • שימוש בLazyLoads.
  • שימוש בCDN.
  • תוסף קאש איכותי בתשלום.

 

זה הכל. כך הורדנו את זמן טעינת השרת מ10 שניות ומעלה – ל3 שניות גג (כשהיו בדיקות שהראו עד 2.3 שניות).

סוף דבר

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

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

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