Reacción, rendimiento y -500 milisegundos en el lanzamiento: el historial de nuestras optimizaciones en números

Vamos a distraernos un poco del coronavirus y hablemos de algo técnico. Por ejemplo, sobre cómo tratamos de mejorar el tiempo de arranque en frío de una aplicación de reacción y lo que surgió de ella. A quién le importa el tema del rendimiento y la web rápida en su conjunto, por favor, bajo cat. Al final habrá una pequeña encuesta sobre el precio / necesidad de tales optimizaciones.

Primero, un pequeño contexto. Por lo general, hacemos diferentes aplicaciones bancarias, que en su mayoría no son accesibles para el público en general. Pero recientemente ocurrió un pequeño milagro y nos dieron la tarea de escribir una aplicación pública (digamos, casi pública). De los requisitos básicos, solo mobile-first, react e IE no pueden ser compatibles (incluso 11). De las características: una aplicación única (es decir, el usuario no va allí más de una vez al año) y sin datos, la aplicación es absolutamente inútil. Es inútil hasta tal punto que ni siquiera podemos mostrar un pie de página, porque no sabemos de qué color mostrarlo y qué escribir allí.

, . . Angular, , react, " ", " " . , , , " " Vue. , legacy .

. — react-router-dom, — mobx. — SCSS ( ) + css.modules . . , . "-" PureComponent React.memo, bundlesize + source-map-explorer. , .

, *. - mobile-first, client-facing, . . — . . . , , - UI . , , , + . Server Side Rendering. , , , .NET, . — .

* , ?

0,

- , , . , ( — 1000ms) Performance Audit devtools (online 4x CPU slowdown). :

• Firts Paint (FP): 618ms
• First Meaningful Paint (FMP): 2090ms

FP , (), FMP , UI ( ) - . , , 1000 ms (+) . , , . . — 4g* fast 3g **.

, 4g — 2270ms . , , , .

* 4g preset- - . — : download 4000kb/s, upload 3000kb/s, latency 20ms:
** *** , .
*** -, 3 , 10. , — , .

1, React.lazy

, . :

Index.html, React, . js — . , . , , . , .

, *, . — React.lazy, , . , lazy , , . .

:

( ). , , , . ? shared , App.tsx. . , .

* , .

2, Core LazyComponent

, shared module . shared core , , — , , - .

, , , React.Lazy. "" , . , . , . : , . :

export const LazyComponent = <T extends {}>(importStatement: () => Promise<{ default: ComponentType<T> }>) => {
    const component = React.lazy(importStatement);
    return { component, load: importStatement };
};

:

, , , 400ms fast3g - . . .

3, Spinner

, , . , ? "" ! , index.html , . index.html "" ? , . css, .

? , FP . FMP? :

// AppComponent.load();

. , .

, fast3g. , , , , - .

4,

. … ! , . / index.html . . . Fetch IE ( ), promise . . .

index.html :

(function(){const path = `${window.app.api}`; window.app.data = fetch(path); }());

. , promis- , , . — . , index.html .

:

. 300ms . , . , . , .

, API , . preconnect, API. Preconnect IE 11

.

5,

, ? , , . . , ?

LazyComponent ( , ), suspense, . :

FP ( ). FMP . ? — - , , . , JS , index.html . :

.

, css. - , , CSS . JS ( ). ? — . , CSS JS . , css , JS ( , ), CSS , JS .

6,

. — .

, , , . … , . ! , font-weight 100 .

, , :

• . . . - .
• ( 5-6 , HTTP v 1.x)
• . , .
• , , .

( , , JS).

. , . . , font-swap ( , ). , LightHouse .

. link/preload:

<link rel="preload" href="best_font_ever.otf" as="font" type="font/otf" crossorigin="anonymus">

, fast3g (, ). , . , . , UI - .

, :

500-850ms . , "" .

7,

defer (- page speed LightHouse ), , , .

, (0.5 1 - index.html) ( 480ms 1700ms), 500-800ms . , .

():

, .

, :

2. ( )
3. Brotli, gzip.
4. HTTP2.0.

Jeff Cooper .

. ? . . // ( , ). - Google latency 100-400ms, 0.2%-0.6% ( ). CloudFlare , 2.4ms 3.3ms 0.4%, . . , , .

!