שיפור מהירות אתר וורדפרס - איך לשפר את זמן טעינת האתר שלכם לפחות מ-3 שניות

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

הנה דוגמא לאתר הזה של EasyCloud ששיפרנו לו את המהירות, מימין התחלנו עם ציון של 40, ומשמאל עברנו לציון של 95 במובייל:

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

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

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

ישנם כמה כלים שאני משתמש בהם בשביל למדוד את המהירות של האתרים שלנו, המעודפים עליי הם: Page Speed Insights – הכלי הרשמי של גוגל, הוא נותן ציון מספרי בין 0 ל100, נותן קצת הצעות לשיפור, המטרה שלי זה להגיע לציון מעל 90 באתרים שאני מאיץ אותם GTMetrix – כלי מעולה לבדיקת מהירות, התיישר במדדים לפי גוגל, נותן פירוט רב מה גורם לאיטיות באתר, ועצות איך לטפל בהם. אני משתמש בכלי בתשלום שמאפשר למדוד את האתר במובייל וככה להבין מה לשפר בשביל לקבל ציון יותר טוב במובייל Pingdom – כלי נוסף שהיתרון המרכזי שלו הוא שהוא מראה את הקבצים הכי כבדים, ונותן את זמן הטעינה של האתר

איך לשפר את המהירות של האתר?

1. אחסון איכותי על שרת בענן – הדבר הראשון שצריך לדאוג לו זה אחסון איכותי, כזה שיושב על שרת משלכם, ולא שרת שיתופי, עדיפות לשרת בענן, באחת מענקיות האחסון הגדולות בעולם. היתרון הגדול של שרת איכות שהוא מקצר את הזמן בייט ראשון (TTFB) – הזמן שעובר בין הבקשה של הדפדפן לטעום את העמוד, ועד לרגע שהוא קיבל את הבייט הראשון מהשרת. אני ממליץ על אחסון ב-Cloudways שנותנת פתרון של אחסון בענן באחת מענקיות הענן הגדולות בעולם, העדפה האישית שלי היא Digital Ocean בגלל ההבדל הגדול במחיר לעומת שאר הענקיות בענן, Digital OCean היא החברת אחסון אתרים השלישית בגודלה בעולם, ויש לה 13 חוות שרתים ברחבי העולם, ושרתים חזקים מאוד.

cloud digitalocean

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

תדאגו להגדלת זיכרון בשרת (Memory Limit) של לפחות 384 מגה, אם אין לכם אפשר לשנות זאת ידנית, תבקשו מהחברת אחסון שלכם, ואם היא לא יכולה לספק לכם כזאת כמות של זכרון, כדאי שתעברו חברת אחסון:

