איך לזרז אתר וורדפרס איטי, באמת

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

הכלי הראשי הוא Google PageSpeed Insights. הוא מריץ את Lighthouse על האתר שלכם ונותן ציון, אבל החלק החשוב הוא לא הציון הצבעוני למעלה. החלק החשוב הוא ה-Core Web Vitals, נתוני האמת שגוגל אוסף מגולשים אמיתיים. אלה הנתונים שמשפיעים על הדירוג שלכם, לא הציון של הסימולציה.

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

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

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

• LCP (Largest Contentful Paint), מתי נטען האלמנט הכי גדול על המסך. בדרך כלל זו תמונת הכותרת או בלוק טקסט גדול. היעד הוא מתחת ל-2.5 שניות. זה המדד שהכי מושפע מאיכות השרת ומגודל התמונות.
• INP (Interaction to Next Paint), כמה מהר האתר מגיב כשלוחצים עליו. שימו לב היטב: בשנת 2024 גוגל החליף את המדד הישן FID במדד החדש INP. בניגוד ל-FID שמדד רק את ההשהיה של הקליק הראשון, INP מודד את התגובתיות לאורך כל הביקור. היעד הוא מתחת ל-200 מילישניות. אם האתר "נתקע" לרגע אחרי לחיצה, זה ה-INP שסובל, ובדרך כלל האשם הוא יותר מדי JavaScript.
• CLS (Cumulative Layout Shift), כמה התוכן "קופץ" בזמן הטעינה. כשאתם מנסים ללחוץ על כפתור ופתאום פרסומת נכנסת ודוחפת אותו, זה CLS גרוע. היעד הוא מתחת ל-0.1. הגורם הכי נפוץ זה תמונות בלי מידות מוגדרות, ופונטים שמתחלפים באמצע.

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

עכשיו לחלק שבגללו כתבתי את המדריך הזה. אם אתם זוכרים דבר אחד, שיהיה זה.

אפשר להתקין את כל התוספים בעולם, לדחוס כל תמונה, ולמחוק כל שורת CSS מיותרת. אבל אם השרת שלכם איטי, או יושב פיזית רחוק מהגולשים שלכם, נלחמתם בקרב שאי אפשר לנצח. למה? כי לפני שהדפדפן מתחיל בכלל לטעון את הדף, הוא צריך לשלוח בקשה לשרת ולחכות לתשובה הראשונה. המדד הזה נקרא TTFB (Time To First Byte), והיעד הוא מתחת ל-800 מילישניות בשטח, כשאחסון טוב מגיע לעשירית מזה.

שני דברים קובעים את ה-TFB שלכם:

• מרחק פיזי. נתונים נוסעים בכבלים, וזה לוקח זמן. שרת באירופה שמשרת גולש באסיה יכול להראות TTFB גבוה רק בגלל המרחק, גם אם השרת עצמו מהיר מצוין. בשביל קהל ישראלי, שרת קרוב (בישראל עצמה או באירופה הקרובה) מנצח שרת חזק שיושב באמריקה. נקודה.
• איכות החומרה והתשתית. אחסון מודרני רץ על דיסקי NVMe, שהם הרבה יותר מהירים מ-SSD רגיל בפעולות הקריאה האקראיות שוורדפרס עושה כל הזמן מול מסד הנתונים. בנוסף, שרת עם שכבת קאשינג ברמת השרת (כמו LiteSpeed או Nginx) פשוט משחק במגרש אחר.

זו בדיוק הסיבה שב-HostingIsrael אנחנו מודדים זמני טעינה מישראל בתור הקריטריון הראשון, ולא סומכים על דפי השיווק. אם אתם מתלבטים בין מארחים, שווה להציץ באחסון לקידום אתרים ובטבלת ההשוואה שלנו, או לקרוא ביקורות פרטניות כמו uPress (אחסון וורדפרס ישראלי), Cloudways וKinsta. תבחרו מארח עם בחירת מיקום שרת, ואל תתפשרו על זה.

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

אתר שרץ על PHP 8.x מבצע את הקוד מהר יותר באופן משמעותי מאותו אתר על גרסה ישנה כמו 7.4, בלי שינוי קוד אחד. וכמו שאמרנו, PHP מהיר יותר מקצר את זמן התגובה של השרת, וזה משפר ישירות את ה-LCP. רוב לוחות הבקרה של האחסון (cPanel, hPanel וכדומה) מאפשרים להחליף גרסת PHP בכמה קליקים.

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

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

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

