Как оптимизировали приложение на последнем месте работы?

Реальный пример оптимизации фронтенд приложения

На последнем проекте мы столкнулись с проблемой производительности: время загрузки страницы составляло 4.5 секунды, а интерактивность (TTI) была около 6 секунд. Это пагубно влияло на пользовательский опыт и конверсию.

Анализ и диагностика

Сначала провел детальный аудит с помощью инструментов:

// Использовали Performance API для измерения
const observer = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log(`${entry.name}: ${entry.duration}ms`);
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input-delay'] });

Выявили три основные узкие места:

1. Bundle размер был 850KB (после gzip)
2. Синхронная загрузка тяжелых зависимостей
3. Неоптимизированные изображения (4MB+ на страницу)

Решение 1: Code Splitting и ленивая загрузка

Разбили код на отдельные бандлы для каждого маршрута:

// До: все в одном бандле
import HeavyDataVisualization from './components/HeavyDataVisualization';

// После: динамическая загрузка
const HeavyDataVisualization = dynamic(
  () => import('./components/HeavyDataVisualization'),
  { ssr: false, loading: () => <Skeleton /> }
);

Результат: основной бандл уменьшился с 850KB до 320KB.

Решение 2: Оптимизация изображений

Единственный способ обработать изображения - это использовать современные форматы и правильные размеры:

// До: прямая загрузка большого файла
<img src="/images/hero.jpg" alt="Hero" />

// После: Next.js Image оптимизация
import Image from 'next/image';

<Image
  src="/images/hero.jpg"
  alt="Hero"
  width={1200}
  height={400}
  priority
  quality={75}
  sizes="(max-width: 768px) 100vw, 1200px"
/>

Использовали WebP формат с fallback на JPG. Размер снизился с 4MB до 0.6MB.

Решение 3: Мемоизация компонентов

Идентифицировали компоненты, которые перерендерились без необходимости:

// Использовали React.memo для чистых компонентов
const UserCard = React.memo(({ user }) => {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
});

// В списках использовали useMemo для stable references
const userIds = useMemo(() => users.map(u => u.id), [users]);

Это снизило количество ненужных перерендеров на 40%.

Решение 4: Виртуализация длинных списков

Для больших наборов данных внедрили виртуальный скролл:

import { FixedSizeList } from 'react-window';

function LargeUserList({ users }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={users.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>
          <UserCard user={users[index]} />
        </div>
      )}
    </FixedSizeList>
  );
}

Это позволило отобразить 10,000+ элементов без лагов.

Решение 5: Кэширование API запросов

Имплементировали стратегию кэширования:

const apiCache = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 минут

async function fetchWithCache(url) {
  const cached = apiCache.get(url);
  
  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }
  
  const data = await fetch(url).then(r => r.json());
  apiCache.set(url, { data, timestamp: Date.now() });
  return data;
}

Результаты оптимизации

• Время загрузки: 4.5s -> 1.8s (60% улучшение)
• Time to Interactive: 6s -> 2.3s
• Lighthouse Performance: 45 -> 92
• Bundle размер: 850KB -> 320KB
• Пользовательская нагрузка на сервер: уменьшена на 35%

Ключевые уроки

1. Измеряй перед оптимизацией - используй реальные метрики
2. Приоритизируй по влиянию - фокусируйся на том, что дает максимальный результат
3. Мониторь в production - оптимизация в dev окружении может отличаться
4. Комбинируй подходы - один способ редко решает все проблемы

После этого проекта я регулярно использую Lighthouse, WebPageTest и Chrome DevTools для профилирования приложений.