⚡ AtomixGlass Performance

Optimize glass morphism effects for smooth, performant user experiences

Performance Optimization Guide

The AtomixGlass component creates stunning glass morphism effects but can be performance-intensive. This guide provides best practices, optimization techniques, and monitoring strategies to ensure smooth, performant experiences across all devices.

5-7

Max Components

Recommended

60fps

Target Frame Rate

Goal

≤100ms

First Input Delay

Web Vital

≤0.1

Layout Shift Score

CLS Target

Performance Impact

AtomixGlass uses CSS filters, backdrop filters, and WebGL shaders. While these create beautiful effects, they can impact performance on lower-end devices. Follow this guide to optimize for all users.

Hardware AccelerationCritical

AtomixGlass automatically uses hardware acceleration through CSS transforms and will-change properties. However, overusing these can cause memory issues.

✅ Do:

Limit to 5-7 AtomixGlass components visible at once
Use simpler effects for less important UI elements
Remove will-change after animations complete
Monitor GPU memory usage in DevTools

❌ Don't:

Apply glass effects to large scrollable areas
Nest multiple AtomixGlass components
Use maximum effect values everywhere

Effect Intensity OptimizationImportant

Higher values for displacement, blur, and aberration require more processing power. Balance visual appeal with performance.

Property	Standard	Performance	Impact
`displacementScale`	20 (default)	10-15	High
`blurAmount`	1 (default)	0.5-0.8	Medium
`saturation`	140 (default)	120-130	Low
`aberrationIntensity`	2.5 (default)	1.5-2	Medium
`elasticity`	0.05 (default)	0-0.02	Variable

Shader Mode ConsiderationsHigh Impact

The 'shader' mode uses WebGL for advanced effects and is the most performance-intensive option. Use strategically.

Performance Warning

Shader mode can reduce frame rates by 30-50% on low-end devices. Always provide fallbacks.

When to use shader mode:

Hero sections and landing page headers
Special interactive elements (on hover/click)
Marketing pages with high-end target audience
Desktop-first applications

When to use standard mode:

Mobile applications
Dashboard and admin interfaces
Repeated UI elements (cards, modals)
Low-end device support required

Adaptive Loading Strategy

Implement adaptive loading to provide appropriate experiences based on device capabilities. This ensures optimal performance across all devices.

Basic Device Detection

AdaptiveGlassComponent.tsxTYPESCRIPT

import { useEffect, useState } from 'react';
import { AtomixGlass } from '@shohojdhara/atomix';

function AdaptiveGlassComponent() {
  const [isLowEndDevice, setIsLowEndDevice] = useState(false);
  
  useEffect(() => {
    // Simple heuristic for detecting low-end devices
    const isLowEnd = (
      navigator.hardwareConcurrency <= 4 ||
      /Android|iPhone|iPod|iPad/.test(navigator.userAgent)
    );
    
    setIsLowEndDevice(isLowEnd);
  }, []);
  
  return (
    <AtomixGlass
      mode={isLowEndDevice ? 'standard' : 'shader'}
      displacementScale={isLowEndDevice ? 10 : 20}
      blurAmount={isLowEndDevice ? 0.5 : 1}
      saturation={isLowEndDevice ? 120 : 140}
      aberrationIntensity={isLowEndDevice ? 1.5 : 2.5}
      elasticity={isLowEndDevice ? 0 : 0.05}
      withLiquidBlur={!isLowEndDevice}
      withoutEffects={isLowEndDevice}
    >
      Content
    </AtomixGlass>
  );
}

31 lines900 characters

Advanced Device Detection Hook

useDeviceCapabilities.tsTYPESCRIPT

import { useEffect, useState } from 'react';

interface DeviceCapabilities {
  isLowEnd: boolean;
  isMobile: boolean;
  hasGoodGPU: boolean;
  prefersReducedMotion: boolean;
}