מהירות אתר
תדאגו לשדרג את הגרסאות האחרונות של החבילות בשרת שלכם תדאגו לשדרג את גרסת PHP לשרת של 7.4 (גרסה 8 אומנם יצאה, אבל אני ממליץ לחכות כמה חודשים עד שכל השוק יתיישר אליה), תדאגו לשדרג את גרסת המסד נתונים, ותתקינו קאש למסד הנתונים – Redis, שמשפר את הביצועים לעומת אם יש לכם אתר עם המון חיפושים – תתקינו את Elasticsearchהוא מנוע חיפוש שנבנה בהתאמה אישית לשרתי ענן, ויכול לבצע חיפושים בקצב מהיר במיוחד, משפר את חווית החיפוש באתרים בעלי הרבה תכנים.
מהירות אתר
3. תחברו CDN של Cloudflare – מה זה CDN? (ראשי תיבות של Content Delivery Network), רשת של שרתים ברחבי העולם, שמטרתם היא להנגיש את הקבצים מהאתר שלכם למשתמש מהשרת שהכי קרוב אליו פיזית, וכך מורידה את העומס מהשרת, וגם מאיצה את האתר, כי רוב התוכן של האתר נמשך משרת חיצוני ומהיר שקרוב פיזית לגולש. שימוש ב-CDN מקצר את זמן טעינת האתר, מוריד את העומס מהשרת, וגם נותן מעגל אבטחה נוסף. אני ממליץ להשתמש ב-CDN של חברת CloudFlare, חוץ מהשיפור במהירות של האתר, היא מבצעת קאשינג של התמונות ה-CSS, ה-JavaScript והתמונות מהאתר שלכם, נותנת תעודת SSL בחינם, מגנה על אתרים מהתקפות DDoS של האקרים, והחלק הכי טוב שהוא ש-CloudFlare כוללת גם תכנית חינמית. אבל זה לא היתרון הכי גדול של Cloudflare והסיבה שאני הכי אוהב לעבוד איתם – זה שיש להם שרת פה בתל אביב, ככה שגם את השרת שלכם בחו"ל הגולשים מקבלים את הקבצים של האתר משרת ישראלי. הכנו מדריך להסביר איך להתקין את Cloudflare ולחבר אותו לשרת שלכם.
cloudflare tel aviv
4. משתמשים בתבנית קלה לוורדפרס ומעט תוספים – אני אישית משתמש בתבנית Hello, של מפתחי אלמנטור. זוהי תבנית נקייה המיועדת להעלאת תוכן ובניית אתר דרך אלמנטור. התבנית כוללת רק קוד חיוני ולכן היא מהירה ואופטימלית ל-SEO. אתם יכולים לקרוא עליה מידע נוסף באתר אלמנטור. ניתן להוריד את התבנית ישירות מהאתר של וורדפרס. ישנם עוד כמה תבניות קלות מומלצות כמו Astra, או GeneratePress אבל אני כאמור ממליץ לבנות הכל על תבנית נקייה של Hello
hello theme
תזכרו תמיד, מרבה תוספים מרבה דאגות, עדיף לעבוד עם כמה שפחות תוספים, הכנו רשימה של תוספי וורדפרס מומלצים – התוספים שאתם חייבים להשתמש בהם בוורדפרס. תשדלו לא להשתמש בהרבה תוספים, וגם לדאוג שכל התוספים וכמובן הוורדפרס מעודכנים תמיד לגרסה האחרונה.
6. מקטינים את הגודל של התמונות – ראשית נוודא שהתמונות באתר הן בגודל שאתם מציגים אותם באתר, כלומר, אם הגולש רואה תמונה בגודל של 200 על 200, אין סיבה להעלות את התמונה בגודל של 800 על 800 פיקסל. לאחר מכן משתמשים בתוסף להקטנת תמונות – Imagify – זהו תוסף להקטנת תמונות. התוסף הזה מבצע אופטימיזציה לתמונות שלכם בלחיצה אחת. על ידי שימוש בו, אתם מקבלים תמונות קלות יותר מבלי לאבד את האיכות שלהן. הוא יכול לדחוס את כל התמונות והמסמכים הקודמים שלכם בלחיצה אחת. התוסף נותן לכם לשנות את גודל התמונות באופן אוטומטי. התוסף מתאים גם ל-WooCommerce. כמו כן התוסף מייצר תמונות למובייל בפורמט WEBP שחוסך עוד יותר מקום מהתמונות שהעלאתם לאתר. להורדת התוסף
imagify

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

מהירות אתר
7. מפעילים תוסף קאש – WP-Rocket – תוסף המטמון האהוב עליי, התוסף הזה מאפשר לכם לדחות את מועד הטעינה של תמונות (Lazyload), לאחד קבצי JavaScript ו-CSS, צמצום קוד HTML, אפשרות להשתמש בקאש בדפדפן כדי למנוע הורדה מחודשת של פריטים מסוימים באתר ועוד. כל אלו כמובן תורמים לכך שהאתר שלכם יעלה בצורה מהירה יותר אצל הגולש. היתרון של התוסף הזה הוא שהוא מאוד ברור, גם עבור אנשים ללא ניסיון או ידע רחב בתחום. הכנו מדריך, איך להתקין את התוסף.

מחיר: מדובר בתוסף בתשלום, כשהחבילות המוצעות הן 49$ לאתר בודד למשך שנה, 99$ עבור שלושה אתרים למשך שנה ו-249$ למספר לא מוגבל של אתרים למשך שנה. לקניית התוסף

אני ממליץ להפעיל את כל האופציות של התוסף, אבל בעיקר לאחד קבצי CSS, לאחד קבצי JS, לדאוג להפעיל את הטעינה האיטית של התמונות (Lazyload) 

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

