??????????? ???????? ??????? ?? ????????? ???????

? ?????????? ?????? ?????????? ???????????? ? ??????????? ??????????????? ?????????? ??????????????? ??????? ???????? ???????? ????????????????? ? ????????? ????????? ???????. ???????????? ???????? ?? ?????? ????????????? ??????????? — ??? ??????????? ???????????? ?????? ?? ????? ?????. ???? ????????? ???????? ? ???? ??????? ????????? ????????????? ???? ? ??????? ???????, ?????????? ????????? ? ?????????????? ?????. ?????? ??????????, ??? 53% ????????? ????????????? ?????? ???-??????, ???? ???????? ???????? ????? ???? ??????, ? ????? ???????????? ??? ??????????? ???????? ???????? ??????????? ?? 7%. ??????????? ????? ????????? ??????????? ???????????? ????????????????? ???????????, ????? ?? ??????????? ????? ? ??????? ? ?????? ? ????????????.

?????????? ???????? ? ????????? ???????????

???????????? ????????? ??????? ??????????? ? ??????? ?? ???????????? ??????????????? ?????????. ??, ??? ?????????? ?????? ??? ?????????, ???????? ????????????? ??? ??? ??? ??? ??????????? ????????????? ? ??????????? ?? ????????? ? ?????????. ??????? ???????? ??????????, ????????? ??????????? ???????????? ???????? ??? ????????????. ??????????????? ?????? ???????? ????????????? ?? ????????? ???????????? ??????: ??????? ???????? ?????????????? ?????? ??????????, ???????? ? ???????? ?????? ??????????? ????? ????????????, ? ????????? ??????????? ?????????????? ??????? ?????????.

?????? ?????????? ????????? ??????????????? ? ?????? ??????? ?????? ?????????. ????? ???????????? ??????? ???????? ? ??????????? — ?????????? ???????? ????????, ?????? ???????? ???????????? ??? ?????? ?? ????????-????? — ???????????? ?????? ????? ??????. ????????, ????????????? ??????? ??? ????? ???????? ???????????? ???????? ??????? ?????????????? ? ????????? ?????? ?????? ????????? ??????????????. ??????????? ????????? ???????????? ????? ?????????? ?????????: ??????????? ????????? ???????????? ?????, ? ??????? ??????? ???????? ???.

??????? ??????????????? ? ?????????

?????????? ?????????? ???????????? ????????? ??????, ?? ???????? ???????????? ???????? ??????????? ??????????? ????????. ?????? ?? 100 ??????????? ?????????? ??? ?????????? — ???????????? ?? ?????????????? ?????????? ????? ?????? ? ????????. ??? ??????? ????? ??? ???????? ???????????? ???????? ??????? ??????, ????? ????????? ??? ?????????????? ???????. ??????????? ?? 100 ?? 300 ??????????? ??? ????????, ?? ??? ??? ????????? ? ?? ?????????? ???????????.

?????? ?? 300 ?? 1000 ??????????? ?????????? ????? ???????? ??????, ??? ???????????? ??????? ??????? ??????????? ? ???????? ???????? ??????????? ??????? ????????????? ??? ???????????. ??? ????????? ????? ?????? ????????? ?????????? ??????? ???????????, ? ???????????? ???????? ???????????? ?? ??? ???? ????????. ??????????????? ?????? ???????? ??????? ???????? ??????? ????? ????????????? — ????? ????? ??? ???? ???????? ????????????? ???????????? ??????, ???? ????? ??????? ?????????.

????????? ????????? ??????? ????????????????? ?????

??????? ?????????? ????? ??????????? ?????? ??? ????????? ?????????????? ???????????. First Contentful Paint (FCP) ???????? ???? ?? ???????????? ??????? ??????????? ?????????? ?? ??????? — ???????? ??????, ????? ???????????? ??????????? ?????????????, ??? ??????? ?????????. ??????? ???????? ?????? ????????? ???, ????? ????????? ???????????? ????????????? ? ??????? ? ??????. Time to Interactive (TTI) ??????????, ????? ????????? ????????? ????????? ? ???????? ??????????? ???????? ?? ???????????????? ????.

