{"id":301630,"date":"2020-04-10T09:00:25","date_gmt":"2020-04-10T09:00:25","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=301630"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=301630","title":{"rendered":"React, performance \u0438 -500 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u2014 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0432 \u0446\u0438\u0444\u0440\u0430\u0445"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/495984\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yt\/k1\/ac\/ytk1acousxhpalzyjbk3ewcz92q.jpeg\" alt=\"control the redline\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u043b\u0435\u0447\u0435\u043c\u0441\u044f \u043e\u0442 \u043a\u043e\u0440\u043e\u043d\u0430\u0432\u0438\u0440\u0443\u0441\u0430, \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0447\u0435\u043c-\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0445\u043e\u043b\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e react-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u041a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0442\u0435\u043c\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e web-\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u2014 \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u043f\u0440\u043e\u0441 \u043e \u0446\u0435\u043d\u0435\/\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u043b\u044f \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0438. \u041d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0432\u0435\u0440\u0448\u0438\u043b\u043e\u0441\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0447\u0443\u0434\u043e \u0438 \u043d\u0430\u043c \u0434\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u0441\u043a\u0430\u0436\u0435\u043c \u0442\u0430\u043a, \u043f\u043e\u0447\u0442\u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435). \u0418\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e mobile-first, react, \u0438 IE \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c (\u0434\u0430\u0436\u0435 11). \u0418\u0437 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u2014 \u0430\u043f\u043f\u043a\u0430 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u0430\u044f (\u0442. \u0435. \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0442\u0443\u0434\u0430 \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0447\u0430\u0449\u0435 \u0440\u0430\u0437\u0430 \u0432 \u0433\u043e\u0434) \u0438 \u0431\u0435\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u0414\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0430\u0436\u0435 \u0444\u0443\u0442\u0435\u0440 \u0438 \u0442\u043e\u0442 \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u043c \u0432 \u043a\u0430\u043a\u043e\u043c \u0446\u0432\u0435\u0442\u0435 \u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438 \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043e \u0420\u0435\u0430\u043a\u0442\u0435. \u0421 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043c\u0435\u0448\u043d\u043e. \u042f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b Angular, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0438\u043b react, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e &quot;\u0433\u0435\u043d\u0435\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0440\u0441 \u0432\u0437\u044f\u0442 \u043d\u0430 \u0420\u0435\u0430\u043a\u0442&quot;, &quot;\u0432\u0441\u0435 \u0442\u0430\u043c \u0431\u0443\u0434\u0435\u043c&quot; \u0438 \u0432\u043e\u043e\u0431\u0449\u0435. \u041d\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0430\u0440\u0442\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0420\u0435\u0430\u043a\u0442, \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e, &quot;\u0442\u043e\u0436\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b&quot; \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0440\u0441 \u0432\u0437\u044f\u0442 \u043d\u0430 Vue. \u041c\u044b \u043f\u043e\u0441\u043c\u0435\u044f\u043b\u0438\u0441\u044c, \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 legacy \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0435. \u0420\u043e\u0443\u0442\u0435\u0440 \u2014 react-router-dom, \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 mobx. \u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u2014 SCSS (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432) + css.modules \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u0415\u0449\u0435 \u0432\u0437\u044f\u043b\u0438 \u0438\u0437 \u0431\u0443\u0442\u0441\u0442\u0440\u0430\u043f\u0430 \u0441\u0435\u0442\u043a\u0443 \u0447\u0442\u043e \u0431\u044b \u043d\u0435 \u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c. \u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442, \u0441\u0435\u0441\u0441\u0438\u0438 \u043d\u0435\u0442. \u0418\u0437 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 &quot;\u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&quot; \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c PureComponent \u0438 React.memo, \u0430 \u0447\u0442\u043e \u0431\u044b \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043d\u0435 \u043f\u043e\u0442\u043e\u043b\u0441\u0442\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c bundlesize + source-map-explorer. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0440\u0435\u0448\u0438\u043b\u0438 \u043c\u044b, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c*. \u0412\u0441\u0435-\u0442\u0430\u043a\u0438 mobile-first, client-facing, \u0432 \u0433\u0440\u044f\u0437\u044c \u043b\u0438\u0446\u043e\u043c \u0443\u0434\u0430\u0440\u0438\u0442\u044c \u043d\u0438\u043a\u0430\u043a \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u0443\u0442\u0435\u0439 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u2014 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u0422. \u0435. \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0430\u0440\u043a\u0430\u0441 \u0441 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430\u043c\u0438, \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u0435\u043a-\u044d\u043d\u0434 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c UI \u0431\u043b\u043e\u043a\u0438 \u043f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438. \u0418 \u0432\u0441\u0435 \u0431\u044b \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d, \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0442\u0441\u044f \u043e\u043d \u043f\u043b\u043e\u0445\u043e, + \u043d\u0443\u0436\u043d\u043e \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0443\u0442\u044c \u043b\u0435\u0436\u0430\u043b \u0447\u0435\u0440\u0435\u0437 Server Side Rendering. \u041d\u043e, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0431\u0435\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043c \u043d\u0435\u0447\u0435\u0433\u043e, \u0430 \u0431\u0435\u043a \u0443 \u043d\u0430\u0441 \u043d\u0430 .NET, \u0438 \u0442\u0443\u0442 \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u0448\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u2014 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>* \u041e\u0447\u0435\u043d\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435, \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435?<\/p>\n<p>  <\/p>\n<h2 id=\"glava-0-v-kotoroy-vse-nachinaetsya\">\u0413\u043b\u0430\u0432\u0430 0, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u043c\u0435\u043d\u044f\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0443\u0436\u0435 \u0435\u0441\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u043c\u043e\u043a\u043d\u0443\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0447\u0442\u043e \u0431\u044b \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u043d\u0430\u043c \u043e\u0442\u0432\u0435\u0442\u044b \u0437\u0430 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u2014 1000ms) \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 Performance Audit \u0438\u0437 devtools (online \u0438 4x CPU slowdown). \u0412\u043e\u0442 \u0447\u0442\u043e \u043e\u043d \u043d\u0430\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043b:<\/p>\n<p>  <\/p>\n<ul>\n<li>Firts Paint (FP): 618ms<\/li>\n<li>First Meaningful Paint (FMP): 2090ms<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 FP \u044d\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0441\u043f\u0438\u043d\u043d\u0435\u0440), \u0430 FMP \u044d\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0436\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 UI (\u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c) \u0438 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u0435\u0441\u043b\u0438 \u0443\u0447\u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c 1000 ms (+\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442) \u043e\u0442\u043a\u0443\u0448\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440. \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u044d\u0442\u043e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0441 \u0442\u043e\u043b\u0441\u0442\u044b\u043c \u043a\u0430\u043d\u0430\u043b\u043e\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0410 \u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432 \u0441 \u044d\u0442\u0438\u043c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0435\u0449\u0435 \u0434\u0432\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 \u2014 4g* \u0438 fast 3g \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u043b \u0442\u0435\u0441\u0442\u044b**.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>First Paint<\/td>\n<td>618ms<\/td>\n<td>815ms<\/td>\n<td>2389ms<\/td>\n<\/tr>\n<tr>\n<td>First Contentful Paint<\/td>\n<td>2090ms<\/td>\n<td>2270ms<\/td>\n<td>3811ms<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0418 \u0441\u043d\u043e\u0432\u0430 \u0432\u0441\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435 \u043f\u043b\u043e\u0445\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f 4g \u2014 2270ms \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u043c \u043b\u0443\u0447\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>* 4g preset-\u0430 \u0432 \u0445\u0440\u043e\u043c\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435\u0442. \u0415\u0441\u043b\u0438 \u0447\u0442\u043e \u2014 \u0432\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044f: download 4000kb\/s, upload 3000kb\/s, latency 20ms:<br \/>  ** \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0435\u0441\u0442 \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u043b\u0441\u044f \u0442\u0440\u0438*** \u0440\u0430\u0437\u0430, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<br \/>  *** \u041f\u043e-\u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0442\u044c \u043d\u0435 \u043f\u043e 3 \u0442\u0435\u0441\u0442\u0430, \u0430 \u0445\u043e\u0442\u044f \u0431\u044b 10. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u2014 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u0431\u0443\u0434\u0443 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u0435\u043d.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-1-v-kotoroy-poyavlyaetsya-reactlazy\">\u0413\u043b\u0430\u0432\u0430 1, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f React.lazy<\/h2>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0435\u0441\u0442\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u0430 \u0441\u0445\u0435\u043c\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<p>\u0413\u0440\u0443\u0437\u0438\u043c Index.html, \u043e\u043d \u0433\u0440\u0443\u0437\u0438\u0442 React, \u0441\u0442\u0438\u043b\u0438 \u0438 \u043a\u043e\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0442\u043e\u043c js \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0432\u0435\u0442, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f, \u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0412\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u043e \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435*, \u0430 \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0420\u0435\u0430\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u2014 React.lazy, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041e\u0431\u044b\u0447\u043d\u043e, \u0432 lazy \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442, \u0432\u0441\u0435 \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0434\u0430\u0436\u0435 \u0435\u0435. \u0414\u0430\u043d\u043d\u044b\u0445 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043d\u0435\u0442 \u0438 \u043a\u0440\u043e\u043c\u0435 \u0441\u043f\u0438\u043d\u0435\u0440\u0430 \u043d\u0430\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0447\u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>658ms (+6%)<\/td>\n<td>791ms (-3%)<\/td>\n<td>2258ms (-5%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>2135ms (+2%)<\/td>\n<td>2286ms (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<td>3725ms (-3%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u042f\u0432\u043d\u043e \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043b\u0443\u0447\u0448\u0435 (\u0430 \u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435 \u0434\u0430\u0436\u0435 \u0445\u0443\u0436\u0435). \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0430\u043d\u0434\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u043d\u0435 \u0442\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e, \u043a\u0430\u043a \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0430 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u044a\u0435\u043b\u0438 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0444\u0438\u0442. \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u0430\u043d\u0434\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u0442\u0430\u043a \u0441\u043b\u0430\u0431\u043e? \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043d\u0430\u0448\u043b\u0430\u0441\u044c \u0432 shared \u043c\u043e\u0434\u0443\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0437 App.tsx. \u0410 \u043a\u043e\u0434\u0430 \u0442\u0430\u043c \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0447\u0435\u0440\u0435\u0441\u0447\u0443\u0440 \u043c\u043d\u043e\u0433\u043e \u0438 \u0448\u0430\u0442\u0430\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0434\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442 \u043d\u0435\u0433\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>* \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u043e \u0440\u0430\u0434\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0430 \u044f \u0432\u0435\u0440\u043d\u0443\u043b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043e\u0434\u043d\u0438\u043c \u0431\u0430\u043d\u0434\u043b\u043e\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-2-v-kotoroy-core-modul-vstrechaetsya-s-lazycomponent\">\u0413\u043b\u0430\u0432\u0430 2, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 Core \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0441 LazyComponent<\/h2>\n<p>  <\/p>\n<p>\u0414\u0430, \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0435\u0441\u044c shared module \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. \u0417\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0437 shared \u043c\u043e\u0434\u0443\u043b\u044f core \u043c\u043e\u0434\u0443\u043b\u044c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0431\u0435\u0437 \u0447\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u2014 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0440\u0443\u0437\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043f\u0438\u043d\u0435\u0440 \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u0447\u0442\u043e \u043f\u043e \u043c\u0435\u043b\u043e\u0447\u0438. <\/p>\n<p>  <\/p>\n<p>\u0422\u0443\u0442, \u043a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0443\u0436\u0435 \u0441 React.Lazy. &quot;\u041b\u0435\u043d\u0438\u0432\u044b\u0439&quot; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0447\u043d\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0420\u0435\u0430\u043a\u0442 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c. \u0410 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u043e\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a \u043d\u0430\u043c \u043f\u0440\u0438\u0435\u0434\u0443\u0442 \u0434\u0430\u043d\u043d\u044b\u0435. \u0418\u0442\u043e\u0433\u043e, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0443\u044e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0411\u043e\u0440\u043e\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e: \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0447\u0430\u043d\u043a\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0430\u0440\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const LazyComponent = &lt;T extends {}&gt;(importStatement: () =&gt; Promise&lt;{ default: ComponentType&lt;T&gt; }&gt;) =&gt; {     const component = React.lazy(importStatement);     return { component, load: importStatement }; };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>487ms (-21%)<\/td>\n<td>570ms (-30%)<\/td>\n<td>1829ms (-23%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>1965ms (-6%)<\/td>\n<td>2048ms (-10%)<\/td>\n<td>3468ms (-9%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0412 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0447\u0438\u0441\u043b\u0430\u0445 \u0437\u0432\u0443\u0447\u0438\u0442, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u0438\u044f\u0442\u043d\u043e, \u043d\u043e 400ms \u043d\u0430 fast3g \u043c\u044b \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432\u044b\u0438\u0433\u0440\u0430\u043b\u0438. \u0418 \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0430\u043d\u044c\u0448\u0435. \u041c\u043e\u0436\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-3-v-kotoroy-spinner-vyselyayut-iz-doma\">\u0413\u043b\u0430\u0432\u0430 3, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 Spinner \u0432\u044b\u0441\u0435\u043b\u044f\u044e\u0442 \u0438\u0437 \u0434\u043e\u043c\u0430<\/h2>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u043e\u0434 \u043c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438, \u0432\u0441\u0435 \u0447\u0442\u043e \u043c\u043e\u0433\u043b\u0438 \u0438\u0437 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0443\u0431\u0440\u0430\u043b\u0438. \u0427\u0442\u043e \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443? \u041c\u043e\u0436\u043d\u043e &quot;\u0432\u044b\u0441\u0435\u043b\u0438\u0442\u044c&quot; \u0441\u043f\u0438\u043d\u0435\u0440! \u0412\u0435\u0434\u044c \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044f index.html \u043c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0435\u0433\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0441\u0430\u043c index.html \u0438 \u0441\u0440\u0430\u0437\u0443 \u0432\u043e &quot;\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c&quot; \u0432\u0438\u0434\u0435? \u0410 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u043e\u043d\u043e \u0435\u0433\u043e \u0441\u043a\u0440\u043e\u0435\u0442. \u0417\u0430\u043e\u0434\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043c \u0442\u0443\u0434\u0430 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 css, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0438 \u0442\u0430\u043a \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>212ms (-56%)<\/td>\n<td>226ms (-60%)<\/td>\n<td>845ms (-53%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>2150ms (+9%)<\/td>\n<td>2387ms (+17%)<\/td>\n<td>4593ms (+32%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0427\u0442\u043e? \u0422\u043e, \u0447\u0442\u043e FP \u0441\u0442\u0430\u043d\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u044d\u0442\u043e \u044f \u043e\u0436\u0438\u0434\u0430\u043b. \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0443\u0445\u0443\u0434\u0448\u0438\u043b\u0438\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 FMP? \u0421\u043f\u0443\u0441\u0442\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ AppComponent.load();<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e \u043e\u0448\u0438\u0431\u043a\u0435 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0447\u0430\u043d\u043a\u043e\u0432 \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. <\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>208 (-57%)<\/td>\n<td>221 (-61%)<\/td>\n<td>782 (-57%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>2002 (-2%)<\/td>\n<td>2065 (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<td>3487 (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u043f\u0440\u0430\u0432\u0434\u0443, \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0434\u0430\u0436\u0435 \u043d\u0430 fast3g. \u041f\u0440\u0430\u0432\u0434\u0430, \u043c\u044b \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b\u0438 \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e, \u044f \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u043d \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432 \u043d\u0430\u0448\u0443 \u043f\u043e\u043b\u044c\u0437\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-4-v-kotoroy-vyseleniya-prodolzhayutsya\">\u0413\u043b\u0430\u0432\u0430 4, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0441\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442\u0441\u044f<\/h2>\n<p>  <\/p>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043d\u0430\u0448 \u043d\u0435\u0441\u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u043b\u0438\u0448\u0438\u043b\u0441\u044f \u0434\u043e\u043c\u0430. \u041d\u043e \u0437\u0430\u0447\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u043e\u043c\u2026 \u0412\u0435\u0434\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0441\u0435\u043b\u0438\u0442\u044c \u0435\u0449\u0435 \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445! \u0410 \u0442\u043e\u0447\u043d\u0435\u0435, \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445. \u0412 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u043b\u0435\u0433\u043a\u043e \u0438\/\u0438\u043b\u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0442\u0430\u0449\u0438\u0442\u044c \u0432 index.html \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u0438. \u0410 \u044d\u0442\u043e \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0431\u0430\u0433\u0430\u043c\u0438 \u0447\u0440\u0435\u0432\u0430\u0442\u043e. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0441 \u044d\u0442\u043e \u043c\u043e\u0433 \u0431\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434. Fetch \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u043a\u0440\u043e\u043c\u0435 IE (\u0430 \u043e\u043d \u043d\u0430\u043c \u0438 \u043d\u0435 \u043d\u0430\u0434\u043e), promise \u0442\u043e\u0436\u0435. \u0421\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0442\u043e\u0436\u0435 \u043d\u0435\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.html \u043c\u0438\u043a\u0440\u043e\u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">(function(){const path = `${window.app.api}`; window.app.data = fetch(path); }());<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0430\u0440\u043e\u043c. \u0422\u0435\u043f\u0435\u0440\u044c, \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 promis-\u0430 \u0438, \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u0440\u0438\u0446\u0435\u043f\u0438\u0442\u044c\u0441\u044f \u0443\u0436\u0435 \u043a \u043d\u0435\u043c\u0443. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u0440\u0435\u0448\u0438\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437 index.html \u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a \u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>245ms (+17%)<\/td>\n<td>219ms (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<td>786ms (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>1740ms (-13%)<\/td>\n<td>1735ms (-16%)<\/td>\n<td>3441ms (-1%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0412\u043f\u043e\u043b\u043d\u0435 \u043d\u0435 \u043f\u043b\u043e\u0445\u043e. \u041d\u0430 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f\u0445 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 300ms \u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u043e\u0436\u0435\u0440\u0442\u0432\u043e\u0432\u0430\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u0430. \u041d\u043e \u0432\u043e\u0442 \u0441\u0442\u043e\u0438\u043b\u043e \u043b\u0438 \u043e\u043d\u043e \u0442\u043e\u0433\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u043e\u043f\u0440\u043e\u0441 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0432\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043f\u043e\u0440\u043d\u043e\u0435. \u041d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043d\u0430 \u0442\u0430\u043a\u0430\u044f, \u0440\u0435\u0434\u043a\u043e \u0443\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 API \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0434\u043e\u043c\u0435\u043d\u0435, \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0438 \u0431\u0435\u0437 \u0442\u0430\u043a\u0438\u0445 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\" rel=\"nofollow\">preconnect<\/a>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 API. Preconnect <a href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\" rel=\"nofollow\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u043a\u0440\u043e\u043c\u0435 IE 11<\/a><\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-5-v-kotoroy-on-otkazyvaetsya\">\u0413\u043b\u0430\u0432\u0430 5, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441 \u0447\u0435\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438? \u0415\u0434\u0438\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u0434\u0430\u0436\u0435 \u0434\u043e \u0441\u0442\u0430\u0440\u0442\u0430 \u0441\u0430\u043c\u043e\u0433\u043e \u0420\u0435\u0430\u043a\u0442\u0430. \u041c\u043e\u0436\u0435\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u043e\u0438\u0442 \u0443\u0431\u0440\u0430\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438?<\/p>\n<p>  <\/p>\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043d\u0430\u0448 LazyComponent (\u044d\u0442\u043e \u0436\u0435 \u0435\u0449\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u044f), \u0443\u0434\u0430\u043b\u044f\u0435\u043c suspense, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b. \u0418 \u0432\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>262ms (+7%)<\/td>\n<td>387ms (+76%)<\/td>\n<td>1630ms (+107%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>1729ms (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439)<\/td>\n<td>1826ms (+5%)<\/td>\n<td>3280ms (-4%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>FP \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0435\u043b (\u043f\u043e\u0447\u0442\u0438 \u0432 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438). \u0410 \u0441 FMP \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u043d\u0430\u043c \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c. \u041f\u043e\u0447\u0435\u043c\u0443? \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430 \u2014 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b\u0438\u0441\u044c \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u0442\u0438\u043b\u0438. \u0410 \u043f\u043e\u043a\u0430 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f, \u043d\u0438\u043a\u0430\u043a\u043e\u0439 JS \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0437\u0430\u0438\u043d\u043b\u0430\u0439\u043d\u0435\u043d\u0430\u044f \u0432 index.html \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u043e\u0442 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/h4\/nl\/h9\/h4nlh9kmm28i5upq2g1po0edumc.png\" alt=\"css-delay\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438 \u0438 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 css. \u041a\u043e\u0433\u0434\u0430-\u0442\u043e \u044f \u043d\u0430\u0441\u043b\u0443\u0448\u0430\u043b\u0441\u044f \u0438 \u043d\u0430\u0447\u0438\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u043c\u043d\u044b\u0445 \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438, \u0447\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 CSS \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e. \u041e\u043d \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u0441\u0442\u0430\u0440\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0447\u0442\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0438 \u0443\u0432\u0438\u0434\u0435\u043b\u0438). \u041d\u043e \u0442\u0430\u043a \u043b\u0438 \u0441\u0442\u0440\u0430\u0448\u0435\u043d \u0447\u0435\u0440\u0442 \u043a\u0430\u043a \u0435\u0433\u043e \u043c\u0430\u043b\u044e\u044e\u0442 \u0438 \u043d\u0430\u0434\u043e \u043b\u0438 \u0435\u0433\u043e \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0435\u0437\u0434\u0435? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u2014 \u043d\u0435\u0442. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0443\u0437\u0438\u0442\u044c CSS \u0438 JS \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0418, \u0435\u0441\u043b\u0438 \u0431\u043b\u043e\u043a css \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0431\u043b\u043e\u043a JS (\u0430 \u0442\u0430\u043a\u043e\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u044b \u0441\u0442\u0438\u043b\u0435\u0439), \u0442\u043e CSS \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c JS \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-6-v-kotoroy-slyshitsya-glas\">\u0413\u043b\u0430\u0432\u0430 6, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u044b\u0448\u0438\u0442\u0441\u044f \u0433\u043b\u0430\u0441<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0437\u0430\u0434\u0438 \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0443\u0442\u044c. \u041d\u043e \u043f\u043e\u0440\u0430 \u0431\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0438 \u043e \u043d\u0430\u0431\u043e\u043b\u0435\u0432\u0448\u0435\u043c \u2014 \u043e \u0448\u0440\u0438\u0444\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0413\u043e\u0441\u043f\u043e\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0441\u0432\u043e\u044e \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u044e \u0434\u0432\u0443\u043c\u044f \u043d\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438. \u041d\u0443\u2026 \u0442\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0432 \u0442\u0435\u0440\u043f\u0451\u0436. \u041d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u044f\u0442\u044b\u0439! \u0448\u0440\u0438\u0444\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e font-weight 100 \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043d\u043a\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0448\u0440\u0438\u0444\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u044e\u0442 \u0437\u0430 \u0442\u0440\u0430\u0444\u0444\u0438\u043a. \u0422. \u0435. \u043d\u0430 \u0443\u0437\u043a\u043e\u043c \u043a\u0430\u043d\u0430\u043b\u0435 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u0438\u0437-\u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/li>\n<li>\u041a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u044e\u0442 \u0437\u0430 \u043f\u0443\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (\u0430 \u0438\u0445 \u0432\u0441\u0435\u0433\u043e 5-6 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 HTPP v 1.x)<\/li>\n<li>\u0411\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430. \u041f\u043e\u043a\u0430 \u0448\u0440\u0438\u0444\u0442 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u0430.<\/li>\n<li>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u0435\u0434\u044f\u0442 \u0442\u0440\u0430\u0444\u0438\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0447\u0443\u0442\u043e\u0447\u043a\u0443 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 (\u0410 \u043c\u044b, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u044b JS).<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0445\u0432\u0430\u0442\u0438\u0442 \u043e \u0433\u0440\u0443\u0441\u0442\u043d\u043e\u043c. \u041a\u0430\u043a \u0432\u044b \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0418 \u043e\u043d\u0438 \u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0430\u043a \u0431\u044b \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0433\u043e\u043b\u044c \u043d\u0430 \u0432\u044b\u0434\u0443\u043c\u043a\u0438 \u0445\u0438\u0442\u0440\u0430 \u0438 \u043f\u043e\u0447\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\" rel=\"nofollow\">font-swap<\/a> (\u043e\u043e\u043e\u043e\u043e\u0447\u0435\u043d\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u043c\u0435\u043d\u0443 \u0448\u0440\u0438\u0444\u0442\u043e\u0432). \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0444\u0438\u043d\u0442, <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" rel=\"nofollow\">LightHouse<\/a> \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043b\u043e\u0430\u0434.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u044b \u0432 link\/preload:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;link rel=&quot;preload&quot; href=&quot;best_font_ever.otf&quot; as=&quot;font&quot; type=&quot;font\/otf&quot; crossorigin=&quot;anonymus&quot;&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u044b<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>136ms (-44%)<\/td>\n<td>201ms (-8%)<\/td>\n<td>666ms (-15%)<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>1519ms (-12%)<\/td>\n<td>1418ms (-18%)<\/td>\n<td>3743ms (+8%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0448\u043b\u043e \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u0443 \u0432\u0441\u0435\u043c \u043a\u0440\u043e\u043c\u0435 fast3g (\u0438, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f\u043c). \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043c\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0437\u043c\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430, \u0442\u0435\u043f\u0435\u0440\u044c UI \u043d\u0435 \u0434\u0435\u0440\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u0442\u0435\u043c, \u0441 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438 \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0432 \u0432\u044b\u0438\u0433\u0440\u0430\u043d\u043d\u044b\u0445 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>WIFI<\/th>\n<th>4G<\/th>\n<th>Fast 3G<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>FP<\/td>\n<td>-480ms<\/td>\n<td>-614ms<\/td>\n<td>-1700ms<\/td>\n<\/tr>\n<tr>\n<td>FMP<\/td>\n<td>-570ms<\/td>\n<td>-852ms<\/td>\n<td>-68ms<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0412\u044b\u0438\u0433\u0440\u044b\u0448 500-850ms \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0437\u0432\u0443\u0447\u0438\u0442 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0443\u0431\u0440\u0430\u043b\u0438 &quot;\u0434\u0435\u0440\u0433\u0430\u044e\u0449\u0438\u0435\u0441\u044f&quot; \u0448\u0440\u0438\u0444\u0442\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"glava-7-zaklyuchitelnaya\">\u0413\u043b\u0430\u0432\u0430 7, \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0441 defer \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c (\u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043e\u043d \u0434\u0430\u0432\u0430\u043b \u043f\u0440\u0438\u0440\u043e\u0441\u0442 page speed \u0443 LightHouse \u0438 \u043c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c), \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0438 \u0442\u0430\u043a \u0443\u0436\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u0437\u0440\u043e\u0441\u043b\u0430\u0441\u044c, \u044f \u0437\u0430\u043c\u0435\u043d\u0438\u043b \u0435\u0435 \u043d\u0430 \u0432\u044b\u0432\u043e\u0434\u044b.<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u043e\u0433\u043e, \u0437\u0430 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f (0.5 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043f\u0443\u0433\u0430\u0435\u0432 \u0437\u0430 \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u0438 1 \u0446\u0435\u043b\u044b\u0439 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043f\u0443\u0433\u0430\u0439 \u0437\u0430 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437-\u043f\u043e\u0434 index.html) \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u043e\u0442 480ms \u0434\u043e 1700ms), \u0438 \u0432\u044b\u0438\u0433\u0440\u0430\u043b\u0438 \u043e\u0442 500-800ms \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f\u0445. \u041a\u0430\u043a \u043f\u043e \u043c\u043d\u0435, \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 (\u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e):<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/habrastorage.org\/webt\/_y\/pq\/ru\/_ypqruivcimpvlccnkjd7ee8yis.png\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_y\/pq\/ru\/_ypqruivcimpvlccnkjd7ee8yis.png\"><\/a><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438, \u043d\u043e \u0445\u043e\u0442\u0438\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0447\u0430\u043d\u043a\u043e\u0432<\/li>\n<li>\u0420\u0435\u0432\u044c\u044e \u0440\u0430\u043d\u0442\u0430\u0439\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0430 (\u0447\u0442\u043e \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f)<\/li>\n<li><a href=\"https:\/\/medium.com\/oyotech\/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4\" rel=\"nofollow\">Brotli<\/a>, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0441\u0435 \u0442\u0435\u0441\u0442\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u0438 \u043d\u0430 gzip.<\/li>\n<li>HTTP2.0. \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0447\u0430\u043d\u043a\u043e\u0432<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e Jeff Cooper \u0437\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435. \u0410 \u0437\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0443\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0440\u043e\u0444. \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u043e\u0441\u0442\u044c. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430\/\u043f\u043b\u043e\u0449\u0430\u0434\u043a\u0438\/\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0435\u0433\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e (\u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u043d\u0430 \u0434\u0435\u043d\u044c\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0432\u044b \u0438\u043b\u0438 \u0432\u0430\u0448 \u043a\u043b\u0438\u0435\u043d\u0442). \u041a\u043e\u0433\u0434\u0430-\u0442\u043e Google \u043f\u0440\u043e\u0432\u0435\u043b \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b latency \u043d\u0430 100-400ms, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043d\u0430 <a href=\"https:\/\/ai.googleblog.com\/2009\/06\/speed-matters.html\" rel=\"nofollow\">0.2%-0.6%<\/a> (\u0447\u0442\u043e \u0432 \u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u0445 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e). CloudFlare \u0432 <a href=\"https:\/\/www.cloudflare.com\/learning\/performance\/more\/website-performance-conversion-rates\/\" rel=\"nofollow\">\u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 2.4ms \u0434\u043e 3.3ms \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u043d\u0430 0.4%, \u0438 \u0447\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f. \u0412\u043e\u0442 \u0435\u0449\u0435 <a href=\"https:\/\/blog.hubspot.com\/marketing\/page-load-time-conversion-rates\" rel=\"nofollow\">\u043e\u0434\u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u0441 \u0438\u043d\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0438 \u0432\u0430\u043c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f \u0438 \u0431\u0435\u0440\u0435\u0433\u0438\u0442\u0435 \u0441\u0435\u0431\u044f!<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/495984\/\"> https:\/\/habr.com\/ru\/post\/495984\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/495984\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yt\/k1\/ac\/ytk1acousxhpalzyjbk3ewcz92q.jpeg\" alt=\"control the redline\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u043b\u0435\u0447\u0435\u043c\u0441\u044f \u043e\u0442 \u043a\u043e\u0440\u043e\u043d\u0430\u0432\u0438\u0440\u0443\u0441\u0430, \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0447\u0435\u043c-\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0445\u043e\u043b\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e react-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u041a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0442\u0435\u043c\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e web-\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u2014 \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u043f\u0440\u043e\u0441 \u043e \u0446\u0435\u043d\u0435\/\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-301630","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/301630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=301630"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/301630\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=301630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=301630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=301630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}