איך להעיף את האתר שלכם על טיל

בתאריך 24 נובמבר, 2015

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

איך להעיף את האתר שלכם על טיל

בחינה ושיפור במהירות הטעינה של אתרי אינטרנט (ובפרט אתרי וורדפרס)

 

  1. ניתן לשפר את מהירות טעינת דף של אתר מבוסס וורדפרס, ע"י התקנת תוסף קאשינג, כדוגמת WP Total Cache, והתאמת ההגדרות שלו, כך שייתן מענה להמלצות הרלוונטיות שמתקבלות בכלי Google Page Speed Insight (ראה סעיף 3).

 

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

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

          טעינת הדף לאחר התקנת התוסף ובחירת ההגדרות שלו.

 

 

 

פקטורים של Google Page Speed Insight ודרך הטיפול בהם באתר וורדפרס (חלקם כבר משלב התכנות)

 

  1. שימוש ב-CDN באתר, עשוי להביא לירידה במהירות טעינת הדף, אך משפר את מהירות טעינת הדף למבקרים מחו"ל.

  2. "הסר JavaScript החוסם (מעכב) עיבוד"

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

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

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

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

  7. יש עוד פקטורים של Page Speed Insight שלא הוזכרו במאמר ואולי יש להתייחס אליהם עוד בשלב התכנות. כולל פקטורים של Mobile.

 

בצע אופטימיזציה של שימוש ב-CSS בכתובות האתר הבאות

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

 

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

 

סייג: אופטימיזציה כנ"ל ל-CSS לא בהכרח תשפר את מהירות הטעינה הכללית של הדף, אך הדף ייראה בעיני הגולש כאילו הוא נטען מהר יותר, ולכן ישפר את ציון ה-Page Speed של הדף.

 

מאמרים נוספים...