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

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