Optimizing frontend performance. Part 1. Critical Render Path

Hello. My name is Nick and I'm a front-end developer (liquid applause). In addition to writing code, I teach at the hh.ru School of Programmers.

The recordings of our lectures from the 2018-2019 academic year can be viewed on youtube

This year I had a lecture on optimizing frontend performance and decided to convert it to text format. The material turned out to be large, since the lecture was 3 hours long. Therefore, we got a text almanac.

Here is a presentation for those who are reluctant to read longread, but want to have a basic understanding of the content.

Longread can be used as a reference, so as not to read in one sitting. Here's a list of the topics we'll cover:

1. Why think about performance
2. FMP, TTI + read more in the report
3. Critical render path, DOM, CSSOM, RenderTree
4. Steps to improve first boot performance + more in the report

. , layout, repaint, composite . : https://habr.com/ru/company/hh/blog/517594/

?

0.1 — gap, , , \.

, , \\ , " ". , ( windows) - . . , , , ", , ".

. - ( ) , . : “ ", . .

0.1 ? , " ".

“30 seconds to mars — hurricane”. - 9:30. , .

1 — . - . 1 — . , .

, : , , , , , ( ), , . — .

1 — , , .

10 — , " " : 30 . 5 1/6 . 10 — .

— 1 10 . — , — , .. ? . . , , , , , 2007, . .

— , . , ..

:

• Walmart: 1 + 2%
• Amazon: 0,1 1%
• - ( , )

— :

, .

lighthouse hh.ru. “ ” ( mobile, desktop ):

:

1. ?
2. ?

" ".

: " ” — . “ ” . .

3 :

1. ( html )
2. ( ..)
3. SPA —

, . : FMP (First Meaningful Paint) TTI (Time to interactive), , :

: FMP == , (, ). TTI == . , , .

FMP\TTI , , ++. , .

— FMP. , " " , . C ( ) FMP , Critical render path. Critical render path — , , , , . — html, css ( - ), .

Critical render path , ?

TL&DR;

1. (DNS resolve, TCP ..);
2. HTML-;
3. HTML ;
4. DOM tree (document object model);
5. . CSS, JS ( );
6. CSS- ( JS-);
7. CSSOM tree;
8. JS-. layout, js reflow;
9. DOM tree ( );
10. Render tree;
11. (layout → paint → Composite).

:

:

Request

, DNS, IP, TCP , .. , .

Response

, , . , :

, , text/html, "navigate" ( ServiceWorker) html DOM.

, :

DOM

DOM

. :

. , .

html . CSS, JS , DOM, ( css preload + rel stylesheet). , JS, .

, , . , , . , head, , . DOM :

CSSOM

, meta title style ( link). DOM, CSS, , CSS. :

(head) CSSOM , . , .

CSSOM , RenderTree.

RenderTree

.

, . , head, . :

, . ? DevTools “DOM". , , DevTools DOM , RenderTree.

:

Elements. "" . , , , ..

RenderTree, — Layout ⇒ Paint ⇒ Composite . .

Layout ⇒ Paint ⇒ Composite , . .

, FMP TTI?

TL&DR;

1) :

1.1) . js, css. , .

1.2) , ( !)

1.3) third-party

1.4)

2) HTTP2.0 / HTTP3.0:

2.1)

2.2)

2.3) Server push

3) Brotli

4) , ETag + Service worker

:

. JS

2 : .

— , . . loadable-components react-imported-component vue .. , .

:

1. JS
2. .

. , , “” “”. .

:

1: → ,

, (index.html), 2 : Common.JS + applicant+index.JS, /applicant 4 . . HTTP2.0.

:

+: ,

+: ,

-: . HTTP2.0.

2: :

, , , . , . 1 ? Chrome.

+:

-: , HTTP2.0

-: , 1 . Service worker. .

, .

3: :

+: . JS + Common.JS

-: unused JS

-: , .

, .

- 1: , common:

. , . , 2 : Common.JS Index.JS . , Dropdown.JS Graph.JS .

, .

. TTI . JS, . ? JS .

. 30 JS , 30

JS , , - , .

, JS , , , .

, JS , .

. CSS

FMP, CSS.

react\vue\angular, , . , react- :

import './styles.css'

, JS- CSS, . common.css, applicant-page.css applicant+employer.css.

CSS , used-styles : "optimising css delivery". kashey :)

, hh.ru lighthouse:

, , .

. , . , .

, . CSS, . CSS, , popup-, JS , , rel=stylesheet JS , prefetch onload .

, FMP. , , .

third-party

hh . !

? -10 7 — third-party.

?

1. , FMP.
2. ( , popup- ) — "" . , requestIdleCallback. , .

FMP, TTI - . third-part .

TTI. , - , , , . :

1. ,
2. , ,
3. \ . .

HTTP2.0

HTTP2.0 , .

HTTP2.0

, HTTP2.0 .

, 6 , , . JS. , HTML:

:

- : . .

, TCP handshake . , - .

“ CSS \ JS ” — .

?

HTTP :

, . .

HTTP2.0

http2.0 . HTTP2.0 HPACK, . .

. , HPACK :

:

1. —
2. —

Huffman coding. .

HTTP2.0 Server push

server push . . : html , - , - css, - - JS.

(nginx):

location = /index.html {
    http2_push /style.css;
    http2_push /bundle.JS;
    http2_push /image.jpg;  
}

, :

. , -. - , nginx, http2_push .

gzip brotli. , :

hh.ru gzip . 736 657. 12%.

Brotli "" . , gzip. nginx , , . . gzip.

Brotli — ! - 3G , , lighthouse.

: lighthouse, . FMP, TTI.

, Service Worker.

, 3 :

1. last-modified expires
2. ETag
3. Cache-control

(last-modified expires) , ETag — , , 304 . , . Nginx :

location ~* ^.+\.(js|css)$ {    
        ...
    etag on;
}

Disk cache dev tools:

Cache-control — , . , cache-control: no-cache, html , . max-age, . , Cache-control:

cache-control: max-age=315360000, public

( ), . , , ..

, , v8

:

" " : cold\warm hot run. , hot run, . .

, hot run, ( ) 72 . — warm run, .

hot run, Service Worker. :

1. Service Worker;
2. Service worker fetch;
3. fetch , ;
4. .

hot run . , .

:

self.addEventListener('fetch', function(event) {
        //  ,   
    if (event.request.url.indexOf(staticHost) !== -1 && event.request.url.search(/\.(svg|png|jpeg|jpg|gif)/) === -1) {
        return event.respondWith(
                        //     
            caches.match(event.request).then(function(response) {
                if (response) {
                    return response;
                }
                                //     ,       ,   cacheStatic
                return fetch(event.request).then(function(response) {
                    caches.open(cacheStatic).then(function(cache) {
                        cache.add(event.request.url);
                    });

                    return response;
                });
            })
        );
    }
});

Critical render path ( , DNS, handshake, ..). , , . ( ..)/ : , , , .

, .

: , . , chrome 85 content-visibility, .