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

Сравнительный анализ фреймворков 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