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

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

 הכלים הכבדים

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

Google Page Speed

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

Yahoo YSlow

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

הכללים הפשוטים

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

GZip

GZip הינו כיווץ הדפים הנשלחים לדפדפן ע"י השרת שמכין את הדפים. הכיווץ גורם לעבודה בצד השרת אבל הכיווץ הוא פן אפקטיבי שגורם לדפים שנשלחים להיות קטנים. כדי לעשות זאת בג'ומלה יש להיכנס בניהול לתפריט אתר->הגדרות כלליות->כרטיסייה שרת->יש לסמן את האופציה Gzip Page Compression.

מטמון

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

צד שרת

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

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

צד לקוח

בצד לקוח מדובר בד"כ בתמונות, קבצי CSS ו-JS שיורדים בדפדפן בכל פעם שהדפדפן זקוק להם, אלא אם זה משתמש באלה שנשמרו אצלו במטמון. כדי לאפשר מטמון בצד לקוח נצטרך לעדכן את קובץ ה-htaccess (נמצא בספרייה הראשית של ג'ומלה), שיגדיר לדפדפן כמה זמן לשמור אצלו קבצים במטמון במקום להורידם שוב ושוב מהשרת:

הצג/הסתר קוד apache

הצג מקור
 
 
# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
 
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
 
# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>
 
# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>
 
 

שיטת מטמון זו עושה שימוש בהרחבה של אפאצ'י בשם mod_headers. לחילופין, ניתן להשתמש בהרחבה אחרת בשם mod_expires:

הצג/הסתר קוד apache

הצג מקור
 
 
ExpiresActive On
ExpiresDefault A0
 
# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
</FilesMatch>
 
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800
</FilesMatch>
 
# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800"
</FilesMatch>
 

עוד על מטמון אפאצ'י ניתן למצוא כאן

כיווץ

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

הצג/הסתר קוד apache

הצג מקור
 
 
# compressing of files
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
AddOutputFilterByType DEFLATE application/x-javascript
 
 

יש לוודא שמודול האפאצ'י המתאים - mod_deflate - מותקן.

צמצום ואיחוד (minify & unite)

החסכון האחרון שנעשה הינו צמצום קבצי ה-css וקבצי ה-js. בטח אתה שואלים מה זה צמצום minify & unite

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

לעומת צמצום ה-minify, צמצום unite מבצע איחוד של כל קבצי ה-js לקובץ אחד ובודד של js ובהתאם אותו הדבר ל-css. אתם בטח (שוב) שואלים למה עושים זאת.

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

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

ניתן להגיע למדריך זה באמצעות הקישור הבא: http://www.joomla.org.il/performance

עליך להירשם כדי להוסיף תגובות

עופר כהן

חובב ג'ומלה
אתר המחבר/ת: http://embad.com