Paso 4: Mejores Prácticas

Optimiza el rendimiento, accesibilidad y experiencia de usuario de tus escenas Spline

Nota: Esta página usa 'use client' para habilitar la interactividad de los botones de copiar código.

Rendimiento

Lazy Loading

Carga las escenas solo cuando son necesarias

import { lazy, Suspense } from 'react';

const SplineScene = lazy(() => import('./SplineScene'));

export default function App() {
  return (
    <Suspense fallback={<div>Cargando escena 3D...</div>}>
      <SplineScene />
    </Suspense>
  );
}

Optimización de Archivos

Reduce el tamaño de los archivos .splinecode

// En Spline Editor:
// 1. Reduce la calidad de texturas
// 2. Optimiza geometrías complejas
// 3. Usa instancias para objetos repetidos
// 4. Limita el número de luces
// 5. Exporta solo lo necesario

Preload de Recursos

Precarga recursos críticos

// En tu layout.tsx o _document.tsx
<link rel="preload" href="/escena-principal.splinecode" as="fetch" />
<link rel="preload" href="/texturas-principales.jpg" as="image" />

Accesibilidad

Reduced Motion

Respeta las preferencias de movimiento del usuario

@media (prefers-reduced-motion: reduce) {
  .spline-container {
    display: none;
  }
  
  .fallback-content {
    display: block;
  }
}

Alt Text y ARIA

Proporciona alternativas para usuarios con discapacidades

export default function AccessibleSpline() {
  return (
    <div>
      <div 
        className="spline-container"
        role="img"
        aria-label="Escena 3D interactiva mostrando un logo animado"
      >
        <Spline scene="/escena.splinecode" />
      </div>
      <div className="sr-only">
        <p>Esta escena muestra un logo animado en 3D con efectos de luz.</p>
      </div>
    </div>
  );
}

Controles de Teclado

Permite navegación por teclado

useEffect(() => {
  const handleKeyPress = (e) => {
    if (e.key === 'Escape') {
      // Pausar o cerrar escena
      setSplinePaused(true);
    }
  };
  
  document.addEventListener('keydown', handleKeyPress);
  return () => document.removeEventListener('keydown', handleKeyPress);
}, []);

UX/UI

Loading States

Proporciona feedback visual durante la carga

export default function SplineWithLoading() {
  const [isLoading, setIsLoading] = useState(true);
  const [progress, setProgress] = useState(0);

  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-500 mx-auto mb-4"></div>
            <p className="text-gray-600 dark:text-gray-300">
              Cargando experiencia 3D... {progress}%
            </p>
          </div>
        </div>
      )}
      <Spline 
        scene="/escena.splinecode"
        onLoad={() => setIsLoading(false)}
      />
    </div>
  );
}

Error Handling

Maneja errores de manera elegante

export default function RobustSpline() {
  const [hasError, setHasError] = useState(false);
  const [retryCount, setRetryCount] = useState(0);

  const handleError = () => {
    setHasError(true);
    if (retryCount < 3) {
      setTimeout(() => {
        setRetryCount(prev => prev + 1);
        setHasError(false);
      }, 2000);
    }
  };

  if (hasError && retryCount >= 3) {
    return (
      <div className="flex items-center justify-center h-96 bg-gray-100 dark:bg-gray-800 rounded-lg">
        <div className="text-center">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            No se pudo cargar la escena 3D
          </p>
          <button 
            onClick={() => {
              setRetryCount(0);
              setHasError(false);
            }}
            className="px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors"
          >
            Reintentar
          </button>
        </div>
      </div>
    );
  }

  return (
    <Spline 
      scene="/escena.splinecode"
      onError={handleError}
    />
  );
}

Responsive Design

Adapta las escenas a diferentes dispositivos

export default function ResponsiveSpline() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return (
    <div className={`spline-container ${isMobile ? 'mobile-optimized' : 'desktop-optimized'}`}>
      <Spline 
        scene={isMobile ? "/escena-mobile.splinecode" : "/escena-desktop.splinecode"}
        style={{
          width: isMobile ? '100%' : '120%',
          height: isMobile ? '100%' : '120%'
        }}
      />
    </div>
  );
}

Checklist de Optimización

Usar lazy loading para escenas pesadas

Implementar loading states informativos

Manejar errores de carga elegantemente

Optimizar archivos .splinecode en el editor

Usar preload para recursos críticos

Implementar fallbacks para dispositivos lentos

Respetar prefers-reduced-motion

Proporcionar alternativas accesibles

Probar en diferentes dispositivos y conexiones

Monitorear métricas de rendimiento

Herramientas Recomendadas

Monitoreo de Rendimiento

• Chrome DevTools Performance
• Lighthouse audits
• Web Vitals extension
• React DevTools Profiler

Testing de Accesibilidad

• axe DevTools
• WAVE Web Accessibility
• Lighthouse accessibility
• Screen reader testing

Optimización de Archivos

• Spline Editor optimization
• Image compression tools
• Bundle analyzer
• CDN implementation

Anterior: Personalización