export function useDeviceCapabilities(): DeviceCapabilities {
  const [capabilities, setCapabilities] = useState<DeviceCapabilities>({
    isLowEnd: false,
    isMobile: false,
    hasGoodGPU: true,
    prefersReducedMotion: false,
  });

  useEffect(() => {
    // Check CPU cores
    const cores = navigator.hardwareConcurrency || 2;
    
    // Check device type
    const isMobile = /Android|iPhone|iPod|iPad/.test(navigator.userAgent);
    
    // Check GPU (basic heuristic)
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    const debugInfo = gl?.getExtension('WEBGL_debug_renderer_info');
    const renderer = debugInfo ? gl?.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : '';
    const hasGoodGPU = !renderer.toLowerCase().includes('intel');
    
    // Check reduced motion preference
    const prefersReducedMotion = typeof window !== 'undefined' 
      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
      : false;
    
    // Determine if low-end
    const isLowEnd = cores <= 4 || isMobile || !hasGoodGPU;

    setCapabilities({
      isLowEnd,
      isMobile,
      hasGoodGPU,
      prefersReducedMotion,
    });
  }, []);

  return capabilities;
}

// Usage
function OptimizedGlassComponent() {
  const { isLowEnd, prefersReducedMotion } = useDeviceCapabilities();
  
  return (
    <AtomixGlass
      mode={isLowEnd ? 'standard' : 'shader'}
      displacementScale={isLowEnd ? 10 : 20}
      blurAmount={isLowEnd ? 0.5 : 1}
      saturation={isLowEnd ? 120 : 140}
      aberrationIntensity={isLowEnd ? 1.5 : 2.5}
      elasticity={prefersReducedMotion ? 0 : 0.05}
      reducedMotion={prefersReducedMotion}
      withLiquidBlur={!isLowEnd}
    >
      Content
    </AtomixGlass>
  );
}

69 lines1993 characters

Pro Tip

Consider storing device capabilities in a context provider to avoid recalculating on every component mount.

Browser DevTools

Essential tools for performance monitoring

Performance Tab

Record and analyze frame rates
Identify bottlenecks and long tasks
Check for layout thrashing
Monitor paint and composite times

Rendering Tab

Enable FPS meter
Show paint flashing
Highlight layout shift regions
Emulate vision deficiencies

Memory Tab

Take heap snapshots
Detect memory leaks
Monitor allocation timeline

Core Web Vitals

Key metrics for user experience

Largest Contentful Paint (LCP)

≤2.5s

Time until largest content element is rendered. AtomixGlass can delay LCP if used in hero sections.

First Input Delay (FID)

≤100ms

Time from first interaction to browser response. Heavy shader effects can increase FID.

Cumulative Layout Shift (CLS)

≤0.1

Visual stability score. Always set explicit dimensions for AtomixGlass containers.

Interaction to Next Paint (INP)

≤200ms

Responsiveness metric. Debounce interactive glass effects to maintain good INP.

Performance Monitoring Hook

usePerformanceMonitor.tsTYPESCRIPT

import { useEffect, useRef } from 'react';

interface PerformanceMetrics {
  fps: number;
  renderTime: number;
  memoryUsage: number;
}

export function usePerformanceMonitor(
  onMetrics: (metrics: PerformanceMetrics) => void,
  interval: number = 1000
) {
  const frameCountRef = useRef(0);
  const lastTimeRef = useRef(performance.now());
  const rafIdRef = useRef<number>();

  useEffect(() => {
    const measureFrame = () => {
      frameCountRef.current++;
      rafIdRef.current = requestAnimationFrame(measureFrame);
    };

    const intervalId = setInterval(() => {
      const now = performance.now();
      const elapsed = now - lastTimeRef.current;
      const fps = Math.round((frameCountRef.current * 1000) / elapsed);
      
      // Get memory usage (if available)
      const memory = (performance as any).memory;
      const memoryUsage = memory
        ? Math.round(memory.usedJSHeapSize / 1048576) // Convert to MB
        : 0;
      
      // Get paint timing
      const paintEntries = performance.getEntriesByType('paint');
      const renderTime = paintEntries.length > 0
        ? Math.round(paintEntries[paintEntries.length - 1].startTime)
        : 0;

      onMetrics({ fps, renderTime, memoryUsage });

      // Reset counters
      frameCountRef.current = 0;
      lastTimeRef.current = now;
    }, interval);

    rafIdRef.current = requestAnimationFrame(measureFrame);

    return () => {
      clearInterval(intervalId);
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current);
      }
    };
  }, [interval, onMetrics]);
}

