עיצוב תלת־ממדי יכול להסביר תהליך ולחזק זהות, אבל הוא לא צריך לעכב קריאת תוכן או מילוי טופס. השאלה היא לא רק כמה מהר הסצנה נבנית, אלא כמה מהר המבקר מבין את העמוד ויכול לפעול. צריך להפריד בין תוכן חיוני לבין אפקטים חזותיים.
טוענים תוכן לפני אפקטים
כותרת, תיאור וקישורים יכולים להופיע ב־HTML גם לפני שהסצנה מוכנה. רכיב תלת־ממדי אינו צריך להיות תנאי להצגת הטקסט. אם WebGL לא נתמך או נכשל, העמוד צריך להמשיך להיות שימושי.
בדקו גם מצב רשת איטית. משתמש לא צריך לראות מסך ריק בזמן שספרייה או גופן יורדים.
מתאימים איכות למכשיר
מסך בעל צפיפות גבוהה יכול לדרוש הרבה יותר פיקסלים לציור. הגבלת רזולוציית הרינדור, כמות פרטים ואפקטים עשויה להקטין עומס.
המטרה היא קריאות וחלקות, לא אותה איכות מקסימלית בכל מכשיר. כיתוב על קובייה צריך להישאר גדול וחד גם כשמקטינים את מורכבות הסצנה.
לא מציירים כשאין צורך
כאשר הסצנה מחוץ למסך או הטאב אינו פעיל, אפשר לעצור או להפחית ציור. במצב של הפחתת תנועה אפשר להציג את המערכת מורכבת ולצייר רק כשמשתנה גודל החלון.
אנימציה שממשיכה לרוץ בלי שניתן לראות אותה צורכת משאבים בלי לעזור למבקר. ודאו שהחזרה למסך מחדשת את התצוגה בצורה תקינה.
מטפלים גם בתמונות ובגופנים
לא כל בעיית ביצועים נובעת מ־3D. תמונות גדולות, יותר מדי משקלי גופן וסקריפטים חיצוניים משפיעים על טעינה. הגדירו מידות לתמונות כדי למנוע קפיצות פריסה.
שמרו טקסט קריא בזמן טעינת גופן, וטענו משאבים רק במסלולים שצריכים אותם. מסך התחברות או מאמר אינם חייבים להוריד את כל מנוע ההמחשה של הבית.
- תוכן ראשי זמין לפני הסצנה.
- בדיקה במכשיר חלש וברשת איטית.
- עצירה מחוץ למסך ובטאב לא פעיל.
- תמונות מותאמות ורכיבים ללא קפיצת פריסה.
מודדים יותר מפעם אחת
בדיקה מקומית במחשב חזק אינה מייצגת את כל המשתמשים. בדקו גם נתוני שימוש אמיתיים כשיש מספיק תנועה, והשוו בנפרד מובייל ומחשב.
שיפור ביצועים צריך לשמור על תפקוד: אחרי שינוי, בדקו פניות, ניווט והתאמת המסכים. ציון מהירות לבדו לא מוכיח שהאתר עובד טוב יותר לעסק.
שאלות נפוצות
צריך להסיר את ה־3D כדי שהאתר יהיה מהיר?
לא בהכרח. אפשר לתכנן טעינה, איכות ורינדור בהתאם למכשיר ולוודא שהתוכן החיוני אינו תלוי בסצנה.
למה האתר חלק במחשב ואיטי בטלפון?
יכולת גרפית, צפיפות מסך, זיכרון ורשת משתנים בין מכשירים. צריך לבדוק את עומס הרינדור ולא רק את גודל קובץ האתר.
המדריך מסביר עקרונות ותהליכי עבודה. פרטי המימוש נקבעים לפי המערכות והצרכים של העסק. דוגמאות להמחשה אינן תוצאות של לקוחות.