כיצד למדוד Front-end ביצועי האתר

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

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

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

בקשות HTTP

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

לאחר שליחת הבקשה הדפדפן שלך יהיה לנתח כל אלמנט הדף. בהתאם מנוע ניתוח כל אתר אינטרנט יטען אחרת ואלמנטים יופיע בסדר משתנה על סמך מהירויות ההעברה. לדוגמה, Internet Explorer יציג דפי אינטרנט שונים מ- Chrome או Safari, וכל אלה מפעילים מנועי ניתוח שונים במקצת מ- Firefox או Opera.

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

לעתים קרובות הגורמים מחזיקים באתר אופטימיזציה של מהירות התייחסות clunky JavaScript כולל או קבצי תמונה גדולים. עם פופולריזציה של Verizon FiOS זה נפוץ במהירויות אינטרנט להכות 600kbps ו לשמור על טיפוס! למרבה הצער זה לא הנורמה ואפילו עם חיבורים במהירות גבוהה זה אפשרי לחוות פגמים אופטימיזציה.

הסעד לביצוע האתר

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

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

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

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

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

טכניקות מהירות

יש כמה טריקים פשוטים אשר ניתן להחיל לאתר האינטרנט שלך באופן מיידי כדי להאיץ את הביצועים. הדרך הראשונה והקלה ביותר היא להפריד בין קובצי CSS ו- JavaScript.

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

על הצד השני להעיף את כל קבצי JavaScript לתוך תחתונה האתר שלך עשוי באופן דרמטי לפתור זמני hangup. דפדפנים רבים לחסום הורדות מקבילות כלומר לפני עיבוד הדף דפדפן האינטרנט של המשתמש עשוי לעצור למשך 4 שניות לטעון באופן מלא JS חיצוני כולל.

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

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

דחיסת גודל קובץ

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

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

כמו כן, מומלץ לשקול לדחוס את התמונות הגדולות ביותר בדפי האינטרנט שלך. זה יכול להיעשות עם כל תוכנת עריכת תמונה כגון Adobe Photoshop או GIMP פשוט על ידי resampling את התמונה ברזולוציה נמוכה יותר. PNG תמונות ייצא הרבה יותר קטן בממוצע מאשר jpg או פורמטים TIFF. יש גם שפע של כלים מקוונים כגון Image Optimizer כדי לסייע בתהליך דחיסה.

בדיקת מקור וערכים

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

הכלי הפופולרי ביותר Mozilla Firebug הוא תוסף עבור דפדפן Firefox. אפליקציה זו מתקינה סרגל כלים קטן בתחתית הדפדפן כדי לבדוק זמני תגובה, פרטי כותרת, אלמנטים בדף וסקריפטים עבור כל אתר. הסקריפט הועבר גם ל- Firebug Lite כתוסף עבור Google Chrome.

אפאצ 'י עם mod_pagespeed

לא כל setups יהיה מפעיל שרת אינטרנט Apache, ולכן אפשרות זו אינה זמינה תמיד. מודול זה קשור ישירות צג מהירות הדף של Google הוזכר קודם לכן. למעשה, הקוד עבור mod_pagespeed היה מבוסס במקור על ספריות רבות ממסדי הנתונים של Google Code.

Apache מאפשר למנהלי שרתים להתקין חבילות קטנות הנקראות מודולים כדי לשפר את הביצועים של השרתים שלהם. mod_pagespeed הוא אחד המודולים האלה אשר מבצע טכניקות אופטימיזציה באופן אוטומטי בזמן ריצה. ישנם יותר מדי תהליכים לרשימה, אם כי חלק מן היישומים העיקריים כוללים ב- HTML לעוף HTML / CSS / JS דחיסה במטמון התמונה.

הפרויקט נמצא כעת ב- Google והוא פתוח למפתחים. Google כבר עובד עם GoDaddy ליישם mod_pagespeed לתוך כל חשבונות אירוח פועל שרת Apache HTTP.

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

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