// Usage
function MonitoredGlassComponent() {
  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
  
  usePerformanceMonitor((m) => {
    setMetrics(m);
    
    // Optional: Log warning if FPS drops below 30
    // if (m.fps < 30) {
    //   console.warn('Low FPS detected:', m.fps);
    // }
  });

  return (
    <div>
      {metrics && (
        <div className="performance-overlay">
          <div>FPS: {metrics.fps}</div>
          <div>Memory: {metrics.memoryUsage}MB</div>
        </div>
      )}
      <AtomixGlass>Content</AtomixGlass>
    </div>
  );
}

82 lines2168 characters

Production Warning

Remove or disable performance monitoring in production builds as it can itself impact performance.

Conditional Rendering

Easy Win

Only render AtomixGlass components when they're visible in the viewport. This dramatically reduces GPU load.

LazyGlassComponent.tsxTYPESCRIPT

import { useInView } from 'react-intersection-observer';

function LazyGlassComponent() {
  const { ref, inView } = useInView({
    threshold: 0.1,
    triggerOnce: false,
  });
  
  return (
    <div ref={ref}>
      {inView ? (
  <AtomixGlass>
    Expensive content
  </AtomixGlass>
      ) : (
        <div className="placeholder">
          Loading...
        </div>
      )}
    </div>
  );
}

22 lines397 characters

Reduced Motion Support

Accessibility

Respect user preferences for reduced motion. This also improves performance on low-end devices.

AccessibleGlassComponent.tsxTYPESCRIPT

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

function AccessibleGlassComponent() {
  return (
<AtomixGlass
  animationDuration={prefersReducedMotion ? 0 : 300}
      elasticity={prefersReducedMotion ? 0 : 0.5}
      displacementScale={prefersReducedMotion ? 0 : 20}
>
  Content
    </AtomixGlass>
  );
}

15 lines355 characters

Debounce Interactions

Performance

Debounce mouse/touch events to reduce the frequency of expensive shader updates.

DebouncedGlassComponent.tsxTYPESCRIPT

import { useMemo } from 'react';
import { debounce } from 'lodash';

function DebouncedGlassComponent() {
  const handleMouseMove = useMemo(
    () => debounce((e: MouseEvent) => {
      // Handle mouse move
    }, 16), // ~60fps
    []
  );
  
  return (
    <AtomixGlass
      onMouseMove={handleMouseMove}
      elasticity={0.5}
    >
      Interactive content
    </AtomixGlass>
  );
}

20 lines389 characters

Memoization

React

Memoize AtomixGlass components to prevent unnecessary re-renders and shader recompilation.

MemoizedGlassCard.tsxTYPESCRIPT

import { memo } from 'react';

const MemoizedGlassCard = memo(({ title, content }) => {
  return (
    <AtomixGlass
      mode="shader"
      displacementScale={20}
      blurAmount={1}
      saturation={140}
      aberrationIntensity={2.5}
      elasticity={0.05}
    >
      <h3>{title}</h3>
      <p>{content}</p>
    </AtomixGlass>
  );
}, (prevProps, nextProps) => {
  // Custom comparison - only re-render if props change
  return (
    prevProps.title === nextProps.title &&
    prevProps.content === nextProps.content
  );
});

23 lines534 characters

Quick Wins Summary

Use intersection observer for lazy loading
Respect prefers-reduced-motion
Debounce interactive events
Memoize components with React.memo
Limit concurrent glass effects to 5-7
Use lower effect values on mobile

⚡ AtomixGlass Performance

Optimize glass morphism effects for smooth, performant user experiences

Performance Optimization Guide

5-7

Max Components

Recommended

60fps

Target Frame Rate

Goal

≤100ms

First Input Delay

Web Vital

≤0.1

Layout Shift Score

CLS Target

Performance Impact

AtomixGlass uses CSS filters, backdrop filters, and WebGL shaders. While these create beautiful effects, they can impact performance on lower-end devices. Follow this guide to optimize for all users.

Hardware AccelerationCritical

