Как найти из-за чего сайт медленно работает?

Диагностика медленной работы сайта

Медленный сайт - это серьезная проблема, влияющая на UX и конверсию. Нужен систематический подход к поиску причин.

Инструменты для анализа

1. Chrome DevTools Performance

Как использовать:

// 1. Открыть DevTools (F12)
// 2. Перейти в Performance tab
// 3. Нажать Record (Ctrl+Shift+E)
// 4. Взаимодействовать с сайтом
// 5. Нажать Stop
// 6. Анализировать результаты

DevTools покажет:

• Frame rate - падения ниже 60 fps
• Long tasks - задачи дольше 50ms
• JavaScript execution - сколько времени на JS
• Rendering - время перерисовки
• Layout - пересчеты макета

2. Network Tab

// Анализируем сетевые запросы
// 1. DevTools -> Network
// 2. Перезагрузить страницу
// 3. Посмотреть:
//    - Размер файлов
//    - Время загрузки
//    - Неиспользуемые ресурсы

Ищем:

• Большие бандлы (JS, CSS, изображения)
• Медленные API запросы (backend)
• Неиспользуемый код (dead code)

3. Lighthouse Report

// Chrome DevTools -> Lighthouse
// Или https://pagespeed.web.dev/

// Анализирует:
// - Performance
// - Accessibility
// - Best Practices
// - SEO
// - PWA

Дает конкретные рекомендации:

• Минимизация JS
• Оптимизация изображений
• Code splitting
• Lazy loading

4. Web Vitals

// Критические метрики производительности
// 1. LCP (Largest Contentful Paint) - когда основной контент видимо
// 2. FID (First Input Delay) - отклик на первое взаимодействие
// 3. CLS (Cumulative Layout Shift) - неожиданные сдвиги макета

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getLCP(console.log); // > 2.5s - плохо
getFID(console.log); // > 100ms - плохо
getCLS(console.log); // > 0.1 - плохо

Способы диагностики по слоям

Проблема: Медленная загрузка первой страницы

// Причины:
// 1. Большой бандл JavaScript
// 2. Медленные API запросы на старте
// 3. Тяжелые изображения
// 4. Отсутствие кэширования

// Решения:
const size = await fetch(url).then(r => r.blob()).then(b => b.size);
console.log(`Размер: ${size / 1024 / 1024}MB`);

// Проверяем размер бандла
import { build } from 'next/build';
// npm run build -> посмотреть размеры в консоли

Проблема: Медленно выполняется JavaScript

// Профилируем код
console.time('expensiveOperation');
const result = heavyComputation();
console.timeEnd('expensiveOperation');
// Output: expensiveOperation: 245.3ms

// Или используем Performance API
const start = performance.now();
// код
const duration = performance.now() - start;
console.log(`Выполнено за ${duration}ms`);

Проблема: Медленный рендер React компонента

// 1. Использовать React Profiler
import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
}

<Profiler id="QuestionsList" onRender={onRenderCallback}>
  <QuestionsList />
</Profiler>

// 2. Проверить ненужные перерендеры
// DevTools -> React -> Highlight updates
// Если компонент светится часто - проблема в перерендерах

// 3. Оптимизировать с React.memo
import { memo } from 'react';

const QuestionCard = memo(({ question }) => (
  <div>{question.title}</div>
));

Проблема: Медленный API

// 1. Проверить время ответа бэкенда
const start = Date.now();
const response = await fetch('/api/v1/questions');
const duration = Date.now() - start;
console.log(`API ответил за ${duration}ms`);

// 2. Если > 1000ms - проблема на бэкенде
// 3. Проверить размер ответа
const data = await response.json();
console.log(`Данные: ${JSON.stringify(data).length} bytes`);

// 4. Добавить пагинацию
await fetch('/api/v1/questions?limit=20&page=1');

Чеклист для быстрой диагностики

1. Мобильная vs Десктопная скорость

• DevTools -> Device Emulation
• Мобильные часто медленнее из-за меньшей мощности

2. First Paint vs Paint

navigation = performance.getEntriesByType('navigation')[0];
console.log('First Paint:', navigation.responseEnd);
console.log('DOM Content Loaded:', navigation.domContentLoadedEventEnd);
console.log('Load Complete:', navigation.loadEventEnd);

3. JavaScript Evaluation

• DevTools -> Performance -> Main thread
• Найти длинные желтые блоки (JS execution)

4. Rendering Performance

// Профилируем рендер
requestAnimationFrame(() => {
  const startTime = performance.now();
  // trigger layout/paint
  document.body.offsetHeight; // Force layout
  const duration = performance.now() - startTime;
  console.log(`Рендер занял ${duration}ms`);
});

5. Memory Issues

• DevTools -> Memory
• Если heap размер растет без остановки - утечка памяти
• Проверить: неудаленные event listeners, circular references

Типичные проблемы и решения

Автоматизация диагностики

// Можно использовать lighthouse в CI
import lighthouse from 'lighthouse';

const options = {
  logLevel: 'info',
  output: 'json',
  onlyCategories: ['performance']
};

const runnerResult = await lighthouse('https://example.com', options);
const score = runnerResult.lhr.categories.performance.score * 100;
console.log(`Performance score: ${score}`);

Результат: Систематический анализ с DevTools, Network и Lighthouse позволяет быстро найти узкие места и приоритизировать оптимизацию.