מבוא
היום, הדבר הכי חשוב שאתם יכולים לעשות בשביל האתר שלכם הוא לוודא שהוא פועל היטב כשנכנסים אליו מטלפון או מטאבלט. כאן מוסבר איך לבצע אופטימיזציה של האתר לדפדפן בנייד באמצעות כלי הפיתוח ל-Chrome ומכשיר Android.
למה חשוב לבצע אופטימיזציה לאינטרנט לנייד?
ביצועים
במכשירים ניידים יש מעבדים מהירים יותר, יותר זיכרון RAM, מעבדים גרפיים מהירים יותר וגישה מהירה יותר לרשת, ככל שאנחנו עוברים מ-2G ומ-3G ל-4G. למרות ההתקדמות המהירה, מכשירים ניידים הם חלשים יותר בהשוואה למחשבים. במילים אחרות, טעינת משאבי הרשת נמשכת יותר זמן, פריקת התמונות נמשכת יותר זמן, עיבוד הדף נמשך יותר זמן והפעלת הסקריפטים נמשכת יותר זמן. אפשר להניח שהדף פועל במכשיר נייד במהירות איטית פי 5 עד 10.
סוללה
מכשירים ניידים פועלים רק על סוללה. משתמשים של מכשירים ניידים רוצים שהסוללה תחזיק מעמד כמה שיותר זמן. אתר שלא עבר אופטימיזציה ירוקן את הסוללה הרבה יותר מהר מהנדרש. כדי להפחית את התרוקנות הסוללה, כדאי לצמצם את התנועה ברשת ולהפחית את מספר הרינדורים. כשמאחזרים משאב, ה-Wi-Fi או הרדיו הסלולרי צריכים להיות מופעלים, וזה מרוקן את הסוללה. כשהדפדפן מציג רכיב, השימוש ב-CPU וב-GPU עולה, וזה גם מרוקן את הסוללה.
מעורבות
הביצועים נועדו לשפר את המדד שהכי חשוב לכם. בפייסבוק, אנחנו מתמקדים בגלילה. בבדיקת A/B, האטנו את הגלילה מ-60fps ל-30fps. האינטראקציה כווצה. אמרנו שכן, ולכן הגלילה חשובה.
Facebook at Edge Conference
משתמשים בנייד מצפים שיוכלו להיכנס ולצאת במהירות. האתר המהיר ביותר יקבל את הכי הרבה מעורבות.
ניהול ביצועים
ב-Chrome יש ערכה מצוינת של כלים למפתחים. במאמר הזה נסביר איך להשתמש בכלים האלה כדי ליצור פרופיל של האתר שלכם לנייד. אם אתם כבר מכירים את כלי הפיתוח ל-Chrome, מצוין! אם לא, כדאי לעיין במדריכים המצוינים האלה:
עכשיו, אחרי שהבנתם את הרעיון, בואו נראה איך אפשר להאיץ את האתר לנייד באמצעות כלי הפיתוח. אם זו הפעם הראשונה שאתם משתמשים בכלי הפיתוח ל-Chrome ב-Android, כדאי לעיין במדריך לתחילת הדרך שמופיע בתחתית המאמר.
איך להשתמש בכלי הפיתוח ל-Chrome מרחוק
כשהמכשיר שלכם מחובר למחשב. ב-Chrome במחשב, עוברים אל http://localhost:9222 ובמכשיר Android פותחים את האתר. תועברו לרשימה של הכרטיסיות הפתוחות במכשיר Android. בוחרים את הדף מהרשימה "דפים שניתן לבדוק".
ותועברו לכלי הפיתוח ל-Chrome של הדף הזה.
אוי… סרגל הכלים המוכר של כלי הפיתוח ל-Chrome נמצא ממש שם. הדבר הכי חשוב שצריך להבין לגבי כלי הפיתוח ל-Chrome מרחוק הוא שהם אותם כלי פיתוח שבהם אתם משתמשים היום במחשב. ההבדל היחיד הוא שמכשיר ה-Android אחראי רק לדף, והמחשב אחראי לכלי הפיתוח. מאחורי הקלעים, נאספים אותם נתונים ואותה פונקציונליות זמינה.
לדוגמה, נכנסתי לכתובת www.sfgate.com/movies בטלפון שלי. באמצעות כלי הפיתוח ל-Chrome במחשב, העברתי את העכבר מעל div בכלי Elements, ובדיוק כמו במחשב, ה-div מודגש באופן חזותי במכשיר Android.
אפשר להשתמש בכלי Elements גם כדי להפעיל ולהשבית סגנונות, וזה שימושי כשמנסים לבדוק את זמני הרינדור.
הסבר על הגישה לרשת
ביצועי הרשת חשובים, והם חשובים עוד יותר באינטרנט לנייד. מכשירים ניידים מחוברים בדרך כלל לחיבורים איטיים יותר מאשר מחשבים שולחניים ומחשבים ניידים. כדי לוודא שאתם עושים את הדבר הנכון, צלמו תמונת מצב של הרשת: עוברים אל כלי הרשת ולוחצים על "הקלטה".
בצילום המסך מוצגת התנועה ברשת שנובעת מחיפוש ב-Google. בודקים את הבקשות לאחזור מהרשת שהאתר שולח ומוצאים דרכים לצמצם אותן. אם האתר שלכם שולח בקשות סקר לשרת, כדאי לשים לב לפעילות המשתמשים ולהימנע מסקרים כשהמשתמש לא פעיל. הכלי Network מאפשר לכם לראות את כותרות ה-HTTP הגולמיות, וזה שימושי אם הרשתות הסלולריות משנות אותן.
אופטימיזציה של זמני הרינדור
אחד מצווארי הבקבוק הגדולים ביותר בדפדפני אינטרנט לנייד הוא רינדור הדף. רינדור הוא התהליך של ציור רכיב בדף עם הסגנון שצוין. כשרכיב אחד דורש הרבה משאבים כדי להציג אותו, זה מאט את ההצגה של כל הדף. Chrome מנסה לשמור במטמון רכיבים שצוירו בעבר במאגר נתונים מחוץ למסך. אבל בניידים, כמות ה-RAM הזמינה ב-GPU מוגבלת, ולכן גם מספר הרכיבים שאפשר לשמור במטמון מחוץ למסך מוגבל. תופעת הלוואי היא יותר רינדורים וכל רינדור איטי יותר מאשר במחשב. כדי שהגלילה תהיה רספונסיבית, צריך לצמצם את זמני הרינדור.
ב-Chrome 25 יש מצב צביעה מחדש רציפה של הדף. במצב "צביעה מחדש של דף רציף", המערכת אף פעם לא שומרת במטמון רכיבים שנצבעו, אלא צובעת את כל הרכיבים בכל פריים. אם מאלצים את כל הרכיבים להופיע בכל פריים, אפשר לבצע בדיקות A/B של זמני ההצגה על ידי הפעלה והשבתה של רכיבים וסגנונות. למרות שהתהליך ידני, זהו כלי חשוב מאוד למעקב אחרי העלות של הצגת כל רכיב בדף. הכלל הראשון של אופטימיזציה הוא למדוד את מה שמנסים לשפר כדי לקבל נקודת השוואה. נראה דוגמה פשוטה.
קודם כל, מפעילים את מצב הציור מחדש הרציף של הדף:
אחרי שתפעילו את ההגדרה, תראו תרשים בפינה השמאלית העליונה של מכשיר Android. ציר ה-X של התרשים הוא הזמן, שמחולק לפריימים. ציר ה-Y בתרשים מודד את זמן הרינדור באלפיות השנייה. אפשר לראות שבמכשיר שלי, לוקח לדף 14 אלפיות השנייה להציג את התוכן. מוצגים גם זמני הרינדור המינימליים והמקסימליים, וגם הזיכרון של ה-GPU שנוצל.
כניסוי, הגדרתי את הסגנון של הרכיב שנבחר ל-display: none. בואו נראה כמה משאבים
נדרשים עכשיו כדי להציג את הדף.
זמני הרינדור ירדו מ-14 אלפיות השנייה ל-4 אלפיות השנייה לכל פריים. במילים אחרות, הרינדור של הרכיב הזה נמשך בערך 10 אלפיות השנייה. אם תפעילו ותשביתו רכיבים וסגנונות, תוכלו לצמצם במהירות את החלקים בדף שדורשים הרבה משאבים. חשוב לזכור: זמני רינדור מהירים יותר מצביעים על פחות בעיות בממשק (jank), חיי סוללה ארוכים יותר ורמת מעורבות גבוהה יותר מצד המשתמשים. כשתרצו להעמיק בנושא, כדאי לקרוא את המאמר המצוין הזה על מצב צביעה מחדש רציפה של דפים.
תכונות מתקדמות
about:tracing
הרבה מהתכונות המתקדמות יותר למפתחים שזמינות ב-Chrome למחשב זמינות גם ב-Chrome ל-Android. לדוגמה, about:gpu-internals, about:appcache-internals ו-about:net-internals זמינים. כשחוקרים בעיה מסובכת במיוחד, לפעמים צריך עוד נתונים כדי להתמקד בגורם לבעיה. במחשב, יכול להיות שאתם משתמשים ב-about:tracing. אם אתם לא מכירים את about:tracing, כדאי לצפות בסרטון שלי על שימוש בכלי הפרופיילינג about:tracing. אפשר לתעד את אותם נתונים מ-Chrome ב-Android. כדי להתחיל, פועלים לפי השלבים הבאים:
- מורידים את adb_trace.py
- מריצים את adb_trace.py משורת הפקודה
- שימוש ב-Chrome ב-Android
- מקישים על Enter בשורת הפקודה כדי להשבית את הסקריפט adb_trace.py.
אחרי ש-adb_trace.py יסיים, יהיה לכם קובץ JSON שתוכלו לטעון ב-about:tracing ב-Chrome למחשב.
מדריך למתחילים
אחרי שסקרנו את מה שאפשר לעשות עם כלי הפיתוח ל-Chrome מרחוק, נסביר איך להתחיל את הסשן של ניפוי הבאגים מרחוק. אם לא השתמשתם בהם בעבר, כאן תוכלו לקרוא הוראות מפורטות לתחילת העבודה. אם כבר השתמשתם בהם, אבל שכחתם איך בדיוק להשתמש בהם, פירטתי כאן גם הוראות מקוצרות.
1. התקנת Android SDK
יכול להיות שאתם תוהים למה צריך להתקין את Android SDK כשמפתחים לאינטרנט. ה-SDK כולל את adb (Android Debug Bridge). גרסת Chrome למחשב צריכה להיות מסוגלת לתקשר עם מכשיר ה-Android. Chrome לא מתקשר ישירות עם מכשיר Android, אלא מנתב את התקשורת דרך adb.
2. הפעלת ניפוי באגים ב-USB במכשיר
האפשרות להפעיל ניפוי באגים ב-USB נמצאת בהגדרות של Android. מפעילים אותה.
3. מתחברים למכשיר
אם עדיין לא עשיתם את זה, חברו את מכשיר ה-Android למחשב באמצעות USB. אם זו הפעם הראשונה שאתם משתמשים בניפוי באגים ב-USB, תופיע ההודעה הבאה:
אם אתם מתכננים לבצע סשנים של ניפוי באגים מרחוק לעיתים קרובות, מומלץ לסמן את האפשרות "אפשר תמיד מהמחשב הזה".
4. מוודאים שהמכשיר מחובר כמו שצריך
מריצים את הפקודה adb devices משורת הפקודה. המכשיר אמור להופיע ברשימה.
5. הפעלת ניפוי באגים ב-USB ב-Chrome
פותחים את הגדרות > מתקדם > כלי פיתוח ומסמנים את האפשרות הפעלת ניפוי באגים באינטרנט באמצעות USB, כמו שמוצג כאן:
6. יצירת חיבור של כלי הפיתוח למכשיר Android
מריצים את הפקודה הבאה:
adb forward tcp:9222 localabstract:chrome_devtools_remote
יוצרת גשר בין המחשב השולחני למכשיר Android באמצעות adb. אם נתקלתם בבעיות עד לשלב הזה, קראו את הוראות ההגדרה המפורטות כאן.
7. מתבצע אימות של המכשיר
כדי לוודא שהמכשיר מחובר כמו שצריך, פותחים את Chrome במחשב ועוברים אל http://localhost:9222. אם מופיעה שגיאה 404 או שגיאה אחרת, או אם לא מופיע משהו כמו:
כאן אפשר לקרוא את הוראות ההגדרה המפורטות.
סיכום
משתמשים בנייד בדרך כלל ממהרים וצריכים למצוא במהירות את המידע החשוב בדף. כמפתחי אתרים לנייד, אתם צריכים לוודא שטעינת הדף מהירה והדף פועל היטב בנייד. אם לא, רמת המעורבות של המשתמשים תרד. כלי הפיתוח ל-Chrome מרחוק זהים מבחינה פונקציונלית למקבילים שלהם במחשב. ממשק המשתמש דומה מספיק, כך שאין צורך ללמוד איך להשתמש בכלים חדשים. במילים אחרות, תהליך העבודה שלכם ממשיך. חשוב לזכור: גם פייסבוק וגם האתר שלכם לא חסינים מפני בעיות בביצועים. אתרים עם ביצועים טובים נהנים מרמת המעורבות של משתמשים גבוהה יותר.