Исследование производительности веб-приложений

Сравнительный анализ фреймворков React, Angular, Vue и Svelte

Метрики производительности

FCP First Contentful Paint
LCP Largest Contentful Paint
TTI Time To Interactive
TBT Total Blocking Time
CLS Cumulative Layout Shift
App Size Вес приложения
Performance Score Интегральная оценка

Ссылки на приложения

Landing App
Weather App
Todo App
Shop App

Weather App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.4s 2.9s 3.2s 180ms 0.03 240kb 82
● Angular 1.7s 3.4s 3.9s 230ms 0.04 310kb 75
● Vue 1.3s 2.6s 2.9s 150ms 0.02 210kb 88
● Svelte 1.1s 2.2s 2.5s 120ms 0.01 160kb 93

Todo App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.2s 2.0s 2.4s 120ms 0.01 190kb 90
● Angular 1.4s 2.5s 2.9s 160ms 0.02 260kb 84
● Vue 1.1s 1.9s 2.2s 100ms 0.01 170kb 92
● Svelte 0.9s 1.6s 1.8s 80ms 0.01 130kb 97

Shop App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.9s 3.7s 4.2s 280ms 0.04 380kb 76
● Angular 2.2s 4.2s 4.8s 320ms 0.05 450kb 70
● Vue 1.7s 3.1s 3.6s 240ms 0.03 340kb 82
● Svelte 1.5s 2.7s 3.0s 190ms 0.02 250kb 89

Landing App

Framework FCP LCP TTI TBT CLS Size Score
● React 1.0s 1.8s 2.1s 90ms 0.01 150kb 92
● Angular 1.3s 2.2s 2.6s 120ms 0.02 220kb 88
● Vue 0.9s 1.6s 1.9s 80ms 0.01 140kb 94
● Svelte 0.7s 1.3s 1.5s 60ms 0.01 100kb 98

LCP

Фреймворк Min Max Mean Median SD
● React 1274ms 1687ms 1453ms 1437ms 98ms
● Angular 1623ms 2134ms 1856ms 1842ms 127ms
● Vue 1087ms 1423ms 1234ms 1221ms 86ms
● Svelte 834ms 1089ms 951ms 943ms 67ms

TTI

Фреймворк Min Max Mean Median SD
● React 1823ms 2467ms 2112ms 2087ms 156ms
● Angular 2534ms 3289ms 2873ms 2847ms 198ms
● Vue 1456ms 1978ms 1689ms 1671ms 134ms
● Svelte 987ms 1312ms 1134ms 1121ms 89ms

Размер приложения

Фреймворк Исходный Минифиц. Gzip Brotli
● React 842.3kb 287.4kb 91.2kb 79.8kb
● Angular 1247.6kb 421.8kb 134.7kb 117.3kb
● Vue 623.5kb 213.6kb 68.4kb 59.7kb
● Svelte 198.7kb 67.3kb 21.6kb 18.9kb

Выводы

Svelte

Показывает наилучшую производительность и минимальный вес приложения.

Vue

Демонстрирует лучший баланс между производительностью и удобством разработки.

React

Хорошо подходит для крупных проектов.

Angular

Удобен для enterprise-разработки, несмотря на больший вес.

Рекомендации

Тип приложения Рекомендуемый фреймворк
Лендинги ● Svelte
Простой SPA ● Svelte / ● Vue
Средние SPA ● Vue
Крупные SPA ● React
Enterprise-приложения ● Angular