רוגוזין 4 אשדוד08-910-3080info@ocean-it.co.ilא - ה 09:00 - 18:00

עיצוב רספונסיבי ודגשים לפיתוח מובייל חלק ג' – ביצועים

פוסט 3 מתוך 7
עיצוב ריספונסיבי

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

viewport:

אז דבר ראשון שעלינו לעשות, עוד לפני שאנחנו מתחילים לשפר את הביצועים אנחנו חייבים שהדפדפן של המחשב או של המכשיר החכם ידע לאיזה אתר הוא נכנס, האם האתר מותאם למובייל או שבכלל אנחנו צופים באתר רגיל ברזולוציה מוקטנת – בשביל זה יש את ה Viewport. הviewport היא בעצם תגית meta שאומרת לדפדפן מהו גודל האיזור הנראה במסך שלי, השימוש בviewport הוא קריטי בגלל שבלעדיו הדפדפן ירצה לפתוח את האתר כאתר רגיל ממחשב יידע שהאתר נפתח ממכשיר בעל רזולוציה קטנה יותר. בviewport גם אפשר לציין אם אתה רוצה שלמשתמש תיהיה יכולת לעשות זום או להכריח אותו להשאר במצב סטטי, תגית הmeta של viewport תימצא בתוך תגית ה head תראה כך:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

HTML Input types:

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

להלן רשימה של שדות הקלט החדשים של HTML5:

 

<input type="color"/>
<input type="date"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="email"/>
<input type="month"/>
<input type="number"/>
<input type="range"/>
<input type="search"/>
<input type="tel"/>
<input type="time"/>
<input type="url"/>
<input type="week"/>

 Data URI – Uniform Resource Identifier scheme:

אחד הגורמים היותר מכריעים במבחני הביצועים ברשת הוא מספר הקריאות לשרת בעת טעינת העמוד. בעזרת data uri  אנחנו יכולים להחליף את התמונות שיש לנו בדף האינטרנט בקידוד טקסטי ובכך לצמצם את משמעותית את מספר הקריאות לשרת. הדרך לעשות זאת היא מאוד פשוטה, ישנם מספר ממירים ברשת שיכולים לעשות זאת בשניות (לדוגמא http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/), כל שעליך לעשות הוא להעלות את התמונה שאתה רוצה להטמיע באתר והממיר האינטרנטי כבר יספק לך את הקוד בבסיס 64.

דוגמא להטמעת קוד עם שימוש ב Data Uri:

 

.image {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}

JavaScript:

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

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

Bundle and Minication:

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

 לסיכום:

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

לאקי לוק

מאמר זה נכתב על ידי LuckyLuke