Largest Contentful Paint (LCP) ????????? ???????? ????????? ???????? ???-???????? — ????, ???? ???? ???????????? ??????. ??????? ???????? ?? ?????? ????????????? ???????????? ???????????? ?????? ? ?????????? ??????????? ??????? ???????????, ??????? ?????????? ? ????? ? ????????? ????????. First Input Delay (FID) ???????? ???????? ????? ?????? ????????? ???????????? ? ??????? ????????. ?????? ?? ???? ??????????? ??????? ???????????? ????????: LCP ?????? ???? ?? 2.5 ??????, FID ?? ????????? 100 ???????????, ? CLS ?????????? ???? 0.1.

??? ???????? ?????? ?? ??????????? ?????? ???????

???????? ??????? ????????? ??????????? ??????????? ???????????? ? ???????? ?? ???????? ??????. ????????????? ?????????? ??????????? ??????????? ?????? ? ??????? — ???????????? ???????????? ???? ???????????? ? ?????????. ??????? ???????? ????????? ?????????? ??????????? ???, ??????? ???????????? ?? ?????????? ????? ? ?????. ??????????????, ???????????? ?????????? ??????????? ???????????????????, ???????? ? ???? ??????. ??????? ?????? ??????????? ?????? ??????????? ? ????????? ? ????????? ?? ??????????? ????????????? ? ??? ??????????.

??????? ???????????? ????????? ????????, ??? ????????????? ?????????? ???????????? ???????? ?????????? ????? ??????????? ??????????????. ???? ???? ????? ????????? ???????? ???????????? ???????? ???????? ??????????, ?????????????? ??????????? ??? ????????? ???????????? ???????. ??????????????? ?????? ??????? ???????? ???????? ?????????? — ???????????? ??????? ????? ??????? ?????????? ? ???? ???????, ??? ????????????? ??? ? ??????? ????. ??????? ?????, ??????????????, ??????????? ?????? ??????, ????? ????????????? ????????? ???????? ???????????????? ?? ????????? ????????????????, ??????? ? ???????? ???????.

????????????? UI ? ??????? ??????????????????

????????????? ???????????????? ????????? ????????? ????? ??????? ???????, ??????? ???????????? ????? ???????? ?? ?????????? ????????????? ?? ???????. ??????? ???????? ?? ?????? ????????? ?????????? ????????? ???????? ????????????, ???????? ??????? ??????? ????????, ? ?? ????? ??? ???????? ????????? ?????????????? ? ??????? ??????. ????? ??????? ??????????? ???????? ???????????? ??????????? ???????? ? ???????????? ?????????.

???????????? ???????? ???????? ??????? ???????????? ????????:

• ???????????? ?????????? ????????????? ???????? ???????????? ??? ???????? ??????? ???????
• ??????????????? ???????? ????????? ????????? ???????? ?? ?????????? ???????????? ????????????? ????????
• ??????? ??????????? ?????????? ??? ??????????? ??????? ? ??????? ??????????????? ??????
• ??????? ????????????? ??????? ? ???????? ??? ?????????? ????????????????? ??????????
• ????? ????????????? ???????? ?????????? ???????? ???????????? ????? ????????????????

????????? ?????????????? UI ????????? ? ???????????? ?????????. ???? ???????? ? ????????? ?? ???????, ????????? ????????? ???????? ??????????? ? ???????? ????????????, ?? ????? ??? ???? ??????? ? ?????????. ?????????? ?????????? ????????? ??????????? UX-??????? ????????? ???????????, ??????? ?????????? ??????????, ???? ????????? ????????? ? ?????????? ????????? ?????? ??? ?????????????.

????????????? ???????? ? ????????? ???????

