איך מבצעים שיפור מהירות אתרים עם אלמנטור
במדריך זה , נראה לכם 3 טיפים חשובים שיעזרו לכם לבצע שיפור מהירות אתר שבניתם בעזרת אלמנטור .
למי מתאים המדריך?
* לכל מי שרוצה לשפר את המהירות של האתר שלו בעזרת 3 צעדים פשוטים .
לפני שנתחיל, להלן תוצאת הGTMETRIX שלי , לאחר שיפור המהירות שביצעתי
בעזרת המדריך שכתבתי לכם כאן .
שימו לב שחשוב גם לאחסן את האתר באחסון מהיר ומומלץ ,
אני משתמש בחברת האחסון ״vangus״ , אחסון מהיר ומומלץ.
מוזמנים להכנס דרך הקישור ולשים את קוד ההנחה שלי : discount10 :
שיעניק לכם 10 % הנחה .
#טיפ ראשון – השתמשו בפונטים בצורה לוקאלית , אל תטענו פונטים דרך גוגל .
אלמנטור מייצרים בקשה מגוגל פונטס , במידה והשתמשתם בפונטים של גוגל .
וודאו שאתם מעלים את הפונטים בצורה לוקאלית לאלמנטור .
אם אינכם יודעים כיצד, הכנסו למדריך כיצד להטעין פונטים בצורה מקומית לאתר .
כדי לוודא שאנחנו מבטלים את הפונטים של גוגל בצורה וודאית, וודאו שהעלאתם את הפונטים לשרת בעזרת לוח הבקרה באלמנטור .
כעת, גשו לתבנית הבת שלכם והדביקו את הקוד הבא בקובץ functions.php
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
#טיפ שני – לא לטעון את font awesome .
בהגדרה , אלמנטור מייצרים 2 בקשות במידה ואתם משתמשים באייקונים שהם מציעים דרך font awesome . במקום לטעון את קבצי הcss הנ״ל , ניתן להוריד אייקונים ולעלות אותם באופן ידני מהמאגרים מהפוסט שפרסמנו על מאגרי תמונות ואייקונים חינמיים .
add_action( 'elementor/frontend/after_register_styles',function() { foreach( [ 'solid', 'regular', 'brands' ] as $style ) { wp_deregister_style( 'elementor-icons-fa-' . $style ); } }, 20 );
#טיפ שלישי – החליפו את האייקונים של אלמנטור עם אייקונים של font awesome .
אלמנטור יצרו עבורם סט של אייקונים וכל פעם שאנחנו משתמשים
אפילו רק באייקון אחד , נוצרת בקשה לכל האייקונים של אלמנטור .
כיצד נוכל לראות זאת? בעזרת בדיקה עם כלי בדיקות מהירות לאתרים, כלי הבדיקות gtmetrix , נסנן את האופציה לfonts .
כך זה יראה :
מכיוון שאנחנו משתמשים באייקונים של font awesome ,
נוכל לבטל את ההצגה של חבילת האייקונים של אלמנטור בעזרת הכנסת מקטע קוד
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); function remove_default_stylesheet() { wp_deregister_style( 'elementor-icons' ); }
במידה ואתם משתמשים באייקון המבורגר בתפריט שלכם, הכניסו את הקוד הבא .
/* Replace Eicons with FontAwesome */ .eicon { display: inline-block; font: normal normal normal 14px/1 'Font Awesome\ 5 Free'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .eicon-menu-bar { font-style: normal; } .elementor-menu-toggle i:before { content:"\f0c9"; font-family:'Font Awesome\ 5 Free'; font-weight:900; padding: 8px; } .elementor-menu-toggle.elementor-active i:before { content: "\f00d"; font-family: 'Font Awesome\ 5 Free'; font-weight:900; }
עכשיו תורכם
מצוין, כעת תוכלו לבצע בקלות שיפור מהירות לאתרכם ,
אל תשכחו לעשות בדיקה לפני ואחרי בעזרת כלי בדיקת מהירות אתרים
ולראות שהכל עובד כשורה .
אתם מוזמנים לפרסם את התוצאות שלכם לפני ואחרי .
במידה ואתם מפחדים או רוצים שאבצע עבורכם שיפור מהירות אתר לאתרכם .
מוזמנים ללחוץ כאן וליצור עימי קשר
5 תגובות
אחלה טיפים! ישמתי את הטעינה הלוקאלית של פונטים, ועל הדרך גיליתי שהיו לי פונטים מיותרים בחלר מהעמודים.
מצוין עופר ! שמח שאהבת .
היי איתי
תודה על המידע. אני בטיפ הראשון. סיימתי את העלאת הפונט לאלמנטור, אבל לא ברור לי איפה לשתול את הקוד. איפה אני מוצא את הקובץ functions.php
תודה
היי אמנון , עם איזו תבנית אתה משתמש ? באופן עקרוני , מכניסים את הקוד בתבנית הבת ששם נמצא הקובץ .
היי איתי תודה על הפוסט