כולם יודעים שמהירות טעינת האתר חשובה. לא רק שזהו גורם דירוג רשמי של גוגל, מהירות הטעינה משפיעה גם על חוויית המשתמש ואף על השורה התחתונה בעסק. עם זאת, אתרי וורדפרס איטיים הם בעיה נפוצה מדי, ורצוי לטפל בהם מבחינה זו.
איך בודקים מהירות טעינה באתר?
יש כמה כלים שיכולים לסייע בבדיקה:
- Google Page Speed
- Google search console
- GT Metrix
- Pingdom Speed Test
- Ahrefs
- הצפרדע הצועקת
פייג' ספיד, ג'י טי מטריקס ופינגדום בודקים בכל פעם רק עמוד אחד באתר (העמוד שהקלדנו בתיבת הבדיקה). לעומת זאת, ahrefs וגוגל קונסול מספקים גם מדדי מהירות עבור כלל האתר. הצפרדע נותנת ציון מהירות לכל עמוד בנפרד, בדוח אחד מקיף.
הערה נוספת:
רוב האופטימיזציה במדריך זה נשענת על תוסף WP Rocket בתשלום. היכן שאפשר צוינו חלופות בחינם.
מדדי Core Web Vitals: איך גוגל מודדת את מהירות האתר?
גוגל מודדת את חוויית המשתמש בעמוד בשלושה מדדים שנקראים Core Web Vitals. הם מחושבים לפי נתונים של גולשים אמיתיים, וכשיש לאתר מספיק תנועה, תמצאו אותם בגוגל קונסול ובפייג' ספיד.
- LCP (Largest Contentful Paint) – כמה זמן עובר עד שמופיע האלמנט הגדול ביותר במסך, בדרך כלל תמונה או בלוק טקסט. גוגל ממליצה שזה יקרה בתוך 2.5 השניות הראשונות של הטעינה.
- INP (Interaction to Next Paint) – כמה מהר העמוד מגיב לקליק, להקשה או להקלדה. היעד הוא פחות מ-200 מילישניות. INP החליף את FID במרץ 2024.
- CLS (Cumulative Layout Shift) – כמה התוכן בעמוד זז בלי שהגולש ציפה לזה. כפתור שקופץ בדיוק כשמנסים ללחוץ עליו הוא דוגמה מוכרת. ציון טוב הוא מתחת ל-0.1.
בדוח Core Web Vitals בגוגל קונסול תראו את כתובות האתר מחולקות לשלוש קבוצות: טובות, צריכות שיפור וגרועות.
הסרת תוספים שאינם בשימוש
רוב הסיכויים שלאורך הזמן התקנתם תוספים שאינכם משתמשים בהם או שהפכו ללא רלוונטיים (אלא אם אתם ממש מקפידים בנושא, או שיש לכם אתר וורדפרס יחסית חדש). חלק מתוספים אלו יכול להשפיע על מהירות האתר, אז כדאי לבטל ולהסיר את כל מה שאינכם צריכים בתור התחלה.
שלב זה מחייב זהירות ובדיקה קפדנית. אם אינכם בטוחים האם תוסף מסוים נחוץ לאתר, השאירו אותו שם. בררו מה התוסף עושה ורק אחרי שאתם בטוחים – פעלו בהתאם.
החלפת ספק DNS
אתרי אינטרנט הם למעשה אסופת קבצים הנמצאים בכוננים קשיחים (שרתים) שמחוברים לאינטרנט. לכל מכשיר המחובר לאינטרנט יש כתובת IP המאפשרת למצוא אותו (למשל: 123.123.12.1).
מכיוון שקשה לשנן כתובות IP, שמות הדומיינים עוברים הסבה לכתובות IP באמצעות DNS, קיצור של Domain Name System. אפשר לדמות זאת לספר הטלפונים של האינטרנט. כאשר מקלידים דומיין בדפדפן, מתבצעת בדיקת DNS כדי למצוא את כתובת ה-IP של השרת.
הבעיה היא שרוב האנשים משתמשים בספקי ה-DNS החינמיים של רשם הדומיינים שלהם, וזה בדרך כלל מתכון לאיטיות בטעינת האתר. זו הסיבה שמומלץ לעבור לספק DNS מהיר יותר, כמו קלאודפלייר.
כדי לעשות זאת:
- הירשמו לחשבון Cloudflare בחינם.
- בלוח הבקרה של Cloudflare בחרו בהוספת דומיין, הזינו את שם הדומיין שלכם ואשרו את הבחירה.
- בחרו את התוכנית החינמית והמשיכו.
- בשלב זה ניתן לבחור את הגדרות ה-dns. אם אין אזהרות מיוחדות, ניתן להמשיך בתהליך.
- יש להחליף את שרתי השמות (Name Servers) עם רשם הדומיינים שלכם. אפשר להיעזר בתמיכת הרשם לצורך כך.
התקנת תוסף מטמון (Cache)
שמירת מטמון היא תהליך המאחסן קבצים באופן זמני, כך שניתן יהיה להציג אותם למבקרים באתר בצורה יעילה ומהירה יותר.
יש שני סוגים עיקריים של מטמון / קאש:
- מטמון דפדפן – שומר קבצים נפוצים (כמו לוגואים) בכונן הקשיח של המשתמשים, כך שלא יצטרכו להוריד אותם מחדש בביקורים חוזרים.
- מטמון שרת – שומר גרסה סטטית ובנויה במלואה של דף בשרת, כך שלא צריך לבנות אותו מחדש בכל פעם שמבקר חדש נכנס לעמוד.
תוסף WP Rocket מקל על הפעלת מטמון באתרי וורדפרס. הוא פשוט להתקנה והפעלה, ומייצר מטמון בסיסי של שרת ודפדפן כברירת מחדל. מגרסה 3.16 (מאי 2024) התוסף שומר מטמון נפרד גם למכשירים ניידים בלי הגדרה נוספת, ואם המטמון למובייל כבוי, אפשר להפעיל אותו בלשונית Tools.
תוסף חינמי חלופי – W3 Total Cache.
דחיסת הקוד באתר
צמצום הקוד (Code minification) מסיר רווחים והערות כדי להקטין את גודל הקבצים באתר. קבצים קטנים יותר מקצרים את זמני הטעינה.
אם אתם משתמשים ב-WP Rocket, סמנו את התיבות הרלוונטיות כדי לצמצם CSS ו-JavaScript בהגדרות. תוסף חלופי בחינם יכול להיות Autoptimize, בו יש לעשות את אותו הדבר.
חשוב לזכור שדחיסת הקוד עלולה להשפיע על נראות האתר. צריך תמיד לבדוק את ההשפעה ולוודא שאין חלקי אתר שבורים, במיוחד כשמדובר בג'אווה סקריפט. אם צמצום הקוד שובר את האתר בדרך כלשהי, הסירו את הסימון בתוסף ופנו לאנשי מקצוע.
איחוד קובצי CSS ו-JavaScript
רוב אתרי הוורדפרס כוללים קובצי CSS ו-JavaScript מרובים. חלקם מיועדים לתבניות אתר, אחרים מיועדים לתוספים ואולי יש גם כמה מותאמים אישית.
שילוב ואיחוד הקבצים האלה עשוי להאיץ את העניינים, אבל זה תלוי בהגדרת השרת שלכם:
- בגרסת HTTP/1.1 – כל חיבור לשרת מעביר קובץ אחד בכל פעם, והדפדפן פותח רק מספר מוגבל של חיבורים (בדרך כלל שישה לכל דומיין). כשיש הרבה קובצי CSS ו-JS, חלקם ממתינים בתור.
- בגרסת HTTP/2 – קבצים נטענים במקביל. כלומר, קובצי CSS ו-JS מרובים יכולים להתחיל להיטען בו-זמנית.
אם השרת שלכם משתמש ב-HTTP/1.1, שילוב קבצים מאיץ את מהירות הטעינה מכיוון שצריך לטעון פחות קבצים. אם הוא משתמש ב-HTTP/2, שילוב קבצים לא בהכרח יעשה הבדל גדול – מכיוון שקבצים יכולים להיטען באותו זמן בכל מקרה.
כדי לראות באיזו גרסה האתר שלכם משתמש, הזינו את כתובת האתר בכלי בדיקת HTTP/2 של KeyCDN. אם HTTP/2 אינו נתמך בשרת שלכם, כדאי לשלב קובצי CSS וג'אווה סקריפט.
כדי לעשות זאת ב-WP Rocket, סמנו את התיבה Combine JavaScript files בהגדרות. האפשרות לאיחוד קובצי CSS הוסרה מהתוסף בגרסה 3.15 (אוגוסט 2023). בתוסף Autoptimize יש שתי תיבות סימון ל"צבירה" (Aggregate) של קבצים. רק דעו שלפעמים אלו יכולים 'לשבור' דברים באתר שלכם, אז כדאי לבדוק שוב שהכל עדיין נראה ומתפקד אותו דבר לאחר ההפעלה.
זכרו לנקות את המטמון לפני כן ולבדוק אם יש שינויים בחלון גלישה בסתר. אחרת, ייתכן שהשינויים לא ישתקפו במה שאתם רואים.
הסרת משאבים חוסמי עיבוד-קוד (רינדור)
עיבוד (Rendering) הוא תהליך של הפיכת קוד לדף אינטרנט גלוי. מילת המפתח היא 'גלוי', מכיוון שדף אינטרנט לא תמיד צריך להיטען במלואו לפני שהוא גלוי. מסיבה זו, הגיוני לתת עדיפות ראשונה לטעינת משאבים עבור תוכן הנמצא מעל קו הגלילה (החלק התחתון של המסך בו משתמשים).
אפשר לעשות זאת על ידי דחיית הטעינה של קובצי CSS ו-JS שאינם דרושים לתוכן מעל קו הגלילה. כדי לעשות זאת ב-WP Rocket, סמנו את התיבות Load JS deferred וכן Optimize CSS delivery.
אם אינכם משתמשים בתוסף רוקט, תזדקקו לשני תוספים: Autoptimize ו-Async JavaScript. בהגדרות של Autoptimize סמנו את התיבה Inline and Defer CSS. לאחר מכן, בהגדרות של Async JavaScript, לחצו על Enable Async JavaScript.
פעולות אלו פותרות בדרך כלל את כל הבעיות של משאבים חוסמי רינדור בבדיקת גוגל פייג' ספיד.
טעינת Lazy Load לתמונות וסרטונים
טעינה "עצלה" משפרת את מהירות העמוד על ידי דחיית הטעינה של תמונות וסרטונים, עד שהם גלויים על המסך.
אם יש לכם וורדפרס 5.5 ומעלה, טעינת תמונות בעצלתיים מופעלת כברירת מחדל. מגרסה 5.7 וורדפרס מפעילה טעינה עצלה גם על iframes בתוכן, כמו סרטוני יוטיוב מוטמעים, אבל רק כשמוגדרים להם רוחב וגובה. ב-WP Rocket אפשר להחיל טעינה עצלה על iframes וסרטונים מוטמעים באמצעות התיבה "הפעל עבור iframes וסרטונים" תחת הגדרות LazyLoad.
תוסף חינמי חלופי – Lazy Load for Videos.
אופטימיזציה של גופני גוגל
תבניות אתר רבות משתמשות בגוגל גופנים, ויש להוריד את הגופנים האלה מהשרת של גוגל בכל פעם שמישהו מבקר באתר. זה יכול להיות תהליך גוזל זמן מכיוון שהדפדפן צריך לבצע בקשות HTTP, להוריד קובץ CSS ואז להוריד את הגופן מהמיקום שאליו מתייחס גיליון הסגנונות. מעבר לכך, הוא צריך לעשות זאת עבור כל גופן בדף!
תוסף רוקט מבצע אופטימיזציה אוטומטית של בקשות Google Fonts. אם אין לכם רוקט, Swap Google Fonts Display הוא תוסף חלופי טוב לנושא זה.
טעינה מוקדמת (Preloading)
טעינה מוקדמת מאפשרת להגדיר משאבים חיוניים, כך שדפדפנים יודעים באיזו עדיפות לטעון קבצים.
לדוגמה, לעיתים קובץ JS צריך להיטען ראשון בגלל עדיפויות היררכיה מסוימות; אך לא תמיד זה אידיאלי, מכיוון שקובץ ה-CSS הוא כמעט בוודאות קריטי יותר מקוד JavaScript.
הפתרון הוא להוסיף שורת קוד נוספת:
<link rel="preload" href="/style.css" as="style">
קוד זה אומר לדפדפנים לתעדף את קובץ ה-CSS על פני קובץ הג'אווה סקריפט, ללא קשר להיררכיה. אפשר להוסיף זאת ידנית בקוד האתר, אבל צריך לדעת מה עושים. תוסף WP Rocket עושה זאת אוטומטית.
שימוש ב-CDN
רשתות להעברת תוכן (CDN) הן קבוצות של שרתים המופצות בכל רחבי העולם. כל אחד מאחסן עותק של האתר שלנו, כך שמשתמשים יתחברו במהירות רבה יותר לאתר.
לדוגמה, נניח שהשרת שלכם נמצא בבריטניה. אם מישהו מבקר באתר שלכם מארה"ב ואתם לא משתמשים ב-CDN, החיבור בין המכשיר שלו לשרת שלכם יהיה איטי. אם יש CDN, המכשיר שלו יתחבר לשרת הקרוב ביותר, מה שעוזר להתחבר מהר יותר.
יש המון ספקי CDN, אז כל מה שצריך לעשות הוא לבחור אחד, להפעיל אותו ב-WP Rocket ולהזין את ה-CNAME.
להרחבה: מדריך CDN
אופטימיזציית תמונות באתר
טעינת לייזי פותרת בעיות רבות הקשורות לתמונות, אבל היא לא עוזרת לתמונות שנטענות מעל לקו הגלילה. ככל שהן גדולות יותר, כך התמונות ישפיעו לרעה על זמני הטעינה.
כדי לפתור זאת, יש לדחוס את התמונות באתר עם תוסף כמו Shortpixel. במסך ההגדרות יש להזין את מפתח ה-API שלכם, לאחר מכן לשמור ולעבור לתהליך Bulk ואז לבחור "התחל אופטימיזציה מחדש".
אם התמונות יוצאות באיכות נמוכה מדי בשל כך, חזרו אל ההגדרות ובחרו בסוג דחיסה glossy או lossless.
להרחבה: מדריך אופטימיזציית תמונות
רגע לפני סיום
לאחר כל העבודה המכובדת הזו, הריצו שוב בדיקות מהירות כדי לראות האם חל שינוי בזמני הטעינה. חשוב לזכור שלכל אתר וורדפרס יש תצורה שונה: ייתכן שיש יותר תוספים, התבנית מסורבלת יותר, השרת איטי יותר או שיש יותר סקריפטים למעקבי צד שלישי. כל אלה מאיטים את האתר.
אם מהירות הטעינה עדיין זקוקה למקצה שיפורים למרות כל הסעיפים במאמר זה, ייתכן שיהיה צורך בעבודה מקצועית ומותאמת אישית. במצב זה מומלץ לשכור את שירותיו של איש מקצוע העוסק בתחום.
