10 هک مدرن عملکرد وب که سرعت سایت ما را تا 300٪ افزایش داد 🚀

 src="hero-image.jpg" alt="Product showcase" />

  
    srcset="hero-image.webp" 
    type="image/webp"
  />
   
    src="hero-image.jpg"
    alt="Product showcase"
    loading="lazy"
    width="800"
    height="600"
  />

  
  
    /* Only styles needed for above-the-fold content */
    .hero { ... }
    .nav { ... }
  

  
   
    rel="preload" 
    href="styles.css" 
    as="style" 
    onload="this.onload=null;this.rel="stylesheet""
  />

"jquery.min.js">
"massive-slider.js">
"analytics.js">

"module">
  // Dynamic import when needed
  const showSlider = async () => {
    const { createSlider } = await import('./tiny-slider.js');
    createSlider();
  }

  // Load on user interaction
  document.querySelector('.slider-btn')
    .addEventListener('click', showSlider);

// Service Worker Setup
const CACHE_VERSION = 'v1.2.0';

const CACHED_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
  '/fonts/roboto.woff2'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then(cache => cache.addAll(CACHED_ASSETS))
  );
});

 
  rel="preload" 
  href="/fonts/roboto.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
/>


  /* Font loading strategy */
  @font-face {
    font-family: 'Roboto';
    font-display: swap;
    src: url('/fonts/roboto.woff2') format('woff2');
  }

// React example
const ProductGallery = React.lazy(() => 
  import('./ProductGallery')
);

function Shop() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductGallery />
    </Suspense>
  );
}

// Prefetch on hover
const prefetchOnHover = (event) => {
  const link = event.target.closest('a');
  if (link && !prefetched.has(link.href)) {
    const prefetcher = document.createElement('link');
    prefetcher.rel = 'prefetch';
    prefetcher.href = link.href;
    document.head.appendChild(prefetcher);
    prefetched.add(link.href);
  }
}

document.addEventListener('mouseover', prefetchOnHover);

// Implementing field selection
const fetchProduct = async (id) => {
  const fields = ['name', 'price', 'thumbnail'];
  const response = await fetch(
    `/api/products/${id}?fields=${fields.join(',')}`
  );
  return response.json();
}

// Before: Everything in Redux
const store = createStore(rootReducer);

// After: Only what's needed
function ProductPage() {
  const [product, setProduct] = useState(null);
  const globalCart = useSelector(state => state.cart);

  // Local state for UI
  const [isLoading, setIsLoading] = useState(false);
  const [selectedVariant, setSelectedVariant] = useState(null);

  // ...
}

// webpack.config.js
module.exports = {
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
}