# Performance on mobile — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/performance-mobile

> Optimize for slow networks and low-end devices: compress images, minimize CSS/JS, and prioritize critical content.

## Mobile performance priorities

Mobile users often have slow 3G or 4G, battery constraints, and older devices. Priorities: 1. Fast First Paint. 2. Small CSS/JS bundles. 3. Optimized images. 4. Lazy load non-critical content. 5. Avoid render-blocking resources.

## Test Core Web Vitals

Run Lighthouse in DevTools or use PageSpeed Insights online. Focus on: LCP (Largest Contentful Paint) < 2.5s, FID (First Input Delay) < 100ms, CLS (Cumulative Layout Shift) < 0.1.

## Lazy loading images

Defer below-the-fold images to improve initial page load.

```html
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

<!-- Intersection Observer for more control -->
<img data-src="image.jpg" alt="Will load when visible">

<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
</script>
```