האם האתר שלכם כבר ידידותי למובייל? – חלק שני

איך להפוך את האתר שלי לידידותי למובייל?

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

גודל הכפתורים, הקישורים ושדות הטפסים

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

כרית האצבע של אדם ממוצע היא ברוחב 10 מ”מ בקירוב, לכן הגיידליינס של חוויית המשתמש לאנדרואיד ממליצים על אזור לחיץ של לפחות 7 מ”מ או CSS 48 פיקסלים (לגובה ולרוחב) לכפתורים המרכזיים באתר (למשל כפתורים המניעים לפעולה).

קישורים פחות שימושיים יכולים להיות קטנים יותר, אך עדיין חשוב לרווח ביניהם לפחות ב- 5 מ”מ או CSS 32 פיקסלים, כדי שלא יילחצו כמה במקביל.

יש להימנע ממצב בו הגולש ייאלץ להגדיל את המסך ב- ZOOM IN . כמו כן יש לוודא כי פונט הגופן עצמו קריא ולא קטן מדי.

התאמת רזולוציית התצוגה על ידי תגית מטא Viewport

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

ללא תגית זו, הדפדפן במובייל יפתח את התצוגה כמו תצוגת אתר במחשב נייח, ברוחב שלCSS 800-1024 פיקסלים, וייאלץ את הגולש לבצע זום אין .

ניתן להגדיר לתגית זו מימדים קבועים להצגת דף, למשל width=320 או לאפשר לה להיות רספונסיבית; width=device-width , ולאפשר תצוגה אוטומטית לגדלים שונים של מסכים, בהתאם למכשיר ממנו גלשו. בנוסף, חשוב גם לעשות התאמות לגודל הגופן בדף.

תכנים מותאמים למובייל

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

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

הפניות לתוכן הרלוונטי

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

הימנעו משרשרת הפניות

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

(Plugins) הימנעו משימוש בתוספים באתר

ישנם תוספים שמסייעים לדפדפן להעלות תכנים מסוגים מיוחדים, כמו למשל Flash, Silverlight ו- Java. מרבית המכשירים הסלולריים לא תומכים בתוספים אלו, ובנוסף גם הדפדפנים נוהגים עם תוספים אלו בחשדנות, לכן מומלץ להימנע משימוש בהם.

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

אפשרו דחיסת קבצים

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

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

(Caching) מינוף מטמון הדפדפן

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

כל מקור צריך להיות ספציפי ולכלול; האם ניתן לשמור עותק, למי ניתנת ההרשאה ולכמה זמן. הנחיות אלו נמצאות בתשובה שהשרת מחזיר וכוללות כותרות Cache-Control (עונה על איך ולכמה זמן) ו- ETag(שולח בדיקה אוטומטית לבדוק האם היה שינוי מהכניסה האחרונה לדף).

גוגל ממליצה על מינימום טווח של שבוע עם עדיפות לטווח של שנה.

צמצום משאבים וניקוי הקוד

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

בצעו אופטימיזציה לתמונות

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

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

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