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