????????????? ???????? ?????????? ????? ?????????, ??? ??????? ?????????? ?????????? ??????????, ????????????? ?????????? ???????????? ??????????. ??????? ???????? ?????? ?????????? ??????? ???????? ????????? ??????????? ???-????????, ???????? ???????????? ?????? ??????, ???? ????????? ???????????? ??????????? ? ????. ????? ?????? ?????????????? ?????????????? ??????????? ????????????????, ???? ???? ???????? ???? ?????????? ???????? ???????? ??????????.

????????? ?????? ???????????? ?????????????? ???????? ??????????????? ???????? ???????? ?? ???? ????????. ?????? ??????? ???????????? ??? ???????????? ????????, ???????????? ????????? ??????? ????????? ???????? — ????? ?????-????????, ??????????? ????????, ???? ? UI-??????????. ??? ??????????? ??????? ????????????????? ? ???????? ???????????? ?????? ????????. ????????? ???????? ????????????? ???????? ??? ?????? ???????????????? ?????????, ??? ?????????????? ??????? ??????????? ???????.

??????????? ?????????? ????? ?????????? ???????? ??????????

?????????? ????? ??????? ????????? ?????????? ??????????? ??? ????????????? ??????????????? ????????????. ??????? ???????? ?? ?????? ???? ?????????? ???????? ??????? ? ???, ??? ???????????, ????????? ????????? ??? ?????? ? ????? ????? ??????? ?????. ?????? ???? ??????????? ???????? ??? ????????? ?????????: ????????????????? ?????????? ????????? ? ?????????? ??? ???????? ? ????????? ??????????????, ??????????????????? ???????? ??? ??????? ??????????, ? ???????????? ???????? ??? ??????? ????????.

??????????????? ??????????? ??????? ????????? ?? ???????????? ????????????. ???????????? “????????…” ??????? ????????????????? ? ????????????. ?????????? ??????????? ????????? “????????? ??????…” ??? “????????? 3 ?? 10 ??????” ???????? ???????? ??????? ? ?????????? ????????. ????????? ??????????? ????????? “???????? ????? 30 ?????” ???????? ???????????? ?????????? ???? ????????, ???? ?????, ????? ?????? ?????? ???? ??????? — ?????????? ???????????????? ??? ????????? ?????????? ???????? ??? ?????????? ????????????.

???????? ??????????? ?? ??????????? ? ?????????????

???????????? ??????????? ??????????????? ??????? ?????????? ? ?????????? ??????-????????. ??????? ???????? ????? ?????????? ?? ?????? ???????: ???????? ????????? Google, ?????????? ????? ???????? ? ?????? ?? ???? ????? ????????? ??????????? ?????? ?? 32%, ? ?? ???? ????????? — ?? 90%. Amazon ??????????, ??? ?????? 100 ??????????? ??????????? ????????? ?? ? 1% ???????. ??? e-commerce ???????? ???????? ??????????????? ????????????? ? ???????.

????????????? ????????????? ????? ?????????? ??????? ?? ??????????????????. ????????? ??????? ???????????? ???? ? ?? ????? ????? ??????. ???????????? ?????????? ???????????? ? ?????????, ???? ?????????? ????? ??? ????????, ???? ???? ??? ?????????? ????????. ? ????????? ????????????, ??? ??????? ???????? ???????????, ????????????? ? ????????? ??? ????. ?????? ??????????, ??? ????????? ??????????????? ???????? ?? 0.1 ???? ???????? ????????? ????????? ?? 8% ??? ??????? ? ?? 10% ??? ????????????? ??????.

???????????? ?????? ?????????? ? ??????????? ?????????. ???????????? ???????? ?????????? ???????? ? ?????????????????? ?????? ????? 2-3 ?????????. ???? ?????? ??? ??? ???????????? ? ??????????, ??????????? ??????????? ?????????????? ???????????????. ??????????????, ????????? ???????????? ???? ??????? ??????? ???????? ? ??????????? ??????? ??????????. ? ???????????? ?????, ??? ???????????????? ??????? ????? ???????????, ???????? ?????????? ???????? ????????????????.

???????????????? ????? ????????? ? ??????????