9. מטעינים את הפונטים מהשרת במקום מגוגל – קודם כל צריך לדאוג שאתם לא משתמשים בהרבה פונטים ומשקלים שונים באתר, איך אתם עושים את זה ומבררים איזה פונטים אתם משתמשים באתר? אני אוהב 2 תוספים לכרום שמראים לכם איזה פונטים אתם משתמשים באתר, הראשון הוא Fonts Ninja והשני הוא WhatFont, תוספים מאוד פשוטים שדרכם אני מקטין את הכמות פונטים ואת הכמות משקלים (פונט אחד זה מספיק, לא יותר מ2 משקלים

פה אני משתמש ב- WhatFont:

מהירות אתר

פה אני משתמש ב-Fonts Ninja:

מהירות אתר
אחרי אני משתמש ב-OMGF Pro התוסף הזה מאפשר לכם לאחסן את הפונטים שהאתר משתמש בהם מגוגל בשרת שלכם וכך לשפר משמעותית את המהירות של השרת, בגלל שהדפדפן לא פותח קריאה נוספת לשרת של גוגל. אומנם יש לתוסף גרסה חינמית – אבל היא לא עובדת עם רוב הפונטים בעברית, ולכן חובה להשתמש בגרסת PRO. בנוסף התוסף מאפשר טעינה מוקדמת של פונטים. התוסף הוא אחד התוספים הכי חשובים בשביל להאיץ את המהירות של האתר שלכם.  מחיר: 24 אירו לאתר בודד, 49 אירו ל-3 אתרים, 74 אירו ל-5 אתרים, ו-99 אירו לחבילה של 50 אתרים (משתלם מאוד לבוני אתרים) מחיר מיוחד לחברי EasyCloud – הנחה של 15% הנחה על התוסף בכל סוגי החבילות עם הקוד: EASYCLOUD15 לקניית התוסף
10. הסרת Font Awesome ו-Eicons – אם אתם משתמשים באלמנטור, האלמנטור טוען את האיקונים שלו ואת האיקונים של Font Awesome 5, אני מעדיף אישית לבטל את האיקונים של אלמנטור רק לגולש (כדי שתראו אותם בזמן עריכה) ואת האיקונים להעלות ידנית לאלמנטור את התמיכה ב-Font Awesome אפשר לבטל בהגדרות של אלמנטור (שימו לב שלא נעלמים לכם איקונים מהאתר, ואם כן אז תעלו אותם ידנית, ניתן להוריד איקונים Fontello או לקנות חבילות איקונים מ-Elements Envato – שמעבר למאגר התמונות , יש להם המון חבילות איקונים, חופשי ללא הגבלה, במחיר התחלתי של 16.5$ לחודש. 
מהירות אתר

נוסיף את הקוד הבא בקובץ functions.php בתבנית הבת בשביל להסיר את Font Awesome ואת Eicons מהאתר – אבל לא מהעריכה כדי שנערוך באלמנטור העיצוב לא יפגע:

				
					//Remove Font Awesome and Eicons css files
add_action( 'wp_enqueue_scripts', 'remove_fontawesome_eicons', 50 );
function remove_fontawesome_eicons() {
   // Don't remove it in the backend
   if ( is_admin() || current_user_can( 'manage_options' ) ) {
      return;
   }

   wp_dequeue_style( 'font-awesome' );
   wp_deregister_style( 'font-awesome' );

   wp_dequeue_style( 'font-awesome-5-all' );
   wp_deregister_style( 'font-awesome-5-all' );

   wp_dequeue_style( 'elementor-icons' );
   wp_deregister_style( 'elementor-icons' );

   foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
      wp_deregister_style( 'elementor-icons-fa-' . $style );
   }
}

				
			

ואת הקוד הבא בקובץ style.css בשביל להשלים את האיקונים החסרים:

				
					/* Remove unnecessary toggle menu background and outline */
.elementor-menu-toggle {
   background-color: unset !important;
   outline: 0;
}

/* Replace Font Awesome menu open icon on mobile devices */
.elementor-menu-toggle:not(.elementor-active) i.eicon-menu-bar:before {
   top: -7px;
   content:"";
}
.elementor-menu-toggle:not(.elementor-active) i.eicon-menu-bar:after {
   bottom: -7px;
   content:"";
}
.elementor-menu-toggle:not(.elementor-active) i.eicon-menu-bar,
.elementor-menu-toggle:not(.elementor-active) i.eicon-menu-bar:after,
.elementor-menu-toggle:not(.elementor-active) i.eicon-menu-bar:before {
   position: absolute;
   width: 20px;
   height: 4px;
   transition-timing-function: ease;
   transition-duration: .15s;
   transition-property: transform;
   border-radius: 4px;
   background-color: #000;
}

/* Replace Font Awesome menu close icon on mobile devices */
.elementor-menu-toggle.elementor-active i.eicon-menu-bar:before {
   content: "X";
   font-weight: bold;
   position: relative;
   font-style: normal;
}

/* Replace Font Awesome sub menu toggle arrow icon */
.elementor-nav-menu--indicator-classic .elementor-nav-menu .sub-arrow i:before {
   content:""!important;
   border: solid black;
   border-width: 0 3px 3px 0;
   display: inline-block;
   padding: 3px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);

/* Replace eicons close icon */

i.eicon-close:before {
    content: 'X';
    font-family: 'Open Sans Hebrew';
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
}
				
			

סיכום

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

על הכותב

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

אור פיאלקוב