Performance Considerations

Avoid SVGs (Inline or Complex Ones)

While SVGs are scalable, inline SVGs with many <path> or <g> elements can bloat the DOM and slow rendering on lower-end devices.

Instead:

• Use optimised PNGs/WebP for icons
• If you must use SVG, compress with tools
  

<!-- ❌ Heavy inline SVG -->
<svg> ... hundreds of paths ... </svg>

<!-- ✅ Optimized raster image -->
<img src="icon-optimized.webp" alt="icon" width="24" height="24">

Avoid Huge Images (Optimize for Device Size)

Large images impact loading speed and memory usage.

• Always compress images.
• Prefer WebP/AVIF over PNG/JPG.
• Use images sized to the container (not a 2000px image for a 200px display).

Avoid Auto-Scrolling Images

Carousels with auto-slide feel non-native and can drain battery/CPU.
Mobile users prefer manual swipe gestures.

Avoid Unnecessary Transitions & Animations

Heavy CSS transitions, box shadows, or opacity animations can cause jank (frame drops).

❌ Don’t:

.card {
  transition: all 1s ease-in-out;
  box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

✅ Do:

• Keep animations subtle and <300ms.
• Animate opacity & transform (GPU-friendly).
  

.card {
  transition: transform 0.25s ease, opacity 0.25s ease;
}