כולם יודעים שמהירות טעינת האתר חשובה. לא רק שזהו גורם דירוג רשמי של גוגל, מהירות הטעינה משפיעה גם על חוויית המשתמש ואף על השורה התחתונה בעסק. עם זאת, אתרי וורדפרס איטיים הם בעיה נפוצה מדי, ורצוי לטפל בהם מבחינה זו.
איך בודקים מהירות טעינה באתר?
יש כמה כלים שיכולים לסייע בבדיקה:
- Google Page Speed
- Google analytics
- Google search console
- GT Metrix
- Pingdom Speed Test
- Ahrefs
- הצפרדע הצועקת
חשוב לציין שפייג' ספיד, ג'י טי מטריקס ופינגדום בודקים בכל פעם רק עמוד אחד באתר (העמוד שהקלדנו בתיבת הבדיקה). לעומת זאת, גוגל אנליטיקס, ahrefs וגוגל קונסול מספקים גם מדדי מהירות עבור כלל האתר. הצפרדע נותנת ציון מהירות לכל עמוד בנפרד, בדוח אחד מקיף.
הערה נוספת:
רוב האופטימיזציה במדריך זה נשען על תוסף WP Rocket בתשלום. היכן שאפשר צוינו חלופות בחינם.
הסרת תוספים שאינם בשימוש
רוב הסיכויים שלאורך הזמן התקנתם תוספים שאינכם משתמשים בהם או שהפכו ללא רלוונטיים (אלא אם אתם ממש מקפידים בנושא, או שיש לכם אתר וורדפרס יחסית חדש). חלק מתוספים אלו יכול להשפיע על מהירות האתר, אז כדאי לבטל ולהסיר את כל מה שאינכם צריכים בתור התחלה.
שלב זה מחייב זהירות ובדיקה קפדנית. אם אינכם בטוחים האם תוסף מסוים נחוץ לאתר, השאירו אותו שם. בררו מה התוסף עושה ורק אחרי שאתם בטוחים – פעלו בהתאם.
החלפת ספק DNS
אתרי אינטרנט הם למעשה אסופת קבצים הנמצאים בכוננים קשיחים (שרתים) שמחוברים לאינטרנט. לכל מכשיר המחובר לאינטרנט יש כתובת IP המאפשרת למצוא אותו (למשל: 123.123.12.1).
מכיוון שקשה לשנן כתובות IP, שמות הדומיינים עוברים הסבה לכתובות IP באמצעות DNS, קיצור של Domain Name System. אפשר לדמות זאת לספר הטלפונים של האינטרנט. כאשר מקלידים דומיין בדפדפן, מתבצעת בדיקת DNS כדי למצוא את כתובת ה-IP של השרת.
הבעיה היא שרוב האנשים משתמשים בספקי ה-DNS החינמיים של רשם הדומיינים שלהם, וזה בדרך כלל מתכון לאיטיות בטעינת האתר. זו הסיבה שמומלץ לעבור לספק DNS מהיר יותר, כמו קלאודפלייר.
כדי לעשות זאת:
- הירשמו לחשבון Cloudflare בחינם.
- הקליקו על "הוסף אתר", הזינו את שם הדומיין שלכם ואשרו את הבחירה.
- בחרו את התוכנית החינמית ולאחר מכן הקליקו "אשר תוכנית".
- בשלב זה ניתן לבחור את הגדרות ה-dns. אם אין אזהרות מיוחדות, ניתן להמשיך בתהליך.
- יש להחליף את שרתי השמות (Name Servers) עם רשם הדומיינים שלכם. אפשר להיעזר בתמיכת הרשם לצורך כך.
התקנת תוסף מטמון (Cache)
שמירת מטמון היא תהליך המאחסן קבצים באופן זמני, כך שניתן יהיה להציג אותם למבקרים באתר בצורה יעילה ומהירה יותר.
יש שני סוגים עיקריים של מטמון / קאש:
- מטמון דפדפן – שומר קבצים נפוצים (כמו לוגואים) בכונן הקשיח של המשתמשים, כך שלא יצטרכו להוריד אותם מחדש בביקורים חוזרים.
- מטמון שרת – שומר גרסה סטטית ובנויה במלואה של דף בשרת, כך שלא צריך לבנות אותו מחדש בכל פעם שמבקר חדש נכנס לעמוד.
תוסף WP Rocket מקל על הפעלת מטמון באתרי וורדפרס. יש לו גרסה חינמית טובה וגם גרסה בתשלום טובה יותר. הוא פשוט להתקנה והפעלה, ומייצר מטמון בסיסי של שרת ודפדפן כברירת מחדל. אם האתר רספונסיבי, גשו אל הגדרות המטמון וסמנו את התיבה כדי לאפשר שמירה במטמון גם עבור מכשירים ניידים.
תוסף חינמי חלופי – 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, שילוב קבצים לא בהכרח יעשה הבדל גדול – מכיוון שקבצים יכולים להיטען באותו זמן בכל מקרה.
כדי לראות באיזו גרסה האתר שלכם משתמש, חברו את הדומיין ל- Key CDN. אם HTTP/2 אינו נתמך בשרת שלכם, כדאי לשלב קובצי CSS וג'אווה סקריפט.
כדי לעשות זאת ב-WP Rocket, סמנו את התיבות combine css / javascript files בהגדרות. בתוסף 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 ומעלה, טעינת תמונות בעצלתיים מופעלת כברירת מחדל – אך לא עבור וידאו. לפיכך ב-WP Rocket יש לסמן את התיבה "הפעל עבור 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, המכשיר שלו יתחבר לשרת הקרוב ביותר, מה שעוזר להתחבר מהר יותר.
יש המון ספקי CNS, אז כל מה שצריך לעשות הוא לבחור אחד, להפעיל אותו ב-WP Rocket ולהזין את ה-CNAME.
להרחבה: מדריך CDN
אופטימיזציית תמונות באתר
טעינת לייזי פותרת בעיות רבות הקשורות לתמונות, אבל היא לא עוזרת לתמונות שנטענות מעל לקו הגלילה. ככל שהן גדולות יותר, כך התמונות ישפיעו לרעה על זמני הטעינה.
כדי לפתור זאת, יש לדחוס את התמונות באתר עם תוסף כמו Shortpixel. במסך ההגדרות יש להזין את מפתח ה-API שלכם, לאחר מכן לשמור ולעבור לתהליך Bulk ואז לבחור "התחל אופטימיזציה מחדש".
אם התמונות יוצאות באיכות נמוכה מדי בשל כך, חזרו אל ההגדרות ובחרו בסוג דחיסה glossy או lossless.
להרחבה: מדריך אופטימיזציית תמונות
רגע לפני סיום
לאחר כל העבודה המכובדת הזו, הריצו שוב בדיקות מהירות כדי לראות האם חל שינוי בזמני הטעינה. חשוב לזכור שלכל אתר וורדפרס יש תצורה שונה: ייתכן שיש יותר תוספים, התבנית מסורבלת יותר, השרת איטי יותר או שיש יותר סקריפטים למעקבי צד שלישי. כל אלה מאיטים את האתר.
אם מהירות הטעינה עדיין זקוקה למקצה שיפורים למרות כל הסעיפים במאמר זה, ייתכן שיהיה צורך בעבודה מקצועית ומותאמת אישית. במצב זה מומלץ לשכור את שירותיו של איש מקצוע העוסק בתחום.
