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

שיפור מהירות אתר וורדפרס – 51 נקודות לבדוק

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

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

תחילת קורס שיפור מהירות אתרים

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

סרטוני בדיקה

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

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

בדיקת מהירות האתר

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

עבודה באתר טסטים

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

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

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

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

איך לבדוק את האתר בלי לפגוע במהירות

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

פתרון:

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

שיפור מהירות במעבר בין דפים

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

פתרון:

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

הפניות מיותרות

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

פתרון:

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

כיצד לעבוד עם Developer Tools - F12

כדאי לדעת כיצד לעבוד עם כלי המפתח של כרום (F12)

פתרון:

לראות את שיעור Chrome's Developer Tools - F12 בקורס.

תוספים שאני משתמש

איזה תוספים אני משתמש לרוב ואיך להגדיר אותם

פתרון:

לראות את שיעור Plugins I Use בקורס.

אם יש לכם פיקסל של טאבולה או משתמשים במודעות חדשות של גוגל

אם יש לכם באתר פיקסל של טאבולה או משתמשים במודעות חדשות מגוגל לאחר 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:

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

פתרון:

לראות את שיעור Alternatives with Delay JS בקורס.

צריך לחיצה כפולה כדי לפתוח תפריט במובייל

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

פתרון:

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

ה SlideShow של אלמנטור מופיע רק אחרי אינטרקציה

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

פתרון:

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

גוגל אנליטיקס

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

פתרון:

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

GTM

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

פתרון:

שיעור Delay Scripts ו/או שיעור Google Tag Manager (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 בקונסול

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

פתרון:

שיעור Fixing JS Errors

פונטים

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

פונטים לוקאליים - 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) בתחרויות בינלאומיות לשיפור מהירות אתר וורדפרס.
יש קבוצת פייסבוק פרטית לחברי הקורס בה אני עונה לכולם על שאלות שקשורות לשיפור ביצועים.

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