{"id":1643,"date":"2021-02-02T18:10:52","date_gmt":"2021-02-02T18:10:52","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1643"},"modified":"2021-02-02T18:10:52","modified_gmt":"2021-02-02T18:10:52","slug":"%d0%ba%d0%b0%d0%ba-%d0%b8%d0%b7%d0%bc%d0%b5%d1%80%d1%8f%d1%8e%d1%82%d1%81%d1%8f-%d0%bc%d0%b5%d1%82%d1%80%d0%b8%d0%ba%d0%b8-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-lcp-fid-%d0%b8-cls","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1643","title":{"rendered":"\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0430: LCP, FID \u0438 CLS"},"content":{"rendered":"\n<p>5 \u043c\u0430\u044f 2020 \u0433\u043e\u0434\u0430 Google \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 Web Vitals \u2014 \u0432\u0430\u0436\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 SEO. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432<\/h2>\n\n\n\n<h3>LCP \u2014 Largest Contentful Paint<\/h3>\n\n\n\n<p>\u042d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0430\u043c\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432&nbsp;<a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0431\u043b\u043e\u0433\u0435 Google<\/a>). \u0414\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 LCP \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c 2,5 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<a href=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/lcp.png\"><\/a><\/p>\n\n\n\n<p id=\"caption-attachment-144159\">FCP \u2014 First Contentful Paint (\u041f\u0435\u0440\u0432\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430)<\/p>\n\n\n\n<h4>\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c LCP?<\/h4>\n\n\n\n<p>LCP \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome User Experience Report<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/li><li><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noreferrer noopener\">Search Console (Core Web Vitals report)<\/a><\/li><li><a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\"><code>web-vitals<\/code>&nbsp;JavaScript library<\/a><\/li><\/ul>\n\n\n\n<p>\u0414\u043b\u044f \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome DevTools<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a><\/li><li><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPageTest<\/a><\/li><\/ul>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c LCP \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JS \u0438&nbsp;<a href=\"https:\/\/wicg.github.io\/largest-contentful-paint\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint API<\/a>, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>new PerformanceObserver((entryList) => {\n  for (const entry of entryList.getEntries()) {\n    console.log('LCP candidate:', entry.startTime, entry);\n  }\n}).observe({type: 'largest-contentful-paint', buffered: true});<\/code><\/pre>\n\n\n\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435&nbsp;<code>largest-contentful-paint<\/code>&nbsp;\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430 \u043d\u0430 \u0440\u043e\u043b\u044c LCP. \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 startTime \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c LCP, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u0430\u043a. \u041d\u0435 \u0432\u0441\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f LCP.<\/p>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b API \u0438 \u0442\u043e, \u043a\u0430\u043a \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u0441\u0430\u0439\u0442\u0430, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f:<\/p>\n\n\n\n<ul><li>API \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 LCP \u044d\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c;<\/li><li>API \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u0448\u043b\u0430 \u0432 \u0444\u043e\u043d, \u043d\u043e \u044d\u0442\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0441\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043d\u0430 \u043f\u0435\u0440\u0435\u0434\u043d\u0435\u043c \u043f\u043b\u0430\u043d\u0435);<\/li><li>API \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 \u043a\u044d\u0448\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0432\u043f\u0435\u0440\u0435\u0434\\\u043d\u0430\u0437\u0430\u0434 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e LCP \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c \u0432 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0438\u0445 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446;<\/li><li>API \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 iframes, \u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f LCP \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445. \u041f\u043e\u0434\u0444\u0440\u0435\u0439\u043c\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c API, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043e \u0441\u0432\u043e\u0438\u0445 LCP \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0443 \u0434\u043b\u044f \u0430\u0433\u0440\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/li><\/ul>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\"><code>web-vitals<\/code>&nbsp;JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0451 \u0437\u0430 \u0432\u0430\u0441:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {getLCP} from 'web-vitals';\ngetLCP(console.log);<\/code><\/pre>\n\n\n\n<h4>\u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0430\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c?<\/h4>\n\n\n\n<p>\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/wicg.github.io\/element-timing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Element Timing API<\/a>.<\/p>\n\n\n\n<h3>FID \u2014 First Input Delay<\/h3>\n\n\n\n<p>FID \u2014 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0430\u0439\u0442\u043e\u043c. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. \u0412 \u043d\u043e\u0432\u043e\u043c PageSpeed \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0437\u0430\u043c\u0435\u043d\u044f\u0442 \u043d\u0430 TBT (Total Blocking Time), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/p>\n\n\n\n<h4>\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c FID?<\/h4>\n\n\n\n<p>FID \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u0441\u0430\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0441 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c FID \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome User Experience Report<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/li><li><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noreferrer noopener\">Search Console (Core Web Vitals report)<\/a><\/li><li><a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\"><code>web-vitals<\/code>&nbsp;JavaScript library<\/a><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u041c\u0435\u0442\u0440\u0438\u043a\u0430&nbsp;<a href=\"https:\/\/web.dev\/tbt\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043e\u0431\u0449\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438<\/a>&nbsp;(TBT) \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u0445\u043e\u0440\u043e\u0448\u043e \u043a\u043e\u0440\u0440\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u0441 FID \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0435 \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f, \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0449\u0430\u044f TBT \u0432 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u0438\u0438, \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c FID \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p><\/blockquote>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c FID \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/wicg.github.io\/event-timing\" target=\"_blank\" rel=\"noreferrer noopener\">Event Timing API<\/a>. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 JS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>new PerformanceObserver((entryList) => {\n  for (const entry of entryList.getEntries()) {\n    const delay = entry.processingStart - entry.startTime;\n    console.log('FID candidate:', delay, entry);\n  }\n}).observe({type: 'first-input', buffered: true});<\/code><\/pre>\n\n\n\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f first-input \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443&nbsp;<code>startTime<\/code>&nbsp;\u0438&nbsp;<code>processingStart<\/code>. \u041d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 LCP, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043d\u0435 \u0432\u0441\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n\n\n\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 API \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u043e\u0439, \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043b\u044f LCP. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0437\u0434\u0435\u0441\u044c \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\"><code>web-vitals<\/code>&nbsp;JavaScript library<\/a>.<\/p>\n\n\n\n<h3>CLS \u2014 Cumulative Layout Shift<\/h3>\n\n\n\n<p>CLS \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0430\u0439\u0442\u0430 (\u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u0442\u0434.) \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e CLS \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u2014&nbsp;<a href=\"https:\/\/tproger.ru\/translations\/chto-takoe-cls-sajta-i-pochemu-on-vazhen\/\">\u00ab\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 CLS \u0441\u0430\u0439\u0442\u0430 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d \u0432\u0430\u0436\u0435\u043d\u00bb<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/1.gif\" alt=\"\" class=\"wp-image-144044\"\/><\/figure><\/div>\n\n\n\n<h4>\u041a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c CLS?<\/h4>\n\n\n\n<p>CLS \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 (\u0432 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u0438\u0438) \u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 (\u0447\u0435\u0440\u0435\u0437 RUM). \u041b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0439 \u0438\u043b\u0438 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f RUM \u0431\u0443\u0434\u0443\u0442 \u0432 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0432\u0438\u0434\u044f\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c.&nbsp;<\/p>\n\n\n\n<p>\u0412\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u2014 \u044d\u0442\u043e \u0441\u0443\u043c\u043c\u0430 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.&nbsp;\u0421\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0434\u0432\u0438\u0433\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u0430\u043b\u043b CLS \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0434\u0432\u0438\u0433\u0443 \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0432\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430: \u0435\u0433\u043e \u0434\u043e\u043b\u044e \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0434\u043e\u043b\u044e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u0414\u043e\u043b\u044f \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f&nbsp;\u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u044d\u043a\u0440\u0430\u043d \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 (\u043c\u043e\u043c\u0435\u043d\u0442\u0430) \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443.&nbsp;\u0414\u043e\u043b\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0435 \u043b\u044e\u0431\u044b\u043c \u0438\u0437 \u044d\u0442\u0438\u0445 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u0431\u0430\u043b\u043b \u0441\u0434\u0432\u0438\u0433\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 = \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f * \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/code><\/pre>\n\n\n\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043e&nbsp;\u0432\u044b\u0437\u043e\u0432\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f&nbsp;onload.<\/p>\n\n\n\n<p>CLS \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0440\u0438\u043a \u0441\u0430\u0439\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440&nbsp;boomerang.js \u0438 perfume.js.<\/p>\n\n\n\n<p>CLS \u0432 \u043f\u043e\u043b\u0435\u0432\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043f\u0438 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014&nbsp;<a href=\"https:\/\/github.com\/WICG\/layout-instability\" target=\"_blank\" rel=\"noreferrer noopener\">Layout Instability API<\/a>.<\/p>\n\n\n\n<p>\u042d\u0442\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 API \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f\u0445&nbsp;layout-shift&nbsp;\u043b\u044e\u0431\u043e\u043c\u0443&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PerformanceObserver\" target=\"_blank\" rel=\"noreferrer noopener\">PerformanceObserver<\/a>, \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.&nbsp;<\/p>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 layout-shift \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0451 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043a\u0430\u0434\u0440\u0430\u043c\u0438. \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0439 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u043b\u0438 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 DOM, \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0441\u0434\u0432\u0438\u0433 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM.<\/p>\n\n\n\n<p>\u0421\u0434\u0432\u0438\u0433 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043b\u043e\u0445\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c. \u041a\u0430\u0436\u0434\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 layout-shift \u0438\u043c\u0435\u0435\u0442 \u0444\u043b\u0430\u0433 hadRecentInput, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439, \u0431\u044b\u043b \u043b\u0438 \u0432\u0432\u043e\u0434 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0437\u0430 500\u043c\u0441 \u043e\u0442 \u0441\u0434\u0432\u0438\u0433\u0430. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u0442\u043e \u044d\u0442\u043e\u0442 \u0441\u0434\u0432\u0438\u0433 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0437 CLS.<\/p>\n\n\n\n<p>hadRecentInput \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f true \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:&nbsp;mousedown,&nbsp;keydown,\u0438&nbsp;pointerdown.<\/p>\n\n\n\n<p>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f CLS \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Boomerang \u0438\u043b\u0438 web-vitals.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0447\u0435\u0440\u0435\u0437&nbsp;<a href=\"https:\/\/github.com\/WICG\/layout-instability\" target=\"_blank\" rel=\"noreferrer noopener\">Layout Instability API<\/a>, \u0442\u043e \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 PerformanceObserver:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var clsScore = 0;\n\ntry {\n var po = new PerformanceObserver(function(list) {\n var entries = list.getEntries();\n for (var i = 0; i &lt; entries.length; i++) {\n  if (!entries&#91;i].hadRecentInput) {\n  clsScore += entries&#91;i].value;\n  }\n }\n });\n\n po.observe({type: 'layout-shift', buffered: true});\n} catch (e) {\n \/\/ not supported\n}\n<\/code><\/pre>\n\n\n\n<p>\u0424\u043b\u0430\u0433 buffered: true \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 layout-shift, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u0434\u0448\u0438\u0439 \u0434\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438, \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043b\u043b\u0431\u0435\u043a \u043e\u0431\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u0432 list.getEntries().<\/p>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0434\u0432\u0438\u0433 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 LayoutShift:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls5-autoconverted.jpeg\"><img src=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls5-autoconverted.jpeg\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 LayoutShift\" class=\"wp-image-144225\"\/><\/a><\/figure><\/div>\n\n\n\n<p>\u0412\u043e\u0442 \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n\n\n\n<ul><li>duration \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 0;<\/li><li>entryType \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 layout-shift;<\/li><li>hadRecentInput \u2014 \u0431\u044b\u043b \u043b\u0438 \u0432\u0432\u043e\u0434 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 500\u043c\u0441;<\/li><li>lastInputTime \u2014 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0432\u043e\u0434\u0430;<\/li><li>name \u2014 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c layout-shift (\u0432 Chrome \u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u201c\u201d);<\/li><li>sources \u2014 \u0432\u044b\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u0441\u0434\u0432\u0438\u0433;<\/li><li>startTime \u2014 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0435\u0442\u043a\u0430 \u0441\u0434\u0432\u0438\u0433\u0430 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e;<\/li><li>value \u2014 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0441\u0434\u0432\u0438\u0433\u0430 (\u043f\u0440\u043e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u043d\u0438\u0436\u0435).<\/li><\/ul>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c CLS, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c value \u043a\u0430\u0436\u0434\u043e\u0433\u043e layout-shift, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e hadRecentInput \u2014 false.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0441\u0434\u0432\u0438\u0433\u0430\u0445, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 sources.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CLS, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439&nbsp;<a href=\"https:\/\/github.com\/nicjansma\/tampermonkey\/blob\/master\/cls.js\" target=\"_blank\" rel=\"noreferrer noopener\">\u0441\u043a\u0440\u0438\u043f\u0442<\/a>&nbsp;\u0434\u043b\u044f&nbsp;<a href=\"https:\/\/www.tampermonkey.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tampermonkey<\/a>&nbsp;\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Chome \u2014 Web Vitals.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n\n\n\n<ul><li>Chrome Developer Tools (\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Lighthouse\/CLI)<\/li><li>PageSpeed InsightsWebPagetest.org<\/li><li>layoutstability.rocks<\/li><li>Web Vitals Chrome Extention<\/li><li>Calibre<\/li><\/ul>\n\n\n\n<p>\u0412 Chrome Developer Tools \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0430\u0443\u0434\u0438\u0442\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Lighthouse. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Lighthouse \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 Perfomance Audit:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls1.png\"><img src=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls1.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 Lighthouse \" class=\"wp-image-144221\"\/><\/a><\/figure><\/div>\n\n\n\n<p><br>\u041a\u0440\u043e\u043c\u0435 CLS \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0438:<a href=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls2.png\"><\/a><\/p>\n\n\n\n<p id=\"caption-attachment-144222\">\u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e \u0431\u0430\u0433 \u2014 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432 IFRAME, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u0431\u0430\u043b\u043b CLS, \u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u0436\u043c\u0435\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 View Original Trace \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0410\u0443\u0434\u0438\u0442, \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Perfomance.&nbsp;\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Perfomance \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 Experience, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043d\u0438\u0445.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls4.png\"><img src=\"https:\/\/s3.tproger.ru\/uploads\/2021\/01\/cls4.png\" alt=\"\u041c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 \u0432 Lighthouse\" class=\"wp-image-144224\"\/><\/a><\/figure><\/div>\n\n\n\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0442\u0440\u0430\u0441\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0434\u0432\u0438\u0433\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0430\u0439\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.&nbsp;\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 Rendering \u0432 \u043c\u0435\u043d\u044e More Tools.&nbsp;\u0417\u0430\u0442\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 Layout Shift Regions. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0434\u0432\u0438\u0433\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439.<\/p>\n\n\n\n<h2>\u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432<\/h2>\n\n\n\n<p>\u041a\u0440\u043e\u043c\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 Google \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0442\u0440\u0438\u043a\u0438: Time to First Byte (TTFB) \u0438 First Contentful Paint (FCP) \u2014 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u043f\u0440\u0438 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 LCP (\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).<a href=\"https:\/\/tproger.ru\/events\/yandex-nabor-v-letnie-shkoly\/?utm_source=in_text\">\u042f\u043d\u0434\u0435\u043a\u0441 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0432 \u043b\u0435\u0442\u043d\u0438\u0435 \u0448\u043a\u043e\u043b\u044b25 \u044f\u043d\u0432\u0430\u0440\u044f \u2013 31 \u0430\u0432\u0433\u0443\u0441\u0442\u0430, \u041e\u043d\u043b\u0430\u0439\u043d, \u0411\u0435c\u043f\u043b\u0430\u0442\u043d\u043etproger.ru<\/a><a href=\"https:\/\/tproger.ru\/events\/\">\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043a\u0443\u0440\u0441\u044b \u043d\u0430 tproger.ru<\/a><\/p>\n\n\n\n<p>\u0422\u0430\u043a\u0436\u0435, \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 \u043a\u0430\u043a: Total Blocking Time (TBT) \u0438 Time to Interactive (TTI), \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>5 \u043c\u0430\u044f 2020 \u0433\u043e\u0434\u0430 Google \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 Web Vitals \u2014 \u0432\u0430\u0436\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 SEO. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[42],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1643"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1643"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1643\/revisions"}],"predecessor-version":[{"id":1644,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1643\/revisions\/1644"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}