מבוא
אפליקציית אינטרנט מהירה היא אפליקציית אינטרנט מוצלחת. התפקיד שלכם כמפתחים לא מסתיים עד שאתם מבצעים אופטימיזציה של הביצועים האמיתיים והנתפסים של האפליקציה. זו לא רק הפעולה הנכונה שצריך לבצע כדי להבטיח למשתמשים חוויה מעולה, אלא יש לכך גם סיבות עסקיות מעשיות וחשובות. ב-Amazon נמדדה ירידה של 1% במכירות לכל 100 אלפיות השנייה של זמן האחזור באתר, וב-Google נמדדה ירידה של 20% בנפח התנועה לכל עיכוב של 0.5 שנייה (ציטוט). אלה מספרים אמיתיים שיש להם השלכות אמיתיות על העסק ועל אפליקציית האינטרנט שלכם.
מהירות האינטרנט חשובה כל כך, ש-Google אפילו הקדישה מאמצים רבים לשיפור מהירות האינטרנט. אם אתם צריכים עוד סיבה לבצע אופטימיזציה של ביצועי האפליקציה, Google הודיעה שזמן הטעינה של הדף נוסף לאלגוריתם הדירוג שלה.
יש הרבה שיטות מומלצות שפורסמו לאופטימיזציה של ביצועי אפליקציות אינטרנט, כולל שני ספרים מעולים (High Performance Web Sites ו-Even Faster Web Sites). שיטות בשרת (הטמעת כותרות הבקרה הנכונות של המטמון) ובלקוח (הצגת מאפייני רוחב וגובה של תמונות) משולבות באסטרטגיה מקצה לקצה לביצוע אופטימיזציה של הביצועים. יש כל כך הרבה טיפים וטריקים, ולפעמים קשה להבין איך הם משתלבים בעולם האמיתי ובאפליקציית האינטרנט שלכם.
למרבה המזל, כלי הפיתוח של Chrome (שכלול בכל מכונה של Chrome) הוא כלי מצוין שבודק את אפליקציית האינטרנט ומציע המלצות מותאמות אישית לשיפור הביצועים ולצמצום זמן האחזור. במאמר הזה נסביר על חלונית הביקורות, שדומה בהיקף לכלי הפופולרי מאוד YSlow, ונראה איך אפשר להשתמש בה כדי לזרז את האתר, לצמצם את זמן האחזור ולהגדיל את שביעות הרצון של המשתמשים.
שימו לב: הכלי של חלונית הביקורות זמין כרגע רק ב-Chrome, אבל אנחנו מצפים שדפדפני WebKit אחרים ישלבו אותו בסופו של דבר.
תחילת העבודה
כדי להמחיש איך אפשר להשתמש בחלונית הבדיקות כדי לקבל המלצות לשיפור הביצועים של אפליקציות אינטרנט, נבדוק את האתר שלנו, www.html5rocks.com. נשתמש בחלונית הבדיקות כדי לשפר את מהירות האתר.
כדי להפעיל את כלי הפיתוח, פשוט לוחצים על סמל Chrome (בפינה השמאלית העליונה של חלון Chrome) ובוחרים באפשרות 'כלים' > 'כלים למפתחים'.
מידע נוסף על תחילת העבודה עם DevTools זמין במסמכי התיעוד הרשמיים.
חלונית הביקורות ממוקמת בחלונית הלחצנים הראשית של הכלים. לאחר הבחירה, תבחינו שחלונית הביקורות עדיין לא השלימה את הניתוח של אפליקציית האינטרנט. הפעלת כל השיטות ההיוריסטיות עשויה להיות איטית, במיוחד באפליקציית אינטרנט גדולה כמו Gmail, ולכן הכלי מושבת כברירת מחדל.
נתחיל בלחיצה על הלחצן Run (הפעלה), כדי לטעון מחדש את אפליקציית האינטרנט עם שיטות הניתוח ההסתברותי של הביצועים מופעלות. אחרי שהדף יטען מחדש, תוצג רשימה של המלצות שדומה לצילום המסך שבהמשך.
תבחינו שבחלונית הביקורות, ההצעות מסווגות לפי חומרה, כאשר ההצעות החמורות ביותר מסומנות בנקודה אדומה והצעות ברמת חומרה בינונית מסומנות בנקודה צהובה. הצבעים האלה עוזרים לכם לתעדף את ההצעות, ולהתמקד קודם בהצעות החשובות ביותר (והרווחים הגדולים ביותר).
המספר בסוגריים, אחרי ההצעה, הוא מספר המופעים שכלי הביקורת זיהה. לדוגמה, היו 12 מופעים של 'שימוש במטמון הדפדפן'. כך תוכלו להבין באיזו תדירות אפשר ליישם את ההצעה.
אסטרטגיות מהירות
כפי שצוין קודם, יש הרבה אסטרטגיות מוכרות ונבדקות היטב לשיפור הביצועים של אפליקציות אינטרנט. לא נתייחס לכל הנושאים האלה לעומק במאמר הזה, אבל קל למצוא מידע ופרטי פרטים נוספים. מקורות מידע שימושיים שיעזרו לכם להבין טוב יותר את הפרטים הספציפיים של אופטימיזציה של אפליקציות אינטרנט כוללים את המדריכים בנושא'בואו נעשה את האינטרנט מהיר יותר' ואת המאמר זמן האחזור של יכולת התאמה לעומס גבוה נמצא בכל מקום והוא גורם לאובדן מכירות.
ההצעות בחלונית הביקורות מקובצות בשתי קטגוריות: ניצול הרשת וביצועי דפי האינטרנט.
לפי חלונית הביקורות, כדי לשפר את ניצול הרשת צריך:
- ניצול שמירה במטמון הדפדפן
- ניצול שמירת נתונים במטמון שרת proxy
- צמצום הגודל של קובצי ה-cookie
- להציג תוכן סטטי מדומיין ללא קובצי cookie
- ציון מידות התמונה
כדי לשפר את הביצועים של דף האינטרנט, עלינו:
- לבצע אופטימיזציה של סדר הסגנונות והסקריפטים
- הסרת כללי CSS שלא בשימוש
נבחן אחת מהאסטרטגיות שאפשר להתמקד בהן כדי לשפר את הביצועים של htmlrocks.com.
ניצול שמירה במטמון הדפדפן
לדוגמה, נתחיל בהמלצה בנוגע לניצול האחסון במטמון בדפדפן. מה המשמעות הספציפית של זה? כשפותחים את האפשרות בממשק המשתמש, מוצגים הפרטים הבאים:
- למשאבים הבאים חסר תאריך תפוגה במטמון. יכול להיות שדפדפנים לא יאחסנו במטמון משאבים שלא צוין להם תאריך תפוגה.
- למשאבים הבאים שאפשר לשמור במטמון יש תוחלת חיים קצרה.
- המשאבים הבאים לא ניתנים לשמירה במטמון באופן מפורש. אם אפשר, כדאי להגדיר אותם כך שאפשר יהיה לשמור אותם במטמון.
שמירת משאבים במטמון היא דרך מצוינת לשפר את ניצול הרשת, וכתוצאה מכך החיובים על רוחב הפס של המפתחים יהיו נמוכים יותר וזמני התגובה של המשתמשים יהיו מהירים יותר. לצערנו, הכלי לא מציין בדיוק מה צריך לעשות, לכן נצטרך להיכנס קצת לפרטים של ההמלצות ולהשתמש בידע שלנו בנושא אופטימיזציה של ביצועים של אפליקציות אינטרנט כדי להחיל את ההצעות האלה.
שמירה במטמון
בלי להיכנס לעומק של אחסון ב-HTTP, אנחנו יכולים בהחלט להסביר כמה מהיסודות. פרוטוקול ה-HTTP כולל הוראות לשמירת נתונים במטמון, שמאפשרות לשרת וללקוח לצמצם את כמות הנתונים שצריך להעביר דרך החיבור. לדוגמה, השרת יכול להורות ללקוח לשמור את המשאב באופן מקומי למשך פרק זמן מסוים, וכך למנוע את הצורך לבקש את המשאב שוב. הלקוח יכול גם לשאול אם המשאב של השרת חדש יותר מהמשאב שמאוחסן באופן מקומי. באופן אידיאלי, אם משאב הוא סטטי, השרת צריך להורות ללקוח לאחסן את המשאב באופן מקומי ולהימנע מבקשה מהשרת לקבלת המשאב בעתיד. כמובן שיש כמות עצומה של פרטים לגבי אחסון במטמון של HTTP, אבל הרעיון הכללי הוא "להפחית את כמות הנתונים שנשלחים דרך החיבור על ידי אחסון משאבים באופן מקומי בלקוח".
תיקון משאבים שלא ניתן לשמור במטמון
נבחן המלצה אחת לעומק ונלמד איך לקשר את ההמלצה של הביקורת לכלים אחרים ב-DevTools. נתמקד בבעיה הבאה: "המשאבים הבאים לא ניתנים לשמירה במטמון באופן מפורש".
מכיוון שהאחסון במטמון מתבצע באמצעות פרוטוקול HTTP, אנחנו צריכים לבדוק את בקשת ה-HTTP ואת התשובה שלה למשאב http://www.html5rocks.com/. פשוט לוחצים על המשאב כדי להציג את הבקשה המקורית ואת כותרות התגובה והפרטים שלה.
לאחר מכן תועברו לחלונית 'רשת', 'משאבים' או 'מקורות' (בהתאם לסוג המשאב שעליו לחצתם) עם מידע נוסף. במקרה כזה, נעבור לחלונית Network (רשת).
אנחנו מנסים לוודא שהשרת אמר ללקוח "לא לשמור בדף האחסון את דף הבית של html5rocks.com". כדי לעשות זאת, לוחצים על המשאב כדי לבדוק את כותרות התגובה, כי אלה הכותרות וההוראות שנשלחות מהשרת.
Cache-Control.כמובן, השרת שלח ללקוח את הכותרת Cache-Control: no-cache. כפי שאפשר לדמיין, המשמעות של האפשרות הזו היא שהלקוח תמיד יבקש את המשאב ולא יאחסן אותו במטמון המקומי. באופן ספציפי, מפרט ה-HTTP עבור 'no-cache' קובע:
"אם ההנחיה no-cache לא מציינת שם שדה, אסור למטמון להשתמש בתגובה כדי לענות על בקשה עוקבת בלי לבצע אימות חוזר מוצלח עם שרת המקור. כך שרת המקור יכול למנוע שמטמון יאוחסן, גם במטמון שהוגדר להחזיר תשובות לא עדכניות לבקשות של לקוחות".
לכן, לוח הביקורות ממליץ להפעיל את האחסון במטמון, כי אחרת השרת והלקוח שולחים מידע שעלול להיות מיותר.
עכשיו, אחרי שווידאנו מהו שורש הבעיה של ההצעה בבדיקה, איך אפשר לפתור אותה? במקרה כזה, הפתרון כולל הגדרה או קוד בצד השרת. בהתאם להגדרות שלכם, תוכלו להפעיל את האחסון במטמון דרך ההגדרות של שרת האינטרנט או דרך ההגדרות של מסגרת אפליקציית האינטרנט. באופן ספציפי, צריך לכלול כותרת Expires ו-Cache-Control: private עם פרמטר max-age לכל משאב שרוצים לשמור במטמון.
ההצעות הן רק הצעות
חשוב לזכור שההמלצות בחלונית הבדיקות מבוססות על שיטות כלליות לפתרון בעיות. המערכת מיישמת שיטות מומלצות שנלמדו במשך שנים רבות באפליקציית האינטרנט הספציפית שלכם. ברוב המקרים, ההמלצות האלה מדויקות ומומלץ להקשיב להן.
עם זאת, יש כמה מקרים שבהם ההמלצה עשויה להיות נכונה, אבל לא להוביל לשיפור בפועל. לדוגמה, אם בדף יש רק תמונה אחת גדולה, בחלונית הביקורות תוצג המלצה להוסיף את המאפיינים 'רוחב' ו'גובה' לתג <img> (כדי שמנוע הרינדור ידע את מידות התמונה בלי צורך להוריד ולבדוק את התמונה). זוהי עצה טובה באופן כללי, אבל היא לא תעזור הרבה אם התמונה היא הרכיב היחיד בדף.
חשוב להבין את ההצעות האלה לפני שמחילים אותן. חשוב גם למדוד את הביצועים לפני ואחרי השינויים, כדי לוודא שבאמת יש שיפור.
סיכום
חלונית הביקורות היא כלי מצוין וקל לשימוש, שמראה במהירות איך לבצע אופטימיזציה של הביצועים של אפליקציית האינטרנט. מהירות היא מאפיין קריטי של אפליקציית אינטרנט, כי חברות רבות מצאו קורלציה ישירה בין הביצועים לבין ההכנסה או הפעילות. אופטימיזציה של ביצועי האפליקציה היא לא רק הדבר הנכון לעשות למען המשתמשים, אלא גם הדבר הנכון לעשות למען התוצאות העסקיות שלכם.