איך לשפר זמן טעינה באתר כמו אלופים? 💪

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


מהו זמן טעינה לאתר?

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

למה חשוב שזמן הטעינה באתר יהיה מהיר?

מכמה סיבות:

  1. דירוג רשמי של גוגל – זמן טעינה קצר ישפיע משמעותית על המקום בו נדורג בתוצאות החיפוש של גוגל.
  2. חווית משתמש – ככל שזמן הטעינה ארוך יותר, כך יורדת חווית המשתמש של לקוח אשר נכנס לאתר שלנו. בעולם שבו הכל כל כך מהיר, זמן טעינה מהיר נחשב כדבר בסיסי ונרצה לשמר סטנדרטים אלה. 
  3. מניעת נטישה – על פי גוגל, כ-53% מהגולשים באתרים ינטשו אתרים אשר זמן הטעינה בהם ארוך מ-3 שניות.
  4. ירידה ברכישות והמרות – בכל שניה נוספת שעוברת בזמן טעינת האתר, העסק עלול לאבד כ-8% מהרכישות וההמרות הפוטנציאליות באתר.

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

איך בודקים זמן טעינה באתר?

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

  • Google Test My Site – כלי רשמי של גוגל לבדיקת זמן טעינת האתר. ברוב המקרים כלי זה יראה את זמן הטעינה הארוך ביותר לעומת שאר הכלים (ככה זה גוגל, פרפקציוניסטים). 
  • GT Metrix – כלי מעולה אשר נותן לנו מידע על הגורמים העיקריים אשר מאטים לנו את האתר ונותן הצעות לטיפול בהם.
  • Pingdom – כלי זה מאפשר לנו לבחור את המיקום הפיזי של שרת הבדיקה וזהו יתרון משמעותי. במידה והאתר שלנו פונה לקהל הישראלי אבל מאוחסן בשרת אחסון אשר יושב בחו”ל, נרצה לבדוק את זמן הטעינה שבו הוא עולה במיקום הכי קרוב לישראל (במקרה הזה בכלי נבחר באפשרות של פרנקפורט,גרמניה)
  • Speedom –זהו כלי ישראלי שמאפשר בדיקת זמן הטעינה של שרת המיקום כאן בישראל.
  • Page Speed Insights – כלי רשמי של גוגל שבנוסף לבדיקת זמן טעינת האתר, הוא מריץ בדיקה על תוכן האתר ומציע הצעות לשיפור זמן הטעינה.

מהו זמן טעינה הגיוני לאתר?

כמובן שתמיד נרצה לשאוף לזמן טעינה נמוך ככל האפשר. זמן טעינה טוב הוא בין שנייה ל-3 שניות.

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

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

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


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

אז איך לשפר זמן טעינה באתר?

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

אז יאללה בואו נצלול

1. שמירת זכרון מטמון (BROWSER CACHING / EXPIRE HEADERS) 

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

אז איך עושים את זה?

**לפני הכל נעשה גיבוי לאתר שלנו ואז נתחיל**

ישנם המון תוספי Cache שונים שעושים זאת בקלות (לדוג’ W3 Total Cache) וכל שנצטרך לעשות זה להפעיל את מצב Browser Caching אם לא נרצה לגעת ולשנות את קוד האתר.

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

מה שנרצה לעשות כדי לשמור את זיכרון המטמון, הוא לשנות את ה-HTaccess אשר יושב בשרת שלנו.

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

נכנסים ללוח הבקרה  > SEO> כלים > עריכת קבצים > מטמיעים את הקוד > משנים את התאריך בהתאמה > שומרים שינויים

## Start browser caching ##

ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## End browser caching ##

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

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

ExpiresByType text/css “access 1 day”
ExpiresByType text/html “access 1 day”

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

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


2. מחיקת תוספים לא שימושיים

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

מעל 45 (!) תוספים היו מותקנים שם. כששאלתי את בעל האתר אם הוא בכלל יודע מה עושה כל תוסף ולמה הם שם, כמובן שלא הייתה לו תשובה לתת לי.

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

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

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

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

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


3. כיווץ והקטנה של תמונות 

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

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

WP Smush – זהו אחד התוספים הפופולריים ביותר לכיווץ תמונות. התוסף הינו חינמי ומאפשר דחיסה באיכות דיי טובה של 50 תמונות יחד בכל פעם. אין הגבלה על מספר הפעמים שתוכלו להריץ את הכיווץ (אבל רק 50 תמונות בכל פעם) 

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

