{"id":303638,"date":"2020-05-15T09:00:13","date_gmt":"2020-05-15T09:00:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=303638"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=303638","title":{"rendered":"\u0414\u043e\u0440\u043e\u0433\u0430\u044f \u0446\u0435\u043d\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u0414\u043e\u043a\u043b\u0430\u0434 \u042f\u043d\u0434\u0435\u043a\u0441\u0430"},"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\/yandex\/blog\/501998\/\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 CSS \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2014 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u0415\u0441\u043b\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JavaScript \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0442\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u043e\u0433\u043e \u0433\u043e\u0441\u0442\u044f \u0441 \u0441\u0430\u0439\u0442\u0430. \u041a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c CSS \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439? \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u041d\u0438\u043a\u0438\u0442\u0430 \u0414\u0443\u0431\u043a\u043e <a href=\"https:\/\/habr.com\/ru\/users\/darkmefody\/\" class=\"user_link\">DarkMeFoDy<\/a> \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u0432 \u041c\u0438\u043d\u0441\u043a\u0435.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/kATRlMrtaaY?rel=0&amp;showinfo=1&amp;hl=en-US\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media; accelerometer; gyroscope; picture-in-picture\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u2014 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438. \u0412\u0441\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043f\u0440\u043e TypeScript \u0434\u0430 TypeScript. \u0410 \u044f \u043f\u0440\u043e Cascade style script \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041a\u043e\u0440\u043e\u0442\u043a\u043e \u043e \u0441\u0435\u0431\u0435. \u042f \u0431\u0435\u043b\u043e\u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u2014 \u043f\u043e\u0441\u043b\u0435 \u0444\u0438\u043b\u044c\u043c\u0430 \u0414\u0443\u0434\u044f \u0431\u0443\u0434\u0443 \u0432\u0435\u0437\u0434\u0435 \u0442\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043c\u043e\u0439 \u0433\u043e\u043b\u043e\u0441 \u0432 \u043f\u043e\u0434\u043a\u0430\u0441\u0442\u0435 \u00ab\u0412\u0435\u0431-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b\u00bb, \u0438 \u0435\u0441\u043b\u0438 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0438 \u0432 \u043b\u0435\u043d\u0442\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u00ab\u0412\u0435\u0431-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432\u00bb, \u044d\u0442\u043e \u0442\u043e\u0436\u0435, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u044f.<\/p>\n<p>  \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0434\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440. \u0412 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u0443\u043c\u0441\u0442\u0432 \u2014 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u0441\u044c \u043a\u043e \u0432\u0441\u0435\u043c\u0443, \u0447\u0442\u043e \u044f \u0433\u043e\u0432\u043e\u0440\u044e, \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u043e\u0439. \u041f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0439\u0442\u0435, \u0437\u0430\u0447\u0435\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u0435\u043c\u044b, \u0430 \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0435. \u041f\u043e\u0435\u0445\u0430\u043b\u0438.<\/p>\n<h2>\u0417\u0430\u0447\u0435\u043c?<\/h2>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u2014 \u0437\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e CSS?<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u0445 \u043f\u0440\u043e \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 JS, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 CSS, \u0442\u043e \u0432 \u0442\u043e\u043f\u0435 \u0432\u044b\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e\u0442 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u0435\u043d. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fd\/fy\/mh\/fdfymhsjiglvpavgqbzxrczyqo8.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 Google, \u0435\u0441\u0442\u044c 111 \u043c\u043b\u043d \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u0440\u043e JS, \u0430 \u043f\u0440\u043e CSS \u0432\u0441\u0435\u0433\u043e 26 \u043c\u043b\u043d.<\/p>\n<p>  \u0422\u0430\u043a, \u043c\u043e\u0436\u0435\u0442, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u0430\u0436\u043d\u043e? \u0417\u0430\u0447\u0435\u043c \u043f\u0440\u043e \u044d\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c? \u0415\u0441\u043b\u0438 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0434\u043e\u043a\u043b\u0430\u0434\u044b \u043e \u043f\u0435\u0440\u0444\u043e\u0440\u043c\u0430\u043d\u0441\u0435 JS, \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0438\u0445 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u0415\u0441\u0442\u044c \u043f\u0440\u043e React, \u043f\u0440\u043e \u0432\u0441\u044f\u043a\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043f\u0440\u043e Vanilla \u0438 \u0442. \u0434. \u0410 \u043f\u0440\u043e CSS \u044f \u043d\u0430\u0448\u0435\u043b \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0434\u043e\u043a\u043b\u0430\u0434. \u0413\u0430\u0440\u0440\u0438 \u0420\u043e\u0431\u0435\u0440\u0442\u0441 \u0432 2018 \u0433\u043e\u0434\u0443 \u0447\u0438\u0442\u0430\u043b \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 <a href=\"https:\/\/youtu.be\/WvBF1_-a5OY\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u043f\u0440\u043e CSS performance. \u042f \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u043d\u0430\u0448\u0435\u043b \u0432\u0442\u043e\u0440\u043e\u0439 <a href=\"https:\/\/youtu.be\/5XUuWVq-djs\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u043e\u0442 \u0420\u043e\u043c\u044b \u0414\u0432\u043e\u0440\u043d\u043e\u0432\u0430, \u00ab\u041f\u0430\u0440\u0441\u0438\u043c CSS: performance tips &amp; tricks\u00bb. \u041d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u044d\u0442\u043e \u0434\u043e\u043a\u043b\u0430\u0434 \u043f\u0440\u043e JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u0442 CSS. \u041d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0430\u0434\u043e. <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e CSS \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u041e\u0431\u0438\u0434\u043d\u043e. <\/p>\n<p>  \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u0445\u043e\u0436\u0443 \u0432 \u0432\u0435\u0431, \u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0438\u0436\u0443 HTML. \u0418 \u0435\u0449\u0435 \u044f \u0432\u0438\u0436\u0443 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041d\u043e \u044f \u043d\u0435 \u0432\u0438\u0436\u0443 JS. JS \u2014 \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0432\u0438\u0433\u0430\u0435\u0442 CSS \u0438 HTML \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e. \u042d\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442. \u0418 \u0435\u0441\u043b\u0438 JS \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f CSS. <\/p>\n<p>  \u041e\u0448\u0438\u0431\u043a\u0438 \u0432 JS \u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043c\u043e\u043b\u0447\u0430. \u0418 \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043b\u0435\u0437\u0435\u0442 \u0432 DevTools \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c: \u00ab\u041e\u0439, \u0443 \u0432\u0430\u0441 \u0442\u0430\u043c \u044d\u0442\u043e, \u043e\u0448\u0438\u0431\u043e\u0447\u043a\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438\u00bb. \u041d\u043e \u0435\u0441\u043b\u0438 CSS \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e. <\/p>\n<p>  \u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u0442\u044c \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435. <a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\">38%<\/a> \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0443\u0432\u0438\u0434\u044f\u0442, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u044f\u043c\u043e \u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u2014 \u043e\u043d\u0438 \u0442\u0443\u0442 \u0436\u0435 \u0443\u0439\u0434\u0443\u0442. \u0410 <a href=\"http:\/\/www.mcrinc.com\/Documents\/Newsletters\/201110_why_web_performance_matters.pdf\">88%<\/a> \u043f\u043e\u0442\u0435\u0440\u043f\u044f\u0442, \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u0430 \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u0441\u044f \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u0443\u044e\u0442 \u0432\u0430\u0448 \u0441\u0430\u0439\u0442. <\/p>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u0441\u0435 \u0441\u0438\u0434\u0438\u043c \u043f\u043e \u0434\u043e\u043c\u0430\u043c, \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0442\u0440\u0430\u0444\u0438\u043a \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u044b\u0440\u043e\u0441. \u0418 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u042f\u043d\u0434\u0435\u043a\u0441\u0430. \u0415\u0441\u043b\u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0432\u044b\u0434\u0430\u0447\u0443 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043d\u0430 100 \u043c\u0441 \u0438 \u043e\u0442\u0434\u0430\u0434\u0438\u043c, \u0441\u043a\u0430\u0436\u0435\u043c, 200 \u043c\u043b\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u0434\u0435\u043d\u044c (\u044f \u043d\u0435 \u0437\u043d\u0430\u044e \u0442\u043e\u0447\u043d\u0443\u044e \u0446\u0438\u0444\u0440\u0443), \u0442\u043e \u0437\u0430 \u044d\u0442\u043e\u0442 \u0434\u0435\u043d\u044c \u043c\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c 0,1 \u0441 * 200 \u043c\u043b\u043d = 232 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e-\u0434\u043d\u044f. \u041f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u0432\u044b\u0434\u0430\u0447\u0443 \u043d\u0430 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0418 CSS \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0432 \u0441\u044b\u0449\u0438\u043a\u043e\u0432 \u0438 \u0432\u044b\u044f\u0441\u043d\u0438\u043c, \u043a\u0430\u043a \u0432\u044b\u0436\u0430\u0442\u044c \u0438\u0437 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c.<\/p>\n<h2>\u0417\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435!<\/h2>\n<p>  \u0421\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u043e\u0432\u0435\u0442 \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0441\u0451 \u0437\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435. \u041d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0440\u044b \u043f\u043e\u043a\u0430\u0436\u0443\u0442, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e. \u042d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043b\u044e\u0431\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u041f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u043c\u044b, \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e <a href=\"https:\/\/youtu.be\/Whm2FMBIgA0\">\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b<\/a> \u0410\u043d\u0434\u0440\u0435\u0439 \u041f\u0440\u043e\u043a\u043e\u043f\u044e\u043a \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u0438 SERP \u043d\u0430 HolyJS, \u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443.<\/p>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0440\u043e\u0432?<\/p>\n<p>  \u2014 \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u0440\u044f\u0442\u044c \u043d\u0430 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445, \u043d\u0435 \u0442\u0430\u043a\u0438\u0445 \u043a\u0440\u0443\u0442\u044b\u0445, \u043a\u0430\u043a \u0443 \u0432\u0430\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/webpagetest.org\/\">WebPageTest<\/a>. \u042f \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u044e \u0437\u0430\u043c\u0435\u0440\u044b \u0442\u0430\u043c. <\/p>\n<p>  \u2014 \u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c Lighthouse, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Chromium. \u041e\u043d, \u043a\u0430\u043a \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0440\u044b, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0432\u0435\u0449\u0438. <\/p>\n<p>  \u2014 \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u0434\u0438\u0442\u0435 \u0432 DevTools, \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Performance. \u0412 \u043d\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vx\/xl\/jl\/vxxljlbogdfjvd0v2kyqedewfxy.png\"><\/p>\n<p>  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432 Performance \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u0412\u044b \u0441\u0438\u0434\u0438\u0442\u0435 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043a\u0440\u0443\u0442\u043e\u043c \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0435 \u0441 \u043a\u0440\u0443\u0442\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c \u0432 \u043e\u0444\u0438\u0441\u0435, \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435, \u043d\u043e \u043a \u0432\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442: \u00ab\u0423 \u043c\u0435\u043d\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u00bb. \u0410 \u0432\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435: \u00ab\u0423 \u043c\u0435\u043d\u044f \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00bb. \u041d\u0435 \u043d\u0430\u0434\u043e \u0442\u0430\u043a. <\/p>\n<p>  \u0412\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043c\u0435\u0442\u0440\u043e \u0438\u043b\u0438 \u0435\u0449\u0435 \u0433\u0434\u0435-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u0439\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0449\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0442\u044c CPU, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043a \u0432\u0430\u043c \u0437\u0430\u0439\u0442\u0438 \u0441 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c Nokia 3110. \u0415\u043c\u0443 \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0430\u0439\u0442. <\/p>\n<p>  \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435: \u0437\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445. \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430, \u0442\u043e\u0447\u043d\u0435\u0435, \u0446\u0435\u043b\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u0440\u0438\u043a \u2014 RUM, Real User Monitoring. \u042d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0437\u0430\u043c\u0435\u0440\u044f\u0435\u0442\u0435 \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443 \u0432\u0430\u0441 \u0432 \u043a\u043e\u0434\u0435, \u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043e\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u044d\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u0447\u0442\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043a\u043b\u0438\u043a \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. <\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u0435 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u043e\u0432. \u0421\u043e\u0442\u043e\u0447\u043a\u0430 \u0432 Lighthouse \u2014 \u044d\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0434\u0430 \u0445\u043e\u0440\u043e\u0448\u043e. \u0417\u043d\u0430\u0447\u0438\u0442, \u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u0442\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Lighthouse. \u041d\u043e \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u0438 \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0442\u043e\u0447\u043a\u0435 \u0432 Lighthouse \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0432\u044b \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/87\/wo\/vy\/87wovypukv_5jon_cckkmquysv8.png\"><\/p>\n<p>  \u0415\u0441\u0442\u044c \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0436\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u042d\u0442\u043e First Contentful Paint, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0438\u0442\u0430\u0442\u044c. \u042d\u0442\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0435\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ou\/qh\/ps\/ouqhpsje89l90fpwkweoigf-yoo.png\"><\/p>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 Largest Contentful Paint. \u0427\u0430\u0441\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043c\u0435\u0434\u0438\u0439\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0438 \u043d\u0430 \u043d\u0435\u0439 \u0432\u0430\u0436\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0422\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0430. <\/p>\n<h2>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 CSS<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a CSS, \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a CSS \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f. \u041f\u0440\u0438\u0435\u043c\u044b \u0434\u0430\u0432\u043d\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435. \u0415\u0441\u0442\u044c Critical Rendering Path, \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041e\u043d \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0437\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u043c \u0438 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u043f\u0438\u043a\u0441\u0435\u043b\u0438. \u041f\u0440\u043e \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0434\u043e\u043a\u043b\u0430\u0434\u044b. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vq\/ks\/0c\/vqks0cvvuksxry8cx3s4al0x2ve.png\"><\/p>\n<p>  \u041e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c HTML, \u0432\u0438\u0434\u0438\u0442 \u0442\u0435\u0433\u0438. \u041e\u043d \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438\u0445 \u043f\u0430\u0440\u0441\u0438\u0442, \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u0441 \u043d\u0438\u043c\u0438 \u0434\u0435\u043b\u0430\u0442\u044c. \u0413\u0440\u0443\u0437\u0438\u0442. \u041d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 link. \u041d\u0430\u0434\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u043a\u0430\u043a? \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u2014 \u0448\u0442\u0443\u043a\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0430\u044f. \u041a\u043e\u0433\u0434\u0430 \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b, \u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ho\/1n\/w_\/ho1nw_darogfblz5outv9qoh5wi.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0430\u0442\u043a\u043d\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043d\u0430 \u043e\u0434\u0438\u043d link \u2014 \u0441\u043d\u043e\u0432\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043d\u0435 \u0434\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f. \u0411\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 JS, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u043d\u0433. \u0418 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442. \u041d\u043e \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <\/p>\n<h2>&lt;link&gt;<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043f\u043d\u0435\u043c \u0433\u043b\u0443\u0431\u0436\u0435 \u2014 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a link?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3w\/eb\/cs\/3webcs2yte1_pqw5nzwvmj_epy4.png\"><\/p>\n<p>  \u0417\u0430\u043f\u0438\u0441\u044c, \u043a\u0443\u0434\u0430 \u043c\u044b \u0445\u043e\u0434\u0438\u043c, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f. \u0415\u0441\u0442\u044c style CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0434\u0435-\u0442\u043e \u043b\u0435\u0436\u0438\u0442. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0434\u043d\u043e \u043a\u043b\u0430\u0441\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u043d\u0430 CDN. <\/p>\n<h4>\u041a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438?<\/h4>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/u8\/me\/ix\/u8meixyugzfctlaocm2xzo862po.png\"><\/p>\n<p>  \u041e\u043d \u0432\u0438\u0434\u0438\u0442 URL, \u0438 \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u044d\u0442\u043e\u0442 URL \u2014 \u043e\u043d \u043f\u0440\u043e \u0447\u0442\u043e? \u041c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438, \u0447\u0442\u043e URL \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/26\/2m\/6b\/262m6bmfjupam-ega9z7tmpibzk.png\"><\/p>\n<p>  \u041d\u043e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c IP-\u0430\u0434\u0440\u0435\u0441 \u044d\u0442\u043e\u0433\u043e URL \u0438 \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043c\u0430\u0448\u0438\u043d\u043a\u0443 \u043f\u043e IP-\u0430\u0434\u0440\u0435\u0441\u0443. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ys\/nq\/ah\/ysnqah21cz075zefg6khjupdm-w.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e CDN \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u0432 DNS \u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0434\u0438\u0442\u044c \u0443\u0436\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e IP-\u0430\u0434\u0440\u0435\u0441\u0443. \u041a\u0430\u043a \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c\u0441\u044f?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lz\/cl\/sn\/lzclsnosywf5yaqi0fihvdefism.png\"><\/p>\n<p>  \u0411\u0435\u0437\u0443\u043c\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u2014 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e DNS-\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412\u0437\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0441\u0430\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: \u00ab\u041f\u0435\u0440\u0435\u0441\u044f\u0434\u044c \u043f\u043e\u0431\u043b\u0438\u0436\u0435\u00bb \u0438\u043b\u0438 \u00ab\u041f\u0435\u0440\u0435\u0435\u0434\u044c \u043f\u043e\u0431\u043b\u0438\u0436\u0435\u00bb. <\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u0441\u044b\u043b\u043a\u0435 IP-\u0430\u0434\u0440\u0435\u0441. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0438\u0441\u043a\u0430\u0442\u044c DNS, \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442\u044c \u0434\u043e\u043c\u0435\u043d\u044b, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0430\u0439\u043f\u0438\u0448\u043d\u0438\u043a\u0443 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442? \u0411\u0435\u0437\u0443\u043c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 DDoS \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 DNS-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u0441 \u0441\u043f\u0430\u0441\u0442\u0438. <\/p>\n<p>  \u0418 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f IP-\u0430\u0434\u0440\u0435\u0441\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/s4\/i0\/1v\/s4i01v9rasbbahddidnteghzu8a.png\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u0432\u0430\u0448\u0435\u043c\u0443 index.html \u0438\u043b\u0438 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443, \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0434\u043e\u043c\u0435\u043d\u0430, \u043a\u0443\u0434\u0430 \u0432\u044b \u0445\u043e\u0434\u0438\u0442\u0435. \u0422\u0443\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0434\u043e\u043c\u0435\u043d\u0435 \u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u043f\u043e\u0431\u043b\u0438\u0436\u0435 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u0434\u043e\u043c\u0435\u043d\u0443, \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0430\u043c \u044d\u0442\u043e\u0442 \u0434\u043e\u043c\u0435\u043d. \u0422\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 DNS \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e, \u043e\u043d \u0443\u0436\u0435 \u0435\u0441\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zn\/l1\/gg\/znl1ggztpsl37dgk1cmfo0ob8c8.png\"><\/p>\n<p>  \u041c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0449\u0438 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u0415\u0441\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0430\u0448\u0430 \u0441\u0442\u0438\u043b\u0435\u0432\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u043e\u0437\u0436\u0435 \u043f\u043e DOM-\u0434\u0435\u0440\u0435\u0432\u0443, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 &lt;link rel=\u00abdns-prefetch\u00bb&gt;, \u0447\u0442\u043e \u00ab\u044f \u043f\u043e\u043a\u0430 \u0442\u0443\u0434\u0430 \u043d\u0435 \u0445\u043e\u0436\u0443, \u043d\u043e \u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0435\u0439 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043c\u043d\u0435 \u043e\u043d\u0438 \u043f\u043e\u0442\u043e\u043c \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f\u00bb. <\/p>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u044c\u044e \u0432\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 DNS. \u041a\u043e\u0433\u0434\u0430 link \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u0434\u0435, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c IP-\u0430\u0434\u0440\u0435\u0441 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0445\u043e\u0434\u043e\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u0443\u0434\u0430 \u0432\u044b \u0442\u043e\u0447\u043d\u043e \u0437\u0430\u0439\u0434\u0435\u0442\u0435. <\/p>\n<p>  \u041e\u043a\u0435\u0439, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u043d\u0430\u0435\u0442, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438. \u0415\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0438\u0434\u0442\u0438. <\/p>\n<h4>\u041a\u0430\u043a \u0438\u0434\u0442\u0438?<\/h4>\n<p>  \u041c\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b. \u0421\u0435\u0439\u0447\u0430\u0441, \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u0434\u0435\u043b\u043e, https \u2014 \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435. \u0412 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438 \u043f\u043e\u043c\u0435\u0442\u044f\u0442 \u0432\u0430\u0448\u0438 \u0441\u0430\u0439\u0442\u044b \u043d\u0435 \u043d\u0430 https \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u043a\u0430\u043a \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435. <\/p>\n<p>  \u042f \u043d\u0430\u0448\u0435\u043b \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0443\u044e <a href=\"https:\/\/howhttps.works\/why-do-we-need-https\/\">\u0441\u0435\u0440\u0438\u044e<\/a> \u043a\u043e\u043c\u0438\u043a\u0441\u043e\u0432 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 https. \u041d\u043e \u043c\u044b \u0436\u0435 \u0430\u0439\u0442\u0438\u0448\u043d\u0438\u043a\u0438, \u043b\u044e\u0431\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u043a\u0438, \u0430 \u0432\u0435\u0441\u0435\u043b\u044b\u0435 \u043a\u043e\u043c\u0438\u043a\u0441\u044b \u2014 \u044d\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jq\/hh\/p1\/jqhhp1dzstopvkbbsf70gnkxwpw.png\"><\/p>\n<p>  \u042f \u0442\u0443\u0442 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 https. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 SSL-\u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442 \u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0417\u0430\u0442\u0435\u043c \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u0432\u0430\u043b\u0438\u0434\u043d\u043e, \u0430 \u0447\u0442\u043e \u043d\u0435\u0442, \u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c: \u00ab\u0434\u0430, \u0442\u0443\u0442 \u0432\u0441\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0441\u044f \u044d\u0442\u0438\u043c \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u043c\u00bb. <\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u044e\u0447\u0435\u0439 \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c, \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0434\u0435\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438. \u041d\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c\u0441\u044f. \u041a\u0430\u043a?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pq\/g1\/ue\/pqg1ueqmruwadkjjb7ff5sstwu0.png\"><\/p>\n<p>  \u041c\u044b \u0432\u043d\u043e\u0432\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u0430\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0431\u043b\u0438\u0436\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c. \u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c DNS, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u0431\u043b\u0438\u0436\u0435 \u043a \u0446\u0435\u043d\u0442\u0440\u0443 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u0418 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c\u0438 \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c, \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. <\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 https, \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0430\u043c? \u041c\u044b \u0442\u0440\u0430\u0442\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u0430, \u0448\u0438\u0444\u0440\u0443\u0435\u043c, \u0434\u0435\u0448\u0438\u0444\u0440\u0443\u0435\u043c. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435\u0442. \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0432\u0440\u0435\u0434\u043d\u044b\u0439 \u0441\u043e\u0432\u0435\u0442 \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0435, \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a. https \u2014 \u0437\u0430\u0449\u0438\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0431\u0435\u0437 https \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c http\/2, \u0430 http\/2 \u2014 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c\u0441\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jq\/hh\/p1\/jqhhp1dzstopvkbbsf70gnkxwpw.png\"><\/p>\n<p>  \u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f OCSP Stapling. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442 \u0431\u0435\u0437 \u0446\u0435\u043d\u0442\u0440\u0430 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0431\u043b\u0438\u0436\u0435 \u043a DevOps. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e \u043e\u043d \u0441\u043c\u043e\u0436\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0426\u0435\u043d\u0442\u0440\u0430 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e: \u00ab\u043f\u043e\u0432\u0435\u0440\u044c \u043c\u043d\u0435, \u043c\u043e\u0439 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442 \u043f\u0440\u0430\u0432\u0434\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439\u00bb. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u0442\u043e\u0442 \u0448\u0430\u0433, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0445\u043e\u0434\u0438\u043c \u0432 \u0426\u0435\u043d\u0442\u0440 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. <\/p>\n<p>  \u041d\u043e \u0442\u0443\u0442 \u043d\u044e\u0430\u043d\u0441 \u2014 \u0432 Chrome \u044d\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0432\u043d\u043e. \u041d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c. <\/p>\n<p>  \u042f \u0443\u0436\u0435 \u0434\u0432\u0430\u0436\u0434\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0435\u0440\u0435\u0441\u0430\u0434\u0438\u0442\u044c, \u0438 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435 \u0432\u0438\u0442\u0430\u0435\u0442 \u0438\u0434\u0435\u044f \u2014 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u043b\u0438\u0436\u0435 \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u044f \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u043b. \u042d\u0442\u043e CDN, \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0441\u0438\u0434\u0438\u044d\u043d\u043a\u0438, \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0443\u0447\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0435\u043d\u044c\u0433\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0437 \u0410\u0432\u0441\u0442\u0440\u0430\u043b\u0438\u0438 \u0445\u043e\u0434\u0438\u043b \u043a \u0430\u0432\u0441\u0442\u0440\u0430\u043b\u0438\u0439\u0441\u043a\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c. \u0422\u0443\u0442 \u043d\u0430 \u0432\u0430\u0441 \u0438\u0433\u0440\u0430\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0442\u0430, \u0447\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u044b. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043f\u043d\u0435\u043c \u0433\u043b\u0443\u0431\u0436\u0435. \u0427\u0442\u043e \u0435\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, https \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 http. \u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0430 \u043a\u043b\u0435\u0432\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430. \u0410 \u0435\u0441\u043b\u0438 \u0435\u0449\u0435 \u0433\u043b\u0443\u0431\u0436\u0435, \u0442\u043e http \u2014 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 TCP\/IP.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wl\/be\/sf\/wlbesfr8mnsmulrqrlgazdwxa_4.png\"><\/p>\n<p>  \u041a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u043a\u0430 \u043f\u0430\u043a\u0435\u0442\u0438\u043a\u043e\u0432, \u0431\u0430\u0439\u0442\u0438\u043a\u043e\u0432 \u0432 \u0441\u0435\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u043e\u0431\u0449\u0430\u043b\u0438\u0441\u044c? \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e TCP\/IP-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440, \u2014 \u044d\u0442\u043e \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u0435. <\/p>\n<p>  \u041d\u043e \u0432 2020 \u0433\u043e\u0434\u0443 \u0412\u041e\u0417 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u0439. \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f TCP Fast Open. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u0441\u0435\u0439 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u00ab\u041f\u0440\u0438\u0432\u0435\u0442, \u044f \u043a\u043b\u0438\u0435\u043d\u0442\u00bb \u2014 \u00ab\u041f\u0440\u0438\u0432\u0435\u0442, \u044f \u0441\u0435\u0440\u0432\u0435\u0440\u00bb \u2014 \u00ab\u042f \u0442\u0435\u0431\u0435 \u0432\u0435\u0440\u044e\u00bb \u2014 \u00ab\u0418 \u044f \u0442\u0435\u0431\u0435 \u0432\u0435\u0440\u044e. \u041f\u043e\u0435\u0445\u0430\u043b\u0438\u00bb. \u041c\u043e\u0436\u043d\u043e \u0443\u0436\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0418 \u0435\u0441\u043b\u0438 \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0448\u043b\u0430. \u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c TCP Fast Open.<\/p>\n<h4>\u0427\u0442\u043e \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c?<\/h4>\n<p>  \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0431\u0440\u0430\u0442\u044c \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u0422\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c: User-Agent. \u042f \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0433\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c User-Agent, \u0443\u0437\u043d\u0430\u0442\u044c, \u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0448\u0435\u043b. \u0423\u0437\u043d\u0430\u0442\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d \u043c\u0435\u043d\u044f \u043d\u0435 \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u0435\u0442, \u044d\u0442\u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vz\/qf\/ip\/vzqfip8wtewxm5tcesgrvu5fxdm.png\"><\/p>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043e\u043d \u0437\u0430\u0448\u0435\u043b \u0438\u0437 Firefox. \u0423 \u043c\u0435\u043d\u044f, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u0441\u0431\u043e\u0440\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 autoprefixer \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d, \u043e\u043d \u043c\u043d\u0435 \u043a\u0443\u0447\u0443 \u043a\u043e\u0434\u0430 \u043d\u0430\u0433\u0435\u043d\u0435\u0440\u0438\u043b. \u0414\u0430, \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0447\u0442\u043e \u0432\u0435\u0437\u0434\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u043e \u0432\u0435\u0434\u044c \u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0448\u0435\u043b \u0438\u0437 Firefox.<\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u043b\u0438\u0448\u043d\u0435\u0435? \u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0431\u0430\u0439\u0442\u043e\u0432, \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u043e.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f SERP, \u00ab\u0411\u0430\u0431\u0443\u043b\u044f\u00bb. \u041f\u0440\u043e \u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0412\u0438\u0442\u0430\u043b\u0438\u0439 \u0425\u0430\u0440\u0438\u0441\u043e\u0432 <a href=\"https:\/\/habr.com\/ru\/users\/vithar\/\" class=\"user_link\">vithar<\/a>, \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 <a href=\"https:\/\/youtu.be\/_muWJOUe420\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u043d\u0430 Web Standards Days. \u0422\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u041e\u043d\u0438 \u0432\u0435\u0441\u044f\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Firefox \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0435, WebKit \u2014 \u0441\u0432\u043e\u0435, \u0438 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043e. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/av\/3l\/rj\/av3lrjwxk0h7r1uvu2soqygili8.png\"><\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435. \u041c\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u041b\u043e\u0433\u0438\u0447\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u0447\u0442\u043e-\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0437 \u0431\u0430\u0437\u044b. \u041d\u043e \u043d\u0435 \u0432\u0441\u0435! \u0415\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0438 \u0434\u043b\u044f \u043a\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u043e\u043d\u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435.<\/p>\n<p>  \u0414\u0436\u0435\u0439\u043c\u0441 \u0410\u043a\u0432\u0443\u0445 \u043f\u0440\u043e \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u043b \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 <a href=\"https:\/\/youtu.be\/O_IEzdYi634\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u00abServer-Side Rendering. \u0421\u0434\u0435\u043b\u0430\u0439 \u0441\u0430\u043c\u00bb. \u0412 \u0447\u0435\u043c \u0441\u0443\u0442\u044c? \u0412\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c HTML \u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u043b\u044e\u0431\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043c\u043e\u0436\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0430\u0447\u0443 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0440\u0430\u0437\u0443 \u0432 \u043f\u043e\u0442\u043e\u043a\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435. \u0410 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u2014 \u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u0418 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435. <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><video controls style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute;\">Your browser does not support HTML5 video.<source src=\"https:\/\/mefody.dev\/talks\/css-cost\/images\/screencast-yandex-prerender.mp4\" type=\"video\/mp4\"><\/source><\/video><\/div>\n<\/div>\n<\/div>\n<p>  \u041c\u044b \u044d\u0442\u043e \u0434\u0430\u0432\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430 SERP, \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0438\u0441\u043a\u0430, \u0434\u0432\u0435 \u0444\u0430\u0437\u044b \u2014 presearch \u0438 postsearch. Presearch \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0448\u0442\u0443\u043a\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0448\u0435\u043b. \u041c\u044b \u0435\u043c\u0443 \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u0434\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0430\u043f\u043a\u0443.<\/p>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \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\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f. \u042d\u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438. \u041c\u044b \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  \u0418 \u0435\u0449\u0435 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u043f\u0440\u043e http\/2. \u042d\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u043d \u0435\u0449\u0435 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u2014 \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0442\u0435\u0441\u044c, \u043a\u0430\u043a \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c. <\/p>\n<p>  Server Push \u2014 \u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0411\u0440\u0430\u0443\u0437\u0435\u0440, \u044f \u0435\u0449\u0435 \u043d\u0435 \u043e\u0442\u0434\u0430\u043b \u0442\u0435\u0431\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u0431\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e CSS. \u041d\u043e \u044f \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u0440\u0436\u0438, \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u0438 \u0435\u0433\u043e\u00bb. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6b\/hr\/do\/6bhrdomeghpruxrhggwss8lpe4a.png\"><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0_\/h-\/eo\/0_h-eognhuhs4pp55sj0rzltkly.png\"><\/p>\n<p>  \u042d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0430\u0440\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438 \u0432\u0441\u0435 \u043d\u0430\u0447\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043f\u043d\u0435\u043c \u0435\u0449\u0435 \u0434\u0430\u043b\u044c\u0448\u0435. TCP. \u041c\u044b \u043f\u0440\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438: \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u0435, \u0431\u0430\u0439\u0442\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ht\/f4\/gy\/htf4gytrvdio_te6zyz5wsevhn8.png\"><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0443\u043a\u043e\u043f\u043e\u0436\u0430\u0442\u0438\u044f \u043c\u043e\u0439\u0442\u0435 \u0440\u0443\u043a\u0438. \u041d\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445 TCP \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0442\u044c \u0431\u0430\u0439\u0442\u044b, \u043f\u0440\u0438\u0447\u0435\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u0438\u0432\u0430\u043b\u0438 \u0432 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0438. <\/p>\n<p>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, (\u044d\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445) \u044d\u0442\u043e 1460 \u0431\u0430\u0439\u0442. \u0421\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443. \u041e\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u043a\u043d\u0430\u043c\u0438. <\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435 \u043e\u043a\u043d\u043e \u2014 14600 \u0431\u0430\u0439\u0442, \u0434\u0435\u0441\u044f\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0435, \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u0430. \u0415\u0441\u043b\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043f\u043b\u043e\u0445\u043e\u0435 \u2014 \u043c\u043e\u0436\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043e\u043a\u043d\u043e. \u0427\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c? \u0415\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0435 \u043e\u043a\u043d\u043e \u0438\u0437 \u0434\u0435\u0441\u044f\u0442\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u0430\u0439\u0442, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435. \u0418 \u0442\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041f\u0440\u043e \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0447\u0438\u0442\u0430\u043b <a href=\"https:\/\/habr.com\/ru\/company\/yandex\/blog\/336952\/\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u0412\u0438\u0442\u0430\u043b\u0438\u0439 \u0425\u0430\u0440\u0438\u0441\u043e\u0432. \u0418 \u0434\u0430, \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u2014 \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u043e \u043e\u043a\u043d\u043e \u0441\u0430\u0439\u0442 \u0441\u043e \u0432\u0441\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c, \u0435\u0441\u043b\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JS.<\/p>\n<p>  \u0412\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0435, \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0441\u0435\u0433\u043c\u0435\u043d\u0442. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u043b\u0438\u0448\u043d\u0438\u0439 \u0431\u0430\u0439\u0442 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u0442\u0435, \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0446\u0435\u043b\u044b\u0439 \u043b\u0438\u0448\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/h4\/8v\/ut\/h48vut1nv1yldqqdo2ubbe3miai.png\"><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u043d\u0430 \u0446\u0435\u043b\u044b\u0439 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432\u044b\u0434\u0430\u0447\u0443, \u043d\u043e \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u0437\u0430\u043c\u0435\u0440\u0430\u0445 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e. \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>  \u0421\u0442\u0440\u0430\u043d\u043d\u043e: \u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a, \u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u0431\u043b\u0438\u0436\u0435 \u043a \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 CSS.<\/p>\n<h2>\u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435<\/h2>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0430\u0434\u0443\u0435\u0442\u0441\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/76\/hb\/6l\/76hb6lkb_giyi6iwvnfvaui4yuk.png\"><\/p>\n<p>  \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f. \u0415\u0435 \u0432\u0441\u0435 \u0443 \u0441\u0435\u0431\u044f \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438. \u0415\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, webpack-\u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, gulp-\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u2014 \u0432 \u043e\u0431\u0449\u0435\u043c, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0435\u0441\u044c \u0441\u0430\u043c\u0438. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438, \u043d\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0442\u043e\u0447\u043d\u043e \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0436\u0430\u0442\u044c \u0432\u0430\u0448 CSS \u043a\u0440\u0443\u0447\u0435 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c CSSO. <\/p>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0436\u0430\u0442\u0438\u0435. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 2020-\u043c \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d gzip, \u0432\u044b \u0442\u043e\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0440\u0435\u0432\u043d\u044f\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0441\u0436\u0430\u0442\u0438\u044f. \u0410 \u0432\u043e\u043e\u0431\u0449\u0435, \u0432 2020-\u043c \u043f\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c brotli. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e-\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u044b\u0434\u0430\u0447\u0443 \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0418\u043b\u0438, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c brotli, \u0442\u043e \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c zopfli.<\/p>\n<p>  \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0436\u0430\u0442\u0438\u044f \u0434\u043b\u044f gzip, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0436\u0430\u0442\u0438\u044f \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435 \u0431\u044b\u0441\u0442\u0440\u043e, \u043a\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 gzip. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 zopfli \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441 \u0443\u043c\u043e\u043c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043b\u0435\u0442\u0443. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b gzip-\u0430\u0440\u0445\u0438\u0432\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 zopfli, \u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0443\u0436\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u043e \u0444\u0430\u043a\u0442\u0443, \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u043b\u0435\u0442\u0443. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c. \u041d\u043e \u0442\u043e\u0436\u0435 \u0437\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pu\/f6\/sm\/puf6smovgfumpzw6cdrj4nxvjzo.png\"><\/p>\n<p>  \u0412\u0441\u0435 \u044d\u0442\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u0438: \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0434\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0432\u0430\u0440\u044c. \u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0433\u043e\u0432\u043e\u0440\u044f\u0442: \u043d\u0430\u0434\u043e \u0438\u043d\u043b\u0430\u0439\u043d\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u043d\u043b\u0430\u0439\u043d\u0438\u043c, \u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0417\u0430\u0438\u043d\u043b\u0430\u0439\u043d\u0438\u043c \u0432\u0435\u0441\u044c CSS \u0432 HTML, \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e. \u041f\u0440\u0438\u043a\u043e\u043b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e gzip \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 HTML, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0435, \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435.<\/p>\n<p>  \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0441 bootstrap, \u0437\u0430\u0438\u043d\u043b\u0430\u0439\u043d\u0438\u043b \u0442\u0443\u0434\u0430 bootstrap \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043b \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438. Gzip \u043d\u0430\u0434 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 150 \u0431\u0430\u0439\u0442. \u0414\u0430, \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439. \u0422\u0443\u0442 \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e \u0432\u0441\u0435 \u0437\u0430\u043c\u0435\u0440\u044f\u0442\u044c. \u041d\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043e\u0434\u0438\u043d.<\/p>\n<p>  \u041a\u0430\u043a \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434? \u042f \u0433\u043e\u0432\u043e\u0440\u044e \u043d\u0435 \u043f\u0440\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. \u0423\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0417\u0430\u0447\u0435\u043c?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oc\/qy\/i3\/ocqyi32nsmaifhfwjtobuhbfyt0.png\"><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Chrome DevTools \u044d\u0442\u043e Coverage, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442: \u00ab\u044d\u0442\u043e\u0442 CSS \u0438\u043b\u0438 \u044d\u0442\u043e\u0442 JS \u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b, \u043c\u043e\u0436\u0435\u0448\u044c \u0435\u0433\u043e \u0432\u044b\u043f\u0438\u043b\u0438\u0442\u044c\u00bb. <\/p>\n<p>  \u041d\u043e \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c hover, focus, active, \u0447\u0442\u043e-\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 JS. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u044b\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 CSS \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u0438\u043b\u0438\u0442\u044c. \u0423 \u041a\u0440\u0438\u0441\u0430 \u041a\u043e\u0439\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043e\u0431\u0437\u043e\u0440\u043d\u0430\u044f <a href=\"https:\/\/css-tricks.com\/how-do-you-remove-unused-css-from-a-site\/\">\u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043f\u0440\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u043e\u0435 \u0441 hover \u0438 focus. \u041d\u043e \u043e\u043d \u043f\u0440\u0438\u0448\u0435\u043b \u043a \u043c\u043d\u0435\u043d\u0438\u044e, \u0447\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f. <\/p>\n<p>  \u0415\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 <a href=\"https:\/\/youtu.be\/xc_dinZ4Gfc\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u0410\u043d\u0442\u043e\u043d\u0430 \u0425\u043e\u043b\u043a\u0438\u043d\u0430 \u0438\u0437 Booking.com, \u0433\u0434\u0435 \u043e\u043d\u0438 \u0442\u043e\u0436\u0435 \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u0443\u0447\u0438 legacy-\u043a\u043e\u0434\u0430. \u041d\u043e \u0443 \u043d\u0438\u0445 \u0431\u044b\u043b\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c: legacy-\u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0435\u0433\u043e \u0443\u0431\u0440\u0430\u0442\u044c. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u043d\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c. <\/p>\n<p>  \u0412\u044b \u0443 \u0441\u0435\u0431\u044f \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c \u0436\u0435 \u0441\u0430\u043c\u044b\u043c Puppeteer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0431\u044b Chrome. \u041c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443, \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c hover, focus. \u0418 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 Coverage. <\/p>\n<p>  \u041c\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u0433\u0430 \u0412\u0438\u0442\u044f \u0425\u043e\u043c\u044f\u043a\u043e\u0432 <a href=\"https:\/\/habr.com\/ru\/users\/victor-homyakov\/\" class=\"user_link\">victor-homyakov<\/a> \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0432\u043e\u0439 <a href=\"https:\/\/gist.github.com\/victor-homyakov\/aefd2ed05a050b1068c667d829a17419\">\u0441\u043a\u0440\u0438\u043f\u0442<\/a>, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b \u0438 \u0441\u0442\u0438\u043b\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u0440\u0435\u0442\u0435, \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0438\u0442\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435. \u041e\u043d \u0432\u0430\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u0442: \u00ab\u044d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d\u00bb. \u0412\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432 DevTools \u0432\u0432\u043e\u0434\u0438\u0442\u0435. \u041a\u043b\u0430\u0441\u0441\u043d\u043e \u0436\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5q\/4i\/4g\/5q4i4gjomb59s7ry5xcukiqi0zc.png\"><\/p>\n<p>  \u0424\u0438\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Firefox: \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c display: inline, \u0438 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0443 \u044d\u0442\u043e\u0433\u043e display: inline \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430. \u0418\u043b\u0438 vertical-align, \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f inline \u0438\u043b\u0438 table-cell. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u044f \u0432\u0438\u0434\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Firefox, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c: \u00ab\u044d\u0442\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u0442\u0435\u0431\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430\u00bb. <\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e: \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u0435\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441. \u041d\u043e \u043f\u043e-\u043c\u043e\u0435\u043c\u0443, \u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0444\u0438\u0447\u0430. <\/p>\n<p>  \u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u043e\u043f\u0440\u043e\u0441: \u0432\u0430\u043c \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0441\u044c Bootstrap? \u041f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u043e Bootstrap \u043b\u044e\u0431\u043e\u0439 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Bootstrap \u0434\u043b\u044f \u0441\u0435\u0442\u043e\u043a \u0438 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 Bootstrap \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430.<\/p>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0434\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0441 CSS.<\/p>\n<p>  \u041d\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043a\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f legacy, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0442 CSS.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u043d\u044b\u0439 \u0411\u042d\u041c-\u0441\u0442\u0435\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0442\u0430\u043a, \u0447\u0442\u043e \u0432\u044b, \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0411\u042d\u041c-\u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0411\u042d\u041c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u043d\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0435\u0437\u0430\u0447\u0435\u043c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 CSS. \u0413\u0440\u0443\u0437\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435. <\/p>\n<p>  \u0414\u0430\u0436\u0435 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Google \u0433\u043e\u0432\u043e\u0440\u044f\u0442: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0411\u042d\u041c, \u0432\u0430\u043c \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>  \u042f \u043d\u0435 \u0432\u0435\u0440\u044e, \u0447\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044e \u044d\u0442\u043e \u0432\u0441\u043b\u0443\u0445, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 CSS-in-JS \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438\u043b\u0438 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u0430 \u043a\u0430\u043a\u0438\u0435 \u043d\u0435\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 legacy-\u043a\u043e\u0434\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0417\u0432\u0443\u0447\u0438\u0442 \u043b\u0435\u0433\u043a\u043e, \u043d\u043e \u043d\u0443\u0436\u043d\u0430 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0430. \u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zr\/he\/na\/zrhenay2u6hrppvi4jx-ams_njo.png\"><\/p>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0435\u0449\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0435\u0441\u0442\u044c? \u041d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0439. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, style \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c div \u2014 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0436\u0435 display: block. \u0410 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e? \u0415\u0441\u043b\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u2014 \u043f\u0440\u043e\u0439\u0434\u0438\u0442\u0435\u0441\u044c \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438 \u0443\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0445. <\/p>\n<p>  \u041c\u0435\u043d\u044c\u0448\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u2014 \u043a\u043b\u0430\u0441\u0441\u043d\u043e! \u041d\u043e \u044d\u0442\u043e \u043e\u043f\u044f\u0442\u044c \u0431\u0435\u0437\u0443\u043c\u043d\u0430\u044f \u0438\u0434\u0435\u044f. CSS \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e HTML, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u044c. \u041e\u043d \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u0430\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0418 \u0434\u0430, \u044d\u0442\u043e \u0442\u044f\u0436\u0435\u043b\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c. \u041c\u0435\u043d\u044f\u0435\u0442\u0435 \u0442\u0435\u0433 \u2014 \u0432\u0441\u0435 \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f. \u0411\u0435\u0437\u0443\u043c\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u043a\u0430\u043a \u043e\u0431\u0435\u0449\u0430\u043b.<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412 CSS \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0430\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 currentColor. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vh\/eg\/om\/vhegomyxszcuft3mc8rloetjmio.png\"><\/p>\n<p>  \u0427\u0430\u0441\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043f\u043e \u0446\u0432\u0435\u0442\u0443. \u0410 \u043f\u043e hover \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0445 \u043e\u0431\u0435. \u0417\u0430\u0447\u0435\u043c? <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-v\/-5\/jl\/-v-5jle8hdyn94asbckxmh0ev_i.png\"><\/p>\n<p>  \u0415\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f currentColor, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0435\u0440\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 color, \u0438 \u0432\u044b \u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u0435\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0433\u0440\u0430\u043d\u0438\u0446\u0435, \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0435 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u043f\u043e hover, \u043f\u043e focus, \u043f\u043e active, \u043f\u043e \u0447\u0435\u043c\u0443 \u0445\u043e\u0442\u0438\u0442\u0435. \u042d\u0442\u043e, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0443\u0434\u043e\u0431\u043d\u043e, \u0438 \u043a\u043e\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u043c\u0435\u043d\u044c\u0448\u0435. \u041c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041a \u0441\u043b\u043e\u0432\u0443, \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u0438\u0435 border-color, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d \u0443\u0436\u0435 \u0431\u0435\u0440\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 color.<\/p>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u0433\u0440\u0443\u0441\u0442\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f base64. \u0412 CSS \u0435\u0433\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0438: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 base64, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0443 \u0432\u0430\u0441 \u0432 \u043e\u0434\u0438\u043d \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043f\u043e TCP \u2014 \u043d\u0430 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/95\/uu\/rb\/95uurb_rsvp6_xjhnolso-ftl-o.png\"><\/p>\n<p>  \u041d\u043e \u0413\u0430\u0440\u0440\u0438 \u0420\u043e\u0431\u0435\u0440\u0442\u0441 \u0442\u043e\u0436\u0435 <a href=\"https:\/\/csswizardry.com\/2017\/02\/base64-encoding-and-performance\/\">\u043f\u0440\u043e\u0432\u0435\u043b<\/a> \u043a\u043b\u0430\u0441\u0441\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a base64 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u0430, \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435, \u043d\u043e \u043f\u0430\u0440\u0441\u044f\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u0440\u0430\u0437\u044b \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435. <\/p>\n<p>  \u041b\u0430\u0434\u043d\u043e, \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u2014 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0432\u0430\u0436\u043d\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u2014 \u043f\u0435\u0440\u0432\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0447\u0442\u043e-\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u043b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0430\u0445 \u043f\u0435\u0440\u0432\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430, \u043f\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e \u0413\u0430\u0440\u0440\u0438 \u0420\u043e\u0431\u0435\u0440\u0442\u0441\u0430, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0434\u0435\u0441\u044f\u0442\u044c \u0440\u0430\u0437 \u043f\u043e\u0437\u0436\u0435. \u0417\u0430\u0434\u0443\u043c\u0430\u0439\u0442\u0435\u0441\u044c, \u043d\u0443\u0436\u0435\u043d \u043b\u0438 \u0432\u0430\u043c base64? \u0414\u0430, \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0442\u0430\u043b\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u043d\u043e \u0434\u0430\u043b\u043e \u043b\u0438 \u044d\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442?<\/p>\n<p>  \u0418 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 base64 \u0434\u043b\u044f SVG. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e SVG \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0438\u043d\u043a\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 URL-encoder. \u0423 \u042e\u043b\u0438\u0438 \u0411\u0443\u0445\u0432\u0430\u043b\u043e\u0432\u043e\u0439 \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 <a href=\"https:\/\/yoksel.github.io\/url-encoder\/\">\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/a>: \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435, \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432\u0430\u0448 SVG, \u0438 \u043e\u043d \u0432\u044b\u0434\u0430\u0441\u0442 CSS \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u043c \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0432\u0438\u0434\u0435. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043c \u043d\u0435\u0442 base64, \u0430 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 CSS \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u0430\u043a. \u042d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435. <\/p>\n<p>  \u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c base64 \u0434\u0430\u0435\u0442 \u043f\u043b\u044e\u0441 30% \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0435. \u0417\u0430\u0447\u0435\u043c?<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041c\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c Internet Explorer \u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0448\u044c \u043f\u0440\u043e \u0433\u0440\u0438\u0434\u044b. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pe\/mg\/xu\/pemgxutjaqos0iq67ch7qdzudnc.png\"><\/p>\n<p>  \u041d\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u0439\u0442\u0435\u0441\u044c: \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 IE, \u0430 \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u0442\u0435 \u043d\u0430 float \u0438\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445, \u0433\u0440\u0438\u0434\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441 20-\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u043c gap \u2014 \u0432\u043e\u0442 \u044d\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438. \u0422\u0440\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438. \u041d\u0443 \u043f\u044f\u0442\u044c, \u0435\u0441\u043b\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0442\u0430\u043a\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 float. \u041f\u0440\u0438\u0447\u0435\u043c \u044f \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0435\u0441\u043b\u0438 \u0442\u0440\u043e\u0433\u0430\u0442\u044c HTML. \u042f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0442\u0430\u043a \u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 float. \u0421\u043a\u0438\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0430\u0448\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ji\/vb\/ze\/jivbzezcoj7ou78zj5ylexaxd8i.png\"><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c Atomic CSS. \u0427\u0442\u043e \u044d\u0442\u043e? \u0412\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u0435\u0433\u043a\u0430 \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0418 \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u044b \u0437\u0430\u0434\u0430\u0435\u0442\u0435 background-color \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e color. \u042d\u0442\u043e \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00bb \u0434\u043b\u044f CSS. \u041d\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432 HTML \u043a\u0430\u043a \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f. \u0418 CSS \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435. \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u0435\u043d\u044c\u0448\u0435. \u041d\u043e \u0443 \u0432\u0430\u0441 \u0440\u0430\u0441\u0442\u0435\u0442 HTML. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gy\/77\/fl\/gy77flr72xq4fuxlgz0jq3etfcu.png\"><\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 Tailwind CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c. \u041e\u043d \u043d\u0435 Atomic CSS, \u043e\u043d \u043f\u0440\u043e \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 Bootstrap, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0435\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u043e\u0435. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432\u0430\u043c \u0445\u0432\u0430\u0442\u0438\u0442. \u041d\u0430\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0441\u0432\u043e\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0422\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0443\u0441\u0435\u0440\u0434\u0441\u0442\u0432\u0443\u0439\u0442\u0435. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kn\/ir\/8j\/knir8jsxsmezohd8gouoba98pk4.png\"><\/p>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u0431\u0435\u0437\u0443\u043c\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u2014 \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0446\u0435\u043b\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435? \u0414\u0430, \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043d\u043e \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0438 \u0432\u0441\u0435 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043e\u0434\u043d\u043e\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u043c\u0438. \u041c\u0435\u043d\u044c\u0448\u0435 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<p>  \u0412\u043e\u0442 <a href=\"https:\/\/dev.to\/denisx\/reduce-bundle-size-via-one-letter-css-classname-hash-strategy-10g6\">\u0441\u0442\u0430\u0442\u044c\u044f<\/a>, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c webpack \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435. \u041d\u043e \u0443 \u043d\u0430\u0441 \u044d\u0442\u043e \u043d\u0435 \u0432\u0437\u043b\u0435\u0442\u0435\u043b\u043e. \u041c\u044b \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438. <\/p>\n<p>  \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, gzip \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0430 \u0411\u042d\u041c \u0441 gzip \u043e\u0444\u0438\u0433\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0436\u0430\u0442. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>  \u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u0434\u0430\u043b\u043e \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u0442\u0430. \u041d\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u0411\u042d\u041c \u0438 \u043a\u0443\u0447\u0430 \u0440\u0430\u0437\u043d\u043e\u0440\u043e\u0434\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u0412\u0430\u0436\u043d\u043e: \u0437\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435. \u0417\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d\u043e \u0443 \u0432\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u044b \u0441\u043b\u0435\u0433\u043a\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u043d\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0438 \u0432\u0441\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u043b\u043e\u0441\u044c. <\/p>\n<h2>\u0421\u043a\u0430\u0447\u0430\u043b\u0438!<\/h2>\n<p>  \u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b. \u041c\u044b \u0435\u0433\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438. \u0427\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u0438\u0434\u0435\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hv\/0l\/8e\/hv0l8e1uk89lmfqategu9yux-je.jpeg\"><\/p>\n<p>  \u041e\u043d \u0432\u0438\u0434\u0435\u043b \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d. \u041f\u043e\u043a\u0430 \u043c\u044b \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043b\u0438, \u044d\u043a\u0440\u0430\u043d \u0431\u044b\u043b \u043f\u0443\u0441\u0442\u043e\u0439. \u041c\u044b \u0441\u043a\u0430\u0447\u0430\u043b\u0438, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0435\u0449\u0435 \u0448\u0435\u0441\u0442\u044c \u044d\u0442\u0430\u043f\u043e\u0432. \u041f\u043e\u0442\u0435\u0440\u043f\u0438\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e, \u044f \u043f\u0440\u043e \u043d\u0438\u0445 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0447\u0443\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4c\/zj\/yy\/4czjyy-8-jl4c4qdm9dzgczmfes.png\"><\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043a\u0430\u0447\u0430\u043b \u043f\u043e\u0442\u043e\u043a \u0431\u0430\u0439\u0442\u043e\u0432, \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/709\/df0\/50d\/709df050daf8e241e96c31e73c720fad.png\"><\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 import. \u042d\u0442\u043e \u043e\u043f\u044f\u0442\u044c \u043d\u0430\u0434\u043e \u043a\u0430\u0447\u0430\u0442\u044c. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u0434\u043e\u043a\u043b\u0430\u0434\u0430? import \u2014 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u041d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0443\u043c\u043d\u044b\u0435. \u0423 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c Preload Scanner. \u042f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0442\u0430\u043c \u0431\u043b\u043e\u0447\u0438\u0442\u0441\u044f \u0432\u0441\u0435, \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0434\u0430. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u044f\u0442 \u0442\u0440\u0438 \u043f\u043e\u0434\u0440\u044f\u0434 \u0442\u0435\u0433\u0430 link, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u0441\u0442\u0438\u043b\u0435\u043c, \u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u043a\u0430\u0447\u0430\u044e \u043f\u0435\u0440\u0432\u044b\u0439, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u043a\u0430\u0447\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0438 \u0442\u0440\u0435\u0442\u0438\u0439. \u041f\u0430\u0440\u0441\u0438\u0442\u044c \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430. \u041d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u2014 \u043c\u043e\u0436\u0435\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ab\/yw\/qw\/abywqwqotl2uyae8y67kpx_-6ky.png\"><\/p>\n<p>  \u0422\u0430\u043a \u0432\u043e\u0442, import \u2014 \u043f\u043b\u043e\u0445\u0430\u044f \u0448\u0442\u0443\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432 HTML \u0441\u0442\u0438\u043b\u0438 \u0438\u0434\u0443\u0442 \u043f\u043e\u0434\u0440\u044f\u0434, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0432\u0438\u0434\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0439\u0434\u0435\u043c \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xf\/zb\/-k\/xfzb-kzu_zycogs1kilkjp73rsy.png\"><\/p>\n<p>  \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0432 import, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0432\u0430\u0448 style.css, \u043f\u043e\u0442\u043e\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043d\u0435\u043c import. \u041e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u044d\u0442\u043e\u0442 CSS\u2026 \u0410\u0433\u0430, \u0431\u043b\u043e\u0447\u0438\u043c \u0432\u0441\u0435 \u043f\u043e \u043d\u043e\u0432\u043e\u0439 \u0438 \u0438\u0434\u0435\u043c \u0437\u0430 \u0444\u0430\u0439\u043b\u043e\u043c! \u0422\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0432\u043e\u0434\u043e\u043f\u0430\u0434 \u0441 \u0434\u0435\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. <\/p>\n<p>  \u0417\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e import, \u043b\u0438\u0431\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e import \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f dev-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u2014 \u043e\u043a\u0435\u0439, \u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u043d\u0430\u0434\u043e. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/le\/2g\/lx\/le2glxus3towgrovquopecvq1nu.png\"><\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u043c \u043f\u043e \u044d\u0442\u0430\u043f\u0430\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f Cascade. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qo\/g-\/q8\/qog-q84eqwq9dszmfw3zlo7f__0.png\"><\/p>\n<p>  \u0412\u0441\u0435 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e. \u0421\u0442\u0440\u043e\u0438\u0442\u0441\u044f CSS Object Model \u2014 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u0433\u0438, \u043a\u043b\u0430\u0441\u0441\u044b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u041e\u043d \u043f\u0440\u0438\u043b\u0438\u043d\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u0442\u043e \u043a DOM \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u0438 \u0441\u0432\u044f\u0437\u0438 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0447\u0442\u043e-\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0435, \u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u0440\u0435\u0432\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cp\/kv\/b1\/cpkvb1obn0v0kwyr1ijpgmc3vmc.png\"><\/p>\n<p>  \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e. \u0415\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438. \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0435 !important \u0442\u0430\u043c \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438, \u0442\u043e \u0435\u043c\u0443 \u0438 \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ab\/z_\/ld\/abz_ldlw6yhtfzvfiak5pjnnjem.png\"><\/p>\n<p>  \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0440\u0430 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u0411\u042d\u041c. \u041d\u043e \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0411\u042d\u041c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0435\u0441\u043b\u0438 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043d\u0438 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 \u043d\u0435 \u043c\u0435\u0448\u0430\u044e\u0442. \u0422\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0423 \u0432\u0430\u0441 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043b\u043e\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0442\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043b\u0438\u043d\u043a\u043e\u0432\u0430\u0442\u044c \u0441 DOM. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/w3\/tt\/fd\/w3ttfdtaor_cd7m8e4gikrch4po.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442\u0435, \u0442\u043e, \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0442\u0430\u043a\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044e\u0442 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 CSS. \u041d\u043e \u044d\u0442\u043e \u0434\u0430\u0432\u043d\u044b\u043c-\u0434\u0430\u0432\u043d\u043e \u043b\u0435\u0433\u0435\u043d\u0434\u044b, \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b \u0435\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0435\u0441\u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430\u043c\u0438. \u041d\u043e \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/po\/83\/1d\/po831d3idqqnykaw8ieprtg5eoo.png\"><\/p>\n<p>  \u0420\u0430\u043d\u044c\u0448\u0435 \u044f \u0441\u043b\u044b\u0448\u0430\u043b \u0441\u043e\u0432\u0435\u0442\u044b: \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0448\u043e\u0440\u0442\u043a\u0430\u0442. background \u2014 \u044d\u0442\u043e \u0448\u043e\u0440\u0442\u043a\u0430\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041c\u044b \u0436\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0438 \u043e\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c. <\/p>\n<p>  \u041f\u043e \u0431\u0430\u0439\u0442\u0430\u043c \u0434\u0430, \u043e\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 CSS OM, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0437 background \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u043e\u044f\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 DevTools computed values, \u043e\u043d\u0438 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043b \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e. \u041e\u043d \u0445\u0440\u0430\u043d\u0438\u0442 \u044d\u0442\u043e \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <\/p>\n<p>  \u0422\u043e\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u0441\u043e\u0432\u0435\u0442, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c CSS OM \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u0430\u0441\u0442\u0435\u0442. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0440\u044f\u0442\u044c. \u042f \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0441\u0442 \u043f\u0440\u043e\u0444\u0438\u0442, \u043d\u043e \u0432\u0434\u0440\u0443\u0433! <\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f CSS OM, JS \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0442\u043e\u0436\u0435 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 CSS OM \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, JS \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f. \u0425\u043e\u0442\u044f \u044f \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e, \u043a\u0430\u043a \u0432\u044b \u0443\u043c\u0443\u0434\u0440\u0438\u043b\u0438\u0441\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 CSS, \u0447\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0434\u0432\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/25\/0e\/un\/250eunwpu4yepgffhza-6g1u2dg.png\"><\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 Layout. \u042d\u0442\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0439. \u041e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0433\u0434\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u041d\u043e \u043e\u043d \u0436\u0435 \u0432\u0438\u0434\u0438\u0442 \u0432\u0441\u0451 \u0432\u043e viewport, \u043c\u043e\u0436\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u043e\u043a\u043e\u0448\u043a\u043e. \u0415\u0441\u043b\u0438 \u0441\u043d\u0438\u0437\u0443 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u043e, \u043e\u043d \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hg\/af\/_r\/hgaf_racfuoqjcan8wci-i94miu.png\"><\/p>\n<p>  \u0418\u0434\u0435\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Critical CSS, \u0438 \u043e\u043d\u0430 \u0442\u043e\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u0440\u0430\u044f. \u0412\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0432\u0435\u0449\u0438 \u0432 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u043b\u0430\u0439\u043d\u0438\u0442\u0435 \u0432 \u0432\u0430\u0448 HTML, \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043e\u0442 \u043b\u044e\u0431\u044b\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u044d\u0442\u043e\u0442 \u044d\u043a\u0440\u0430\u043d \u043f\u0435\u0440\u0432\u044b\u043c, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0439\u0442\u0435 \u043a\u0430\u043a \u0445\u043e\u0442\u0438\u0442\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u043e\u043d \u043d\u0430\u0447\u043d\u0435\u0442, \u0443\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0441\u043f\u0435\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hb\/nk\/0u\/hbnk0uuz7vgkbubstjoqnfwgsus.png\"><\/p>\n<p>  \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e. \u0415\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0435 \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u044e\u0442, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f webpack \u0438 React. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0438\u0449\u0438\u0442\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. <\/p>\n<p>  \u2014 <a href=\"https:\/\/github.com\/addyosmani\/critical\">github.com\/addyosmani\/critical<\/a><br \/>  \u2014 <a href=\"https:\/\/github.com\/pocketjoso\/penthouse\">github.com\/pocketjoso\/penthouse<\/a><br \/>  \u2014 <a href=\"https:\/\/github.com\/anthonygore\/html-critical-webpack-plugin\">github.com\/anthonygore\/html-critical-webpack-plugin<\/a><br \/>  \u2014 <a href=\"https:\/\/github.com\/GoogleChromeLabs\/critters\">github.com\/GoogleChromeLabs\/critters<\/a><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/1p\/pi\/qp\/1ppiqpkakke_gsbhxo1cybumlgo.png\"><\/p>\n<p>  \u0415\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 <a href=\"https:\/\/github.com\/filamentgroup\/loadCSS\">\u043f\u043e\u0434\u0445\u043e\u0434<\/a> \u043e\u0442 Filament Group \u2014 \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044f CSS. \u0412\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. <\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u0442\u0430\u0432\u0438\u0442\u0435 &lt;link rel=preload&gt;, \u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443: \u00ab\u041c\u043d\u0435 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u043c. \u0422\u044b \u0435\u0433\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u043a\u0430\u0447\u0430\u0439, \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u0443\u0439, \u0430 \u043a\u043e\u0433\u0434\u0430 \u044f \u043a \u043d\u0435\u043c\u0443 \u043e\u0431\u0440\u0430\u0449\u0443\u0441\u044c, \u043d\u0430\u0447\u0438\u043d\u0430\u0439 \u0441\u0442\u0440\u043e\u0438\u0442\u044c CSS OM\u00bb. \u0418 \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c onload \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u00ab\u043e\u043a\u0435\u0439, \u0440\u0430\u0437 \u0443\u0436 \u0441\u043a\u0430\u0447\u0430\u043b, \u0434\u0435\u043b\u0430\u0439 \u0435\u0433\u043e rel=stylesheet, \u0432\u043a\u043b\u044e\u0447\u0430\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u00bb. <\/p>\n<p>  \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u0442\u043e\u0436\u0435 \u0441 \u0443\u043c\u043e\u043c. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e preload, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0445\u0443\u0436\u0435. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/j1\/ny\/ri\/j1nyrizteczgvkx5dwd78_fy1yy.png\"><\/p>\n<p>  \u0415\u0449\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0434\u0438\u0430\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0438\u0445 \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443: \u00ab\u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043c\u0435\u0434\u0438\u0430\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043e\u043d \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f\u00bb. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u0435\u043d\u0442\u0438\u0432\u043d\u043e, \u043d\u043e \u0441 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u0438 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ie\/m3\/go\/iem3golzhy8qq3fulda1iwn8d0u.png\"><\/p>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c http\/2 push. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c CSS \u043f\u0440\u044f\u043c\u043e \u043f\u0435\u0440\u0435\u0434 \u043c\u0435\u0441\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u0430. \u0411\u0435\u0437 CSS \u0432\u0430\u0448 \u0431\u043b\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c inline \u0442\u043e\u0442 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430, \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0431\u043b\u043e\u043a\u043e\u043c? \u042d\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0438 http\/2 push \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u043c \u044d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0415\u0441\u043b\u0438 \u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443. \u0417\u0430\u0447\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0435\u043c \u043e\u043d \u043d\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f? \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0430\u043a, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b \u0432 \u0437\u043e\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0437\u0430\u0447\u0435\u043c \u0435\u043c\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f?<\/p>\n<p>  \u0418\u0437\u0443\u0447\u0430\u0435\u0442\u0435 Intersection Observer API, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0440\u0430\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-v\/ag\/dz\/-vagdzf0qqu3mmpabixf1rw9_ss.png\"><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0430\u0433 \u2014 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u0438\u0445 \u0441\u043a\u043b\u0435\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/be\/1v\/bc\/be1vbcsui3hmenm-0ryzhadzrjs.png\"><\/p>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0432 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432. \u041f\u043e-\u043c\u043e\u0435\u043c\u0443, \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044c \u0438\u0437 <a href=\"https:\/\/source.chromium.org\/chromium\/chromium\/src\/+\/master:third_party\/blink\/renderer\/platform\/graphics\/compositing_reasons.h;l=18?q=CompositingReason&amp;ss=chromium\">\u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/a> Chromium. \u041c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  \u0412\u0438\u0434\u0435\u043e\u043f\u0430\u043c\u044f\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0430\u0445. \u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432\u0441\u0451 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u043e\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 will-change: transform \u0438\u043b\u0438 \u0435\u0449\u0451 \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0445\u0443\u0436\u0435.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u043b\u043e\u0435\u0432 \u2014 \u0440\u043e\u0432\u043d\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>  \u0417\u0434\u043e\u0440\u043e\u0432\u043e, \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043b\u0438.<\/p>\n<h2>\u0410 \u0435\u0441\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0441\u044c?<\/h2>\n<p>  \u0410 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u044f \u0432\u0435\u0440\u043d\u0443\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443? \u042d\u0442\u043e \u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0437\u0430\u0448\u0435\u043b. <\/p>\n<p>  \u0412\u0435\u0440\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443, \u044f, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043c\u043e\u0433\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0451 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. \u042f \u0436\u0435 \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u043e \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0437\u0443? <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8v\/di\/1l\/8vdi1lapv3i9ka0lb-swsysnhms.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043e\u0442\u0434\u0430\u0441\u0442 Cache-Control-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u00ab\u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043a\u044d\u0448\u0438\u0440\u0443\u0439 \u043d\u0430 \u0446\u0435\u043b\u044b\u0439 \u0433\u043e\u0434\u00bb. \u041c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u0438\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u044d\u0448\u0430. \u041d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u043b\u0430\u0434\u0430.<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Service Workers! 2020 \u0433\u043e\u0434, \u0443\u0436\u0435 \u043f\u043e\u0440\u0430, Progressive Web Applications! \u0423 \u041a\u0438\u0440\u0438\u043b\u043b\u0430 \u0427\u0443\u0433\u0430\u0438\u043d\u043e\u0432\u0430 \u0431\u044b\u043b \u0445\u043e\u0440\u043e\u0448\u0438\u0439 <a href=\"https:\/\/www.youtube.com\/watch?v=E5x9v3LFO5Q\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a Service Workers \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a CSS, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435 \u0435\u0433\u043e \u0438, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u043f\u043e\u0439\u0434\u0435\u0442 \u0437\u0430 \u044d\u0442\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u043c, \u043e\u0442\u0434\u0430\u0435\u0442\u0435 \u0435\u0433\u043e \u0438\u0437 \u043a\u044d\u0448\u0430.<\/p>\n<p>  \u041d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0430\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0431\u0435\u0449\u0430\u0435\u0442. \u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u0430\u043c\u044f\u0442\u044c. \u041e\u043d \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u043d\u0435\u0442 \u043f\u0430\u043c\u044f\u0442\u0438. \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u043e. \u0412\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0438\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438. <\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Local Storage. \u041d\u043e \u043e\u043d \u0434\u0438\u043a\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0432\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043f\u043e\u0445\u043e\u0434 \u0432 Local Storage API. <\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0430\u0437\u044b. \u041d\u043e \u0437\u0430\u043c\u0435\u0440\u044f\u0439\u0442\u0435. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u0445\u043e\u0434 \u0432 JS \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u0437-\u0437\u0430 \u0441\u043b\u0430\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430.<\/p>\n<p>  \u0415\u0449\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0447\u0442\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7a\/_f\/oq\/7a_foqb9hzh_ycjaddhrkarqhia.png\"><\/p>\n<p>  &lt;link rel&gt; \u2014 \u0438\u0437\u0443\u0447\u0438\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0422\u0430\u043c \u0435\u0441\u0442\u044c preconnect, prefetch, prerender \u2014 \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041e\u043d \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u042f \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0439\u0434\u0443 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e. \u0421\u043a\u0430\u0447\u0430\u0439 \u0432\u0441\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0438 \u043e\u0442\u0440\u0438\u0441\u0443\u0439\u00bb. \u041a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430. \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0438\u0433\u0434\u0435. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/iy\/ca\/ql\/iycaqlaidexf0urgnjv05zpjskg.png\"><\/p>\n<p>  \u0412 \u0441\u043c\u044b\u0441\u043b\u0435, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 IE \u0438 Edge. \u0412 Chrome \u043e\u043d\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443, \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442. \u041e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a prefetch: \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 prerender \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <\/p>\n<p>  \u041d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0438\u0434\u0435\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u00bb \u2014 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS \u2014 \u0441\u0434\u0435\u043b\u0430\u043d prerender. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0447\u0442\u043e-\u0442\u043e \u0438\u0449\u0435\u0442\u0435, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u044b\u0434\u0430\u0447\u0443 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0443\u0433\u0430\u0434\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0432\u044b \u043f\u043e\u0439\u0434\u0435\u0442\u0435, \u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<p>  \u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435? \u0411\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0441\u044b\u043b\u043e\u043a. \u042f \u0435\u0449\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0438\u0439 <a href=\"https:\/\/3perf.com\/talks\/web-perf-101\/\">\u0441\u0431\u043e\u0440\u043d\u0438\u043a<\/a> \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u043e \u043e\u0442 \u0412\u0430\u043d\u0438 \u0410\u043a\u0443\u043b\u043e\u0432\u0430 <a href=\"https:\/\/habr.com\/ru\/users\/iamakulov\/\" class=\"user_link\">iamakulov<\/a>. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 HTML, \u0438 JS, \u0438 \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>  \u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0438 \u0441\u043e\u0432\u0435\u0442\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e, \u043d\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043b\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u044f\u0442\u044c \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u0430\u0436\u0435 \u0432\u0440\u0435\u0434\u043d\u044b. \u041f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441 \u043d\u0438\u043c\u0438 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430. \u0421\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u044d\u0442\u0438\u043c \u0438 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u044b\u043b \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u0435\u043d, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0441\u043f\u0443\u0441\u0442\u044f \u0432\u0440\u0435\u043c\u044f. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p><\/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\/yandex\/blog\/501998\/\"> https:\/\/habr.com\/ru\/company\/yandex\/blog\/501998\/<\/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\/yandex\/blog\/501998\/\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 CSS \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2014 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u0415\u0441\u043b\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JavaScript \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0442\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u043e\u0433\u043e \u0433\u043e\u0441\u0442\u044f \u0441 \u0441\u0430\u0439\u0442\u0430. \u041a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c CSS \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439? \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u041d\u0438\u043a\u0438\u0442\u0430 \u0414\u0443\u0431\u043a\u043e <a href=\"https:\/\/habr.com\/ru\/users\/darkmefody\/\" class=\"user_link\">DarkMeFoDy<\/a> \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u0432 \u041c\u0438\u043d\u0441\u043a\u0435.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/kATRlMrtaaY?rel=0&amp;showinfo=1&amp;hl=en-US\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media; accelerometer; gyroscope; picture-in-picture\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u2014 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438. \u0412\u0441\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043f\u0440\u043e TypeScript \u0434\u0430 TypeScript. \u0410 \u044f \u043f\u0440\u043e Cascade style script \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-303638","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303638","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=303638"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303638\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}