מהירות טעינת האתר

[יעל מור]

יש מישהו מבינכם שיכול לעזור בשיפור מהירות האתר : https://www.mfux.co.il/
אני מצרפת בדיקת מהירות: https://speedom.co.il/results/181022_FE_M
וכן לפי נתוני : PageSpeed Insights הוא מציג תוצאות במחשב 92 (בנייד 77) א״כ מדוע נראה שהטעינה מתבצעת יותר לאט
אם אני אחבר את האתר לקלאודפלייר זה בטוח ישפר את מהירות האתר?
הלקוח רוצה שהדפים יפתחו ישר בלחיצה ללא צורך להמתין.
האתר מאוחסן בבוקס לפי התוצאות מה עוד ניתן לשפר? האם זה קשור לחברת איחסון? ואם אני אשנה חברה זה בטוח יגביר את המהירות? זה יכול להיות קשור ברוחב פס?

אני חייבת למצוא פתרון.
באתר מותקן כבר wp-rocket

 

[עילום]

רק להבין רוצים שירוץ יותר מהר מהשרת אחסון עצמו

אם רוצים שירוץ מהר
צריך גם להשקיע באחסון מהיר

cdn יכול לעזור - אבל תמיד החינמי עושה את זה טוב
אז גם שם יצטרך להשקיע

בהצלחה

 

[יוסי דויד]

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

 

[עילום]

אם אני זוכר טוב
הWP-ROCKET
אמור לעשות כבר גם את זה

 

[Aharono]

אני מרגיש פה דז'ה וו...

(אגב, האתר יפה מאוד, מפרגן על העבודה)

שאלתם בזמנו את אותה השאלה (עם אותו האתר) וענתה לך @noaa בטוב טעם ודעת לבדוק את האתר בgmetrix.... הרצתי את הבדיקה שוב, חסכתי לכם:
https://gtmetrix.com/reports/www.mfux.co.il/5pEW2qJh

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

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