התוסף עובד במתכונת חינמית בחודש הראשון ולאחר מכן המחיר הוא 49$ בחודש. 

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

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

בגרסת הפרימיום, איכות הדחיסה כבר הרבה יותר איכותית ואם חשובה לכם שתישמר איכות התמונה, מומלץ לרכוש.

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

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

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

ShortPixel – תוסף אשר מאפשר כיווץ (compression) וגם הקטנת המשקל של התמונות באתר לפי הגודל הרצוי.

בגרסה החינמית נוכל לכווץ עד 100 תמונות ולאחר מכן נשלם 5$ דולר בחודש עבור 5000 תמונות.

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

כמובן שישנם תוספים נוספים בהם ניתן להיעזר כדי לכווץ או להקטין תמונות כמו למשל: TinyPNG,Kraken,Imagify,Optimus ועוד רבים. 

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

משקל התמונה: עד 150KB מקסימום.

גודל ב- PX: תמונה רגילה – רוחב 800 פיקסל. תמונה שמתפרסת על כל רוחב העמוד – רוחב 1920 פיקסל.


4. לעבור לאתר אחסון עם רוחב פס רחב יותר

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

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

למדריך המלא על שרתי אחסון קיימים.


5. דחיסת נתונים באמצעות GZIP Compression 

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

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

  • דפדפן הגולש: היי, תשיג לי בבקשה את התוכן של עמוד הבית שלכם 
  • שרת האתר: אין בעיה. תן לי רגע לבדוק איפה יושב ה-  index.html ואני מחזיר לך תשובה
  • שרת האתר: מצאתי! הנה הקוד לתוכן בדרך אלייך 
  • דפדפן הגולש: 100KB?? וואו… (מחכה, מחכה…) 
  • דפדפן הגולש: אוקיי זה נטען אעביר זאת לגולש. (במידה והגולש עדיין שם)

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

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

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

כעת השיחה תיראה בערך כך:

  • דפדפן הגולש: היי, תשיג לי בבקשה את התוכן של עמוד הבית שלכם. אני אקח גרסה מכווצת אם יש לכם.
  • שרת האתר: אין בעיה. תן לי רגע לבדוק איפה זה. אה! מצאתי! תן לי רק לכווץ את זה עבורך… הנה תיקיית זיפ כבר בדרך אלייך!
  • דפדפן הגולש: וואו זה היה מהיר! ורק 10KB?? איזה יופי! אני אפתח את התיקייה (unzip it) ואעביר זאת לגולש!

כמובן שההסבר הזה הוא מופשט ביותר ובפועל העניינים קצת יותר “מסובכים” אבל בגדול כיווץ ב- GZIP מצמצם את מספר הפעולות הנדרשות מהדפדפן למינימום הנדרש. 

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

בצורה זאת הגולש יותר מרוצה ובהתאם לכך גם גוגל.

ואם זה עדיין לא יושב לכם, הנה שני חברה מגוגל שמסבירים איך זה עובד:

https://www.youtube.com/watch?v=Mjab_aZsdxw

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

https://varvy.com/tools/gzip

https://www.giftofspeed.com/gzip-test/

https://www.websiteplanet.com/webtools/gzip-compression/

במידה ובדיקת האתר מראה כי אופציית GZIP אינה מופעלת, נצטרך להוסיף אותה בעצמנו.

 

אז איך מפעילים GZIP Compression באתר?

ישנן מספר דרכים להפעיל Gzip באתר.

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

אחד הפלאגינים הפופולריים ביותר שמבצעים זאת (לאתרי וורדפרס) נקרא WP HTTP Compression.

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

במקרה זה, ניגש לקובץ HTACCESS ונטמיע שם את הקוד הבא:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript


 6. שימוש ב- CDN (Content Delivery Network

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

מה זה בעצם אומר? 

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

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

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

ישנו גם שירות חינמי של CloudFlare שבגרסה החינמית מאפשר העתקת אתר בסיסי פשוט או בלוג והוא עובד דיי טוב. 

במדריך הזה, איתי בן זיו מ- Itdesign מסביר שלב אחרי שלב איך להתקין CloudFlare על וורדפרס.

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

 


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


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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להקים אתר איכותי שמותאם בול לצרכי העסק והמותג שלכם?

השאירו פרטים ואתם בחצי הדרך לשם :)