תמיכה 
מדריך אופטימיזציה להאצת אתרי אינטרנט
מדריך זה מאפשר על ידי מספר פעולות פשוטות אם על ידי הגדרות בשרת או על ידי אופטימיזציית דפי האתר להגיע לשפור משמעותי ביותר של זמני העלייה של אתר האינטרנט שלכם. הרווח הוא מיידי ויתבטא בנקודות הבאות:
-
Hosting optimization
- חווית גלישה מהנה יותר לגולש באתרכם ותגרמו לו להשאר באתר זמן רב יותר.
- חסכון במשאבי שרת ותעבורת רשת ובכך תורידו עלויות.
- בונוס מגוגל על אתר מהיר מה שיביא לשפור במיקום האתר במנוע החיפוש.
- הפחתת עלויות הן בשרתים והן בתקשורת.
ההמלצות להלן מבוססות בעיקר על ידע וניסיון רב של חברות האינטרנט: גוגל, יאהו ו-,AOL שמעודדות את יישום ההמלצות אילו ושמהוות דוגמא לביצוע בפועל של אופטימיזציה זאת.
חשוב גם לזכור, שאחסון אתרים בסמיכות גיאוגרפית לקהל הגולשים יש משמעות עצומה על הביצועים בפועל. הטמעת ההמלצות שלפניכם, יביאו לתוצאות מדהימות ובהשקעה מעטה:
הפחתה וייעול בקשות HTTP
מבדיקה של סוגים שונים של אתרים נמצא שהעמוד HTML הבסיסי מהווה כ-20% – 10 מסך המידע של אותו עמוד אינטרנט. השאר הם בדכ”ל אובייקטים סטטיים שעולים בעקבותיו שהם בדכ”ל קבצי תמונות, פלאש, קבצי CSS וקבצי ג’אווה סקריפט.
כל עמוד באתר אינטרנט מכיל מספר רב של מרכיבים או אובייקטים. כאשר העמוד עולה הדפדפן מתחיל לעלות את האובייקטים אם זה אחד אחרי השני או לפעמים מספר אובייקטים במקביל. צמצום מספר הבקשות וזמן יצירת הקשר יביאו לאתר מהיר ויעיל יותר. להלן הפעולות הנדרשות:
הפחתת מספר קבצי CSS על ידי איחוד כל הקבצים לקובץ אחד.
הפחתת מספר קבצי ג’אווה JS על ידי איחוד כל הקבצים לקובץ אחד.
הפחתת מספר התמונות JPG GIF PNG על ידי איחוד כל התמונות לקובץ אחד PNG, באמצעות טכנולוגיית CSS Sprite
הגדרת פונקציית Keep-Alive בשרת כך שהבקשות ישלחו אחת אחרי השניה דרך אותו ערוץ תקשורת (Socket) מבלי שיהיה צורך עבור כל אובייקט לפתוח ערוץ תקשורת חדש.
שמוש ברשתות CDN
השמוש ברשתות CDN מאפשר הפצה של תוכן סטטי משרתים המיועדים לכך והנמצאים בקרבה הגיאוגרפית של הגולש. רשת CDN מורכבת מהרבה שרתים המפוזרים ברחבי העולם ובנויים להגיב במהירות מנקודה גיאוגפית הכי קרובה ולכן הכי מהירה לגולש.
דוגמא לרשת כזאת היא רשת אקאמאי ודוגמא ללקוח גדול שלה בישראל זה פורטל YNET. לאתרים קטנים ובינוניים אין כדאיות כלכלית לשמוש ברשת CDN. גם לאתרים הנמצאים על שרתים בישראל כאשר רוב הגולשים מישראל לא נראה שיפור ניכר בשמוש ברשת CDN. אלטרנטיבה לאתרים ישראלים עם מספר גולשים רב מישראל, היא להקים שרת מטמון מהיר מותאם במיוחד להאצת תוכן סטטי.
הפעלת זכרון מטמון cache
כיום עמודי אינטרנט (Web2) מענינים וידידותיים לגולש מכילים תמונות רבות וסקריפטים רבים. אין לנו עניין לצמצם אותם ובכך לפגוע בחווית הגולש אך יש באפשרותינו לאפשר לדפדפן לשמור קבצים אילו בזכרון מטמון כך שלאחר שהם עלו בפעם הראשונה, הדפדפן יציג אותם בבקורים חוזרים או בהעלאת דפים נוספים ללא צורך בלבקש אותם שוב מהשרת, ובכך לקצר את מספר בקשות HTTP ואת זמן העלאת הדף. הדבר נעשה על ידי הגדרה פשוטה בשרת שתגרום לשליחת תאריך תוקף בראש תגובת HTTP. מומלץ לישם את ההגדרה עבור קבצי תמונות, CSS ו-JS.
דוגמא להגדרה ב Apache2:
<FilesMatch “\.(jpg|jpeg|gif|png|js|css)$”>
Header unset Etag
Header set Cache-control “public, max-age= 29030400”
</FilesMatch>
כיווץ או דחיסת קבצים
קיצור זמן השליחה של הבקשות ותגובות HTTP ברשת יכול לשפר משמעותית את זמן טעינת הדף. קיצור הזמן אפשרי על ידי דחיסה וכיווץ התוכן ועל ידי כך לא רק נקבל שיפור במהירות, גם נפחית בצורה ניכרת את רוחב הפס שבשמוש ובכך נשיג חסכון כספי משמעותי בעלויות תקשורת.
הסטנדרט המקובל הוא כיווץ בטכנולוגיית Gzip המוכרת לנו מעולם הקבצים במחשב. כיווץ יפחית לנו את קבצי ה-,HTML JS ו-CSS בערך ב-70%. מעל 90% של הדפדפנים הפעילים בעולם תומכים בקבלת קבצים ב-Gzip, מה עוד שהשרת מוודע שאכן הם תומכים אחרת ישלח את הקבצים ללא כיווץ.
הגדרה מתאימה ל Apache2:
# compress text, html, javascript, css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
מיקום קבצי CSS
מיקום קבצי CSS רצוי שיהיה בראש הדף.
הלוגיקה מאחורי הנחה זאת היא שקובץ זה נדרש עם תחילת פריסת העמוד ולכן חשוב ורצוי שיהיה האובייקט הראשון שנטען לאחר הטעינה של הקובץ HTML. מאחר והאובייקטים נטענים לפי סדר הופעתם, זה גם יגרום לטעינת הקבצים הקריטים מוקדם יותר. כמו שהוסבר לעיל, רצוי לאחד את כל קבצי CSS לקובץ CSS יחיד, רצוי שיהיה קובץ חיצוני ולא מקודד כחלק מדף ה HTML, וכך לאפשר לדפדפן לשמור אותו בזכרון מטמון.
מיקום קבצי JS
מיקום קבצי JS רצוי שיהיו בתחתית הדף. הלוגיקה מאחורי הנחה זאת היא שהדפדפן מניח שקובץ JS יכול לשנות את תוכן העמוד ולכן צריך להטען ראשון. לכן בזמן שהדפדפן טוען את הסקריפט הוא עוצר טעינה של כל מרכיב אחר ובכך מונע טעינה במקביל של אובייקטים אחרים. הדבר דומה לטעינת הראשונית של CSS שהיא היתה נחוצה ומאיצה, מאידך השמה של קובץ JS בראש הדף מאותה סיבה תהיה מעכבת ומאיטה.
אחסון אתרים עם אופטימיזציה אוטומטית
גוגל לקחה על עצמה כפרוייקט לקדם את נושא אחסון אתרים סופר מהיר ומקדמת אותו תחת המותג “pagespeed“. הפרוייקט כולל תוכנות וכילים הן לצד שרת האינטרנט והן להתקנה כתוסף לדפדפן המאפשר ניתוח בדיקת ביצועים של דפי אינטרנט ומתן ציון כולל והמלצות.
אנחנו באינטרויז’ן התקנו על שרתי אחסון אתרים SEO את תוכנת “pagespeed” צד שרת המבצעת אופטימיזציה אוטומטית בכל מה שקשור לכיווץ ב-Gzip, שליחת HTTP עם כותרות תאריך תוקף, צמצום תווים לא נחוצים כמו מרווחים וטאבים, הפעלת פונקציית Keep Alive ועוד. עדיין למנהל האתר נדרשים מספר פעולות ידניות בכדי לקבל אופטימיזציה טובה כמו: מעבר לטכנולוגיית CSS Sprite, מיקום קבצי CSS ו-JS
להצעות מחיר לבניית אתרים: מכרז בניית אתרים.
