Reagir, desempenho e -500 milissegundos no lançamento - o histórico de nossas otimizações em números

Vamos nos distrair um pouco com o coronavírus e falar sobre algo técnico. Por exemplo, sobre como tentamos melhorar o tempo de inicialização a frio de um aplicativo de reação e o que resultou dele. Quem se importa com o tópico desempenho e a web rápida como um todo - por favor, abaixo do gato. No final, haverá uma pequena pesquisa sobre o preço / necessidade de tais otimizações.

Primeiro, um pouco de contexto. Normalmente, fazemos aplicações bancárias diferentes, que geralmente não são acessíveis ao público em geral. Recentemente, porém, aconteceu um pequeno milagre e foi-nos dada a tarefa de escrever um aplicativo público (digamos, quase público). Dos requisitos básicos, apenas o mobile-first, react e IE não podem ser suportados (até 11). Entre os recursos - um aplicativo único (ou seja, o usuário não vai mais lá uma vez por ano) e sem dados, o aplicativo é absolutamente e completamente inútil. É inútil a tal ponto que não podemos sequer mostrar um rodapé, porque não sabemos em que cor mostrá-lo e o que escrever nele.

, . . 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%, . . , , .

!