תלת-ממד באתר בלי להרוס את המהירות: הפלייבוק שלנו

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

הבעיה: למה 3D מאט את האתר

מודל תלת-ממד טיפוסי שיצא מ-Blender או מ-Cinema 4D שוקל בין 30 לכמה מאות מגהבייט. בנוסף, WebGL דורש מה-GPU ומה-CPU לעבוד קשה, מה שמשאיר פחות משאבים לרינדור שאר הדף. על מכשיר מחשב חזק, זה לא מורגש. על אייפון 11 ברשת 4G בפקקים, הדף קופא.

שלב 1: הכנת המודל, עד 90% הקטנה בגודל

GLB + Draco Compression

הפורמט הנכון לווב הוא GLB, אריזה בינארית של GLTF. אבל הקסם האמיתי הוא Draco: אלגוריתם דחיסה של גוגל שמקטין גיאומטריה של מודלים ב-80-95% בלי איבוד איכות נראה לעין. מודל של 40MB הופך ל-3MB. הפקודה שמספיקה ברוב המקרים: `gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp`.

בדיקת Polygon Count

לווב, 50,000-100,000 פוליגונים לסצנה הם הנוחות המקסימלית. מעבר לזה, מאחזה מחלקת. מפלחים מודל כבד ב-Blender עם Decimate modifier: 30-50% הפחתה עם שמירה על מראה.

שלב 2: טעינה עצלה ו-fallback

• Dynamic import: טוענים את הספריית 3D רק כשהמשתמש מגיע לאזור הרלוונטי בדף, לא בטעינה הראשונה
• Intersection Observer: הסצנה מתחילה לטעון כש-50% ממנה בוויופורט
• Suspense + Fallback: בזמן הטעינה מציגים placeholder (אנימציית CSS, תמונה סטטית, spinner ממותג), לא מסך ריק
• Mobile detection: על מסכים מתחת ל-768px אנחנו בדרך כלל מציגים תמונה סטטית מרנדרת של הסצנה. כמעט לא מורגש ולא מאט כלום

גישה טובה יותר מ-fallback למובייל? להריץ את הסצנה ממוטבת למובייל. גישה יותר מעשית? fallback. בחרו לפי חשיבות ה-3D לחוויה.

שלב 3: Spline vs Three.js vs React Three Fiber, מה בחרנו ומתי

Spline: הכי מהיר לעלות לאוויר, הכי פחות שליטה על אופטימיזציה. נהדר לסצנות decorative ולהדגמות. זה מה שאנחנו משתמשים בו עצמנו באתר הזה, הסצנה שאתם רואים היא Spline, ומשולבת עם lazy load שמוריד אותה רק כשמגיעים לאזור הרלוונטי. React Three Fiber: שליטה מלאה, אפשר לאנימציה תלוי-scroll, אינטראקציה מלאה עם המשתמש. הבחירה לאתרי מוצר ו-configurators. Three.js vanilla: למקסימום ביצועים ורינדורים מסוג לוח מחוונים, כשגם כמה KB של JavaScript חשובים.

הציון לאחר האופטימיזציה

עם הפלייבוק הזה, פרויקטי 3D שלנו מגיעים ל-85-95 ב-Lighthouse Performance על דסקטופ, ו-75-88 על מובייל. LCP (Largest Contentful Paint) מתחת ל-2.5 שניות. CLS אפס, הסצנה לא גורמת ל-layout shift כי לה placeholder עם גובה קבוע.