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

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

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

page speed optimization course

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

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

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

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

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

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

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

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

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

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

general things to check

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


פתרון:

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

בדיקת מהירות אתר בחלון פרטי

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


פתרון:

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

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

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

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


פתרון:

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

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

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


פתרון:

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

Chrome's Developer Tools - F12

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


פתרון:

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

Plugins I Use

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


פתרון:

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

web hosting

אחסון

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

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

פרוטוקול http 1.1 בשרת האיחסון

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

פרוטוקול http 1.1 בשרת האיחסון


פתרון:

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

איחסון מהיר לאתרי אינטרנט

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


פתרון:

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

איחסון מהיר לאתרי אינטרנט

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

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

recommendations

טעויות נפוצות בבניית דפים, בייחוד אם אתם עובדים עם אלמנטור,
יכולות להשפיע לרעה על מבנה הדף וזה יתבטא בהמלצה בשם נמנע מ-DOM גדול מדי (Avoid an excessive DOM size) בבדיקות המהירות.


פתרון:

שיעור Reduce DOM

 יש להימנע מ 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 אדום),

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


פתרון:

לבדוק את שיעור Reduce Unused CSS

Reduce Unused CSS

Image Optimization

תמונות

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

במידה ונטענת תמונה במובייל עם רוחב מעל 800px,
ניתן לראות זאת בכרום כאשר אנו נבדוק איזה תמונות נטענות במובייל ונבדוק מה הרוחב שלהן,

תמונות במובייל במסגרת שיפור מהירות אתר

לחילופין אפשר לבדוק בהמלצה של כלי בדיקות מהירות על Avoid enormous network payloads,

 נמנע מהעברה של מטענים ייעודיים ענקיים payload ברשת

נסתכל על התמונות הכי כבדות ונבדוק מה הרוחב שלהן.

תמונות במובייל במסגרת שיפור מהירות אתר


פתרון:

לבדוק את שיעור 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-CLS

במידה ובכלי מדידת מהירות רואים שמדד ה LCP במובייל אדום,

LCP אדום בשיפור מהירות אתרים

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

LCP במסגרת שיפור מהירות אתרים


פתרון:

שיעור Image LCP

שיפור LCP במסגרת שיפור מהירות אתר

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

LCP טקסט


פתרון:

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

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


פתרון:

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

WooCommerce

WooCommerce

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

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

get_refreshed_fragments


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

get_refreshed_fragments

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

zxcvbn

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

Password Strength Meter


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

Password Strength Meter

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


פתרון:

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

שיפור LCP של דפי מוצר

תוספים

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

Additives

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


פתרון:

שיעור ignoring query string

ignoring query strings

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

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


פתרון:

שיעור WP Rocket

wp rocket

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

בקשות של Contact Form 7

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


פתרון:

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

שיפור מהירות אתר עם Contact Form 7

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

Contact Form 7 Refill


פתרון:

שיעור Contact Form 7 Refill

Contact Form 7 Refill

JavaScript

JS / FID / TBT

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

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

דף פייסבוק מוטמע


פתרון:

שיעור Facebook Page

דף פייסבוק מוטמע

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

בקשה של email-decode

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


פתרון:

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

בקשה של email-decode

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

בקשה של wp-embed

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


פתרון:

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

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

בקשה של wp-emoji-release

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


פתרון:

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

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

סקריפטים בשיפור מהירות אתר


פתרון:

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

סקריפטים בשיפור מהירות אתר

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


פתרון:

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

Alternatives with Delay JS

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


פתרון:

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

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

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


פתרון:

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

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

גוגל אנליטיקס בשיפור מהירות


פתרון:

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

גוגל אנליטיקס בשיפור מהירות

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

gtm


פתרון:

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

GTM בשיפור מהירות

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

Hotjar בשיפור מהירות


פתרון:

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

Hotjar בשיפור מהירות

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

פייסבוק פיקסל בשיפור מהירות


פתרון:

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

פייסבוק פיקסל בשיפור מהירות

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


פתרון:

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

צ'אט בשיפור מהירות

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

מפות גוגל בשיפור מהירות


פתרון:

שיעור Google Maps

מפות גוגל בשיפור מהירות

שגיאות

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

Errors

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


פתרון:

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

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


פתרון:

שיעור Fixing JS Errorsfixing-js-errors

Fonts

פונטים

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

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


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


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

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

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


פתרון:

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

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

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


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

וידאו

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

Video

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

יוטיוב בשיפור מהירות


פתרון:

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

יוטיוב בשיפור מהירות

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


פתרון:

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

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

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


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