YSlow – מסייע לדפי רשת איטיים לעלות מהר יותר

מאת: ג'יימי מונרו/ 20.5.2009


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

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

1. הפחת בקשות HTTP
2. השתמש ב CDN
3. הוסף כותרת תפוגה
4. Gzip לרכיבים
5. מקם CSS למעלה
6. מקם JS למטה
7. הימנע מביטויי CSS
8. הפוך JS ו CSS לחיצוניים
9. הפחת חיפושי DNS
10. צמצם JS
11. הימנע מהפניות מחדש
12. הסר סקריפטים זהים
13. הגדר קונפיגורציית ETags

לרוב אני מתעלם מהצעדים הבאים, כי בדר"כ הם לא מיושמים באתר שבהם אני מבצע אופטימיזציה: השתמש ב CDN, הימנע מביטויי CSS, הפחת חיפושי DNS והימנע מהפניות מחדש. כך הפחתנו את הרשימה לתשעה צעדים.

אני מתמקד בתשעת הצעדים הנותרים, לפי הסדר הבא: הפחת בקשות HTTP, הסר סקריפטים זהים, מקם CSS למעלה, מקם JS למטה, צמצם JS, GZip לרכיבים, כותרת תפוגה, וקונפיגורציית ETags.

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

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

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

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

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

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

AddOutputFilterByType DEFLATE text/javascript application/x-javascript text/css text/html

התג שמעל אומר ל Apache לבצע GZip לכל קבצי הג'אווה סקריפט, CSS ו HTML שעל השרת. תג זה לבדו יכול להשיג המון בכוחות עצמו. כדי לתת לך מושג על כך, היה אתר שביצעתי בו אופטימיזציה והוא היה בהתחלה מעל 600KB, לקח לו בערך 26 שניות בשביל לעלות. עם הוספת שורת ה GZip, האתר ירד ל 220KB ולקחו לו רק 16 שניות בשביל לעלות! רק עם פעולת GZip וצמצום ג'אווה סקריפט יחדיו, זמן טעינת האתר ירד מ 16 שניות לקצת מתחת 10 שניות.

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

להוספת כותרות תפוגה, העתק את השורות הבאות לתוך הקובץ htaccess שלך:

ExpiresActive On
ExpiresDefault A29030400
Header append Cache-Control �public�

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

FileETag MTime Size

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

זהו לבינתיים, פעל לפי ההנחיות הנ"ל והאתר שלך ירוץ בצורה מהירה ואופטימלית!