{"id":308028,"date":"2020-08-05T15:00:54","date_gmt":"2020-08-05T15:00:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=308028"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=308028","title":{"rendered":"\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u0427\u0430\u0441\u0442\u044c 1. Critical Render Path"},"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\/company\/hh\/blog\/513940\/\">\n<p>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\u0436\u0438\u0434\u043a\u0438\u0435 \u0430\u043f\u043b\u043e\u0434\u0438\u0441\u043c\u0435\u043d\u0442\u044b). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u043f\u0438\u0448\u0443 \u043a\u043e\u0434, \u044f \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u044e \u0432 <a href=\"https:\/\/school.hh.ru\/\">\u0428\u043a\u043e\u043b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 hh.ru.<\/a><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0438\u0441\u0438 \u043d\u0430\u0448\u0438\u0445 \u043b\u0435\u043a\u0446\u0438\u0439 \u043e\u0442 2018-2019 \u0443\u0447\u0435\u0431\u043d\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/www.youtube.com\/watch?v=eHWMtfqxjes&amp;list=PLGn25JCaSSFQQOab_xMXI3vJ0tDUkFaCI\">\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 youtube<\/a><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u0443 \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u0430 \u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043b\u0435\u043a\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e 3 \u0447\u0430\u0441\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0430\u043b\u044c\u043c\u0430\u043d\u0430\u0445. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f8\/v2\/gd\/f8v2gdtasndn2e1cicwmarsy1im.jpeg\"><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/slides.com\/nikmostovoy\/deck\/fullscreen\">\u0412\u043e\u0442 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u043d\u0435\u043e\u0445\u043e\u0442\u0430 \u0447\u0438\u0442\u0430\u0442\u044c \u043b\u043e\u043d\u0433\u0440\u0438\u0434, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u043d\u0433\u0440\u0438\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u0441\u0435\u0441\u0442. \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0417\u0430\u0447\u0435\u043c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/li>\n<li>FMP, TTI + <a href=\"https:\/\/www.youtube.com\/watch?v=4joeMk5v8Rw\">\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435<\/a> <\/li>\n<li>Critical render path, DOM, CSSOM, RenderTree<\/li>\n<li>\u0428\u0430\u0433\u0438 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 + <a href=\"https:\/\/www.youtube.com\/watch?v=bZfULA8PPgE\">\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435<\/a><a name=\"habracut\"><\/a><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438. \u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445, \u043a\u0430\u043a layout, repaint, composite \u0438 \u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"zachem-voobsche-dumat-o-proizvoditelnosti-motivacionnaya-chast\">\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438? \u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/h2>\n<p>  <\/p>\n<p><strong>0.1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430<\/strong> \u2014 \u044d\u0442\u043e \u0442\u043e\u0442 gap, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0441\u043e\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u043a\u043b\u0438\u043a \u043c\u044b\u0448\u043a\u0438, \u0443\u0434\u0430\u0440 \u043f\u043e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435 \u043f\u043e\u0431\u0443\u0434\u0438\u043b \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438\\\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<br \/>  \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0443 \u0432\u0441\u0435\u0445 \u0431\u044b\u043b\u043e \u0442\u043e \u043d\u0435\u043b\u043e\u0432\u043a\u043e\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0442\u044b \u0441\u043e\u0447\u0438\u043d\u044f\u0435\u0448\u044c \u043f\u0438\u0441\u044c\u043c\u043e\\\u043a\u043e\u0434\\\u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 &quot;\u0437\u0430 \u0442\u043e\u0431\u043e\u0439 \u043d\u0435 \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442&quot;. \u0422\u044b \u0443\u0436\u0435 \u043f\u0438\u0448\u0435\u0448\u044c \u0432\u0442\u043e\u0440\u043e\u0435 \u0441\u043b\u043e\u0432\u043e, \u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u0441\u0451 \u0435\u0449\u0435 \u043f\u0435\u0441\u043e\u0447\u043d\u044b\u0435 \u0447\u0430\u0441\u044b (\u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e windows) \u0438 \u0435\u043b\u0435-\u0435\u043b\u0435 \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u0435. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0438 \u0441 \u043a\u043b\u0438\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438. \u042f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043c\u043e\u043b, &quot;\u043e\u043a\u0435\u0439, \u044f \u0442\u0435\u0431\u044f \u0443\u0441\u043b\u044b\u0448\u0430\u043b, \u0449\u0430 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442&quot;.<br \/>  \u0417\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0434\u0430\u043b\u0435\u043a\u043e \u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u042f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0432\u0435\u0431-\u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u043e\u0447\u0442\u043e\u0432\u0438\u043a\u0430 (\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d) \u0438 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0434\u0435\u043b\u044f\u044e \u043f\u0438\u0441\u044c\u043c\u0430 \u0434\u043b\u044f \u0438\u0445 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f, \u0442\u043e \u0431\u044b\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438. \u0418 \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e: \u0442\u043e \u043b\u0438 \u044f \u201c\u043d\u0435 \u043f\u043e\u043f\u0430\u043b \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435&quot;, \u0442\u043e \u043b\u0438 \u0441\u0430\u0439\u0442 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u0443\u0442\u044b\u0439. \u0418 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0435\u0440\u043d\u043e \u0432\u0442\u043e\u0440\u043e\u0435.<br \/>  \u041f\u043e\u0447\u0435\u043c\u0443 0.1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u043c \u0438 \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u043a\u0443\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0448 \u043c\u043e\u0437\u0433 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f &quot;\u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435&quot;.<br \/>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u044f\u0440\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u043b\u0438\u043f <a href=\"https:\/\/www.youtube.com\/watch?v=MjyvlD0TwiA\">\u201c30 seconds to mars \u2014 hurricane\u201d<\/a>. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u0430 \u043a\u0430\u0434\u0440-\u0434\u0432\u0430 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0435 9:30. \u0413\u043b\u0430\u0437 \u0443\u0441\u043f\u0435\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043e\u0437\u043d\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443, \u043d\u043e \u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p><strong>1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430<\/strong> \u2014 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u0440\u0444\u0438\u043d\u0433 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u043d\u043e\u0435. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u0440\u0435\u0441\u0443\u0440\u0441 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0437\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u2014 \u0432\u044b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u043e\u043b\u043e\u0434\u0435\u0446. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0430\u044f. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e: \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0430\u043c\u0438, \u043f\u043e\u0445\u043e\u0434\u044b \u043f\u043e \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c, \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0435\u0449\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f), \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u0412 \u043e\u0431\u0449\u0435\u043c \u2014 \u0431\u043e\u043b\u044c\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044b\u0447\u043d\u043e 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430 \u2014 \u044d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u0438\u0434\u0435\u0430\u043b, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u0438 \u0433\u043e\u043b\u043e\u0432\u0443 \u0442\u0435\u0440\u044f\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<p><strong>10 \u0441\u0435\u043a\u0443\u043d\u0434<\/strong> \u2014 \u0435\u0441\u043b\u0438 \u043f\u043e\u0433\u0443\u0433\u043b\u0438\u0442\u044c, \u043d\u0430 \u0432\u0441\u044f\u043a\u0443\u044e \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0432\u0440\u043e\u0434\u0435 &quot;\u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435&quot; \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043c \u0447\u0438\u0441\u043b\u043e: 30 \u0441\u0435\u043a\u0443\u043d\u0434. \u0421\u0430\u0439\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0439\u0441\u044f 5 \u0441\u0435\u043a\u0443\u043d\u0434 \u0443\u0431\u0438\u0432\u0430\u0435\u0442 1\/6 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u2014 \u0442\u0440\u0435\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0443\u0442 \u0434\u0432\u0430 \u0447\u0438\u0441\u043b\u0430 \u2014 <strong>1 \u043c\u0438\u043d\u0443\u0442\u0430 \u0438 10 \u043c\u0438\u043d\u0443\u0442<\/strong>. \u043f\u0435\u0440\u0432\u043e\u0435 \u2014 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u2014 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430, \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0438 \u0442.\u0434. \u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u043d\u0443\u0442\u0430? \u0412 \u043d\u0430\u0448\u0438 \u0434\u043d\u0438 \u043c\u044b \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0442\u0440\u0430\u0442\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0430\u0446\u0438\u044e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0449\u0438. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0435\u0442 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0435. \u041e\u0442\u043a\u0440\u044b\u043b \u0441\u0442\u0430\u0442\u044c\u044e, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0434\u0435\u0441\u044f\u0442\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0434\u0430\u043b\u044c\u0448\u0435 \u043a\u043e\u043b\u043b\u0435\u0433\u0430 \u043c\u0435\u043c \u0432 \u0442\u0435\u043b\u0435\u0433\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b, \u0442\u0443\u0442 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0437\u0430\u0436\u0435\u0433\u0441\u044f, \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u043f\u0440\u043e \u043a\u043e\u0440\u043e\u043d\u043e\u0432\u0438\u0440\u0443\u0441, \u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u043c\u043d\u0435 \u043c\u043e\u0439 2007, \u0432\u043e\u0442 \u044d\u0442\u043e \u0432\u0441\u0435. \u0412 \u043e\u0431\u0449\u0435\u043c \u043a \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u0447\u0430\u0441. <\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0436\u0435 \u0447\u0438\u0441\u043b\u043e \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043e\u0434\u043d\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043d\u043e \u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0438\u043b\u0438 \u0440\u0435\u0448\u0438\u043b \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0421\u0440\u0430\u0432\u043d\u0438\u043b \u0442\u0430\u0440\u0438\u0444\u044b, \u043e\u0444\u043e\u0440\u043c\u0438\u043b \u0437\u0430\u043a\u0430\u0437 \u0438 \u0442.\u043f.<\/p>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u043c\u0435\u044e\u0442: <\/p>\n<p>  <\/p>\n<ul>\n<li>Walmart: 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f + 2% \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438<\/li>\n<li>Amazon: 0,1 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0440\u0443\u0447\u043a\u0443 \u043d\u0430 1%<\/li>\n<li>\u0427\u0442\u043e-\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u0435\u0441\u0442\u044c \u0443 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 (\u043a\u0438\u043d\u044c\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u0441\u044b\u043b\u043a\u0443, \u044f \u043f\u043e\u0442\u0435\u0440\u044f\u043b)<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u2014 \u043e\u0442 <a href=\"https:\/\/twitter.com\/wikipedia\/status\/585186967685619712\">\u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438<\/a>:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ua\/wb\/kl\/uawbklgvbehmkw3re7bstr8in9s.png\"><\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0432\u043e\u0434\u043d\u043e\u0439, \u043f\u043e\u0440\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"dva-izvechnyh-voprosa\">\u0414\u0432\u0430 \u0438\u0437\u0432\u0435\u0447\u043d\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u0430<\/h2>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c lighthouse \u043d\u0430 hh.ru. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u0441\u0451 \u201c\u043e\u0447\u0435\u043d\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c\u201d (\u0437\u0430\u043f\u0443\u0441\u043a \u043d\u0430 mobile, \u043d\u0430 desktop \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043b\u0443\u0447\u0448\u0435):<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jc\/ux\/on\/jcuxonacvcstochnjn8jddza6d0.png\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041a\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0432\u0438\u043d\u043e\u0432\u0430\u0442?<\/li>\n<li>\u0427\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0425\u043e\u0442\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u044f \u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u043b \u043d\u0430 &quot;\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c&quot;.<br \/>  \u0421\u0440\u0430\u0437\u0443 \u0441\u043f\u043e\u0439\u043b\u0435\u0440: \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 &quot;\u043a\u0430\u043a \u043a\u0440\u0443\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0432 \u043a\u043e\u043d\u0446\u0435\u201d \u2014 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041a\u0430\u043a \u201c\u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u201d \u043c\u044b \u0437\u043d\u0430\u0435\u043c. \u041d\u043e \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"davayte-razbiratsya\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 3 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0441 html \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430)<\/li>\n<li>\u0420\u0430\u0431\u043e\u0442\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043a\u043b\u0438\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0442.\u0434.)<\/li>\n<li>SPA \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0423 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430 \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0430\u0439\u0442\u043e\u043c. \u0418 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e: FMP (First Meaningful Paint) \u0438 TTI (Time to interactive), \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fs\/u5\/mz\/fsu5mz-linm7taiqwxt13-f1rny.png\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0443\u0434\u0438\u0442\u044c \u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f: FMP == \u0442\u0435\u043a\u0441\u0442, \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u043d\u0441\u0442\u0430\u0433\u0440\u0430\u043c\u043c). TTI == \u0441\u0430\u0439\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435. \u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b, \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 FMP\\TTI \u0438 \u043a\u0430\u043a \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435, \u0441\u043d\u0438\u043c\u0430\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043b\u044e\u0434\u0435\u0439, <a href=\"https:\/\/www.youtube.com\/watch?v=4joeMk5v8Rw&amp;feature=youtu.be\">\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043d\u0430 \u0420\u0418\u0422++<\/a>. \u0412 \u044d\u0442\u043e\u043c \u0436\u0435 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0438 \u043f\u0440\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b\u0438 \u043f\u043e \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044e \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u043d\u0430\u0441 \u2014 FMP. \u0421\u043e\u0438\u0441\u043a\u0430\u0442\u0435\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043f\u043e\u0438\u0441\u043a, \u0437\u0430\u0442\u0435\u043c \u043d\u0430\u043a\u043b\u0438\u043a\u0438\u0432\u0430\u044e\u0442 &quot;\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435&quot; \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u0439, \u0430 \u0437\u0430\u0442\u0435\u043c \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0442\u043a\u043b\u0438\u043a\u0435. C \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438 (\u043d\u044e\u0430\u043d\u0441\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430) FMP \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0434\u043d\u0443 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 Critical render path. Critical render path \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u2014 html, css \u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b (\u0435\u0441\u043b\u0438 \u0442\u0430\u043a \u0435\u0449\u0435 \u043a\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442), \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0430\u0439\u0442 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>  <\/p>\n<h3 id=\"critical-render-path-ili-chto-brauzer-delaet-dlya-togo-chtoby-polzovatel-uvidel-tot-samyy-tekst\">Critical render path \u0438\u043b\u0438 \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0435\u043b \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0442\u0435\u043a\u0441\u0442?<\/h3>\n<p>  <\/p>\n<h4 id=\"tldr\">TL&amp;DR;<\/h4>\n<p>  <\/p>\n<ol>\n<li>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 (DNS resolve, TCP \u043f\u043e\u0445\u043e\u0434 \u0438 \u0442.\u043f.);<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442;<\/li>\n<li>\u041f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 HTML \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432;<\/li>\n<li>\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c DOM tree (document object model);<\/li>\n<li>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. CSS, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0439 JS (\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u043c);<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0441\u044c CSS-\u043a\u043e\u0434 (\u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 JS-\u0444\u0430\u0439\u043b\u044b);<\/li>\n<li>\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c CSSOM tree;<\/li>\n<li>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 JS-\u043a\u043e\u0434. \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f layout, \u0435\u0441\u043b\u0438 \u0438\u0437 js \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0444\u043e\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 reflow;<\/li>\n<li>\u041f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0438\u0442\u044c DOM tree (\u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438);<\/li>\n<li>\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c Render tree;<\/li>\n<li>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (layout \u2192 paint \u2192 Composite).<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e:<\/p>\n<p>  <\/p>\n<h4 id=\"podrobno\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e:<\/h4>\n<p>  <\/p>\n<p><strong>Request<\/strong><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/br\/bn\/2z\/brbn2z3tju151wyq4atr0vwibza.png\"><\/p>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441, \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u043c DNS, IP, TCP \u043f\u043e\u0445\u043e\u0434, \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0442.\u043f. \u0411\u0430\u0439\u0442\u0438\u043a\u0438 \u0431\u0435\u0433\u0430\u044e\u0442 \u043f\u043e \u0441\u043e\u043a\u0435\u0442\u0430\u043c, \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<p>  <\/p>\n<p><strong>Response<\/strong><\/p>\n<p>  <\/p>\n<p>\u0411\u0435\u043a\u0435\u043d\u0434\u044b \u0437\u0430\u0448\u0443\u043c\u0435\u043b\u0438 \u0432\u0435\u043d\u0442\u0438\u043b\u044f\u0442\u043e\u0440\u0430\u043c\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441, \u0437\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043e\u043a\u0435\u0442 \u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u0435\u043b \u043e\u0442\u0432\u0435\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cm\/gc\/5h\/cmgc5huige2svqqg-1ekt8brb_u.png\"><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0431\u0430\u0439\u0442\u044b, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0438\u0437 \u043d\u0435\u0435 \u0441\u0442\u0440\u043e\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 text\/html, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043c\u0435\u0442\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u043a\u0430\u043a &quot;navigate&quot; (\u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 ServiceWorker) \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u044d\u0442\u043e\u0433\u043e html DOM.<\/p>\n<p>  <\/p>\n<p>\u0421\u043a\u0430\u0437\u0430\u043d\u043e, \u0441\u0434\u0435\u043b\u0430\u043d\u043e:<\/p>\n<p>  <\/p>\n<h4 id=\"obrabotka-dom\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 DOM<\/h4>\n<p>  <\/p>\n<p><strong>DOM<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u043b\u0438 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0430\u0440\u0441\u0438\u0442 \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pa\/-s\/k5\/pa-sk5yskhos6c5trlwpe7n-4lc.png\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u043a\u0430\u0441. \u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0451 \u044d\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 html \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441. CSS, JS \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043a\u0430\u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 DOM, \u0442\u0430\u043a \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e (\u0434\u043b\u044f css \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0441 preload + \u0441\u043c\u0435\u043d\u043e\u0439 rel \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 stylesheet). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u043b\u0438 JS, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u044d\u0442\u0438\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u043c.<br \/>  <em>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c \u043f\u0443\u0442\u044c \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u043e\u0442\u0432\u0435\u0442\u043e\u043c, \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0430<\/em>. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u044b\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 head, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0434\u0435\u043b\u0430\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u0442\u0438\u043b\u0438. \u041f\u043e\u0441\u043b\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f DOM \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u0442\u0430\u043f\u0443:<\/p>\n<p>  <\/p>\n<p><strong>CSSOM<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e meta \u0438 title \u0431\u044b\u043b \u0442\u0435\u0433 style (\u043b\u0438\u0431\u043e link). \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0435\u0440\u0435\u0442 DOM, \u0431\u0435\u0440\u0435\u0442 CSS, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f, \u0438 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f CSS. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wv\/w6\/5g\/wvw65grdjqmx_d32xxingwuycys.png\"><\/p>\n<p>  <\/p>\n<p>\u041b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c (head) \u0434\u043b\u044f CSSOM \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430, \u043e\u043d\u0430 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0410 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0437\u043b\u043e\u0432 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>CSSOM \u0432\u0430\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c RenderTree.<\/p>\n<p>  <\/p>\n<p><strong>RenderTree<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0430\u0433 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043e\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0443.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 head, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0422\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u0443 \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/iq\/lt\/an\/iqltanybp6uzgfthw6ckza2fky8.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u043c\u044b \u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c. \u041f\u043e\u0447\u0435\u043c\u0443 \u0435\u0433\u043e? \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0439\u0434\u0435\u043c \u0432 DevTools \u0442\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u201cDOM&quot;. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e, \u0445\u043e\u0442\u044c \u0432 DevTools \u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0432\u0441\u0435 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0432\u0441\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 RenderTree. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043a\u0440\u0430\u0439\u043d\u0435 \u043b\u0435\u0433\u043a\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6j\/vt\/yf\/6jvtyf_kdriht6yjx8bvwerigha.png\"><\/p>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Elements. \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u0441\u044e &quot;\u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u0443\u044e&quot; \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u0415\u0451 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0442\u0438\u043b\u0438, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0442.\u0434.<br \/>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 RenderTree, \u043d\u0430\u0448\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c Layout \u21d2 Paint \u21d2 Composite \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u0438\u0445 \u0442\u0440\u0435\u0445 \u044d\u0442\u0430\u043f\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u0443\u0432\u0438\u0434\u0438\u0442 \u043d\u0430\u0448 \u0441\u0430\u0439\u0442.<br \/>  Layout \u21d2 Paint \u21d2 Composite \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u044e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u043d\u043e \u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0441\u0430\u0439\u0442\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"chto-mozhno-sdelat-chtoby-uluchshit-metriki-fmp-i-tti\">\u0427\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043c\u0435\u0442\u0440\u0438\u043a\u0438 FMP \u0438 TTI?<\/h2>\n<p>  <\/p>\n<h4 id=\"tldr-1\">TL&amp;DR;<\/h4>\n<p>  <\/p>\n<p>1) \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<p>1.1) \u0420\u0430\u0437\u043d\u0435\u0441\u0442\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c. \u041a\u0430\u043a js, \u0442\u0430\u043a \u0438 css. \u0425\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043a\u043e\u0434 \u043b\u0438\u0431\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043d\u0434\u043b\u0430\u0445, \u043b\u0438\u0431\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>1.2) \u0413\u0440\u0443\u0437\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 (\u043e\u0447\u0435\u043d\u044c \u0441\u043f\u043e\u0440\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442!)<\/p>\n<p>  <\/p>\n<p>1.3) \u0412\u044b\u043d\u0435\u0441\u0442\u0438 third-party \u0441\u043a\u0440\u0438\u043f\u0442\u044b <\/p>\n<p>  <\/p>\n<p>1.4) \u0413\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043b\u0435\u043d\u0438\u0432\u043e<\/p>\n<p>  <\/p>\n<p>2) HTTP2.0 \/ HTTP3.0:<\/p>\n<p>  <\/p>\n<p>2.1) \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u043d\u0433<\/p>\n<p>  <\/p>\n<p>2.2) \u0441\u0436\u0430\u0442\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/p>\n<p>  <\/p>\n<p>2.3) Server push<\/p>\n<p>  <\/p>\n<p>3) Brotli<\/p>\n<p>  <\/p>\n<p>4) \u041a\u044d\u0448, ETag + Service worker<\/p>\n<p>  <\/p>\n<h4 id=\"podrobno-1\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e:<\/h4>\n<p>  <\/p>\n<h3 id=\"rabota-s-resursami\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438<\/h3>\n<p>  <\/p>\n<h4 id=\"raznosim-blokiruyuschie-resursy-js\">\u0420\u0430\u0437\u043d\u043e\u0441\u0438\u043c \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. JS<\/h4>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0431\u043e\u043b\u044c\u044e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f 2 \u0432\u0435\u0449\u0438: \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u0442\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<br \/>  \u0421\u0430\u043c\u044b\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u043e\u0432\u0435\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043d\u0435\u0441\u0442\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438, \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c. \u0420\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u043c\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0430\u043d\u0434\u043b\u044b \u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u043c <a href=\"https:\/\/github.com\/gregberge\/loadable-components\">loadable-components<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/theKashey\/react-imported-component\">react-imported-component<\/a> \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0430 \u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0434\u043b\u044f vue \u0438 \u0442.\u0434. \u0415\u0441\u043b\u0438 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u0441\u0442\u0438\u043b\u0438, \u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<br \/>  \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c: <\/p>\n<p>  <\/p>\n<ol>\n<li>\u0431\u0430\u043d\u0434\u043b\u044b \u0441 \u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c\u0438 JS \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 <\/li>\n<li>\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u0431\u0430\u043d\u0434\u043b\u044b. <\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u043f\u043e \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0430\u043d\u0434\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u0430\u043a \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435\u201d \u0438 \u201c\u043e\u0431\u0449\u0438\u0435\u201d. \u041b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0445\u0435\u043c\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gm\/ge\/96\/gmge96jfdu-njwglmcltlfkssc8.png\"><\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f 1<\/strong>: \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u2192 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ab\/c1\/20\/abc120tokmapo57qewev7zhfblm.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (index.html), \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c 2 \u0431\u0430\u043d\u0434\u043b\u0430: <code>Common.JS<\/code> + <code>applicant+index.JS<\/code>, \u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \/applicant \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 4 \u0431\u0430\u043d\u0434\u043b\u0430. \u041d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u0442\u0430\u043a\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 HTTP2.0.<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u043e\u0433\u043e:<br \/>  +: \u0414\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435<br \/>  +: \u041c\u043e\u0434\u0443\u043b\u0438 \u043b\u0435\u0433\u043a\u043e \u043a\u044d\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043b\u0438\u0437\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u0431\u0430\u043d\u0434\u043b\u044b \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<br \/>  -: \u041c\u043d\u043e\u0433\u043e \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0438\u0437\u0434\u0435\u0440\u0436\u0435\u043a \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0424\u0438\u043a\u0441\u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f HTTP2.0.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f 2<\/strong>: \u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sg\/ul\/pu\/sgulpuswmuihndapmyryfff6voc.png\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439, \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0440\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0441\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. \u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 1 \u041a\u0431? \u0447\u0442\u043e \u043d\u0435 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435 Chrome.<\/p>\n<p>  <\/p>\n<p>+: \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043b\u0438\u0437\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0432 \u043a\u044d\u0448\u0435 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<br \/>  -: \u0415\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0440\u043e\u0441\u0442 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0438\u0437\u0434\u0435\u0440\u0436\u0435\u043a, \u0435\u0441\u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435\u0442 HTTP2.0<br \/>  -: \u041a\u044d\u0448\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 1 \u041a\u0431. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0430\u0441\u0442\u0438 Service worker. \u041e \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0436\u0438\u0437\u043d\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u0438\u043d\u0443\u0441\u044b \u0440\u0435\u0448\u0430\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f 3<\/strong>: \u0418\u043c\u0435\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0430\u043d\u0434\u043b \u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/aw\/gk\/ql\/awgkqlnqo9wrnqbvb8mbihutsvu.png\"><\/p>\n<p>  <\/p>\n<p>+: \u043c\u0430\u043b\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0430\u043d\u0434\u043b\u043e\u0432. \u0414\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u0435\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 JS + Common.JS<br \/>  -: \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e unused JS<br \/>  -: \u041f\u0440\u0438 \u0440\u0435\u043b\u0438\u0437\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u0431\u0430\u043d\u0434\u043b \u0437\u0430\u043d\u043e\u0432\u043e, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043a\u044d\u0448\u0435\u0439 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u042f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043b\u0438\u0431\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u043e\u043e\u0431\u0449\u0435, \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>\u0410\u043d\u0442\u0438-\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f 1<\/strong>: \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u044b\u043d\u043e\u0441\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e common:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/30\/cz\/ea\/30czeau4utcjbk2tako4cfkfnsw.png\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0432\u0435\u0440\u0445\u0435\u0434. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u0431\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0443 \u043d\u0435\u0433\u043e \u0431\u044b\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442 2 \u0431\u0430\u043d\u0434\u043b\u0430: Common.JS \u0438 Index.JS \u0437\u0430\u0442\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e\u0438\u0441\u043a\u0430\u0442\u0435\u043b\u044f. \u0418\u0442\u043e\u0433\u043e, \u043a\u043e\u0434 \u0434\u043b\u044f Dropdown.JS \u0438 Graph.JS \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0430\u0447\u0430\u043d \u0434\u0432\u0430\u0436\u0434\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a \ud83d\ude42<\/p>\n<p>  <\/p>\n<p><strong>\u0418\u0442\u043e\u0433\u043e<\/strong> <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 TTI \u043c\u0435\u0442\u0440\u0438\u043a\u0435. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0443 \u0432\u0430\u0441 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0439 JS, \u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043f\u043e\u0447\u0435\u043c\u0443. \u0414\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u043e\u043d \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c? \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e JS \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0444\u0444\u0442\u043e\u043f. \u041f\u043e\u0447\u0435\u043c\u0443 30 \u041a\u0431 JS \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u043d\u0435\u0435, \u0447\u0435\u043c 30 \u041a\u0431 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c JS \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438 \u0435\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0442\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c JS \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u043e\u0434, \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0435\u0433\u043e, \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u043e\u0433\u043e, \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 JS \u043a\u043e\u0434\u0430 \u043c\u044b \u0442\u0440\u0430\u0442\u0438\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u043d\u0430 \u0442\u0443 \u0436\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n<p>  <\/p>\n<h4 id=\"raznosim-blokiruyuschie-resursy-css\">\u0420\u0430\u0437\u043d\u043e\u0441\u0438\u043c \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. CSS<\/h4>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 FMP, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 CSS.<br \/>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 react\\vue\\angular, \u0442\u043e \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0442\u043e\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432 \u0442\u043e\u043c \u0436\u0435 react-\u043a\u043e\u0434\u0435 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0432\u0438\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import '.\/styles.css'<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0431\u0430\u043d\u0434\u043b\u0438\u043d\u0433\u0430 JS-\u043a\u043e\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0438 CSS, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439 \u0432\u044b\u0448\u0435. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0431\u043f\u0430\u043a\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 <code>common.css<\/code>, <code>applicant-page.css<\/code> \u0438 <code>applicant+employer.css<\/code>.<br \/>  \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 CSS \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 <a href=\"https:\/\/github.com\/theKashey\/used-styles\">used-styles<\/a> \u0438 \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443: <a href=\"https:\/\/dev.to\/thekashey\/optimising-css-delivery-57eh\">&quot;optimising css delivery&quot;<\/a>. <a href=\"https:\/\/habr.com\/ru\/users\/kashey\/\" class=\"user_link\">kashey<\/a> \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043a\u043b\u0435\u0432\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \ud83d\ude42<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 hh.ru \u043f\u043e\u0447\u0442\u0438 \u043d\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u043e \u044d\u0441\u0442\u0438\u043c\u0435\u0439\u0442\u0430\u043c lighthouse:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/na\/yx\/bw\/nayxbw_daspyzj-kk564vb8el1q.png\"><\/p>\n<p>  <\/p>\n<h4 id=\"gruzim-to-chto-uvidit-polzovatel-a-ne-vsyu-stranicu\">\u0413\u0440\u0443\u0437\u0438\u043c \u0442\u043e, \u0447\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0430 \u043d\u0435 \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/h4>\n<p>  <\/p>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u042f \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0451 \u0432\u043b\u0435\u0437\u0435\u0442 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0430\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u044b\u0442\u0430 \u043f\u043e\u0434 \u043a\u043b\u0438\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0432\u0430\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0442\u043e\u0442 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0435\u0441\u044c CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, popup-\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u044b \u043f\u043e\u0434 JS \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 <code>rel=stylesheet<\/code> \u0443\u0436\u0435 \u0438\u0437 JS \u043a\u043e\u0434\u0430, \u043b\u0438\u0431\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c <code>prefetch<\/code> \u0441 <code>onload<\/code> \u043a\u043e\u043b\u0431\u0435\u043a\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043d\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043d\u0430\u0448 FMP. \u041e\u0431\u0449\u0435\u0433\u043e \u0441\u043e\u0432\u0435\u0442\u0430 \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0442, \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0430\u0439\u0442 \u0438 \u0432\u044b\u044f\u0441\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443.<\/p>\n<p>  <\/p>\n<h4 id=\"vynosim-third-party-skripty\">\u0412\u044b\u043d\u043e\u0441\u0438\u043c third-party \u0441\u043a\u0440\u0438\u043f\u0442\u044b<\/h4>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0432 hh \u0438\u0445 \u043c\u043d\u043e\u0433\u043e. \u041e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e!<br \/>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440? \u0437\u0434\u0435\u0441\u044c \u0432 \u0422\u041e\u041f-10 \u0441\u0430\u043c\u044b\u0445 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 7 \u2014 third-party.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ud\/qz\/0b\/udqz0burrz8vqb9br0wdlk84kae.png\"><\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441 \u044d\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 FMP.<\/li>\n<li>\u0414\u043b\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0432\u0435\u0449\u0435\u0439 (\u0438\u0437\u043b\u0438\u0448\u043d\u0435\u0439 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438, popup-\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438) \u2014 \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0438\u0445 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 &quot;\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439&quot; \u043a\u043e\u0434. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u0447\u0430\u0432 \u0438\u0445 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u043e <code>requestIdleCallback<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u0437\u043e\u0432 \u043a\u043e\u043b\u0431\u0435\u043a\u0430 \u0441 \u043d\u0438\u0437\u0448\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u0442\u044c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043d\u0430 FMP, \u0445\u043e\u0442\u044f \u0432 TTI \u043c\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u043e\u0436\u043e\u0440\u043b\u0438\u0432\u044b\u0445 third-part \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<h4 id=\"gruzim-kartinki-lenivo\">\u0413\u0440\u0443\u0437\u0438\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043b\u0435\u043d\u0438\u0432\u043e<\/h4>\n<p>  <\/p>\n<p>\u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0432\u0430\u0448 TTI. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0438\u0437-\u0437\u0430 \u043b\u0438\u0448\u043d\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043b\u0435\u043d\u0438\u0432\u043e. \u0422\u043e \u0435\u0441\u0442\u044c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0433\u0440\u0443\u0437\u0438\u043c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e<\/li>\n<li>\u041e\u0441\u0442\u0430\u0432\u0448\u0438\u043c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442 \u043a \u043d\u0435\u043c\u0443<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\\\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434 \u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. <a href=\"https:\/\/css-tricks.com\/the-complete-guide-to-lazy-loading-images\/\">\u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c<\/a> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0434\u0445\u043e\u0434.<\/li>\n<\/ol>\n<p>  <\/p>\n<h3 id=\"http20\">HTTP2.0<\/h3>\n<p>  <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 HTTP2.0 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0441\u0442\u043e\u0438\u0442.<\/p>\n<p>  <\/p>\n<h4 id=\"http20-multipleksing\">HTTP2.0 \u041c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u043d\u0433<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0441\u0430\u0439\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, HTTP2.0 \u0441 \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u043d\u0433\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c.<br \/>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 6 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u0430\u0439\u0442. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0439 JS. \u0421\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b HTML:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ja\/_z\/mu\/ja_zmuqqfvso1kfsgxkii-odikc.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u0443:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k2\/t1\/cs\/k2t1cswyps4phzhwu6afyvjtooe.png\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439: \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f\u0437\u0430\u0442\u0440\u0430\u0442\u043d\u044b\u0435 \u044d\u0442\u0430\u043f\u044b \u043d\u0430 TCP handshake \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438. \u041e\u043d\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0432\u0435\u0442 \u201c\u043d\u0443\u0436\u0435\u043d \u0431\u0430\u043d\u0434\u043b\u0438\u043d\u0433 \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0434\u0438\u043d \u0431\u0430\u043d\u0434\u043b \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0435\u043c\u0443 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 CSS \\ JS \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438\u201d \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435?<\/p>\n<p>  <\/p>\n<p>\u041c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rw\/v_\/cw\/rwv_cwsbugifzel7zs5dpd6lizm.png\"><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0433\u0440\u0443\u0437\u0438\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0422\u0430\u043a \u043c\u044b \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<h4 id=\"http20-szhatie-zagolovkov\">HTTP2.0 \u0421\u0436\u0430\u0442\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u0414\u043e http2.0 \u0441\u0436\u0430\u0442\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e. \u0412 HTTP2.0 \u0431\u044b\u043b \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d HPACK, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0436\u0430\u0442\u0438\u0435. <a href=\"https:\/\/tools.ietf.org\/html\/rfc7541\">\u0417\u0434\u0435\u0441\u044c<\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. <\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 HPACK \u0432\u043a\u0440\u0430\u0442\u0446\u0435:<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0441\u043b\u043e\u0432\u0430\u0440\u044f:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u2014 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/li>\n<li>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u2014 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Huffman coding. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u0430 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0438 \u043c\u0430\u043b\u043e\u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<h4 id=\"http20-server-push\">HTTP2.0 Server push<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 server push \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0418\u0434\u0435\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u0448 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439-\u0442\u043e css, \u0442\u0430\u043a\u0443\u044e-\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0442\u0430\u043a\u043e\u0439-\u0442\u043e JS.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e (nginx):<\/p>\n<p>  <\/p>\n<pre><code class=\"nginx\">location = \/index.html {     http2_push \/style.css;     http2_push \/bundle.JS;     http2_push \/image.jpg;   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rv\/vw\/fn\/rvvwfn2cj7blwzg35baixmev3ui.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0430\u0439\u0442, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043f\u0430\u0439\u043f-\u043b\u0430\u0439\u043d. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043c\u0435\u043d\u0430 \u0432\u0430\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f nginx, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0443\u0440\u043b\u044b \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 http2_push \u043f\u0440\u0430\u0432\u0438\u043b\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"szhatie-dannyh\">\u0421\u0436\u0430\u0442\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f gzip \u0438 brotli. <a href=\"https:\/\/tools.paulcalvano.com\/compression.php\">\u0412\u043e\u0442 \u0441\u0430\u0439\u0442<\/a>, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0441\u0436\u0430\u0442\u0438\u044f \u0434\u0432\u0443\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-z\/wb\/00\/-zwb00wzznbmbrwirgkfdjotgxs.png\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043c\u044b \u0432 hh.ru \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u0441 gzip \u043d\u0430 \u0431\u0440\u043e\u0442\u043b\u0438. \u0420\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u0441 736 \u041a\u0411 \u0434\u043e 657. \u0412\u044b\u0438\u0433\u0440\u0430\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 12%.<\/p>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c Brotli \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430 &quot;\u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0443&quot; \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u043e\u043d\u0430 \u0442\u044f\u0436\u0435\u043b\u0435\u0435, \u0447\u0435\u043c gzip. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 nginx \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0430\u043a\u043e\u0432\u0430\u043b \u0440\u0435\u0441\u0443\u0440\u0441 \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b \u0435\u0433\u043e \u0440\u044f\u0434\u043e\u043c, \u0434\u0430\u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041d\u0443 \u0438\u043b\u0438 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0441\u0440\u0430\u0437\u0443 \u043a\u043b\u0430\u0441\u0442\u044c \u0441\u0436\u0430\u0442\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0434\u043b\u044f gzip.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Brotli \u2014 \u0432\u0430\u0448 \u0431\u0440\u043e! \u041d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0441\u0435\u043a\u0443\u043d\u0434\u0443-\u043f\u043e\u043b\u0442\u043e\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u044b\u0445 3G \u0441\u0435\u0442\u044f\u0445, \u0447\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432 \u0442\u043e\u043c \u0436\u0435 lighthouse.<\/p>\n<p>  <\/p>\n<h3 id=\"kesh\">\u041a\u042d\u0428<\/h3>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/em>: \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0437\u0434\u0435\u0441\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0430\u043b\u043b\u044b \u0443 lighthouse, \u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430 FMP, \u0442\u0430\u043a \u0438 \u043d\u0430 TTI.<br \/>  \u0421\u0430\u043c \u043a\u044d\u0448 \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0443 \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Service Worker.<br \/>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0436\u0438\u0442 3 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>last-modified \u0438\u043b\u0438 expires<\/li>\n<li>ETag<\/li>\n<li>Cache-control<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 (last-modified \u0438 expires) \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e \u0434\u0430\u0442\u0435, \u0432\u0442\u043e\u0440\u043e\u0439 ETag \u2014 \u044d\u0442\u043e \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0438 \u0435\u0441\u043b\u0438 \u043a\u043b\u044e\u0447\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442, \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0432\u0435\u0442\u0438\u0442 304 \u043a\u043e\u0434\u043e\u043c. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0443\u0442, \u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441. \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 Nginx \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"nginx\">location ~* ^.+\\.(js|css)$ {             ...     etag on; }<\/code><\/pre>\n<p>  <\/p>\n<p>Disk cache \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0435\u0440\u0435\u0437 dev tools:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8i\/dp\/ku\/8idpkunxcekr8eou9gvp4228bis.png\"><\/p>\n<p>  <\/p>\n<p>Cache-control \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u043e\u0432\u0441\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 cache-control: no-cache, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f html \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u041b\u0438\u0431\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 max-age, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u044c\u0448\u0435. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 Cache-control:<\/p>\n<p>  <\/p>\n<pre><code class=\"nginx\">cache-control: max-age=315360000, public<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0447\u0430\u0441\u0442\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u044b (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432 \u0434\u0435\u043d\u044c \u0440\u0435\u043b\u0438\u0437\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0434 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0431\u0430\u043d\u0434\u043b\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0431\u0430\u043d\u0434\u043b\u044b, \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u043a\u043e\u0434 \u0438 \u0442.\u0434.<br \/>  \u0427\u0442\u043e\u0431\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043a\u043e\u0434 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u044d\u0448\u0438, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0432 \u0431\u043b\u043e\u0433\u0435 <a href=\"https:\/\/v8.dev\/blog\/code-caching-for-devs\">v8<\/a><br \/>  \u041d\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0432\u043e\u0442 \u044d\u0442\u0430 \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\/kd\/xw\/20\/kdxw20entdgyowz8h12j190ugfi.png\"><\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c &quot;\u0442\u0440\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430&quot; \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: cold\\warm \u0438 hot run. \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 hot run, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u043e\u0434\u0430. \u0415\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c hot run, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442 \u0432 \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 (\u0437\u0430 \u043e\u0434\u043d\u0438\u043c\u0438 \u0438 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438) \u0432 \u0442\u0430\u0439\u043c\u0441\u043b\u043e\u0442\u0435 \u0432 72 \u0447\u0430\u0441\u0430. \u0412 \u0442\u0440\u0435\u0442\u0438\u0439 \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d warm run, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0434\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u043a\u044d\u0448.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0444\u043e\u0440\u0441\u0438\u0442\u044c hot run, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 Service Worker. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e Service Worker;<\/li>\n<li>Service worker \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 fetch;<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 fetch \u0437\u0430 \u0441\u0442\u0430\u0442\u0438\u043a\u043e\u0439, \u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u044d\u0448;<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0432 \u043a\u044d\u0448\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u0431\u0443\u0441\u0442\u0438\u0442\u044c \u0434\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u043a\u044d\u0448 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c hot run \u0443\u0436\u0435 \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0449\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u044d\u0448.<\/p>\n<p>  <\/p>\n<p>\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">self.addEventListener('fetch', function(event) {         \/\/ \u041a\u0435\u0448\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u043a\u0443, \u043d\u043e \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438     if (event.request.url.indexOf(staticHost) !== -1 &amp;&amp; event.request.url.search(\/\\.(svg|png|jpeg|jpg|gif)\/) === -1) {         return event.respondWith(                         \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u0435\u0448\u0435             caches.match(event.request).then(function(response) {                 if (response) {                     return response;                 }                                 \/\/ \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u0435\u0448\u0435 \u043d\u0435\u0442, \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u044b\u0437\u044b\u0432\u0430\u0435\u043c cacheStatic                 return fetch(event.request).then(function(response) {                     caches.open(cacheStatic).then(function(cache) {                         cache.add(event.request.url);                     });                      return response;                 });             })         );     } });<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"itogo\">\u0418\u0442\u043e\u0433\u043e<\/h2>\n<p>  <\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430\u0448 Critical render path \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 (\u043d\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u044f\u0441\u044c \u0432 \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438, \u043a\u0430\u043a \u0440\u0435\u0437\u043e\u043b\u0432 DNS, handshake, \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0411\u0414 \u0438 \u0442.\u043f.). \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0442\u0435 \u0448\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 (\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0442.\u0434.)\/ \u0418 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438: \u0431\u0430\u043d\u0434\u043b\u0438\u043d\u0433, \u043a\u044d\u0448, \u0441\u0436\u0430\u0442\u0438\u0435, \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432\u0448\u0438\u0441\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430\u0445 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u0435: \u0437\u0434\u0435\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u043d\u0435 \u0432\u0441\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0438\u0445 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <a href=\"https:\/\/web.dev\/content-visibility\/\">chrome 85<\/a> \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>content-visibility<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0437\u0430 \u0441\u0447\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439.<\/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\/company\/hh\/blog\/513940\/\"> https:\/\/habr.com\/ru\/company\/hh\/blog\/513940\/<\/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\/company\/hh\/blog\/513940\/\">\n<p>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\u0436\u0438\u0434\u043a\u0438\u0435 \u0430\u043f\u043b\u043e\u0434\u0438\u0441\u043c\u0435\u043d\u0442\u044b). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u043f\u0438\u0448\u0443 \u043a\u043e\u0434, \u044f \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u044e \u0432 <a href=\"https:\/\/school.hh.ru\/\">\u0428\u043a\u043e\u043b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 hh.ru.<\/a><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0438\u0441\u0438 \u043d\u0430\u0448\u0438\u0445 \u043b\u0435\u043a\u0446\u0438\u0439 \u043e\u0442 2018-2019 \u0443\u0447\u0435\u0431\u043d\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/www.youtube.com\/watch?v=eHWMtfqxjes&amp;list=PLGn25JCaSSFQQOab_xMXI3vJ0tDUkFaCI\">\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 youtube<\/a><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u0443 \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u0430 \u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043b\u0435\u043a\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e 3 \u0447\u0430\u0441\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0430\u043b\u044c\u043c\u0430\u043d\u0430\u0445. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f8\/v2\/gd\/f8v2gdtasndn2e1cicwmarsy1im.jpeg\"><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/slides.com\/nikmostovoy\/deck\/fullscreen\">\u0412\u043e\u0442 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u043d\u0435\u043e\u0445\u043e\u0442\u0430 \u0447\u0438\u0442\u0430\u0442\u044c \u043b\u043e\u043d\u0433\u0440\u0438\u0434, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u043d\u0433\u0440\u0438\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u0441\u0435\u0441\u0442. \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0417\u0430\u0447\u0435\u043c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/li>\n<li>FMP, TTI + <a href=\"https:\/\/www.youtube.com\/watch?v=4joeMk5v8Rw\">\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435<\/a> <\/li>\n<li>Critical render path, DOM, CSSOM, RenderTree<\/li>\n<li>\u0428\u0430\u0433\u0438 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 + <a href=\"https:\/\/www.youtube.com\/watch?v=bZfULA8PPgE\">\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435<\/a><br \/>\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-308028","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308028","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=308028"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308028\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=308028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=308028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=308028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}