AtomixGlass automatically uses hardware acceleration through CSS transforms and will-change properties. However, overusing these can cause memory issues.

✅ Do:

Limit to 5-7 AtomixGlass components visible at once
Use simpler effects for less important UI elements
Remove will-change after animations complete
Monitor GPU memory usage in DevTools

❌ Don't:

Apply glass effects to large scrollable areas
Nest multiple AtomixGlass components
Use maximum effect values everywhere

Effect Intensity OptimizationImportant

Higher values for displacement, blur, and aberration require more processing power. Balance visual appeal with performance.

Property	Standard	Performance	Impact
`displacementScale`	20 (default)	10-15	High
`blurAmount`	1 (default)	0.5-0.8	Medium
`saturation`	140 (default)	120-130	Low
`aberrationIntensity`	2.5 (default)	1.5-2	Medium
`elasticity`	0.05 (default)	0-0.02	Variable

Shader Mode ConsiderationsHigh Impact

The 'shader' mode uses WebGL for advanced effects and is the most performance-intensive option. Use strategically.

Performance Warning

Shader mode can reduce frame rates by 30-50% on low-end devices. Always provide fallbacks.

When to use shader mode:

Hero sections and landing page headers
Special interactive elements (on hover/click)
Marketing pages with high-end target audience
Desktop-first applications

When to use standard mode:

Mobile applications
Dashboard and admin interfaces
Repeated UI elements (cards, modals)
Low-end device support required

Adaptive Loading Strategy

Implement adaptive loading to provide appropriate experiences based on device capabilities. This ensures optimal performance across all devices.

Basic Device Detection

AdaptiveGlassComponent.tsxTYPESCRIPT

import { useEffect, useState } from 'react';
import { AtomixGlass } from '@shohojdhara/atomix';

function AdaptiveGlassComponent() {
  const [isLowEndDevice, setIsLowEndDevice] = useState(false);
  
  useEffect(() => {
    // Simple heuristic for detecting low-end devices
    const isLowEnd = (
      navigator.hardwareConcurrency <= 4 ||
      /Android|iPhone|iPod|iPad/.test(navigator.userAgent)
    );
    
    setIsLowEndDevice(isLowEnd);
  }, []);
  
  return (
    <AtomixGlass
      mode={isLowEndDevice ? 'standard' : 'shader'}
      displacementScale={isLowEndDevice ? 10 : 20}
      blurAmount={isLowEndDevice ? 0.5 : 1}
      saturation={isLowEndDevice ? 120 : 140}
      aberrationIntensity={isLowEndDevice ? 1.5 : 2.5}
      elasticity={isLowEndDevice ? 0 : 0.05}
      withLiquidBlur={!isLowEndDevice}
      withoutEffects={isLowEndDevice}
    >
      Content
    </AtomixGlass>
  );
}

31 lines900 characters

Advanced Device Detection Hook

useDeviceCapabilities.tsTYPESCRIPT

import { useEffect, useState } from 'react';

interface DeviceCapabilities {
  isLowEnd: boolean;
  isMobile: boolean;
  hasGoodGPU: boolean;
  prefersReducedMotion: boolean;
}

export function useDeviceCapabilities(): DeviceCapabilities {
  const [capabilities, setCapabilities] = useState<DeviceCapabilities>({
    isLowEnd: false,
    isMobile: false,
    hasGoodGPU: true,
    prefersReducedMotion: false,
  });

  useEffect(() => {
    // Check CPU cores
    const cores = navigator.hardwareConcurrency || 2;
    
    // Check device type
    const isMobile = /Android|iPhone|iPod|iPad/.test(navigator.userAgent);
    
    // Check GPU (basic heuristic)
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    const debugInfo = gl?.getExtension('WEBGL_debug_renderer_info');
    const renderer = debugInfo ? gl?.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : '';
    const hasGoodGPU = !renderer.toLowerCase().includes('intel');
    
    // Check reduced motion preference
    const prefersReducedMotion = typeof window !== 'undefined' 
      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
      : false;
    
    // Determine if low-end
    const isLowEnd = cores <= 4 || isMobile || !hasGoodGPU;

    setCapabilities({
      isLowEnd,
      isMobile,
      hasGoodGPU,
      prefersReducedMotion,
    });
  }, []);

  return capabilities;
}

