Mobile पर performance

Mobile performance priorities

Mobile users को अक्सर slow 3G या 4G, battery constraints, और older devices होते हैं। Priorities: 1. Fast First Paint। 2. Small CSS/JS bundles। 3. Optimized images। 4. Non-critical content को lazy load करें। 5. Render-blocking resources से बचें।

Core Web Vitals को test करें

DevTools में Lighthouse चलाएँ या online PageSpeed Insights का उपयोग करें। Focus करें: LCP (Largest Contentful Paint) < 2.5s, FID (First Input Delay) < 100ms, CLS (Cumulative Layout Shift) < 0.1।

Images को lazy load करना

Initial page load को improve करने के लिए below-the-fold images को defer करें।

<!-- 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>