Как определяешь что сайт весит много?

Как определить что сайт весит много (Performance Analysis)

Основные метрики производительности

Есть несколько способов определить, что сайт "весит много" и медленно загружается. Нужно смотреть на метрики производительности, а не только на размер файлов.

1. Core Web Vitals — главные метрики Google

Google определяет качество сайта через три метрики:

LCP (Largest Contentful Paint) — время загрузки самого большого видимого элемента:

• Хорошо: < 2.5 сек
• Нужна оптимизация: 2.5 - 4 сек
• Плохо: > 4 сек

// Измерение LCP
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
});

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

FID (First Input Delay) — время отклика на первое взаимодействие пользователя:

• Хорошо: < 100 мс
• Нужна оптимизация: 100 - 300 мс
• Плохо: > 300 мс

// Измерение FID
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log('FID:', entry.processingDuration);
  });
});

observer.observe({ entryTypes: ['first-input'] });

CLS (Cumulative Layout Shift) — нежелательный сдвиг элементов на странице:

• Хорошо: < 0.1
• Нужна оптимизация: 0.1 - 0.25
• Плохо: > 0.25

// Измерение CLS
let clsValue = 0;
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  }
});

observer.observe({ entryTypes: ['layout-shift'] });

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

DevTools Performance вкладка (F12):

1. Откроешь DevTools -> Performance
2. Нажимаешь запись (красный кружок)
3. Перезагружаешь страницу
4. Остаешь запись и анализируешь:
   • FCP (First Contentful Paint) — когда появился первый контент
   • LCP — когда загрузился основной контент
   • Time to Interactive (TTI) — когда страница реагирует на клики

// Программно получить Performance данные
const perfData = performance.getEntriesByType('navigation')[0];
console.log('DNS время:', perfData.domainLookupEnd - perfData.domainLookupStart);
console.log('TCP время:', perfData.connectEnd - perfData.connectStart);
console.log('Request время:', perfData.responseStart - perfData.requestStart);
console.log('Response время:', perfData.responseEnd - perfData.responseStart);
console.log('DOM Parse время:', perfData.domInteractive - perfData.domLoading);

Google PageSpeed Insights:

1. Идешь на https://pagespeed.web.dev/
2. Вводишь URL сайта
3. Получаешь оценку от 0 до 100
4. Видишь какие метрики плохие
5. Получаешь рекомендации по улучшению

Lighthouse (встроенный в Chrome DevTools):

1. DevTools -> Lighthouse
2. Выбираешь что проверять (Performance, Accessibility, SEO)
3. Запускаешь анализ
4. Получаешь оценку и рекомендации

3. Размер бандла и ресурсов

Проверка размера JavaScript:

# Проверить размер бандла
webpack-bundle-analyzer
ls -lah dist/

# Размер файла после gzip
gzip -c file.js | wc -c

DevTools Network вкладка:

1. Открываешь DevTools -> Network
2. Перезагружаешь страницу
3. Видишь все запросы с размерами
4. Сортируешь по Size чтобы найти больших "грузчиков"
5. Смотришь какие файлы долго загружаются

// Программно проверить размер ресурсов
const entries = performance.getEntriesByType('resource');
const totalSize = entries.reduce((sum, entry) => {
  return sum + (entry.transferSize || 0);
}, 0);

console.log('Общий размер ресурсов:', (totalSize / 1024 / 1024).toFixed(2), 'MB');

entries.forEach(entry => {
  console.log(
    entry.name,
    (entry.transferSize / 1024).toFixed(2),
    'KB',
    entry.duration.toFixed(0),
    'ms'
  );
});

4. Бенчмарки и нормы

Хороший сайт должен иметь:

• Первая загрузка: < 3 сек
• Повторная загрузка: < 1 сек
• JavaScript бандл: < 150 KB (gzipped) на мобильных
• CSS бандл: < 50 KB (gzipped)
• Изображения: < 1-2 MB на странице
• Всего ресурсов: < 5-10 MB на странице

// Проверка пороговых значений
const navTiming = performance.getEntriesByType('navigation')[0];
const loadTime = navTiming.loadEventEnd - navTiming.fetchStart;

if (loadTime > 3000) {
  console.warn('Сайт загружается медленнее 3 секунд!');
} else if (loadTime > 1000) {
  console.warn('Сайт загружается медленнее 1 секунды');
} else {
  console.log('Хорошая скорость загрузки');
}

5. Анализ JavaScript производительности

Большие пакеты:

# Найти что занимает больше всего в бандле
npm install --save-dev @next/bundle-analyzer
# или
npm install --save-dev webpack-bundle-analyzer

Медленные скрипты:

// Найти какие скрипты работают долго
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.duration > 50) {
      console.warn('Медленный скрипт:', entry.name, entry.duration + 'ms');
    }
  });
});

observer.observe({ entryTypes: ['measure', 'navigation'] });

6. Инструменты командной строки

WebPageTest:

# Онлайн анализ https://www.webpagetest.org/
# Показывает видео загрузки, водопад запросов, детальный анализ

GTmetrix:

# https://gtmetrix.com/
# Анализирует Lighthouse и PageSpeed

SpeedCurve:

# Мониторинг производительности сайта в реальном времени

7. Практический чеклист определения "тяжелого" сайта

function analyzeSiteWeight() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const resources = performance.getEntriesByType('resource');
  
  const issues = [];
  
  // Проверка времени загрузки
  const loadTime = perfData.loadEventEnd - perfData.fetchStart;
  if (loadTime > 3000) {
    issues.push(`Медленная загрузка: ${loadTime}ms (> 3000ms)`);
  }
  
  // Проверка размера ресурсов
  const totalSize = resources.reduce((sum, r) => sum + (r.transferSize || 0), 0);
  if (totalSize > 5 * 1024 * 1024) {
    issues.push(`Большой размер: ${(totalSize / 1024 / 1024).toFixed(2)}MB (> 5MB)`);
  }
  
  // Проверка количества запросов
  if (resources.length > 100) {
    issues.push(`Много запросов: ${resources.length} (> 100)`);
  }
  
  // Проверка JavaScript
  const jsResources = resources.filter(r => r.name.includes('.js'));
  const jsSize = jsResources.reduce((sum, r) => sum + (r.transferSize || 0), 0);
  if (jsSize > 300 * 1024) {
    issues.push(`Большой JS: ${(jsSize / 1024).toFixed(0)}KB (> 300KB)`);
  }
  
  return issues;
}

const problems = analyzeSiteWeight();
if (problems.length > 0) {
  console.log('Проблемы с производительностью:');
  problems.forEach(p => console.log('- ' + p));
} else {
  console.log('Производительность в норме');
}

8. Оптимизация после анализа

Когда выявил проблемы:

1. Уменьшить JavaScript:

   • Code splitting
   • Tree shaking
   • Удалить неиспользуемые библиотеки
   • Минификация

2. Оптимизировать изображения:

   • WebP формат
   • Responsive images
   • Lazy loading
   • Compression

3. Улучшить CSS:

   • Критичный CSS inlined
   • Удалить unused CSS
   • CSSO/PostCSS оптимизация

4. Кеширование:

   • Browser cache headers
   • CDN
   • Service Worker

Заключение

Сайт "весит много" если:

• Загружается дольше 3 секунд
• Имеет Core Web Vitals оценку < 50
• JavaScript > 300KB (gzipped)
• Total > 5-10 MB на странице
• Много DOM элементов или долгие скрипты

Анализируй с помощью DevTools, Lighthouse, PageSpeed Insights и мониторь метрики в продакшене.