تفاعل وأداء و -500 مللي ثانية في البداية - تاريخ التحسينات بالأرقام

دعونا نتطرق قليلا من الفيروس التاجي ونتحدث عن شيء تقني. على سبيل المثال ، حول كيف حاولنا تحسين وقت البدء البارد لتطبيق رد فعل واحد وما جاء منه. من يهتم بموضوع الأداء والويب السريع ككل - من فضلك ، تحت القط. في النهاية سيكون هناك مسح صغير حول السعر / الحاجة لمثل هذه التحسينات.

أولاً ، سياق صغير. عادة نقوم بعمل تطبيقات مصرفية مختلفة ، والتي غالبا ما تكون غير متاحة لعامة الناس. لكن في الآونة الأخيرة حدثت معجزة صغيرة وكلفنا بمهمة كتابة طلب عام (دعنا نقول ، عامة تقريبا). من المتطلبات الأساسية ، لا يمكن دعم سوى الجوال أولاً ، والتفاعل ، و IE (حتى 11). من بين الميزات - تطبيق لمرة واحدة (أي أن المستخدم لا يذهب إلى هناك أكثر من مرة واحدة في السنة) وبدون بيانات ، يكون التطبيق عديم الفائدة تمامًا. من غير المجدي إلى هذا الحد أننا لا نستطيع حتى أن نظهر تذييلًا ، لأننا لا نعرف بأي لون نظهره وما نكتبه على الإطلاق.

بالحديث عن رد فعل. مع اختيار الإطار ، اتضح أنه مضحك. اقترحت Angular ، حيث كان لدينا بالفعل مكتبة مكونة مكتوبة جزئيًا ، لكن العميل طلب رد الفعل ، لأن "الدورة العامة قد اتخذت من أجل رد الفعل" ، "سنكون جميعًا هناك" وبشكل عام. ولكن بعد البداية ، اتضح أن رد الفعل ، فجأة ، "عفا عليه الزمن للغاية" والآن يتم أخذ المسار العام في Vue. ضحكنا ، ودعونا مشروع الإرث الحالي واستمرنا في الكتابة.

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

!