// Usage
function OptimizedGlassComponent() {
  const { isLowEnd, prefersReducedMotion } = useDeviceCapabilities();
  
  return (
    <AtomixGlass
      mode={isLowEnd ? 'standard' : 'shader'}
      displacementScale={isLowEnd ? 10 : 20}
      blurAmount={isLowEnd ? 0.5 : 1}
      saturation={isLowEnd ? 120 : 140}
      aberrationIntensity={isLowEnd ? 1.5 : 2.5}
      elasticity={prefersReducedMotion ? 0 : 0.05}
      reducedMotion={prefersReducedMotion}
      withLiquidBlur={!isLowEnd}
    >
      Content
    </AtomixGlass>
  );
}

69 lines1993 characters

Pro Tip

Consider storing device capabilities in a context provider to avoid recalculating on every component mount.

Browser DevTools

Essential tools for performance monitoring

Performance Tab

Record and analyze frame rates
Identify bottlenecks and long tasks
Check for layout thrashing
Monitor paint and composite times

Rendering Tab

Enable FPS meter
Show paint flashing
Highlight layout shift regions
Emulate vision deficiencies

Memory Tab

Take heap snapshots
Detect memory leaks
Monitor allocation timeline

Core Web Vitals

Key metrics for user experience

Largest Contentful Paint (LCP)

≤2.5s

Time until largest content element is rendered. AtomixGlass can delay LCP if used in hero sections.

First Input Delay (FID)

≤100ms

Time from first interaction to browser response. Heavy shader effects can increase FID.

Cumulative Layout Shift (CLS)

≤0.1

Visual stability score. Always set explicit dimensions for AtomixGlass containers.

Interaction to Next Paint (INP)

≤200ms

Responsiveness metric. Debounce interactive glass effects to maintain good INP.

Performance Monitoring Hook

usePerformanceMonitor.tsTYPESCRIPT

import { useEffect, useRef } from 'react';

interface PerformanceMetrics {
  fps: number;
  renderTime: number;
  memoryUsage: number;
}

export function usePerformanceMonitor(
  onMetrics: (metrics: PerformanceMetrics) => void,
  interval: number = 1000
) {
  const frameCountRef = useRef(0);
  const lastTimeRef = useRef(performance.now());
  const rafIdRef = useRef<number>();

  useEffect(() => {
    const measureFrame = () => {
      frameCountRef.current++;
      rafIdRef.current = requestAnimationFrame(measureFrame);
    };

    const intervalId = setInterval(() => {
      const now = performance.now();
      const elapsed = now - lastTimeRef.current;
      const fps = Math.round((frameCountRef.current * 1000) / elapsed);
      
      // Get memory usage (if available)
      const memory = (performance as any).memory;
      const memoryUsage = memory
        ? Math.round(memory.usedJSHeapSize / 1048576) // Convert to MB
        : 0;
      
      // Get paint timing
      const paintEntries = performance.getEntriesByType('paint');
      const renderTime = paintEntries.length > 0
        ? Math.round(paintEntries[paintEntries.length - 1].startTime)
        : 0;

      onMetrics({ fps, renderTime, memoryUsage });

      // Reset counters
      frameCountRef.current = 0;
      lastTimeRef.current = now;
    }, interval);

    rafIdRef.current = requestAnimationFrame(measureFrame);

    return () => {
      clearInterval(intervalId);
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current);
      }
    };
  }, [interval, onMetrics]);
}

// Usage
function MonitoredGlassComponent() {
  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
  
  usePerformanceMonitor((m) => {
    setMetrics(m);
    
    // Optional: Log warning if FPS drops below 30
    // if (m.fps < 30) {
    //   console.warn('Low FPS detected:', m.fps);
    // }
  });

  return (
    <div>
      {metrics && (
        <div className="performance-overlay">
          <div>FPS: {metrics.fps}</div>
          <div>Memory: {metrics.memoryUsage}MB</div>
        </div>
      )}
      <AtomixGlass>Content</AtomixGlass>
    </div>
  );
}

