לפני כשנה הכרתי את אורלי חרמש בנסיבות "מצערות". אורלי היא בעלת בלוג על אפייה בשם brown sugar והיא לא הצליחה להיכנס לפאנל הניהול של הבלוג שלה. בהמשך, אחד המודולים הקריטיים באתר שלה הפסיק לעבוד. היא הגיעה אלי דרך הפייסבוק ובשני המקרים הצלחתי לחלץ אותה מהמצב בו היתה נתונה.
לאחר תקופה שלא שמעתי מממנה, אורלי פנתה אלי לפני מספר ימים. היא קיבלה מייל מחברת האחסון שלה (Blue Host) שאומר שתקופת האחסון עומד להסתיים בקרוב והיא רצתה להתייעץ בנוגע להמשך האחסון, תוך שהיא מציינת שהאתר שלה מאד איטי.
דבר ראשון שאני עושה כשאני מתבקש לבדוק אתרים איטיים, זה לבדוק אותם באמצעות Google PageSpeed. התוצאות לפניכם:
אלה כמובן ציונים נמוכים מאד. על כן, הצעתי לאורלי לבדוק את האתר לצורך הצעת מחיר לאופטימיזציה של האתר לצורך שיפור מהירות הטעינה. אגב, הכלי החדש של גוגל לבדיקת מהירות, קבע כי לוקח לאתר של אורלי 15 שניות בשביל לעלות. הנה כך:
במקרים כאלה בהם אתר נטען כל כך לאט, אין ברירה אלא להרים את מכסה המנוע. ואם חשבתי שנגמרו לי ההפתעות – טעיתי. לאחר כניסה לפאנל הניהול הסתבר לי שהמצב הרבה יותר גרוע ממה שחשבתי, זאת מכיוון שהאתר של אורלי יושב על VPS של Blue Host. לעזאזל, VPS והאתר עולה כל כך לאט?
מבדיקות ב-cPanel של האתר הסתבר לי שהתעבורה החודשית של האתר היא בסביבות 50GB (בשביל בלוג זה הרבה מאד) וששטח הדיסק שלה נושק ל-30GB.
מסתבר שהבלוג שעוסק באפייה, מציג תמונות מקסימות של המאפים של אורלי. כשמדובר על כ-1,500 תמונות ברזולוציה של 4272 על 2848 פיקסל (שזה 12MP!), אפשר להתחיל להבין איך המצב הגיע לאן שהגיע.
שלפתי שרוולים ושכפלתי את האתר של אורלי לסאב-דומיין אצלי. לצערי היה בלתי אפשרי להוריד גיבוי מ-Blue Host מבלי שהחיבור התנתק ולכן הורדתי את התמונות דרך FTP במשך כל שעות הלילה, אותם גם היה צריך להעלות מחדש לסאב-דומיין שלי, מה שלקח עוד שעות ניכרות ממשך היום למחרת.
דבר ראשון חיפשתי תוסף שיסייע לאורלי להקטין את התמונות ללא מאמץ מיוחד מבחינתה. אבל לפני כן, עלי לכווץ ולהקטין כ-1,500 תמונות בשביל לשפר את מהירות טעינת האתר. בחרתי ב-imsanity, היות והוא בין היחידים שענה לדרישות שלי:
- טיפול במספר לא מוגבל של תמונות (רובם המוחלט של התוספים המקבילים נתנו כמות של 50 עד 250 תמונות בחודש).
- יכולת גם להקטין את הרזולוציה של התמונות וגם לכווץ אותם ללא פעולה נוספת. הגדרתי את הרזולוציה המירבית של התמונות לגודל של 1366 על 768 (כ-1MP) כך הצלחתי להקטין את התמונות לכמעט עשירית מהגודל המקורי שלהן.
- גם התמונה המקורית מוקטנת וכך אני חוסך בשטח אחסון.
בנוסף, חיברתי את האתר המשוכפל ל-Cloudflare והתקנתי תוסף קאש (זכרון מטמון) בשם W3 Total Cache. מפתחים רבים מעדיפים את WP-Rocket כתוסף קאש, אבל מהנסיון שלי הצלחתי להגיע לתוצאות טובות יותר עם W3TC. ובנוסף, הוא חינמי שלא כמו הרוקט.
אזהרה: אם אתם לא יודעים מה אתם עושים, אל תתעסקו עם W3 Total Cache בפרט ועם תוספי קאש בכלל. אתם עלולים "לשבור" את האתר שלכם.
התוצאות היו מרשימות. אבל על מכשול אחד לא חשבתי – אורלי לא משוכנעת שהיא רוצה תמונות מוקטנות. היא חוששת לאבד את איכות התמונות שלה, ומבחינתה הבלוג שלה בנוי על התמונות הללו. מצאתי את עצמי מסביר לאורלי שתמונות ברזולוציה שהגדרתי לעיל, עבור תמונות שאינן פרוסות על כל המסך, הינן מספיקות בהחלט ולו היה מדובר באתר שלי, הייתי מקטין אותן אף יותר. בסופו של דבר שכנעתי אותה ולאחר אור ירוק העברתי את הדומיין שלה לאחסון שלי.
מצ"ב התוצאות לאחר העברת האתר אלי.
תוצאות מדהימות, אה? 92 מתוך 100 בדסקטופ לאחר שהאתר עבד שנה שלמה על VPS עם ציון של 36!
אבל אל תתלהבו יותר מדי. בכל תהליך אופטימיזציה צריך לבדוק טוב טוב שלא הרסתם משהו בתהליך. אז לאחר שאורלי התלהבה מהתוצאה, ביקשתי שתבדוק שהכל עובד כשורה. גם אני המשכתי להסתובב באתר תוך שאני מחפש אנומליות. מצאתי כמה כאלה, למשל צורך ברענון העמוד בכדי שיוצג כמו שצריך או העלמות של אלמנטים מסויימים. בנוסף, אורלי עצמה מצאה שהתצוגה במובייל משובשת.
התופעות הללו נבעו מעודף מיניפקציה של קבצי CSS ו-JS. טוב, זה לא ממש עודף מיניפקציה, אלא שמיניפקציה של קבצים מסויימים גרמה לתופעות הללו ולכן נאלצתי להסיר אותם מהמיניפיקציה של W3TC. בלית ברירה זה גרם אמנם לירידה קלה בתוצאת הדסקטופ מ-92 ל-86, אבל כעת האתר עובד כמו שצריך.
אז להלן תוצאת הדסקטופ של האתר ושימו לב למהירות הטעינה החדשה לפי גוגל! שיפור של 66% במהירות הטעינה של הדף הראשי (מ-15 שניות ל-5 שניות בלבד).
אז לסיכום, אם אתם בעלי אתרים – הקפידו על גודל תמונות שמתאים לסביבת האינטרנט ולא לתעשיית הדפוס. אם אתם מתקשים – קחו בעל מקצוע שמבין בנושא. נסיונות לפתור את הבעיה באמצעות אחסון על VPS לא תמיד משיג את התוצאה הרצויה.
מה שמזכיר לי שכמעט בכל פעם שבעל אתר שואל מה לעשות בשביל לשפר את מהירות הטעינה של האתר שלו, מייעצים לו להעביר את האחסון לשרת ישראל. זו המלצה שאמורה כמובן לעשות רק טוב, אבל לאתרים שלא עברו אופטימיזציה יעילה, זה כמו כוסות רוח למת.
אותו כנ"ל לגבי ההמלצה להשתמש ב-VPS. זה כמובן תמיד יותר טוב מאחסון שיתופי, אבל ללא אופטימיזציה גם VPS לא יעזור להגיע למהירות טעינת אתר אופטימלית.
ואתם? במה אתם משתמשים בשביל לייעל את מהירות טעינת האתר שלכם? ספרו לי.
בתור מקדם אתרים פרילנסר, אני ממליץ בחום על שירותיו של WP-Killer. לא רק שהאתרים שלי ושל הלקוחות שלי מאוחסנים אצלו, גם הוא שיפר את מהירות טעינת האתר שלי וזה בהחלט בא לידי ביטוי בביצועים המהירים!
אני מת על קייס סטאדיז כאלה, אז ראשית תודה על השיתוף.
האם אתה חושב שרק הקטנת התמונות הייתה יכולה להספיק לשיפור זמן הטעינה במקרה הזה? גם בלי שאר הדברים?
היי עמית. תודה על התגובה. שמחתי שאהבת.
לגבי הקטנת התמונות – אתה שואל רק על זמן הטעינה. אז כן, ברור שזה היה משפר מאוד. אבל שהציע לא מספיק. שימוש בתוסף הקאש גורם להקטנת קבצי המערכת (מיניפיקציה) ולשמירת קבצים בדפדפן של המשתמש כך שלא ייטענו בכניסה הבאה שלו. בנוסף שימוש ב-CDN משפר את הצורך בהגשת הקבצים על ידי האתר עצמו. שני אלו (קאש וCDN) אמורים להקטין את התעבורה היוצאת מהאתר שעמדה באחסון הקודם על 50 גיגה בחודש שזה המון.
בוודאות הקטנת התמונות לא היתה משפרת את האתר ב66%. אני יכול להעריך שזה היה משפר בחצי מזה. אבל זו הערכה גסה. לצערי לא השכלתי לבדוק לאחר הקטנת התמונות בלבד. חבל באמת.
עמית, נברתי באימיילים שלי ומצאתי תיעוד לציון לאחר הקטנת התמונות וחיבור לCloudflare. הציון הוא 59 במקום 36 במקור (23 נקודות הפרש). כך שתוסף הקאש הוא המשפיע העיקרי והוסיף עוד 27 נקודות!
תודה רבה דוד, שהקדשת את הזמן לבדוק במיוחד. תוצאה מעניינת בהחלט.
אגב גוגל כמעט תמיד מציע הקטנת CSS ו HTML, איך באמת עושים את הפעולה הזו?
ואיך משחררים חסימות של JS?
זה נקרא מיניפיקציה. הזכרתי את זה גם במאמר.
תוספי קאש טובים (כמו WP-Rocket ו-W3TC) יודעים לעשות את זה. ניתן לעשות את זה גם ידנית אם מדובר באתר שלא עתיד להשתנות מבחינת CSS עם כלים אונליין כמו https://cssminifier.com או http://www.cleancss.com/css-minify
שמח על היכרותי עם דוד. הגיע אלי עם אתר זוחל בציון 28/100 ולאחר טיפול יסודי שלו קפצתי ל 61/100.
מיקצוען אמיתי.
זה בדיוק מה שקורה גם לי עם קבצי CSS ו-JS אז גם אני מוריד אותם
תבנית קלה
+
תוסף לדחיסת תמונות
+
Autoptimize למיניפיקציה HTML \ CSS \ JS
+
WP super cache לקאש של קבצים
+
Cloudflare עם קאשינג מופעל
+
VPS איכותי
מאמר מצוין. למרות ששיתפתם בתיאוריה, שיתפתם את הדוגמא המעשית, שזה באמת מועיל. אופטימיזציה לתמונות חשובה למדי, מכיוון שהיא דורשת כמעט 70% מגודל העמוד. לייעול העמוד שלך, אתה יכול גם לקבל את הכלים מהקישור הבא https://url-decode.com/cat/. שם תוכלו למצוא כלים הקשורים למיניפציה, מיטוב תמונה ורבים נוספים.
A Wi-Fi booster is not hard to install. Find a location that receives the Wi-Fi network already present and connect the power supply. Through your laptop, log into the Wi-Fi booster and add the login details, including the password of your present Wi-Fi network. This will allow the Wi-Fi booster to extend after connecting.mywifiext setup