שיפור מהירות אתרים

49 נקודות לבדוק כשרוצים לשפר מהירות אתר וורדפרס

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

תחילת קורס

דברים שכדאי לעשות בתחילת הקורס

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

כאן זה מופיע בקורס - 

 

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

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

ניתן לפנות לחברת האיחסון ולבקש מהם שישכפלו את האתר לטסטים, או לחילופין להשתמש בתוסף כגון wp-staging

נקודות כלליות

דברים חשובים שכדאי לדעת באופן כללי כשמשפרים מהירות של אתר

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


פתרון:

לראות את שיעור Checking in incognito בקורס.

אם אתם לא משתמשים ב wp rocket, ייתכן ואתם לא מנצלים אפשרות להאיץ את המהירות כשעוברים בין דף לדף.


פתרון:

לראות את שיעור Faster Page Switching בקורס.

אם אתם רואים שתי בקשות לדף אחת אחרי השניה,
ואחת מהן בסטטוס 301 כשאתם בודקים את הדף ב GTmetrix,
כך זה נראה - 


פתרון:

לראות את שיעור Avoid Redirects בקורס.

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


פתרון:

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

אחסון

נקודות חשובות שקשורות לשרת האיחסון ואיך הן משפיעות על הביצועים

במידה ורואים בבדיקה של GTmetrix ששרת האיחסון של האתר שלך עובד בפרוטוקול מיושן HTTP/1.1 שלא תומך במקביליות ובדחיסה,
כך זה נראה - 

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


פתרון:

לפנות לחברת האיחסון ולשאול אם אפשר לעבוד לשרת מתקדם יותר עם פרוטוקול חדש יותר כגון HTTP/2 ומעלה.
אם לא, כדאי לעבור לאיחסון מהיר יותר,
כדאי לבדוק את שיעור Fast hosting.

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


פתרון:

לבדוק את שיעור Fast hosting.

המלצות של כלי מדידה

המלצות שונות של כלי המדידה כגון גוגל אינסייטס / GTmetrix ומה לעשות כדי לפתור אותם

טעויות נפוצות בבניית דפים, בייחוד אם אתם עובדים עם אלמנטור,
יכולות להשפיע לרעה על מבנה הדף וזה יתבטא בהמלצה בשם נמנע מ-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

במידה ורואים את ההמלצה על Reduce initial server response time בכלי בדיקות מהירות,
או שאנו רואים מעל 0.3 שניות בערך TTFB בלשונית הראשונה של GTmetrix


פתרון:

לבדוק את שיעור TTFB

אם יש המלצה לבצע הפחתת CSS שאינו בשימוש (Reduce unused CSS) בהמלצות של כלי בדיקות מהירות (בדרך כלל זה גם מגיע עם מדד FCP אדום),


כדאי לבצע Reduce Unused CSS בעזרת WP Rocket,
אך צריך לעזור לתהליך הזה (כי הוא עדיין לא מושלם),
בכך שנכניס ל safe list מעל 100 ביטויים שמצאתי במהלך שיפורים שביצעתי ללקוחות,
אחרת האתר שלנו ייראה שבור.


פתרון:

לבדוק את שיעור WP Rocket או את הפוסט בקבוצה הפרטית במידה ואינכם משתמשים ב WP Rocket.

תמונות

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

במידה ונטענת תמונה במובייל עם רוחב מעל 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 במובייל אדום,

והרכיב הכי גדול שנטען בראש הדף זו תמונת רקע כפי שניתן לראות כאן 


פתרון:

שיעור Image LCP

במידה ובכלי מדידת מהירות רואים שמדד ה LCP הוא אדום ושה-LCP הוא טקסט:


פתרון:

לראות את הפוסט שכתבתי בקבוצה הפרטית על מה לעשות כשה-LCP הוא טקסט ועל הפתרון.

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


פתרון:

יש לקרוא את המאמר על How to improve CLS ולוודא שאלמנטים לא מזיזים תוכן ויש להם מקום שמור מבחינת גובה.

WooCommerce

נקודות ספציפיות שקשורות ל-ווקומרס

במידה ורואים ברשימת הבקשות של GTmetrix את wc-ajax=get_refreshed_fragments.
כדאי לבטל כי זו עוד בקשה, שלרוב גם ארוכה ומשפיעה לרעה על ביצועי הדף.


פתרון:
לראות את שיעור WP Cart Fragments

במידה שהאתר הוא ווקומרס,
ורואים ברשימת הבקשות את הביטוי zxcvbn:

או בקשות של password-strength-meter:


פתרון:
לראות את שיעור Password Strength Meter

במידה שהאתר הוא ווקומרס,
כדאי לשפר את ה LCP של תמונות מוצר.


פתרון:

להכניס את הקוד ששמתי בקורס תחת Code Snippets:

תוספים

נקודות ספציפיות לתוספים מסוימים

במידה ואתם משתמשים בתוסף Cache כמו ezCache/W3TC או כל תוסף קאש אחר מלבד WP Rocket,
ייתכן וגולשים מפייסבוק מקבלים את האתר שלכם הרבה יותר איטי ממה שאתם חושבים.


הפתרון:

שיעור ignoring query string

משתמשים בתוסף ה Cache בשם WP Rocket, מעולה.
בעזרתו נוכל לעשות הרבה שיפורי ביצועים כמו לייזי לואד לתמונות, השהייה של סקריפטים ולהפחית CSS מיותר (Reduce Unused CSS).

בשיעור שנקרא WP Rocket, נעבור על ההגדרות האופטימליות, כולל safe list ל Reduce Unused CSS שבניתי בעצמי בזמן ששיפרתי מהירות אתרים ללקוחות.


פתרון:

