כיצד לבצע אופטימיזציה של האתר שלך למשתמשים ניידים?

האם וודאת שהאתר שלך ידידותי לנייד?


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

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

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

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

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

מס ‘1: תכנון תוך התחשבות בנייד

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

מלבד העיצוב המגיב עם השכל הישר, אילו אלמנטים עיצוביים אחרים עליך ליישם בעיצובי האינטרנט שלך בנייד?

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

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

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

# 2: מיטוב משאבים; תמונות, אייקונים וכו ‘.

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

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

זמני טעינת עמודים ממוצעים לשנת 2018 כיצד משווים את הבלוג של MachMetrics מהירותגודל העמוד הממוצע בשנת 2018. מופיע לפי תעשיות ומדינות שונות.

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

אז, איך אתה יכול לקצץ כמה קבצי קבצים נוספים או אפילו מגה-בייט מחוץ לתוכן החזותי שלך?

  • שנה את גודל התמונות שלך. נשמע פשוט, נכון? ובכן, אני לא יכול להמשיך ולספור כמה פעמים דפדפתי באתר נייד רק כדי לטעון תמונות של 1980 x 1200 ברקע. במקום זאת, יש לספק תמונות בגודל מלא כקישורים חלופיים במידת הצורך. שינוי גודל יכול להתנער עד 80% מגודל התמונה הכולל, תלוי בממדים הנדרשים. עם זאת עבור מכשירים ניידים, לעולם אין סיבה לעבור מעל לטווח 600-700 פיקסלים.
  • צמצם את גודל הקובץ באמצעות דחיסה. דחיסת / אופטימיזציה של תמונות היא תהליך השימוש בתוכנת צד ג ‘להפחתת מספר הצבעים הקיימים בתמונה. ניתן לעשות זאת במידה והתמונות שלך לא מאבדות מהאיכות המולד שלהן אך יכולות לצמצם באופן דרסטי את גודל הקובץ שלהן. אם אתה זקוק לעזרה בדחיסת תמונות, אל תחפש רחוק יותר מהאוסף המקיף שלנו של כלי דחיסת תמונות.
  • חקור פורמטים של קבצים חלופיים. כולם שמעו על פורמטים של קבצי PNG ו- JPEG. אחרי הכל, הם אמות המידה דה פקטו באינטרנט. אבל, לא לזמן רב. הטכנולוגיה האחרונה והגדולה ביותר בהעברת תמונות דיגיטליות סובבת סביב WebP ותבניות קובץ SVG. למשל, SVG יכול באופן אוטומטי קנה מידה לגודל המסך, צמצום מספר המשאבים הדרושים לטעינת רכיבים חזותיים ספציפיים.

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

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

# 3: טעינה מקדימה וטעינה עצלה

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

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

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

עם טעינה מוקדמת, המשתמש יכול להציג את עמוד B לפני שהוא לוחץ על קישור הניווט בעמוד A.

הוראה מראש

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

מהם הסוגים הנפוצים ביותר לטעינה מראש?

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

מהן כמה דוגמאות קוד לטוענים מראש?

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

BTW, אם אתה משתמש בוורדפרס אז רקטת WP יכול לעזור לך בכך להטעין את האתר שלך.

עכשיו כשאתה יודע יותר על טוענים מראש, בוא נדבר על הנושא החם האחר: טעינה עצלה.

מה זה עצלן טוען?

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

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

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

Layzr js

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

# 4: מטמון באינטרנט

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

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

מטמון באינטרנט

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

אתה יכול גם לשקול להירשם ל- CDN.

מה זה CDN (רשת אספקת תוכן)?

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

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

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

# 5: AMP (דפי מובייל מואצים)

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

AMP של גוגל (דפים ניידים מואצים)

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

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

JavaScript, למשל, לא עובד עם AMP. אלא אם כן אתה משתמש כמובן ספריית AMP JS זמינה ב- GitHub. השימוש בספריית JS מאפשר לך להשיג תוצאות מסוימות, כמו הימנעות מחוסמי מודעות, אך אם אתה רוצה ביצועים אמיתיים, AMP גולמי הוא הדרך ללכת.

AMP מאת דוגמה

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

למד AMP לפי דוגמה

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

מחקרי מקרה מעניינים עבור AMP:

  1. טרה מעלה את הצפייה הסלולרית עם AMP
  2. Times of India מדווחת על תשואות הכנסות נוספות פי 1.5
  3. מסחר מהיר מניע המרות ללקוחות על ידי בניית AMP-first

# 6: מבחן לפני ביצוע התחלה

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

בדיקות לפני ביצוע התחייבות

מהי סביבת בימוי?

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

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

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

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

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

הצהרת סגירה

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

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

תגיות:

  • קידום אתרים

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map