Какие знаешь способы оптимизации загрузки страницы?

Оптимизация загрузки страницы

Оптимизация производительности — критичный навык. Расскажу о проверенных способах, которые реально работают.

1. Code Splitting

Разделение кода на чанки для ленивой загрузки:

// Next.js
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./Heavy"), {
  loading: () => <Skeleton />,
  ssr: false
});

// React.lazy
const OtherComponent = React.lazy(() => import("./OtherComponent"));

Результат: Initial JS bundle уменьшается на 40-60%.

2. Image Optimization

Изображения часто виноваты в медленной загрузке:

import Image from "next/image";
<Image 
  src="/photo.jpg" 
  width={800} 
  height={600} 
  quality={75}
  placeholder="blur"
  loading="lazy"
/>

• WebP формат вместо JPG/PNG (30-35% экономии)
• Responsive images с srcset
• Lazy loading по умолчанию
• Blur placeholder для улучшения UX

3. Browser Caching

Правильные Cache-Control заголовки:

Cache-Control: max-age=3600, public
Cache-Control: max-age=31536000, immutable
Cache-Control: max-age=0, must-revalidate

4. Minification и Compression

Gzip (все браузеры) или Brotli (лучше, 60-70% экономии):

Content-Encoding: gzip
Content-Encoding: br

5. Critical CSS

Выделение критичных стилей для above-the-fold:

<style>
  .hero { display: flex; background: blue; }
</style>
<link rel="preload" href="style.css" as="style">

6. Performance Monitoring

Web Vitals для измерения:

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);  // Largest Contentful Paint
getFID(console.log);  // First Input Delay
getCLS(console.log);  // Cumulative Layout Shift

Цели: LCP < 2.5s, FID < 100ms, CLS < 0.1

7. Resource Hints

<link rel="dns-prefetch" href="//api.example.com">
<link rel="preconnect" href="//cdn.example.com">
<link rel="prefetch" href="/next-page.js">
<link rel="preload" href="/font.woff2" as="font" crossorigin>

8. Оптимизация бандла

• Tree-shaking: используй именованные импорты
• Bundle Analyzer для анализа размера
• Динамический импорт тяжелых библиотек

9. CDN и Static Hosting

• Edge caching для максимальной скорости
• Vercel, Netlify, Cloudflare Pages уже оптимизированы

10. Database Query Optimization

ISR (Incremental Static Regeneration) в Next.js:

export const revalidate = 3600;

Результат

• 50-70% уменьшение JS
• 60-80% уменьшение изображений
• 2-3x улучшение LCP

Начни с анализа в Chrome DevTools Lighthouse и WebPageTest, фокусируйся на узких местах.