Skip to main content

Performance Optimization

Optimize your Firebase Hosting site for maximum speed and efficiency.

Asset Optimization​

Image Optimization​

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

JavaScript Optimization​

// Code splitting
const LazyComponent = lazy(() => import('./LazyComponent'));

// Tree shaking
import { specific } from 'large-library';

Caching Strategy​

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [{
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }]
      }
    ]
  }
}

Coming Soon​

This documentation is being expanded. For now, please refer to: