{"id":305948,"date":"2020-06-26T09:00:40","date_gmt":"2020-06-26T09:00:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=305948"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=305948","title":{"rendered":"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438"},"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\/tinkoff\/blog\/508256\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/l2\/n9\/gr\/l2n9grjjswkmnquoixsgyiwx0gw.png\" alt=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\" title=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u043b\u0430\u0434, \u044f \u043b\u0438\u0434 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Web Performance \u0432 \u0422\u0438\u043d\u044c\u043a\u043e\u0444\u0444. <\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u0445, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f, \u0432 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0443\u0441\u043f\u0435\u0445 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <a href=\"https:\/\/wpostats.com\/\">\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0439<\/a> \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u0430\u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043e\u043f\u044b\u0442\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0434\u0443\u0449\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u0438 IT-\u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/why-performance-matters\">\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>, \u043f\u0440\u043e\u0432\u043e\u0434\u044f\u0442 <a href=\"https:\/\/web.dev\/defining-core-web-vitals-thresholds\/\">\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/a> \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 <a href=\"https:\/\/web.dev\/rail\/\">\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438<\/a>, <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\">\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/a> \u0438 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed_metrics\/README.md#APIs-we-own\">API<\/a>. \u0410 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c Google \u0438 \u0432\u043e\u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 <a href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\">\u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0435<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0430 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u2014 \u043f\u0440\u0438\u0431\u044b\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0418 \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0433\u0440\u0430\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0440\u043e\u043b\u044c, \u0442\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439?<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"soderzhanie\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#monitoring\">\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433<\/a><br \/> \n<ul>\n<li><a href=\"#sovremennye-metody-izmereniya-proizvoditelnosti\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\n<li><a href=\"#sbor-metrik-otrazhayuschih-vospriyatie-proizvoditelnosti\">\u0421\u0431\u043e\u0440 \u043c\u0435\u0442\u0440\u0438\u043a \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0445 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\n<li><a href=\"#otsutstvie-vliyaniya-na-proizvoditelnost-prilozheniya\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#metriki\">\u041c\u0435\u0442\u0440\u0438\u043a\u0438<\/a><br \/> \n<ul>\n<li><a href=\"#cumulative-layout-shift\">Cumulative Layout Shift<\/a><br \/> \n<ul>\n<li><a href=\"#princip-raboty\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/a><\/li>\n<li><a href=\"#ispolzovanie\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#ocenka-rezultatov\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#sposoby-optimizacii\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#largest-contentful-paint\">Largest Contentful Paint<\/a><br \/> \n<ul>\n<li><a href=\"#princip-raboty-1\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/a><\/li>\n<li><a href=\"#ispolzovanie-1\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#ocenka-rezultatov-1\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#sposoby-optimizacii-1\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#first-input-delay\">First Input Delay<\/a><br \/> \n<ul>\n<li><a href=\"#princip-raboty-2\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/a><\/li>\n<li><a href=\"#ispolzovanie-2\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#ocenka-rezultatov-2\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#sposoby-optimizacii-2\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#custom-metrics\">Custom Metrics<\/a><br \/> \n<ul>\n<li><a href=\"#inicializaciya-prilozheniya\">\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"#vzaimodeystvie-s-prilozheniem\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#analiz-dannyh\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li>\n<li><a href=\"#byudzhety-proizvoditelnosti\">\u0411\u044e\u0434\u0436\u0435\u0442\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\n<li><a href=\"#zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"monitoring\">\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u043a\u0430\u043a\u0438\u043c-\u043b\u0438\u0431\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u044d\u0442\u043e\u043c \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f. \u0410 \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430, \u043d\u0443\u0436\u043d\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445, \u043d\u0430\u0439\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0449\u0438\u0439 \u0432\u0441\u0435\u043c \u043d\u0430\u0448\u0438\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c, \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/github.com\/TinkoffCreditSystems\/perfectum\/tree\/master\/packages\/client\">Perfectum Client<\/a>.<\/p>\n<p>  <\/p>\n<p>Perfectum Client \u2014 \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"sovremennye-metody-izmereniya-proizvoditelnosti\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PerformanceObserver\">PerformanceObserver API<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (First Contentful Paint).<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const performanceObserver = new PerformanceObserver((performanceEntryList) =&gt; {     const performanceEntries = performanceEntryList.getEntries();      for (const performanceEntry of performanceEntries) {         if (performanceEntry.name === 'first-contentful-paint') {             const firstContentfulPaint = performanceEntry.startTime;              console.log('FCP is', firstContentfulPaint);         }     } });  performanceObserver.observe({ type: 'paint', buffered: true }); \/\/ \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e buffered \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0438\u0445 \u0434\u043e \u044d\u0442\u0430\u043f\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 observer'\u0430<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"sbor-metrik-otrazhayuschih-vospriyatie-proizvoditelnosti\">\u0421\u0431\u043e\u0440 \u043c\u0435\u0442\u0440\u0438\u043a \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0445 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u0430 \u043d\u0430 \u0441\u0431\u043e\u0440\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 <a href=\"https:\/\/wiki.developer.mozilla.org\/en-US\/docs\/Glossary\/Perceived_performance\">\u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a> \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u043e\u0445\u043e \u0438\u043b\u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043a\u043e\u0440\u0440\u0435\u043b\u0438\u0440\u0443\u044e\u0442 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0438\u0447\u0435\u0433\u043e, \u0447\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0435\u0441\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u0443 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"otsutstvie-vliyaniya-na-proizvoditelnost-prilozheniya\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u0446\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0440\u0430\u043d\u043d\u0435\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432 head \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u044b <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Beacon_API\">Beacon API<\/a>. \u041d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430\u0433\u0440\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0442\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"metriki\">\u041c\u0435\u0442\u0440\u0438\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><strong>FCP<\/strong> \u2014 First Contentful Paint;<\/li>\n<li><strong>FMP<\/strong> \u2014 First Meaningful Paint;<\/li>\n<li><strong>LCP<\/strong> \u2014 Largest Contentful Paint;<\/li>\n<li><strong>CLS<\/strong> \u2014 Cumulative Layout Shift;<\/li>\n<li><strong>FID<\/strong> \u2014 First Input Delay;<\/li>\n<li><strong>FCI<\/strong> \u2014 First CPU Idle;<\/li>\n<li><strong>TTI<\/strong> \u2014 Time To Interactive;<\/li>\n<li><strong>TBT<\/strong> \u2014 Total Blocking Time;<\/li>\n<li><strong>VC<\/strong> \u2014 Visually Complete;<\/li>\n<li><strong>SP<\/strong> \u2014 Speed Index \u0438 \u0442\u0434. <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418 \u0445\u043e\u0442\u044c \u044d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0434\u0430\u0436\u0435 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u0441\u0432\u044f\u0437\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440 \u0438 \u0441\u043b\u043e\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u0432, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0441\u0440\u0435\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0434\u043d\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 CI\/CD. \u041f\u0440\u0438\u0447\u0438\u043d \u0442\u0430\u043a\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. <\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u0432\u043e\u0434\u0430 (First Input Delay) \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a \u2014 \u0442\u0440\u0443\u0434\u043e\u0435\u043c\u043a\u0438\u0439 \u0441 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e, \u0430 \u043f\u043e\u0440\u043e\u0439 \u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e.<\/p>\n<p>  <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u043e\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u044f \u043d\u0430\u0437\u043e\u0432\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u2014 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438. \u0420\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u043e \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0443 \u0441\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cr\/zj\/ag\/crzjagl6n5hybudiwj51g5owd70.png\" alt=\"\u0421\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\" title=\"\u0421\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\"><\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u043e\u0433\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0432 \u043e\u0431\u043e\u0438\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u0430\u044f, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/508258\/\">\u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"cumulative-layout-shift\">Cumulative Layout Shift<\/h3>\n<p>  <\/p>\n<p>Cumulative Layout Shift (<strong>CLS<\/strong>) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u043d\u0435\u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/x1\/pu\/ge\/x1pugejmdy-sedpoadrghk1quu0.png\" alt=\"\u0421\u0434\u0432\u0438\u0433 \u043c\u0430\u043a\u0435\u0442\u0430\" title=\"\u0421\u0434\u0432\u0438\u0433 \u043c\u0430\u043a\u0435\u0442\u0430\"><\/p>\n<p>  <\/p>\n<h4 id=\"princip-raboty\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 <em>\u0441\u043c\u0435\u0441\u0442\u0438\u0432\u0448\u0438\u0445\u0441\u044f DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/em>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/08\/wg\/cp\/08wgcphs2ab8h_lij1yd0aqmkso.png\" alt=\"\u0421\u043c\u0435\u0441\u0442\u0438\u0432\u0448\u0438\u0435\u0441\u044f DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\" title=\"\u0421\u043c\u0435\u0441\u0442\u0438\u0432\u0448\u0438\u0435\u0441\u044f DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0438 \u0442\u0435\u043a\u0443\u0449\u0430\u044f <em>\u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em>,<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nh\/nr\/ox\/nhnroxcc9lrwqiurpbfuouncs6i.png\" alt=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\" title=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\"><\/p>\n<p>  <\/p>\n<p>\u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 <em>\u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u043c\u0430\u043a\u0435\u0442\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3b\/dc\/p5\/3bdcp5nvzcohtlrt12jzlb7pwa0.png\" alt=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430\" title=\"\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a <em>\u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u043d\u0430\u0439\u0434\u0435\u043d\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0435\u0435 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0441\u0447\u0435\u0442 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f <em>\u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u0438 <em>\u043f\u043b\u043e\u0449\u0430\u0434\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/em>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ej\/dy\/nz\/ejdynz2wvwtotp9yjtgaqepl45e.png\" alt=\"\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430\" title=\"\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430\"><\/p>\n<p>  <\/p>\n<p><em>\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \/ <em>\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430<\/em> = (192 \u00d7 308) \/(220 \u00d7 320) = 0.84<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u0432 \u0441\u0435\u0431\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441\u0434\u0432\u0438\u0433\u0430. \u041d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0432 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0443\u0447\u0435\u0442\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043c\u0435\u0449\u0430\u043b\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430 \u043f\u0430\u0440\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0431\u044b\u043b \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0435\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438, \u0442\u043e \u0434\u0430\u0436\u0435 \u0442\u0430\u043a\u0438\u0435 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0434\u0432\u0438\u0433\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 <em>\u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u043e\u0446\u0435\u043d\u043a\u0438 \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0443\u0447\u0435\u0442 <em>\u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/77\/hq\/mx\/77hqmx2hluwvi-zgxlufnmjjmok.png\" alt=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f\" title=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0434\u0432\u0438\u0433\u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u043e\u0441\u0435\u0439 \u043c\u0430\u043a\u0435\u0442\u0430 (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439) \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0438\u0441\u043a <em>\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f <em>\u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430<\/em> (\u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0430). \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5p\/k-\/wr\/5pk-wrq297zw9_0rkzqhd6wjzz0.png\" alt=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430\" title=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0441\u0447\u0435\u0442 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gr\/-z\/en\/gr-zenf8xowmjljesvyvqzujk4e.png\" alt=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430\" title=\"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430\"><\/p>\n<p>  <\/p>\n<p><em>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \/ <em>\u041d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430<\/em> = 87 \/ 320 = 0.27<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441\u0434\u0432\u0438\u0433\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li><em>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em><\/li>\n<li><em>\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <em>\u043e\u0446\u0435\u043d\u043a\u0443 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u043c\u0430\u043a\u0435\u0442\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0446\u0435\u043d\u043a\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> = <em>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> \u00d7 <em>\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> = 0.84 \u00d7 0.27 = 0.2268<\/p>\n<p>  <\/p>\n<p>\u041d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f <em>\u043e\u0446\u0435\u043d\u043a\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> (Layout Shift) \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043c \u0441\u0434\u0432\u0438\u0433\u0430 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e-\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f <em>\u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/em> (Cumulative Layout Shift), \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0441\u0443\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u0435\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0438 \u043e \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044f\u0445, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0431\u044b\u043b \u0441\u0434\u0432\u0438\u0433 \u043c\u0430\u043a\u0435\u0442\u0430, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0412\u0435\u0434\u044c \u043a\u043e\u0433\u0434\u0430 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f, \u043e\u043d\u0438 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u0441\u0434\u0432\u0438\u0433\u0443 \u043c\u0430\u043a\u0435\u0442\u0430, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043c\u0435\u0442\u0440\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u044f\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043f\u043e\u0432\u043b\u0435\u043a\u0448\u0438\u0435 \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0430\u043a\u0435\u0442\u0430, \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445, \u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u0441\u0434\u0432\u0438\u0433\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0441\u044f \u0431\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432, \u0447\u0442\u043e \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u0412\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430. \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u043a\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 500 \u043c\u0441. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043b\u044e\u0431\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430, \u0441\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 500 \u043c\u0441 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438, \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u0449\u0435\u0439 \u043e\u0446\u0435\u043d\u043a\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ky\/s6\/th\/kys6th5htpqbp3wtphmweoqp40o.png\" alt=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434\" title=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/csstriggers.com\/\">css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 (Layout), \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0435\u0442\u0440\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442. \u041a \u0442\u0430\u043a\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f <em>transform<\/em>, <em>opacity<\/em> \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u043c\u0430\u043a\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043a\u0435\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <strong>CLS<\/strong> \u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\">transform<\/a>.<\/p>\n<p>  <\/p>\n<h4 id=\"ispolzovanie\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 PerformanceObserver API:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let cumulativeLayoutShift = 0;  const performanceObserver = new PerformanceObserver((performanceEntryList) =&gt; {   const performanceEntries = performanceEntryList.getEntries();    for (const performanceEntry of performanceEntries) {       if (!performanceEntry.hadRecentInput) { \/\/ \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e hadRecentInput \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0432\u0432\u043e\u0434\u043e\u043c           cumulativeLayoutShift += performanceEntry.value;            console.log('CLS is', cumulativeLayoutShift);       }   } });  performanceObserver.observe({ type: 'layout-shift', buffered: true });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u043c\u0430\u043a\u0435\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043e\u043f\u0446\u0438\u044e \u0432 \u043c\u0435\u043d\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f chromium-based \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uv\/uw\/ab\/uvuwabyedrrvrafjlk6vuecyqdc.png\" alt=\"Layout Shift Regions\" title=\"Layout Shift Regions\"><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8q\/my\/jg\/8qmyjgegenyarzipo5ptlmlzjrm.png\" alt=\"Layout Shift Regions\" title=\"Layout Shift Regions\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 <strong>CLS<\/strong> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 Performance:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sp\/oa\/2g\/spoa2gj_fjetokcbnxe_ndzmqrq.png\" alt=\"Performance panel\" title=\"Performance panel\"><\/p>\n<p>  <\/p>\n<h4 id=\"ocenka-rezultatov\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u043c\u0430\u043a\u0435\u0442\u0430, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0435 \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>CLS<\/strong>. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/d3\/nq\/ow\/d3nqowqpplx46psyor9mfqq4ncs.png\" alt=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 CLS\" title=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 CLS\"><\/p>\n<p>  <\/p>\n<h4 id=\"sposoby-optimizacii\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h4>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/strong><br \/>  \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044f\u0432\u043d\u043e\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438, \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0441\u0434\u0432\u0438\u0433\u0430\u043c \u043c\u0430\u043a\u0435\u0442\u0430. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0432 \u0442\u044d\u0433\u0435 &lt;img&gt;, \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u0435\u0439 <a href=\"https:\/\/www.smashingmagazine.com\/2020\/03\/setting-height-width-images-important-again\/\">Setting Height And Width On Images Is Important Again<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430<\/strong><br \/>  \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u0440\u0430\u0437\u0443 \u0438\u043b\u0438 \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0437\u0430\u043c\u0435\u043d\u0430 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u043a\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\">@font-face<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\">font-display<\/a>. \u0414\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043e\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u0435\u0441\u0442\u0438 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438 \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0430\u043a\u0435\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <em>optional<\/em>, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0443\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0437\u0430 \u043f\u0435\u0440\u0432\u044b\u0435 100 \u043c\u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e, \u0431\u0435\u0437 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0437\u0430\u043c\u0435\u043d\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u2014 \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u043d \u0431\u044b\u043b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 \u043a\u044d\u0448 \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0430\u0437\u0430. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u0441 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u2014 \u0441 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u043e\u0439 \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/web.dev\/preload-optional-fonts\/\">Prevent layout shifting by preloading optional fonts<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/strong><br \/>  \u041f\u043e\u0434 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u044b\u043c \u043e\u0442\u0432\u0435\u0442\u043d\u044b\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043d\u0430 \u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0431\u0430\u043d\u043d\u0435\u0440\u044b, \u0440\u0435\u043a\u043b\u0430\u043c\u0430, \u0431\u043b\u043e\u043a\u0438 \u0441 \u043f\u0440\u043e\u0441\u044c\u0431\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0443 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0410 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u2014 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/strong><br \/>  \u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e <a href=\"https:\/\/csstriggers.com\/\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043a\u0435\u0442\u0430, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <em>transform<\/em>.<\/p>\n<p>  <\/p>\n<h3 id=\"largest-contentful-paint\">Largest Contentful Paint<\/h3>\n<p>  <\/p>\n<p>Largest Contentful Paint (<strong>LCP<\/strong>) \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b <strong>LCP<\/strong> \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed_metrics\/README.md#mission\">Chrome Speed Metrics<\/a> \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e \u0444\u0430\u0437\u0430\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042f \u043d\u0430\u0437\u043e\u0432\u0443 \u044d\u0442\u0438 \u0444\u0430\u0437\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li><em>\u0444\u0430\u0437\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/em> \u2014 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0448\u0435\u043b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li><em>\u0444\u0430\u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/em> \u2014 \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b;<\/li>\n<li><em>\u0444\u0430\u0437\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/em> \u2014 \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0433\u043e\u0442\u043e\u0432\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/g0\/vl\/6q\/g0vl6qdolr_wwqdkmp9sz2yo460.png\" alt=\"\u0424\u0430\u0437\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" title=\"\u0424\u0430\u0437\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u043e \u0444\u0430\u0437\u0430\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0443\u044e\u0441\u044f \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ww\/fg\/xp\/wwfgxplm3zfgveq-esjdk0odgdk.png\" alt=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\" title=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\"><\/p>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0440\u0435\u0437\u043e\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0444\u0430\u0437\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0440\u044b\u0442\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438, \u0437\u0430\u0447\u0435\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430? \u041e\u0442\u0432\u0435\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u0440\u0438\u043a\u0435 <strong>FMP<\/strong> (First Meaningful Paint), \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 Chrome Speed Metrics, \u0438\u043c\u0435\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0430 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed\/good_toplevel_metrics.md\">\u043d\u0430\u0431\u043e\u0440 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430. <\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043c\u0435\u0442\u0440\u0438\u043a\u0430 <strong>FMP<\/strong> \u043d\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed\/good_toplevel_metrics.md#Simple\">\u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b<\/a> \u0438 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed\/good_toplevel_metrics.md#Elastic\">\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438<\/a>. \u041f\u0435\u0440\u0432\u044b\u043c \u2014 \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u2014 \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u043a\u0438. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 <strong>FMP<\/strong> \u0444\u0430\u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0431\u0435\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bq\/qf\/lk\/bqqflkjathtvvtmsusvgght_roi.png\" alt=\"\u0424\u0430\u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\" title=\"\u0424\u0430\u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\"><\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u043c\u0435\u043d\u0443, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u0440\u0438\u043a-\u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u0432, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 Chrome:<\/p>\n<p>  <\/p>\n<ul>\n<li>Largest image paint;<\/li>\n<li>Largest text paint;<\/li>\n<li>Largest image OR text paint;<\/li>\n<li>Last image paint;<\/li>\n<li>Last text paint;<\/li>\n<li>Last image OR text paint.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0441 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u0431\u044b\u043b\u043e \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u043e, \u0447\u0442\u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0430 Largest image OR text paint \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u043c. \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u044d\u0442\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 Largest Contentful Paint.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ji\/iw\/0k\/jiiw0khogpu8ieyxxmexfgob22m.png\" alt=\"Largest Contentful Paint\" title=\"Largest Contentful Paint\"><\/p>\n<p>  <\/p>\n<h4 id=\"princip-raboty-1\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/h4>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u043c\u0435\u0442\u0440\u0438\u043a\u0430 <strong>LCP<\/strong> \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0410 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e, \u0442\u043e \u0438 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u043d\u0430 \u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k3\/pv\/zf\/k3pvzfa-nsfahwklka_nrkgebls.png\" alt=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f LCP\" title=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f LCP\"><\/p>\n<p>  <\/p>\n<p>\u0421\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0435\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u043c\u0435\u0440\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u0440\u0438\u043a\u0438 <strong>LCP<\/strong> \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0438\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<br \/> \n<ul>\n<li>&lt;img&gt; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b,<\/li>\n<li>&lt;image&gt; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 SVG-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432,<\/li>\n<li>\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c;<\/li>\n<\/ul>\n<\/li>\n<li>\u0432\u0438\u0434\u0435\u043e \u0441 poster-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c;<\/li>\n<li>\u0442\u0435\u043a\u0441\u0442 \u0432 \u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440<\/em> = <em>\u0428\u0438\u0440\u0438\u043d\u0430<\/em> \u00d7 <em>\u0412\u044b\u0441\u043e\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u043c\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0414\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u044e\u0449\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f load \u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u0414\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Timing-Allow-Origin\">Timing-Allow-Origin<\/a>. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f load \u0440\u0435\u0441\u0443\u0440\u0441\u0430.<\/li>\n<li>\u0414\u043b\u044f \u0432\u0438\u0434\u0435\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 poster-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c\u0443 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/li>\n<li>\u0414\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0438 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443. \u041f\u043e \u0441\u0443\u0442\u0438, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0438\u0441\u043a <em>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/em>, \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u0441\u0442\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412\u0435\u0434\u044c \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u0430\u043f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043b \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u2014 \u0431\u0443\u0434\u044c \u0442\u043e \u043a\u043b\u0438\u043a \u0438\u043b\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u0438\u0441\u043a \u043d\u043e\u0432\u044b\u0445 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u0432 \u0434\u043b\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 <strong>LCP<\/strong> \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f. <\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 DOM-\u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0438\u0441\u043a \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u044d\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442. <\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u043c\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u0445 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043c\u0435\u043d\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0441\u043c\u0435\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u043c. \u041d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u043d\u0435 \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 \u0431\u044b\u043b\u0438 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0441\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0442\u043e \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u043c\u0435\u043d\u043e\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0437\u043d\u0430\u0435\u0442 \u043e\u0431 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0434 \u0435\u0435 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<h4 id=\"ispolzovanie-1\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f PerformanceObserver API:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const performanceObserver = new PerformanceObserver((performanceEntryList) =&gt; {     const performanceEntries = performanceEntryList.getEntries();     const lastPerformanceEntry = performanceEntries[performanceEntries.length - 1];      const largestContentfulPaint = lastPerformanceEntry.startTime;      console.log('LCP is', largestContentfulPaint); });  performanceObserver.observe({ type: 'largest-contentful-paint', buffered: true });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 <strong>LCP<\/strong> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 Performance:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3k\/v2\/ti\/3kv2tiivlxrk9dffotpv2bgtvfo.png\" alt=\"Performance panel\" title=\"Performance panel\"><\/p>\n<p>  <\/p>\n<h4 id=\"ocenka-rezultatov-1\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kc\/ob\/bb\/kcobbbiz50nwi-ecrukojxfghwc.png\" alt=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 LCP\" title=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 LCP\"><\/p>\n<p>  <\/p>\n<h4 id=\"sposoby-optimizacii-1\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h4>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043b\u044e\u0431\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435 <strong>LCP<\/strong>. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440 <a href=\"https:\/\/web.dev\/render-blocking-resources\/\">\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/a>.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/web.dev\/reduce-network-payloads-using-text-compression\/#data-compression\">\u0441\u0436\u0430\u0442\u0438\u0435<\/a> \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u043e \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u044d\u0442\u043e <a href=\"https:\/\/csswizardry.com\/2020\/04\/real-world-effectiveness-of-brotli\/\">\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e<\/a>.<\/li>\n<li>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 <a href=\"https:\/\/images.guide\/\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a>, \u0430 \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 <a href=\"https:\/\/github.com\/tcoopman\/image-webpack-loader\">\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435<\/a> \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0439\u0442\u0435 <a href=\"https:\/\/web.dev\/preconnect-and-dns-prefetch\/\">\u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/a> \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0434\u043e\u043c\u0435\u043d\u0430\u043c\u0438 \u0438 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/resource-prioritization\">\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435<\/a> \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/li>\n<li>\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 <a href=\"https:\/\/web.dev\/time-to-first-byte\/\">\u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435<\/a>, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0443 <a href=\"https:\/\/web.dev\/http-cache\/\">\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>.<\/li>\n<li>\u0418, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, <a href=\"https:\/\/web.dev\/unminified-javascript\/\">\u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a>, <a href=\"https:\/\/web.dev\/reduce-javascript-payloads-with-code-splitting\/\">\u043a\u043e\u0434-\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433<\/a>, <a href=\"https:\/\/github.com\/GoogleChromeLabs\/webpack-libs-optimizations\">\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a> \u0438 <a href=\"https:\/\/web.dev\/remove-unused-code\/\">\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"first-input-delay\">First Input Delay<\/h3>\n<p>  <\/p>\n<p>First Input Delay (<strong>FID<\/strong>) \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p>\n<p>  <\/p>\n<h4 id=\"princip-raboty-2\">\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b<\/h4>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u043a\u0430\u043b\u0443, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0443\u044e \u0442\u0438\u043f\u0438\u0447\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y8\/ag\/le\/y8agletq9y52bxe7qt5e31nxrfs.png\" alt=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\" title=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\"><\/p>\n<p>  <\/p>\n<p>\u0428\u043a\u0430\u043b\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0444\u0430\u0439\u043b\u0430\u043c\u0438 CSS \u0438 JS (\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043e \u0441\u0435\u0440\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c).<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043e \u0431\u0435\u0436\u0435\u0432\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c).<\/p>\n<p>  <\/p>\n<p>\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 (First Input Delay, <strong>FID<\/strong>), \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (First Contentful Paint, <strong>FCP<\/strong>) \u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 (Time To Interactive, <strong>TTI<\/strong>). <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 \u0448\u043a\u0430\u043b\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-e\/gm\/vc\/-egmvcynq18maltvzrkvipem23o.png\" alt=\"\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" title=\"\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\"><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u043e\u0442\u0440\u0435\u0437\u043a\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 <strong>FCP<\/strong> \u0438 <strong>TTI<\/strong> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041b\u044e\u0431\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043b\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 50 \u043c\u0441, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/w3c.github.io\/longtasks\/#long-task\">\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439<\/a>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0432 50 \u043c\u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 <a href=\"https:\/\/web.dev\/rail\/#response:-process-events-in-under-50ms\">\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439<\/a> \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 RAIL.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yf\/ro\/lp\/yfrolptnoax4dztijaoo3zniwra.png\" alt=\"\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438\" title=\"\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043e\u043d \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u0441 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439. \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nb\/qa\/qc\/nbqaqcuglvhxa2ttnpy1wejbn18.png\" alt=\"First Input Delay\" title=\"First Input Delay\"><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434 \u0441\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u041e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0432\u0448\u0438\u0439 \u0432\u0432\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u043b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u0447\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0430 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u0410 \u0432\u0440\u0435\u043c\u044f, \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <strong>FID<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u0432 \u0440\u0430\u0437\u044b, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 SSR (server-side rendering). \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0435\u043c\u0443 \u043c\u043d\u0438\u043c\u043e\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (<strong>FCP<\/strong>), \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u044f \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 (<strong>TTI<\/strong>). \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0431\u0435\u0437 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0440\u0438\u043a \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430 \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u043a \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e. \u0427\u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435 <strong>FID<\/strong> \u0438 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f\u0445 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<h4 id=\"ispolzovanie-2\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f PerformanceObserver API:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const performanceObserver = new PerformanceObserver((performanceEntryList) =&gt; {     const performanceEntry = performanceEntryList.getEntries()[0];     const { startTime, processingStart } = performanceEntry;      const firstInputDelay = processingStart - startTime;      console.log('FID is', firstInputDelay); });  performanceObserver.observe({ type: 'first-input', buffered: true });<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"ocenka-rezultatov-2\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-a\/-w\/xf\/-a-wxfs9_pi6r5h0hm52aazu4hg.png\" alt=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 FID\" title=\"\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 FID\"><\/p>\n<p>  <\/p>\n<h4 id=\"sposoby-optimizacii-2\">\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h4>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c <strong>FID<\/strong>, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 JS-\u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"https:\/\/github.com\/GoogleChromeLabs\/webpack-libs-optimizations\">\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/a> \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/web.dev\/remove-unused-code\/\">\u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e<\/a> \u043a\u043e\u0434\u0430, \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f <a href=\"https:\/\/web.dev\/reduce-javascript-payloads-with-code-splitting\/\">\u043a\u043e\u0434-\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433\u043e\u043c<\/a> \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u043e\u0439 <a href=\"https:\/\/web.dev\/serve-modern-code-to-modern-browsers\/\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u043e\u0432<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435, \u0442\u043e \u0432\u043e\u0442 \u043f\u0430\u0440\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439. \u0414\u043b\u044f SSR-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0435\u0439. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/addyosmani.com\/blog\/rehydration\/\">The cost of rehydration<\/a> \u2014 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438.<\/li>\n<li><a href=\"https:\/\/medium.com\/@luke_schmuke\/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5\">The case of partial hydration<\/a> \u2014 \u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Next \u0438 Preact.<\/li>\n<li><a href=\"https:\/\/markus.oberlehner.net\/blog\/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications\/\">How to drastically reduce time to interactive<\/a> \u2014 \u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Vue.js.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/concurrent-mode-intro.html\">Introducing Concurrent Mode (Experimental)<\/a> \u2014 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0432 React, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 <a href=\"https:\/\/philipwalton.com\/articles\/idle-until-urgent\/\">Idle Until Urgent<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"custom-metrics\">Custom Metrics<\/h3>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0438\u043f \u043c\u0435\u0442\u0440\u0438\u043a, \u043f\u043e\u043b\u044c\u0437\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u0446\u0435\u043d\u0438\u0442\u044c, \u2014 <a href=\"https:\/\/github.com\/TinkoffCreditSystems\/perfectum\/tree\/master\/packages\/client#custom-metrics\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438<\/a>. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412 Perfectum Client \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u0432\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438: \u043e\u0434\u0438\u043d \u2014 \u0434\u043b\u044f \u044d\u0442\u0430\u043f\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0434\u043b\u044f \u044d\u0442\u0430\u043f\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0438\u043c. <\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445.<\/p>\n<p>  <\/p>\n<h4 id=\"inicializaciya-prilozheniya\">\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0436\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 hero-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, cta-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, lead-\u0444\u043e\u0440\u043c\u044b \u0438 \u0442.\u0434. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <em>elementtiming<\/em> \u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0435\u043c\u0443 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;h1 elementtiming=&quot;metric-name&quot;&gt;Example App&lt;\/h1&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432 \u043e\u0431\u0449\u0435\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043c\u0435\u0442\u0440\u0438\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"vzaimodeystvie-s-prilozheniem\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u0432\u0438\u0434\u0435 \u0434\u0432\u0443\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430 Perfectum:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Perfectum from '@perfectum\/client';  Perfectum.startMeasure('metric-name');  someKindOfImportantTask();  Perfectum.stopMeasure('metric-name');<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <em>stopMeasure<\/em> \u0432 \u043e\u0431\u0449\u0435\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043c\u0435\u0442\u0440\u0438\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u043c \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <em>startMeasure<\/em>.<\/p>\n<p>  <\/p>\n<h2 id=\"analiz-dannyh\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>  <\/p>\n<p>\u0417\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0432 Grafana. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f <strong>LCP<\/strong> \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tw\/xb\/9b\/twxb9bapmdfg8lucieui2bcumue.png\" alt=\"\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Grafana\" title=\"\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Grafana\"><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043e \u043f\u043e \u0442\u0438\u043f\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 (desktop\/mobile). \u0414\u043b\u044f \u043d\u0430\u0441 \u0442\u0430\u043a\u043e\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 55% \u043d\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0437\u0430\u0445\u043e\u0434\u044f\u0442 \u0432 web-\u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0430\u0439\u0442\u0430 \u0441 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0430\u0433\u0440\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f\u043c (50%, 80%, 95%). \u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c \u2014 \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7t\/9-\/c2\/7t9-c2uskkvdjatx1c4zxj7x_b8.png\" alt=\"\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 80-\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f\" title=\"\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 80-\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f\"><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Largest Contentful Paint (p80), \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0432\u044b\u0448\u0435, \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 80% desktop-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 2 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"byudzhety-proizvoditelnosti\">\u0411\u044e\u0434\u0436\u0435\u0442\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0446\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439, \u043d\u043e \u0438 \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0437\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u0430\u043c\u0438. <\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f <a href=\"https:\/\/github.com\/TinkoffCreditSystems\/perfectum\/blob\/master\/packages\/cli\/perfectum.json#L8\">\u0431\u044e\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a> \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0439 Grafana:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/06\/c_\/mk\/06c_mky0tviiwakmx6mntshba9m.png\" alt=\"\u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 Grafana\" title=\"\u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 Grafana\"><\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u0430\u0441\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u0431\u044e\u0434\u0436\u0435\u0442, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f. <\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sc\/xo\/kf\/scxokfmxj-kwyycqaru9syoji1w.png\" alt=\"\u041f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\" title=\"\u041f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\"><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0432\u044b\u0448\u0435, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u0438\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0443\u0441\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u043e\u043c \u043f\u0440\u043e \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u044b.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u0438\u0441\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f real-time \u0441\u0438\u0441\u0442\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0430\u0442\u043e\u043c\u043d\u044b\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u044f\u0445 (\u0410\u0421\u0423 \u0422\u041f, \u0421\u0410\u0423, SCADA-\u0441\u0438\u0441\u0442\u0435\u043c\u044b). <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u043a \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0439 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0431\u044e\u0434\u0436\u0435\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <em>\u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e 80-\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044e<\/em> \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c <em>\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0433\u043e \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u044f<\/em> \u0432 20%.<\/p>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0443\u043b\u0430:<br \/>  <strong>P<\/strong> \u2014 \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043f\u043e 80-\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044e<br \/>  <strong>K<\/strong> \u2014 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0435 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u0435<br \/>  <strong>B<\/strong> \u2014 \u0431\u044e\u0434\u0436\u0435\u0442<\/p>\n<p>  <\/p>\n<p><strong>B<\/strong> = <strong>P<\/strong> + <strong>K<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<br \/>  <strong>P<\/strong> \u2014 5000 (\u043c\u0441)<br \/>  <strong>K<\/strong> \u2014 20 (%)<br \/>  <strong>B<\/strong> \u2014 ?? (\u043c\u0441)<\/p>\n<p>  <\/p>\n<p><strong>B<\/strong> = 5000 + (5000 \u00d7 0.20) = 6000<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e 80-\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044e<\/em> \u2014 \u044d\u0442\u043e \u043c\u0435\u0434\u0438\u0430\u043d\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438 \u044d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: [4500, 5200, 5500, 4600, 5000]. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043c\u0435\u0434\u0438\u0430\u043d\u0443, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u2014 [4500, 4600, 5000, 5200, 5500] \u2014 \u0438 \u0432\u0437\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b \u2014 5000. <\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0434\u0438\u0430\u043d\u044b \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043e \u0442\u0435\u043c \u0444\u0430\u043a\u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u043e \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u043e \u0432\u043b\u0438\u044f\u043d\u0438\u044e \u0432\u044b\u0431\u0440\u043e\u0441\u043e\u0432, \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u0440\u0435\u0434\u043d\u0438\u043c \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0435 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u0435<\/em> \u0432 20% \u0432\u0437\u044f\u0442\u043e \u0438\u0437 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/www.smashingmagazine.com\/2015\/09\/why-performance-matters-the-perception-of-time\/#the-need-for-performance-optimization-the-20-rule\">The Perception Of Time<\/a>. \u041f\u0440\u0438\u043d\u0446\u0438\u043f \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0441\u0438\u0445\u043e\u0444\u0438\u0437\u0438\u043a\u0438 \u0438 \u0433\u043b\u0430\u0441\u0438\u0442, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0442\u0435\u0445 \u0441\u0430\u043c\u044b\u0445 20%.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0411\u0435\u0440\u0435\u043c \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0438\u043a\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 10:00 \u0434\u043e 19:00).<\/li>\n<li>\u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 80-\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f.<\/li>\n<li>\u041f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u0435 \u0432 20%.<\/li>\n<\/ol>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0448\u0430\u0433 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043b\u044e\u0431\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438, \u0446\u0435\u043b\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0438, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u043c\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0410 \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0432\u0435\u043d\u0442\u0438\u0432\u043d\u043e \u0432\u044b\u044f\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u043e <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/508258\/\">\u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0435<\/a>.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/508256\/\"> https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/508256\/<\/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\/tinkoff\/blog\/508256\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/l2\/n9\/gr\/l2n9grjjswkmnquoixsgyiwx0gw.png\" alt=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\" title=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u043b\u0430\u0434, \u044f \u043b\u0438\u0434 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Web Performance \u0432 \u0422\u0438\u043d\u044c\u043a\u043e\u0444\u0444. <\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u0445, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f, \u0432 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0443\u0441\u043f\u0435\u0445 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <a href=\"https:\/\/wpostats.com\/\">\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0439<\/a> \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u0430\u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043e\u043f\u044b\u0442\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0434\u0443\u0449\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u0438 IT-\u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/why-performance-matters\">\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>, \u043f\u0440\u043e\u0432\u043e\u0434\u044f\u0442 <a href=\"https:\/\/web.dev\/defining-core-web-vitals-thresholds\/\">\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/a> \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 <a href=\"https:\/\/web.dev\/rail\/\">\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438<\/a>, <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\">\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/a> \u0438 <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/speed_metrics\/README.md#APIs-we-own\">API<\/a>. \u0410 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c Google \u0438 \u0432\u043e\u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 <a href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\">\u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0435<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0430 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u2014 \u043f\u0440\u0438\u0431\u044b\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0418 \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0433\u0440\u0430\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0440\u043e\u043b\u044c, \u0442\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-305948","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305948","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=305948"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305948\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=305948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=305948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=305948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}