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

"הכנסנו מודל תלת-ממד לאתר והוא ירד מ-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 עם גובה קבוע.