???????? ? ?????????? ???????? ???? ????????: ??? ????????? ??????????? ????????????????? ? ???????? ???????????? ????????? ????????????? ?????????. ?????? ???????? ??? ???????????? ???????? ???????? ?????????? ??? ???????????, ??????????? ??????. ??????? ???????? ?? ?????? ??????????? ??????? ?????? ?????? ????? ????????? ? ??????????????. ??????????? ????????????????? ??????????? ?????????? ???????? ?????????? 200-300 ??????????? — ????????, ????? ????????? ??????? ?????????, ?? ?? ????? ??????????????, ????? ???????? ??????????? ????????.

??????? ???????? ??????? ???????? ???????????? ??????????. ??????, ?????? ????????? ???? ????????? ???????????? ?????? ???????????????? ????? ????? ??????????. ???????? ???????????? ????? ???????? ??????? ??????????? ????? ???????????. ?? ?????????????? ???????, ??? ?? ????? ?????????????? ???????? ? ??????????? “??????????????”, ??????? ?????????? ????????????? ?????????????, ??? ????? ???????? ???????????? ?????????????.

???????? ???????? ???????? ?? ????????????. ????????? ???????????? ????????? ????????????? ????????? “????????? ???????????” ??? ?????????????, ?????????? ? ????????? ??? ?????????????? ?????????? ???????????????. ?????????? ????? ????????????? ????????? ??? ????????? ???????? ??? ????????? ????????, ??? ?? ????????? ??? ?? ???? ??????????? ????????. ????????????? ????????? ?????????????, ??? ????????? ???????????????? ????????????? ???????????, ? ???????? ??????????? ??? enhancement ??? ??????? ????????.

??????????? ?????? ??? ???????? ?????????????? ?????????????

??????????? ??????? ???????????? ??????????????? ???????? ???????????? ????????? ?? ????????? ????????? ?????. ??????? ???????? ?????? ?????? ????????????? ??????, ???????????? ?? ???????? ? ???????????? ??????????????????. Lazy loading ??????????? ???????? ??????????? ???????? ?? ????, ???? ??? ??????? ??????????? — ???????? ??????????? ?? ??????? ?????????, JavaScript-?????? ???????????? ??? ???????????.

????????? ?????? ???????????? ?????????????:

1. Code splitting ????????? JavaScript-?????? ?? ??????? ?????, ??????????? ?? ?????????
2. Server-side rendering ?????????? ???????? HTML ?? ??????? ??? ????????????????? ??????????? ??????????
3. Service Workers ???????? ??????? ??? ??????-?????? ? ???????????? ?????????????? ????????
4. HTTP/2 ? HTTP/3 ???????????? ???????????? ???????? ????????? ???????? ????? ???????????? ?????
5. Image optimization ????????????? ????????? ??????????? ?????? ? ???????? ????
6. CDN ???????? ?????????? ????????????? ????? ? ?????????????, ???????? ???????????
7. Prefetching ???????????? ??????????? ????? ???????????? ? ????????? ?????? ???????

Resource hints (preload, prefetch, preconnect) ?????? ???????????? ??????????? ? ????????????? ????????. Preload ????????? ?? ?????????? ???????????? ?????, ??????? ????? ???????????????. Prefetch ????????? ??????? ??? ????????????? ???????????. Preconnect ????????????? ????? ? ???????? ??????????????, ??????? ?????? ?? DNS-????????? ? TCP-????????. ??? ???????????????? ? ????? ??????? ???????? ??????? ? ????????.

???????? ???????? ?????????????????? ????????????? (RUM – Real User Monitoring) ????????? ??????? ????????? ?????????? ? ?????? ????????: ?????????? ????????, ?????????????, ?????????????? ???????? ? ?????? ???????????. Synthetic monitoring ????????? ???????????????? ???????? ? ?????????????? ????? ??? ??????????? ????????? ?????????????. ??????????? ????? ????????? ???????? ?????????? ??????? ? ???? ??????????? ???????????????? ????????????????? ? ?????????? ???????? ?? ????????? ???? ?????????????.