82 lines2168 characters

Production Warning

Remove or disable performance monitoring in production builds as it can itself impact performance.

Conditional Rendering

Easy Win

Only render AtomixGlass components when they're visible in the viewport. This dramatically reduces GPU load.

LazyGlassComponent.tsxTYPESCRIPT

import { useInView } from 'react-intersection-observer';

function LazyGlassComponent() {
  const { ref, inView } = useInView({
    threshold: 0.1,
    triggerOnce: false,
  });
  
  return (
    <div ref={ref}>
      {inView ? (
  <AtomixGlass>
    Expensive content
  </AtomixGlass>
      ) : (
        <div className="placeholder">
          Loading...
        </div>
      )}
    </div>
  );
}

22 lines397 characters

Reduced Motion Support

Accessibility

Respect user preferences for reduced motion. This also improves performance on low-end devices.

AccessibleGlassComponent.tsxTYPESCRIPT

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

function AccessibleGlassComponent() {
  return (
<AtomixGlass
  animationDuration={prefersReducedMotion ? 0 : 300}
      elasticity={prefersReducedMotion ? 0 : 0.5}
      displacementScale={prefersReducedMotion ? 0 : 20}
>
  Content
    </AtomixGlass>
  );
}

15 lines355 characters

Debounce Interactions

Performance

Debounce mouse/touch events to reduce the frequency of expensive shader updates.

DebouncedGlassComponent.tsxTYPESCRIPT

import { useMemo } from 'react';
import { debounce } from 'lodash';

function DebouncedGlassComponent() {
  const handleMouseMove = useMemo(
    () => debounce((e: MouseEvent) => {
      // Handle mouse move
    }, 16), // ~60fps
    []
  );
  
  return (
    <AtomixGlass
      onMouseMove={handleMouseMove}
      elasticity={0.5}
    >
      Interactive content
    </AtomixGlass>
  );
}

20 lines389 characters

Memoization

React

Memoize AtomixGlass components to prevent unnecessary re-renders and shader recompilation.

MemoizedGlassCard.tsxTYPESCRIPT

import { memo } from 'react';

const MemoizedGlassCard = memo(({ title, content }) => {
  return (
    <AtomixGlass
      mode="shader"
      displacementScale={20}
      blurAmount={1}
      saturation={140}
      aberrationIntensity={2.5}
      elasticity={0.05}
    >
      <h3>{title}</h3>
      <p>{content}</p>
    </AtomixGlass>
  );
}, (prevProps, nextProps) => {
  // Custom comparison - only re-render if props change
  return (
    prevProps.title === nextProps.title &&
    prevProps.content === nextProps.content
  );
});

23 lines534 characters

Quick Wins Summary

Use intersection observer for lazy loading
Respect prefers-reduced-motion
Debounce interactive events
Memoize components with React.memo
Limit concurrent glass effects to 5-7
Use lower effect values on mobile

Getting Started

Documentation

Resources

Community

⚡ AtomixGlass Performance

Performance Optimization Guide

Hardware AccelerationCritical

✅ Do:

❌ Don't:

Effect Intensity OptimizationImportant

Shader Mode ConsiderationsHigh Impact

When to use shader mode:

When to use standard mode:

Adaptive Loading Strategy

Basic Device Detection

Advanced Device Detection Hook

Browser DevTools

Performance Tab

Rendering Tab

Memory Tab

Core Web Vitals

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

Interaction to Next Paint (INP)

Performance Monitoring Hook

Conditional Rendering

Reduced Motion Support

Debounce Interactions

Memoization

⚡ AtomixGlass Performance

Performance Optimization Guide

Hardware AccelerationCritical

✅ Do:

❌ Don't:

Effect Intensity OptimizationImportant

Shader Mode ConsiderationsHigh Impact

When to use shader mode:

When to use standard mode:

Adaptive Loading Strategy

Basic Device Detection

Advanced Device Detection Hook

Browser DevTools

Performance Tab

Rendering Tab

Memory Tab

Core Web Vitals

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

Interaction to Next Paint (INP)

Performance Monitoring Hook

Conditional Rendering

Reduced Motion Support

Debounce Interactions

Memoization