लॉन्च में प्रतिक्रिया, प्रदर्शन और -500 मिलीसेकंड - संख्याओं में हमारे अनुकूलन का इतिहास

चलो कोरोनवायरस से थोड़ा विचलित हो जाते हैं, और कुछ तकनीकी के बारे में बात करते हैं। उदाहरण के लिए, हमने एक प्रतिक्रिया एप्लिकेशन के ठंड शुरू होने के समय को कैसे बेहतर बनाने की कोशिश की और इसके बारे में क्या आया। कौन बिल्ली के नीचे - कृपया प्रदर्शन और तेज़ वेब के विषय की परवाह करता है। अंत में इस तरह के अनुकूलन के लिए कीमत / आवश्यकता के बारे में एक छोटा सा सर्वेक्षण होगा।

पहला, थोड़ा संदर्भ। आमतौर पर हम विभिन्न बैंकिंग एप्लिकेशन बनाते हैं, जो ज्यादातर आम जनता के लिए सुलभ नहीं होते हैं। लेकिन हाल ही में एक छोटा सा चमत्कार हुआ और हमें एक सार्वजनिक अनुप्रयोग लिखने का काम दिया गया (आइए, कहते हैं, लगभग सार्वजनिक)। बुनियादी आवश्यकताओं में से, केवल मोबाइल-प्रथम, प्रतिक्रिया और IE का समर्थन नहीं किया जा सकता है (यहां तक ​​कि 11)। सुविधाओं में से - एक बार का ऐप (यानी, उपयोगकर्ता साल में एक बार से अधिक वहां नहीं जाता है) और डेटा के बिना, एप्लिकेशन बिल्कुल और पूरी तरह से बेकार है। यह इस हद तक बेकार है कि हम एक पाद भी नहीं दिखा सकते, क्योंकि हम यह नहीं जानते हैं कि इसे किस रंग में दिखाना है और क्या लिखना है।

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

!