יש כמה סוגי קאש ששווה להכיר:

• Page Cache (קאש דפים), הסוג הכי חשוב, ששומר את כל הדף המוכן.
• Browser Cache (קאש דפדפן), שאומר לדפדפן של הגולש לשמור קבצים סטטיים (לוגו, CSS) מקומית, כדי שלא יוריד אותם שוב בביקור הבא. מומלץ להגדיר תוקף ארוך, אפילו שנה, לקבצים שלא משתנים.
• Object Cache, ששומר תוצאות של שאילתות מסד נתונים, רלוונטי במיוחד לאתרים גדולים ולחנויות.

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

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

• אל תעלו תמונות ענק. זו הטעות הכי נפוצה. צילמתם תמונה של 5000 פיקסל מהמצלמה והעליתם אותה ישר לאתר שמציג אותה ברוחב 800 פיקסל? אתם מכריחים את הגולש להוריד תמונה פי כמה גדולה ממה שהוא רואה. תקטינו את התמונה למידות התצוגה המקסימליות לפני ההעלאה.
• תדחסו (Compress). דחיסה מורידה את משקל הקובץ עם אובדן איכות מינימלי שהעין כמעט לא קולטת. יש תוספים מצוינים שעושים את זה אוטומטית לכל תמונה שמעלים.
• תעברו לפורמטים מודרניים: WebP ו-AVIF. פורמט WebP מספק קבצים קטנים בערך ב-25 עד 35 אחוז מ-JPEG באיכות דומה, ו-AVIF דוחס אפילו יותר. ההמלצה המעשית היא להגיש AVIF לדפדפנים שתומכים בו, עם נפילה אחורה ל-WebP ואז ל-JPEG. רוב תוספי האופטימיזציה עושים את ההמרה הזו עבורכם.
• הפעילו טעינה עצלה (Lazy Loading). זה אומר שתמונות שנמצאות למטה בדף נטענות רק כשהגולש גולל אליהן, ולא בבת אחת. וורדפרס עושה את זה מובנה כברירת מחדל לרוב התמונות.

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

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

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

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

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

• Minify (כיווץ), הסרת רווחים, הערות ושורות מיותרות מהקוד. זה מקטין את גודל הקבצים בלי לשנות את הפונקציונליות.
• דחיית JavaScript לא קריטי (Defer), כך שהסקריפטים נטענים אחרי שהתוכן הראשי כבר מוצג. הגולש רואה את הדף מהר, והסקריפטים מתעדכנים ברקע.
• הסרת CSS לא בשימוש, כי הרבה תבניות טוענות עמוד שלם של עיצוב שלא משתמשים בו בדף הספציפי.

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

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

• אחסנו את הפונטים מקומית (Self-Host). במקום למשוך אותם משרת חיצוני, שמרו את קבצי הפונט אצלכם בשרת. זה חוסך פנייה לצד שלישי ונותן לכם שליטה מלאה. יש תוספים שעושים את זה בקליק.
• השתמשו ב-font-display: swap. זה אומר לדפדפן להציג מיד טקסט בפונט גיבוי, ולהחליף לפונט שלכם ברגע שהוא מוכן. הגולש רואה תוכן מיד, וזה התיקון הכי חשוב לקפיצות טקסט.
• אל תטענו עשרים משקלים של פונט. כל משקל (רגיל, מודגש, דק) זה קובץ נוסף. תטענו רק את מה שאתם באמת משתמשים בו. שניים שלושה משקלים זה בדרך כלל יותר מספיק.
• Preload לפונט הקריטי בלבד. אפשר לבקש מהדפדפן להוריד מראש את הפונט החשוב ביותר, אבל אל תעשו את זה לכל הפונטים, כי זה דווקא יפגע ב-LCP.

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

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

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

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

• 1. אחסון מהיר וקרוב לישראל. זה הבסיס. שרת איטי או רחוק יחבל בכל מה שתעשו מעליו.
• 2. גרסת PHP עדכנית. שיפור חינמי, מהיר, וכמעט בלי סיכון.
• 3. קאשינג. ברמת השרת אם אפשר, אחרת תוסף אחד טוב.
• 4. אופטימיזציית תמונות. הקטנה, דחיסה, WebP/AVIF ומידות מוגדרות.
• 5. CDN, פונטים, וכיווץ CSS/JS. הכוונונים שמסיימים את העבודה.
• 6. ניקיון מסד נתונים ותוספים. תחזוקה שוטפת שמונעת מהאתר להתנפח מחדש.

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