שיפור מהירות אתר
שיפור מהירות אתר וורדפרס – 51 נקודות לבדוק
להלן רשימה ארוכה של דברים שכדאי לבדוק ולשפר במסגרת שיפור מהירות אתרי וורדפרס.
הרשימה, שתתעדכן מדי פעם, בנויה מקטגוריות שונות, נושאים לבדיקה, איך בודקים כל דבר והפנייה לפתרונות לחברי הקורס שיפור מהירות אתרים שלי.
במידה ואינך בקורס, אפשר להיעזר ברשימה כדי למצוא בעיות שונות שמשפיעות לרעה על ביצועי האתר, ולחפש ברחבי הרשת אחר פתרונות, או פשוט להירשם לקורס המקיף ביותר בתחום שיפור מהירות אתרים ולקבל את כל התשובות.
עוד על הקורס כאן…
נושאים בשיפור מהירות אתרים
תחילת קורס שיפור מהירות אתרים
דברים שכדאי לעשות בתחילת הקורס
סרטוני בדיקה
בדיקת מהירות האתר
יש להיכנס לאתר GTmetrix ולעשות בדיקת מהירות לאתר שרוצים לשפר.
רצוי לבחור במיקום גיאוגרפי קרוב לקהל היעד העיקרי של האתר.
לדוגמא, אם האתר ישראלי, לא לבדוק בקנדה, אלא לבדוק בלונדון (או בגרמניה אם יש לכם תוכנית בתשלום ב GTmetrix).
בעזרת הבדיקה ב GTmetrix, נוכל לראות את מפל המים של הבקשות שהדף מבצע מהשרת.
בנוסף יש לבדוק את האתר גם בכלי מדידת מהירות נוסף בשם Google PageSpeed Insights, שם יתקבלו תוצאות בדיקת מהירות במובייל ובדסקטופ.
עבודה באתר טסטים
אני ממליץ, בשלב הראשון, לבצע את תהליך שיפור האתר על אתר טסטים משוכפל, כי לפעמים במהלך השיפור, האתר נשבר וצריך לבטל אופציות בשיפור, עד שמוצאים בדיוק את ההגדרות הנכונות, וחבל לפגוע באתר הלייב בזמן תהליך זה.
ניתן לפנות לחברת האיחסון ולבקש מהם שישכפלו את האתר לטסטים, או לחילופין להשתמש בתוסף כגון wp-staging
נקודות כלליות
דברים חשובים שכדאי לדעת באופן כללי כשמשפרים מהירות של אתר
איך לבדוק את האתר בלי לפגוע במהירות
אם אין לכם הרבה טראפיק באתר, ייתכן ואתם עצמכם פוגעים במהירות שגוגל רואה.
פתרון:
לראות את שיעור Checking in incognito בקורס.
שיפור מהירות במעבר בין דפים
אם אתם לא משתמשים ב wp rocket, ייתכן ואתם לא מנצלים אפשרות להאיץ את המהירות כשעוברים בין דף לדף.
פתרון:
לראות את שיעור Faster Page Switching בקורס.
הפניות מיותרות
אם אתם רואים שתי בקשות לדף אחת אחרי השניה,
ואחת מהן בסטטוס 301 כשאתם בודקים את הדף ב GTmetrix,
כך זה נראה -
פתרון:
לראות את שיעור Avoid Redirects בקורס.
כיצד לעבוד עם Developer Tools - F12
תוספים שאני משתמש
אם יש לכם פיקסל של טאבולה או משתמשים במודעות חדשות של גוגל
אם יש לכם באתר פיקסל של טאבולה או משתמשים במודעות חדשות מגוגל לאחר ios 14.5,
גוגל עדיין עלול לחוות את האתר שלכם הרבה יותר איטי ממה שניתן לראות במבחני מהירות בשל פרמטרים חדשים שמתווספים לקישור.
פתרון:
לראות את הפוסט שכתבתי בקבוצה הפרטית על הפרמטרים החדשים בקישור ועל הפתרון.
אחסון
נקודות חשובות שקשורות לשרת האיחסון ואיך הן משפיעות על הביצועים
פרוטוקול שרת האיחסון
במידה ורואים בבדיקה של GTmetrix ששרת האיחסון של האתר שלך עובד בפרוטוקול מיושן HTTP/1.1 שלא תומך במקביליות ובדחיסה,
כך זה נראה -
ניתן גם לראות שהדף ביצע חמש בקשות מהשרת והן מופיעות עם צבע ירוק, כלומר הדף ביזבז זמן על חיבורים לשרת שוב ושוב בגלל שהפרוטוקול לא תומך בעבודה במקביל.
פתרון:
לפנות לחברת האיחסון ולשאול אם אפשר לעבוד לשרת מתקדם יותר עם פרוטוקול חדש יותר כגון HTTP/2 ומעלה.
אם לא, כדאי לעבור לאיחסון מהיר יותר,
כדאי לבדוק את שיעור Fast hosting.
שרת איטי או מרוחק
אחד הדברים שיכולים להשפיע על מהירות האתר זה שרת האיחסון, המשאבים בשרת, הפרוטוקול של השרת והמיקום הגיאוגרפי של השרת.
ייתכן ושרת האיחסון שלך נמצא בחברת האיחסון איטית כגון BlueHost או GoDaddy,
או שאתם רוצים לראות השוואות בין שרתי איחסון שונים,
או להבין את השפעת מיקום השרת שלכם אם הוא רחוק מאד מקהל היעד שלכם.
פתרון:
לבדוק את שיעור Fast hosting.
המלצות של כלי מדידה
המלצות שונות של כלי המדידה כגון גוגל אינסייטס / GTmetrix ומה לעשות כדי לפתור אותם
Avoid an excessive DOM size
טעויות נפוצות בבניית דפים, בייחוד אם אתם עובדים עם אלמנטור,
יכולות להשפיע לרעה על מבנה הדף וזה יתבטא בהמלצה בשם נמנע מ-DOM גדול מדי (Avoid an excessive DOM size) בבדיקות המהירות.
פתרון:
שיעור Reduce DOM
וכדאי גם לראות את הסרטון ששיתפתי בקבוצה הפרטית על איך לצמצם DOM
Serve static assets with an efficient cache policy
אם יש לכם המלצה של יש להשתמש במדיניות מטמון יעילה בנכסים סטטיים (Serve static assets with an efficient cache policy) בכלי מדידת המהירות,
ובתוך ההמלצה ישנן בקשות אשר מגיעות מהדומיין שלכם (ולא מדומיין חיצוני).
פתרון:
שיעור Serve static assets with an efficient cache policy
Reduce initial server response time
במידה ורואים את ההמלצה על Reduce initial server response time בכלי בדיקות מהירות,
או שאנו רואים מעל 0.3 שניות בערך TTFB בלשונית הראשונה של GTmetrix
פתרון:
לבדוק את שיעור TTFB
Reduce unused CSS / הפחתת CSS שאינו בשימוש
אם יש המלצה לבצע הפחתת CSS שאינו בשימוש (Reduce unused CSS) בהמלצות של כלי בדיקות מהירות (בדרך כלל זה גם מגיע עם מדד FCP אדום),
כדאי להפחית CSS שאינו בשימוש,
אך צריך לעזור לתהליך הזה (כי הוא עדיין לא מושלם),
בכך שנכניס ל safe list מעל 100 ביטויים שמצאתי במהלך שיפורים שביצעתי ללקוחות,
אחרת האתר שלנו ייראה שבור.
פתרון:
לבדוק את שיעור Reduce Unused CSS
תמונות
תמונות תופסות חלק גדול מגודל הדף ובכמות הבקשות שהדף מבקש מהשרת, שני דברים שאנו מעונינים להפחית על מנת לשפר מהירות אתר
תמונות במובייל
במידה ונטענת תמונה במובייל עם רוחב מעל 800px,
ניתן לראות זאת בכרום כאשר אנו נבדוק איזה תמונות נטענות במובייל ונבדוק מה הרוחב שלהן,
לחילופין אפשר לבדוק בהמלצה של כלי בדיקות מהירות על Avoid enormous network payloads,
נסתכל על התמונות הכי כבדות ונבדוק מה הרוחב שלהן.
פתרון:
לבדוק את שיעור Mobile Images
תמונות רגילות שנמצאות בהמשך הדף ונטענות על ההתחלה
במידה ובבדיקה של GTmetrix בלשונית Images יש יותר מ 10 תמונות פלוס מינוס,
וניתן לראות ברשימת הבקשות שנטענות תמונות רגילות (לא תמונות רקע) למרות שהן נמצאות בהמשך הדף.
פתרון:
שיעור Lazy Load
תמונות רקע שנמצאות בהמשך הדף ונטענות על ההתחלה
במידה ויש באתר תמונות רקע בהמשך הדף,
רוב הסיכויים שגם אם יש לך לייזי לואד, תמונות הרקע עדיין נטענות.
תמונות רקע בדרך כלל נמצאות ברקע של איזור או עמודה וזה נראה כך כשעושים inspect על האלמנט:
פתרון:
שיעור Background Images Lazy Load
תמונות שנמצאות בראש הדף ונטענות עם לייזי לואד
במידה ובראש הדף יש תמונות שנטענות עם לייזי לואד וניתן לראות גם שהתמונות הללו מגיעות יותר לאט מדברים אחרים,
וכשנבצע inspect על התמונה, נראה שיש את המילה LAZYLOAD:
פתרון:
כדאי להחריג את התמונות שנמצאות בראש הדף מהלייזי לואד.
שיעור Lazy Load
תמונות כבדות משקל
במידה ונטענות תמונות כבדות משקל, מעל 200KB לתמונה.
פתרון:
שיעור image compression
LCP & CLS
שני מדדים עיקריים מתוך Core Web Vitals שגוגל בודקים ולכן יש להם השפעה על קידום אורגני
מדד LCP אדום
במידה ובכלי מדידת מהירות רואים שמדד ה LCP במובייל אדום,
והרכיב הכי גדול שנטען בראש הדף זו תמונת רקע כפי שניתן לראות כאן
פתרון:
שיעור Image LCP
אם ה LCP הוא טקסט
במידה ובכלי מדידת מהירות רואים שמדד ה LCP הוא אדום ושה-LCP הוא טקסט:
פתרון:
לראות את הפוסט שכתבתי בקבוצה הפרטית על מה לעשות כשה-LCP הוא טקסט ועל הפתרון.
מדד CLS אדום
במידה ובכלי מדידת מהירות רואים שמדד ה CLS הוא אדום,
זאת אומרת שיש אלמנטים שזזים ודוחפים תוכן, דבר שפוגע במדד ה CLS.
פתרון:
יש לקרוא את המאמר על How to improve CLS ולוודא שאלמנטים לא מזיזים תוכן ויש להם מקום שמור מבחינת גובה.
WooCommerce
נקודות ספציפיות שקשורות ל-ווקומרס
בקשה של get_refreshed_fragments
במידה ורואים ברשימת הבקשות של GTmetrix את wc-ajax=get_refreshed_fragments.
כדאי לבטל כי זו עוד בקשה, שלרוב גם ארוכה ומשפיעה לרעה על ביצועי הדף.
פתרון:
לראות את שיעור WP Cart Fragments
Password Strength Meter
במידה שהאתר הוא ווקומרס,
ורואים ברשימת הבקשות את הביטוי zxcvbn:
או בקשות של password-strength-meter:
פתרון:
לראות את שיעור Password Strength Meter
שיפור LCP של דפי מוצר
במידה שהאתר הוא ווקומרס,
כדאי לשפר את ה LCP של תמונות מוצר.
פתרון:
להכניס את הקוד ששמתי בקורס תחת Code Snippets:
תוספים
נקודות ספציפיות לתוספים מסוימים
משתמשים בתוסף Cache שונה מ WP Rocket
במידה ואתם משתמשים בתוסף Cache כמו ezCache/W3TC או כל תוסף קאש אחר מלבד WP Rocket,
ייתכן וגולשים מפייסבוק מקבלים את האתר שלכם הרבה יותר איטי ממה שאתם חושבים.
פתרון:
שיעור ignoring query string
משתמשים בתוסף WP Rocket
משתמשים בתוסף ה Cache בשם WP Rocket, מעולה.
בעזרתו נוכל לעשות הרבה שיפורי ביצועים כמו לייזי לואד לתמונות, השהייה של סקריפטים ולהפחית CSS מיותר (Reduce Unused CSS).
בשיעור שנקרא WP Rocket, נעבור על ההגדרות האופטימליות, כולל safe list ל Reduce Unused CSS שבניתי בעצמי בזמן ששיפרתי מהירות אתרים ללקוחות.
פתרון:
שיעור WP Rocket
משתמשים ב Contact Form 7
משתמשים בתוסף הטפסים הנפוץ Contact Form 7,
אבל הטופס קיים רק בדפים ספציפיים כמו יצירת קשר ולא בפוטר בכל העמודים,
ואנו רואים ברשימת הבקשות ב GTmetrix בקשות של contact-form-7:
סימן שאנו טוענים בקשות מיותרות, בגלל שהתוסף הנ"ל משפיע על כל הדפים באתר, גם בדפים שאין בהם טופס.
פתרון:
שיעור Contact form 7 & partially used plugins
משתמשים ב Contact Form 7 ויש בקשה ל Refill
משתמשים בתוסף הטפסים הנפוץ Contact Form 7,
ורואים ב GTmetrix בקשה של Refill:
פתרון:
שיעור Contact Form 7 Refill
JS / FID / TBT
המדד השלישי ב Core Web Vitals שקשור לסקריפטים
דף פייסבוק מוטמע
במידה ויש לך דף פייסבוק מוטמע בדף,
וב GTmetrix רואים בקשות שמגיעות מפייסבוק כמו:
פתרון:
שיעור Facebook Page
בקשה של email-decode
במידה ורואים ברשימת הבקשות של GTmetrix את email-decode.min.js,
כדאי לבטל כי זה עוד JS שמשפיע לרעה על ביצועי הדף, ואנו רוצים להקטין למינימום את הבקשות ואת גודל הדף.
פתרון:
לראות את שיעור email-decode בקורס.
בקשה של wp-embed
במידה ורואים ברשימת הבקשות של GTmetrix את wp-embed.min.js.
כדאי לבטל כי זה עוד JS שמשפיע לרעה על ביצועי הדף, ואנו רוצים להקטין למינימום את הבקשות ואת גודל הדף.
פתרון:
לראות את הפוסט שכתבתי בנושא בקבוצה הפרטית על איך לבטל את wp-embed ועוד כמה דברים מיותרים.
בקשה של wp-emoji-release
במידה ורואים ברשימת הבקשות של GTmetrix את wp-emoji-release.
כדאי לבטל כי זה עוד JS שמשפיע לרעה על ביצועי הדף, ואנו רוצים להקטין למינימום את הבקשות ואת גודל הדף.
פתרון:
לראות את הפוסט שכתבתי בנושא בקבוצה הפרטית על איך לבטל את wp-emoji-release ועוד כמה דברים מיותרים.
השהיית סקריפטים !
במידה ובלשונית JS יש יותר מבקשה אחת של JS אחד והוא מעל 10KB
פתרון:
לראות את שיעור Delay Scripts בקורס.
אלטרנטיבות כשמשהים סקריפטים - האדר דביק, תפריט משנה, אנימציות
צריך לחיצה כפולה כדי לפתוח תפריט במובייל
במידה ועשית השהייה של JS מסעיף קודם,
ובמובייל כאשר טוענים את הדף ומנסים ללחוץ על כפתור התפריט,
צריך ללחוץ פעמיים כדי התפריט ייפתח.
פתרון:
להכניס קוד לתיקון הבעיה כפי שמתואר ב Fix mobile menu double click in Elementor sites בקורס
ה SlideShow של אלמנטור מופיע רק אחרי אינטרקציה
במידה ועשית השהייה של JS מסעיף קודם,
ויש לך SliderShow בראש הדף שרואים רק אחרי אינטרקציה (תזוזה של עכבר למשל).
פתרון:
גוגל אנליטיקס
במידה ויש לך באתר Google Analytics,
וב GTmetrix רואים ברשימת הבקשות את:
פתרון:
שיעור Delay Scripts ו/או שיעור Google Analytics
GTM
Hotjar
במידה ויש לך באתר Hotjar,
וב GTmetrix רואים ברשימת הבקשות את:
פתרון:
שיעור Delay Scripts ו/או שיעור Hotjar
פיקסל פייסבוק
במידה ויש לך באתר Facebook Pixel,
וב GTmetrix רואים ברשימת הבקשות את:
פתרון:
שיעור Delay Scripts ו/או שיעור Facebook Pixel
קיים צ'אט באתר
במידה ויש לך באתר שירות צ'אט של Facebook Messenger או tawk.to או VirtualSpirits או כל צ'אט אחר...
פתרון:
שיעור Delay Scripts ו/או אחד משיעורי Chat
מפות גוגל - Google Maps
במידה ויש לך באתר Google Maps,
וב GTmetrix רואים ברשימת הבקשות את:
פתרון:
שיעור Google Maps
שגיאות
פתרון שגיאות נפוצות
שגיאות 404
במידה ורואים ברשימת הבקשות של GTmetrix שגיאות 404 כמו
פתרון:
להיעזר בשיעור Fix broken requests על מנת למצוא איך לתקן את השגיאות
אם יש שגיאות JS בקונסול
פונטים
פונטים שונים, משקלי פונטים ואייקונים וההשפעה שלהם על שיפור הביצועים
פונטים לוקאליים - Local Fonts
במידה ורואים ב GTmetrix בקשות מהדומיינים החיצוניים fonts.gstatic.com ו-fonts.googleapis.com כמו:
נעדיף לשנות לפונטים לוקאליים על מנת לחסוך צורך להתחבר לדומיין חיצוני, דבר שמשפיע לרעה על הביצועים.
פתרון:
לראות את שיעור Local Fonts
אייקונים כגון Font Awesome
במידה וב GTmetrix רואים בקשות של אייקונים של:
Font Awesome / Flaticon / Linearicons / ElegantIcons
סימן שאתם טוענים הרבה (1000+) אייקונים מיותרים בזמן שאתם משתמשים כנראה בבודדים.
פתרון:
לראות את שיעורי Icons
הרבה בקשות של משקלי פונטים
אם ב GTmetrix, רואים בלשונית Fonts יש יותר מ 5 בקשות של פונטים (לא כולל בקשות של אייקונים שהראתי בסעיף קודם).
כדאי לצמצם את המשקלים שאנו משתמשים, משום שכל משקל של פונט גורם לבקשה מהשרת.
פתרון:
להסתכל בשיעור Finding Used Fonts ובפוסט בקבוצה הפרטית שמראה כלי נוסף שיכול לעזור בחיפוש אחר פונטים בשימוש.
וידאו
מה ניתן לעשות אם יש סרטונים בדף
יש סרטוני YouTube
אם יש סרטוני יוטיוב באתר ואנו רואים ב GTmetrix בקשות מ YouTube ומגוגל.
פתרון:
לראות את השיעור YouTube בקורס
אם יש סרטון רקע בראש הדף
אם יש באתר שלך סרטון וידאו שמנוגן אוטומטית בראש הדף והוא מגיע מיוטיוב
פתרון:
לקרוא את הפוסט בקבוצה הפרטית על האפשרויות שניתן לעשות במקרה כזה
נושאים בשיפור מהירות אתרים
קורס אונליין על איך לשפר ביצועים של אתרי וורדפרס, בו ניתן ללמוד לשפר את מהירות האתרים בעצמך, לבנות אתרים מהירים עם חוויית משתמש טובה יותר וציונים גבוהים יותר, כדי שהאתרים שלך יהיו לא רק יפים אלא גם מהירים.
בקורס הכנסתי ידע, טריקים וסודות שאני משתמש יום יום לשיפור מהירות אתרים של לקוחות,
ידע שעזר לי לזכות במקום הראשון (2019), השלישי (2020) והראשון (2021) בתחרויות בינלאומיות לשיפור מהירות אתר וורדפרס.
יש קבוצת פייסבוק פרטית לחברי הקורס בה אני עונה לכולם על שאלות שקשורות לשיפור ביצועים.
ניתן גם להיעזר בליווי אישי, ובמסגרתו לקבל גם המלצות ספציפיות לאתר שלך ותמיכה פרטית, כך שגם ניתן ללמוד לשפר בעצמך וגם לקבל אותי ללוות, להנחות ולעזור לך במידת הצורך.
עוד פרטים כאן על הקורס שיפור מהירות אתרים.