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

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

אתר וורדפרס איטי בדרך כלל בגלל ארבעה דברים: תמונות כבדות שהועלו במידות המקוריות מהמצלמה או מהטלפון, יותר מדי תוספים פעילים שטוענים קבצים בכל עמוד, היעדר מטמון (Cache), ואחסון חלש מדי ליחס התנועה של האתר. בדיקה אחת חינמית ב-PageSpeed Insights של גוגל מראה איפה הזמן נשרף, ולרוב אפשר לקצר אותו משמעותית בלי לבנות את האתר מחדש.

איך בודקים אם האתר שלי באמת איטי?

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

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

גוגל מודד את חוויית הטעינה בשלושה מדדים שנקראים Core Web Vitals. כדאי להכיר אותם בגדול, כי הם מופיעים בכל דוח:

למה דווקא התמונות מאיטות את האתר?

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

מה כדאי לעשות לפני כל העלאת תמונה

• להקטין את התמונה לרוחב שבו היא באמת מוצגת. לתמונת רוחב מלא בדרך כלל מספיקים כ-1,600 עד 2,000 פיקסלים, ולתמונה בתוך טקסט מספיקים כ-800.
• לשמור בפורמט מודרני כמו WebP, שמשקלו קטן משמעותית מ-JPG באותה איכות נראית.
• לדחוס את הקובץ. ברוב התמונות אפשר להוריד חלק ניכר מהמשקל בלי שהעין תבחין בהבדל.
• לא להעלות PNG לצילומים. PNG מתאים ללוגו ולגרפיקה עם שטחים אחידים, ולצילום הוא כמעט תמיד כבד מדי.
• לוודא שלתמונות יש מידות מוגדרות בקוד, כדי שהעמוד לא יקפוץ בזמן הטעינה ויפגע במדד היציבות.
• להשאיר טעינה עצלה (lazy loading) לתמונות שנמצאות מתחת לקפל, כך שהן נטענות רק כשגוללים אליהן.

כמה תוספים זה יותר מדי?

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

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

מה זה מטמון, ולמה זה משנה כל כך?

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

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

מתי האחסון הוא הבעיה האמיתית?

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

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

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

מה אפשר לעשות כבר השבוע?

1. הריצו בדיקת PageSpeed Insights לדף הבית, לעמוד שירות אחד ולעמוד יצירת קשר, בנייד ובמחשב, ושמרו צילום מסך של התוצאה כנקודת פתיחה.
2. מצאו את חמש התמונות הכבדות באתר, הקטינו אותן ודחסו אותן, והעלו אותן מחדש באותם מקומות.
3. עברו על רשימת התוספים, והשביתו ומחקו כל תוסף שלא היה בשימוש בשנה האחרונה. לפני כן, גיבוי.
4. ודאו שיש מטמון פעיל, ושהוא מתנקה אוטומטית אחרי כל עדכון תוכן.
5. בדקו שגרסת ה-PHP של השרת היא גרסה נתמכת ועדכנית.
6. ותרו על רכיבים כבדים שלא מייצרים ערך: סליידר בן חמש שקופיות שאף אחד לא גולל עד סופו, או וידאו רקע אוטומטי בדף הבית.
7. מדדו שוב אחרי שבוע והשוו לצילום המסך הראשון, כדי לדעת מה באמת עזר.

מתי זה כבר לא שאלה של תחזוקה אלא של בנייה מחדש?

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

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

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