דבר שני, במידה ותיקנתם את התמונות ועדיין לא קיבלתם את התוצאה הרצויה, כמו שכבר @Avi300 העיר בזמנו (כרגיל אני מצטט ), כדאי להקטין את מספר הבקשות (121 סה"כ, ספרתי בעמוד הראשי בלבד 26 קבצי css שונים ויותר מ40 קבצי Js, זה טירוף הדעת, לא פחות).

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

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

 

[יעל מור]

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

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

 

[steren]

אני מרגיש פה דז'ה וו...

(אגב, האתר יפה מאוד, מפרגן על העבודה)

שאלתם בזמנו את אותה השאלה (עם אותו האתר) וענתה לך @noaa בטוב טעם ודעת לבדוק את האתר בgmetrix.... הרצתי את הבדיקה שוב, חסכתי לכם:
https://gtmetrix.com/reports/www.mfux.co.il/5pEW2qJh

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

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

דבר שני, במידה ותיקנתם את התמונות ועדיין לא קיבלתם את התוצאה הרצויה, כמו שכבר @Avi300 העיר בזמנו (כרגיל אני מצטט ), כדאי להקטין את מספר הבקשות (121 סה"כ, ספרתי בעמוד הראשי בלבד 26 קבצי css שונים ויותר מ40 קבצי Js, זה טירוף הדעת, לא פחות).

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

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

אשמח שתסביר יותר על דחיסה של CSS
זה תוסף? אוטמטי?

 

[Aharono]

@steren, להקטין קובץ css מוגמר זו לא גאונות גדולה... פשוט מורידים את הרווחים, ההערות והשורות מהקובץ על מנת שהוא יהיה קטן יותר.

אתר לדוגמה שאפשר להדביק לו css והוא מביא minified css: https://cssminifier.com/

אני בטוח שיש עוד כמה אופציות יותר מעניינות מהפתרון של האתר... (למרות שאם יש קובץ css אחד, אז לפני שמעלים production, זה לא נורא להדביק שם את הcss ולקבל minified).

במידה ומשתמשים ב sass, נוצרים שני קבצים בתהליך של הבניה של ה css: קובץ css רגיל שנוח לקרוא וקובץ minified שמתאים לproduction.

* כדאי לציין שלsass יש יתרונות רבים מלבד יצירת ה minified css (שזה באמת לא משמעותי):
א. אפשר לכתוב את הקלאסים במספר קבצים שונים שמתחברים לקובץ css אחד, ככה ניתן לנהל את הסגנונות בצורה נוחה (לדוגמה, לעמ' הראשי יש קובץ, לעמוד הזמנות קובץ אחר וכן על זה הדרך) ובסוף מקבלים קובץ css שמתעדכן אוטומטית כאשר אחד הקבצים משתנה.
ב. משתנים, ניתן להגדיר משתנים שיוטמעו בקובץ ה css הסופי (כך למשל, ניתן להגדיר צבע נושא לאתר שלם ולהשתמש בו עשרות פעמים. כאשר רוצים לשנות את צבע הנושא, משנים את הערך של המשתנה וכל האתר מקבל צבע אחר).,
ג. בcss כאשר רוצים ליצור היררכיה (כלומר, סגנון שמשפיע על אלמנט שנמצא בתוך אלמנט אחר), כגון:

This user does not have permission to use the HTML BB code.
​

כתיבת הקלאס שתשפיע על ה h1 תהיה:

.Container h1
{
...
}
​

בsass לעומת זאת, זה יראה כך:

.Container
{
    h1
    {
        ...
    }
}

זה שינוי שמשמעותי מאוד כשיש כמה רמות של היררכיה.

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

ואידך זיל גמור ... (:

 

[UU]

לא מכירה וורדפרס, מאמינה שיש תוספים (כאילו שמוגדרים לביצועי אתר, performance) שיעשו את הדחיסה הזו
כל מה שזה אומר - לקחת את כל קבצי ה-CSS (וכן JS) שאמורים להיטען באתר, ובמקום לטעון אותם במלא שורות בדף ה-HTML - להעתיק את כולם לאותו קובץ ולטעון אותו בשורה אחת
כמו כן - דחיסה נוספת זה לוותר על כל הרווחים וירידות השורות שבתוך הקובץ, בד"כ קוראים לקובץ בסיומת min.css או min.js וכל הקוד כתוב בשורה אחת
תבדקו טוב אם יש איזה תוסף שמבצע את זה, ולאחר מכן צריך לשים לב שלאחר כל עדכון בקבצים המקוריים - צריך ליצור את הקבצים הדחוסיםמחדש על מנת שהעדכון יחול
בהצלחה

 

[UU]

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

 

[yooda230]

אפתור לך את הבעיה בשניה..
תתקיני את התוסף WP-ROCKET אמרו פה כבר מעלי.
במידה ויקר לך תפני בפרטי אתן לך חינם בשמחה

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

 

[יוסי דויד]

תתקיני את התוסף WP-ROCKET אמרו פה כבר מעלי.

היא הדגישה למעלה שהתוסף כבר מותקן...

באתר מותקן כבר wp-rocket

 

[יעל מור]

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

 

[yooda230]

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

חינמי, חינמי לגמרי זה מספיק

היא הדגישה למעלה שהתוסף כבר מותקן...

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

 

[יעל מור]

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

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

 

[yooda230]

אתקין אותו אצלי תיכף ואעלה לך צילומי מסך

 

[yooda230]

ראשית קלאודפלר..
באפשרות של page rules תקבעי את הכלל הבא.


הגדרות התוסף WP-ROCKET
הלשונית CACHE

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

בלשונית media סמני הכל בוי
זה אוטומטית יטפל בתמונות הרבות שיש לך שיטענו רק מתי שמגיעים אליהם

בלשונית טעינה מראש סמני הכל בוי

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

השתדלתי, מקווה שעזרתי אם יש שאלות אשמח לעזור

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

 

[יעל מור]

ראשית קלאודפלר..
באפשרות של page rules תקבעי את הכלל הבא.

הנתיב שהוספת מהו? זה לא הנתיב ש-wp-rocket נמצא
wp-content/uploads הוא נמצא בתוך wp-content/plugins אם כן מה נכון לכתוב, בעצם מה הנתיב אמור להביע?
בתוסף wp-rocket ראיתי שיש אפשרות להוסיף את קלאודפלייר ולהגדיר API וכו׳ כמו בקבצים המצורפים:



וכן הגדרתי ב-wp-rocket כמעט כמו שאמרת וזה אכן צמצם את כמות הבקשות ראה בקישור:
https://gtmetrix.com/reports/www.mfux.co.il/1itAr09o
מ-121 ל-60
אבל בכל זאת אין לי תחושה שהאתר מהיר יותר.

 

[yooda230]

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

לגבי ההגדרות WP-ROCKET אם לא סימנת שישמור CACHE ל HTTPS אז לא עשינו בזה כלום
הוא יצור דף סטטי, דף סטטי לא יוצר כמעט בקשות מהשרת ולכן הזמן טעינה יתקצר משמעותית, זה פשוט..
גם את החלקים השניים תעשי כפי שסימנתי, כדי שהוא יטען מראש וישמור למטמון את כל דפי האתר באופן אוטומטי

 

[יעל מור]

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

אני הבנתי שצריך לעשות זאת בקלאודפלייר רק רציתי לוודא למה בעצם אני קובעת את הנתיב של התמונות?

לגבי ההגדרות WP-ROCKET אם לא סימנת שישמור CACHE ל HTTPS אז לא עשינו בזה כלום

לי אין את האפשרות הזו של ssl cache מדוע? אני מצרפת צילום מסך


ושאלה נוספת האם אחר שאני פותחת חשבון בקלאודפלייר אני צריכה להשלים ב-wp-rocket בכרטיסיה add-ons כאן:


ותודה רבה רבה על התשובות המועילות.