שיעור WP Rocket

משתמשים בתוסף הטפסים הנפוץ Contact Form 7,
אבל הטופס קיים רק בדפים ספציפיים כמו יצירת קשר ולא בפוטר בכל העמודים,
ואנו רואים ברשימת הבקשות ב GTmetrix בקשות של contact-form-7:

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


פתרון:

שיעור Contact form 7 & partially used plugins

משתמשים בתוסף הטפסים הנפוץ Contact Form 7,
ורואים ב GTmetrix בקשה של Refill:


פתרון:

שיעור Contact Form 7 Refill

JS / FID / TBT

המדד השלישי ב Core Web Vitals שקשור לסקריפטים

במידה ויש לך דף פייסבוק מוטמע בדף,
וב GTmetrix רואים בקשות שמגיעות מפייסבוק כמו:


פתרון:

שיעור Facebook Page

במידה ורואים ברשימת הבקשות של GTmetrix את email-decode.min.js,

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


פתרון:

לראות את שיעור email-decode בקורס.

במידה ורואים ברשימת הבקשות של GTmetrix את wp-embed.min.js.

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


פתרון:

לראות את הפוסט שכתבתי בנושא בקבוצה הפרטית על איך לבטל את wp-embed ועוד כמה דברים מיותרים.

במידה ורואים ברשימת הבקשות של GTmetrix את wp-emoji-release.

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


פתרון:

לראות את הפוסט שכתבתי בנושא בקבוצה הפרטית על איך לבטל את wp-emoji-release ועוד כמה דברים מיותרים.

במידה ובלשונית JS יש יותר מבקשה אחת של JS אחד והוא מעל 10KB


פתרון:

לראות את שיעור Delay Scripts בקורס.

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


פתרון:

להכניס קוד לתיקון הבעיה כפי שמתואר ב Fix mobile menu double click in Elementor sites בקורס

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


פתרון:

להכניס קוד לתיקון הבעיה כפי שמתואר ב Fix missing sub-menu arrow when delaying JS in Elementor sites בקורס

במידה ועשית השהייה של JS מסעיף קודם,
ויש לך SliderShow בראש הדף שרואים רק אחרי אינטרקציה (תזוזה של עכבר למשל).


פתרון:

להסתכל בפוסט שכתבתי בקבוצה הפרטית על הנושא ופתרון.

במידה ויש לך באתר Google Analytics,
וב GTmetrix רואים ברשימת הבקשות את:


פתרון:

שיעור Delay Scripts ו/או שיעור Google Analytics

במידה ויש לך באתר GTM,
וב GTmetrix רואים ברשימת הבקשות את:


פתרון:

שיעור Delay Scripts ו/או שיעור Google Tag Manager (GTM)

במידה ויש לך באתר Hotjar,
וב GTmetrix רואים ברשימת הבקשות את:


פתרון:

שיעור Delay Scripts ו/או שיעור Hotjar

במידה ויש לך באתר Facebook Pixel,
וב GTmetrix רואים ברשימת הבקשות את:


פתרון:

שיעור Delay Scripts ו/או שיעור Facebook Pixel

במידה ויש לך באתר שירות צ'אט של Facebook Messenger או tawk.to או VirtualSpirits או כל צ'אט אחר...

 


פתרון:

שיעור Delay Scripts ו/או אחד משיעורי Chat

במידה ויש לך באתר Google Maps,
וב GTmetrix רואים ברשימת הבקשות את:


פתרון:

שיעור Google Maps

שגיאות

פתרון שגיאות נפוצות

במידה ורואים ברשימת הבקשות של GTmetrix שגיאות 404 כמו


פתרון:

להיעזר בשיעור Fix broken requests על מנת למצוא איך לתקן את השגיאות

אם יש שגיאות JS בקונסול של כרום,
ניתן לראות זאת בכך שנפתח את ה Developer Tools של הדפדפן (ע"י לחיצה על F12 או ללחוץ כפתור ימני ו Inspect),
לבחור בלשונית קונסול, ללכת לשגיאות ולרענן את הדף, במידה ויש לכם חוסם פרסומות, יש לכבות אותו חד פעמי.
אז במידה ויש שגיאות JS כמו:


פתרון:

לבדוק את הפוסט בקבוצה פרטית על מנת לדעת מה לעשות כדי לתקן שגיאות JS.

פונטים

פונטים שונים, משקלי פונטים ואייקונים וההשפעה שלהם על שיפור הביצועים

במידה ורואים ב GTmetrix בקשות מהדומיינים החיצוניים fonts.gstatic.com ו-fonts.googleapis.com כמו:


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


פתרון:
לראות את שיעור Local Fonts

במידה וב GTmetrix רואים בקשות של אייקונים של:
Font Awesome / Flaticon / Linearicons / ElegantIcons

סימן שאתם טוענים הרבה (1000+) אייקונים מיותרים בזמן שאתם משתמשים כנראה בבודדים.


פתרון:

לראות את שיעורי Icons

אם ב GTmetrix, רואים בלשונית Fonts יש יותר מ 5 בקשות של פונטים (לא כולל בקשות של אייקונים שהראתי בסעיף קודם).

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


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

וידאו

מה ניתן לעשות אם יש סרטונים בדף

אם יש סרטוני יוטיוב באתר ואנו רואים ב GTmetrix בקשות מ YouTube ומגוגל.


פתרון:

לראות את השיעור YouTube בקורס

אם יש באתר שלך סרטון וידאו שמנוגן אוטומטית בראש הדף והוא מגיע מיוטיוב


פתרון:

לקרוא את הפוסט בקבוצה הפרטית על האפשרויות שניתן לעשות במקרה כזה

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

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


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