{"id":472163,"date":"2025-08-26T09:01:50","date_gmt":"2025-08-26T09:01:50","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=472163"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=472163","title":{"rendered":"<span>Core Web Vitals-2025: \u043a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0430\u0439\u0442\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/db8\/254\/54a\/db825454a09c7dfa50d2253ee964c73e.png\" width=\"1920\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/db8\/254\/54a\/db825454a09c7dfa50d2253ee964c73e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/db8\/254\/54a\/db825454a09c7dfa50d2253ee964c73e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0421\u0430\u043b\u044e\u0442, \u0425\u0430\u0431\u0440!\u00a0<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0448\u0430, \u044f \u0432\u0445\u043e\u0436\u0443 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432; \u043d\u0435\u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u00ab\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u00bb SberDevices. \u041c\u044b \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442\u044b <a href=\"http:\/\/sberdevices.ru\" rel=\"noopener noreferrer nofollow\">sberdevices.ru<\/a>, <a href=\"http:\/\/giga.chat\" rel=\"noopener noreferrer nofollow\">giga.chat<\/a>, <a href=\"http:\/\/developers.sber.ru\" rel=\"noopener noreferrer nofollow\">developers.sber.ru<\/a> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442, \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u043e \u0441 \u043d\u0435\u0433\u043e \u0443\u0439\u0434\u0451\u0442 (\u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c).<\/p>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0446\u0435\u043d\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a \u043d\u0438\u043c. \u041d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0441\u0442\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u044b, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 Google \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0441\u0430\u0439\u0442\u044b \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0447\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0445 \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, Google \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0440\u0435\u043c\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 \u2014 Core Web Vitals. \u0414\u0432\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043c\u0430\u044f 2020 \u0433\u043e\u0434\u0430, \u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c \u0438 \u0433\u043e\u0434\u0430. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0431\u0435\u0437 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c). \u0410 \u0435\u0449\u0451 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u0440\u0438\u043a Core Web Vitals \u0441\u0430\u0439\u0442 \u0440\u0430\u043d\u0436\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u0445 \u0432\u044b\u0448\u0435. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n<h3>Cumulative Layout Shift (CLS): \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0430\u0439\u0442\u0430 \u0440\u0435\u0437\u043a\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u043d\u0435 \u0436\u0434\u0430\u043b\u0438<\/h3>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0430\u0439\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0447\u0435\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0438\u043b\u0438 \u043a\u0443\u043f\u0438\u0442\u044c \u0442\u043e\u0432\u0430\u0440 \u2014 \u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e \u00ab\u0434\u0451\u0440\u0433\u0430\u0435\u0442\u0441\u044f\u00bb: \u0438\u0437-\u0437\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u0438\u043b\u0438 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u043d \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0438\u043b\u0438 \u043d\u0435 \u0442\u0443\u0434\u0430, \u043a\u0443\u0434\u0430 \u0445\u043e\u0442\u0435\u043b, \u0438 \u0432\u043e\u0442 \u0443\u0436\u0435 \u0435\u043c\u0443 \u0441\u0438\u043b\u044c\u043d\u043e \u0438 \u043d\u0435\u0443\u0434\u0435\u0440\u0436\u0438\u043c\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0443\u0439\u0442\u0438 \u0441 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e, Google \u0432\u0432\u0451\u043b \u043c\u0435\u0442\u0440\u0438\u043a\u0443 CLS (Cumulative Layout Shift) \u2014 \u043e\u043d\u0430 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u00ab\u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0445\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>CLS \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u044e\u0442 \u043c\u0435\u043b\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0435\u0434\u043e\u0447\u0451\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0440\u0435\u043a\u043b\u0430\u043c\u0430 \u0438\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441 \u043e\u043f\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c, \u0432\u044b\u0442\u0435\u0441\u043d\u044f\u044f \u0443\u0436\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 DOM, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438. \u0415\u0449\u0451 \u043c\u0435\u0434\u0438\u0430 \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (\u0432\u0438\u0434\u0435\u043e \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 width\/height \u0440\u0435\u0437\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435). \u0418 \u0448\u0440\u0438\u0444\u0442\u044b-\u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043a\u0438: \u0435\u0441\u043b\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0434\u043e\u043b\u0433\u043e, \u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0435\u0440\u0432 \u0432\u0440\u043e\u0434\u0435 Arial \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0435\u043a\u0441\u0442 \u00ab\u043f\u0440\u044b\u0433\u0430\u0435\u0442\u00bb.<\/p>\n<p>\u041f\u043e\u0434\u0441\u0447\u0451\u0442 CLS \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 CLS, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 <strong>\u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430.<\/strong><\/p>\n<p>\u041e\u043a\u043d\u043e \u0441\u0435\u0430\u043d\u0441\u0430 CLS \u2014 \u044d\u0442\u043e \u043f\u044f\u0442\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0438. \u041e\u043d \u043f\u0440\u043e\u0434\u043b\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043c\u0435\u043d\u0435\u0435 1 \u0441\u0435\u043a\u0443\u043d\u0434\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2013 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u044b\u0435 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u00ab\u0434\u0451\u0440\u0433\u0430\u043d\u0438\u044f\u00bb: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0431\u0430\u043d\u043d\u0435\u0440\u044b, \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041a\u0430\u0436\u0434\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043b\u044e\u0441\u0443\u0435\u0442\u0441\u044f \u043a CLS. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043f\u0438\u043a\u0430 \u2014 0,3.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0430\u0443\u0437\u0430 5 \u0441\u0435\u043a\u0443\u043d\u0434, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u043d\u0435\u0442. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0441\u0435\u0430\u043d\u0441\u0430, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CLS \u0440\u0430\u0432\u043d\u044b\u043c 0,3. \u041d\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043d\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430. \u0415\u0441\u043b\u0438 \u0432\u043d\u043e\u0432\u044c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 CLS \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0443\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u043e\u043a\u043d\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 google lighthouse, SEO) \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 CLS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u043e\u043a\u043d\u0430\u0445 \u0441\u0435\u0430\u043d\u0441\u0430.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/717\/0e2\/577\/7170e257714dfc5fdf5f56aa58c7b3a5.jpg\" width=\"1300\" height=\"700\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/717\/0e2\/577\/7170e257714dfc5fdf5f56aa58c7b3a5.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/717\/0e2\/577\/7170e257714dfc5fdf5f56aa58c7b3a5.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u041a\u0430\u043a \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c CLS \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c?<\/h4>\n<p>CLS \u2014 \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0430\u044f \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0443 \u043d\u0435\u0451 \u043d\u0435\u0442 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u0415\u0441\u0442\u044c \u043b\u0438\u0448\u044c \u0444\u043e\u0440\u043c\u0443\u043b\u0430:<\/p>\n<p><img decoding=\"async\" class=\"formula\" source=\"\\text{layout shift score}\\,=\\,\\text{impact fraction}\\,\\times\\,\\text{distance fraction}\" alt=\"\\text{layout shift score}\\,=\\,\\text{impact fraction}\\,\\times\\,\\text{distance fraction}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce3\/e56\/54d\/ce3e5654deae59f8f7811ad5127eaca1.svg\" width=\"477\" height=\"21\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce3\/e56\/54d\/ce3e5654deae59f8f7811ad5127eaca1.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce3\/e56\/54d\/ce3e5654deae59f8f7811ad5127eaca1.svg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<p><strong>Impact fraction<\/strong> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u044b\u043b\u043e \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u2014 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438\u043b\u0438 \u0432 vh-vw, \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445) \u043d\u0430 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0438\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u2014 \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438, viewport. \u0422\u0435\u0441\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a42\/320\/7f9\/a423207f9ecb933a54585ad96e5db7e0.png\" width=\"3124\" height=\"2064\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a42\/320\/7f9\/a423207f9ecb933a54585ad96e5db7e0.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a42\/320\/7f9\/a423207f9ecb933a54585ad96e5db7e0.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<details class=\"spoiler\">\n<summary>\u0422\u0430 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u043d\u0435\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/69a\/5f0\/1e4\/69a5f01e4b4a00d4da4b5779b8059eb9.png\" width=\"2928\" height=\"2066\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/69a\/5f0\/1e4\/69a5f01e4b4a00d4da4b5779b8059eb9.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/69a\/5f0\/1e4\/69a5f01e4b4a00d4da4b5779b8059eb9.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0431\u0430\u043d\u043d\u0435\u0440 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0436\u0435 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 CLS \u043d\u0435 \u0442\u0430\u043a \u0432\u0435\u043b\u0438\u043a. \u0415\u0441\u043b\u0438 \u0431\u044b \u0431\u0430\u043d\u043d\u0435\u0440 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u044b\u0448\u0435 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, impact fraction \u0431\u044b\u043b \u0431\u044b \u0440\u0430\u0432\u0435\u043d \u0435\u0434\u0438\u043d\u0438\u0446\u0435.\u00a0 \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 (viewheight) \u0440\u0430\u0432\u043d\u0430 768px, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0430\u0432\u043d\u0430 360px. \u0422\u043e\u0433\u0434\u0430:<\/p>\n<p><img decoding=\"async\" class=\"formula\" source=\"\\text{impact fraction}=\\frac{\\text{view height}-\\text{\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0448\u0435\/\u0441\u043b\u0435\u0432\u0430\/\u0441\u043f\u0440\u0430\u0432\u0430 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0433\u043e}}{\\text{view height}}=\\frac{768-360}{768}=0,53\" alt=\"\\text{impact fraction}=\\frac{\\text{view height}-\\text{\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0448\u0435\/\u0441\u043b\u0435\u0432\u0430\/\u0441\u043f\u0440\u0430\u0432\u0430 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0433\u043e}}{\\text{view height}}=\\frac{768-360}{768}=0,53\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da5\/705\/7e9\/da57057e9d755fb75da8c9d172bc96f9.svg\" width=\"778\" height=\"54\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da5\/705\/7e9\/da57057e9d755fb75da8c9d172bc96f9.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da5\/705\/7e9\/da57057e9d755fb75da8c9d172bc96f9.svg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<strong> distance fraction<\/strong>, \u043a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0431\u044b\u043b \u0441\u0434\u0432\u0438\u043d\u0443\u0442 (\u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d) \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0441\u0430\u0439\u0442\u0430 \u0441 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0437\u0430 \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443, \u0440\u0430\u0432\u043d\u0443\u044e 50px. \u0422\u043e\u0433\u0434\u0430 distance fraction \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a:<\/p>\n<p><img decoding=\"async\" class=\"formula\" source=\"\\text{distance fraction}=\\frac{\\text{height}\/\\text{weight of the banner}}{\\text{viewheight}}=\\frac{50}{768}=0{,}065\" alt=\"\\text{distance fraction}=\\frac{\\text{height}\/\\text{weight of the banner}}{\\text{viewheight}}=\\frac{50}{768}=0{,}065\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/943\/dce\/de2\/943dcede2494a4e1700252b050daf969.svg\" width=\"538\" height=\"49\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/943\/dce\/de2\/943dcede2494a4e1700252b050daf969.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/943\/dce\/de2\/943dcede2494a4e1700252b050daf969.svg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<p>\u0418\u0442\u043e\u0433\u043e, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, <\/p>\n<p><img decoding=\"async\" class=\"formula\" source=\"\\text{CLS}\\,=\\,\\text{impact fraction}\\,\\times\\,\\text{distance fraction}\\,=\\,0{,}53\\,\\times\\,0{,}06\\,=\\,0{,}03\" alt=\"\\text{CLS}\\,=\\,\\text{impact fraction}\\,\\times\\,\\text{distance fraction}\\,=\\,0{,}53\\,\\times\\,0{,}06\\,=\\,0{,}03\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b21\/02a\/d5a\/b2102ad5a1be8f5124c9eea4d22622ec.svg\" width=\"570\" height=\"20\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b21\/02a\/d5a\/b2102ad5a1be8f5124c9eea4d22622ec.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b21\/02a\/d5a\/b2102ad5a1be8f5124c9eea4d22622ec.svg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<p>0,03 \u2014 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c. \u0425\u043e\u0440\u043e\u0448\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CLS \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u044e\u0442 0,1. \u041d\u0430 \u0434\u0435\u043b\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u0430\u0439\u0442\u0430\u0445 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c CLS \u0432\u044b\u0448\u0435 0,1 \u0442\u0440\u0443\u0434\u043d\u043e \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0431\u0440\u043e\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 (\u043a\u0430\u043a \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c). \u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b\u0448\u0435 0,1, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/99f\/01a\/850\/99f01a8507ceeba32e8ed723fa182990.jpg\" width=\"1300\" height=\"509\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/99f\/01a\/850\/99f01a8507ceeba32e8ed723fa182990.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/99f\/01a\/850\/99f01a8507ceeba32e8ed723fa182990.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u041a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 CLS?<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0437\u0432\u0430\u043b \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043a\u0440\u044b\u043b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u0440\u0430\u0441\u043a\u0440\u044b\u043b \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u042d\u0442\u0438 \u0441\u0434\u0432\u0438\u0433\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0422\u043e\u0433\u0434\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u044c \u0431\u0443\u0434\u0435\u0442 \u044f\u0441\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0414\u043b\u044f \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 500 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0444\u043b\u0430\u0433 hadRecentInput, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b (\u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e) \u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0435 \u0443\u0434\u0438\u0432\u043b\u044f\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 CLS, \u043d\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u0439\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u041a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e, \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u041d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0431\u0430\u0440\u0449\u0438\u0432\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439: \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u043c \u0432\u0435\u0441\u0442\u0438\u0431\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043f\u043b\u043e\u0445\u0435\u0442\u044c (\u21c0\u2038\u21bc\u2036)<\/p>\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion\" rel=\"noopener noreferrer nofollow\">prefers-reduced-motion<\/a> \u2014 \u0438\u043d\u0430\u0447\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435\u043c \u0438\u0437-\u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. Prefers-reduced-motion \u2014 \u044d\u0442\u043e media css \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u00ab\u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\u00bb \u0438\u043b\u0438 \u00ab\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u00bb. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441 \u0432\u0435\u0441\u0442\u0438\u0431\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043b\u044e\u0431\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 MacOS: \u043d\u0438\u0436\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/af7\/959\/d8c\/af7959d8cd735b65a66610e25c08b428.png\" width=\"1114\" height=\"378\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/af7\/959\/d8c\/af7959d8cd735b65a66610e25c08b428.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/af7\/959\/d8c\/af7959d8cd735b65a66610e25c08b428.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0435\u0434\u0438\u0430-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c prefers-reduced-motion:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">.animation {     animation: pulse 1s linear infinite both;     background-color: purple; }   @media (prefers-reduced-motion) {    .animation {      animation: dissolve 4s linear infinite both;      background-color: green;      text-decoration: overline;    }  }    .animation {    color: #fff;    font: 1.2em sans-serif;    width: 10em;    padding: 1em;    border-radius: 1em;    text-align: center;  } <\/code><\/pre>\n<\/div>\n<\/details>\n<h3>Interaction to Next Paint (INP): \u043e\u0431\u043c\u0430\u043d\u0447\u0438\u0432\u043e\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0437\u0430\u0432\u0438\u0441<\/h3>\n<p>\u0422\u0440\u0443\u0434\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u0439\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u0436\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u0443\u0434\u0430-\u0442\u043e (\u043a\u0440\u043e\u043c\u0435 \u0441\u0430\u0439\u0442\u043e\u0432-\u0432\u0438\u0437\u0438\u0442\u043e\u043a). 99% \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u0432 \u0432\u0435\u0431\u0435 \u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043a\u043b\u0438\u043a\u0430\u044e\u0442, \u043f\u0435\u0447\u0430\u0442\u0430\u044e\u0442, \u0441\u043c\u043e\u0442\u0440\u044f\u0442 \u0432\u0438\u0434\u0435\u043e, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043f\u0435\u0441\u043d\u0438 \u0438 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u044e\u0442 \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442\u2026 \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0415\u0441\u043b\u0438\u00a0 \u043f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u043c CLS \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0440\u0435\u0437\u043a\u043e \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0431\u0430\u043d\u043d\u0435\u0440, \u0442\u043e \u043f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u043c INP \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u0441\u0440\u0430\u0437\u0443.\u00a0<\/p>\n<p>INP (Interaction to Next Paint) \u2014 \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0430 First Input Delay \u0432 CWV. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u0435\u0442\u043e\u0434 onFid, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043a\u0430\u043a deprecated. FID, \u043a\u0430\u043a \u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0441\u0447\u0438\u0442\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 INP \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0436\u0438\u0437\u043d\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u0435\u0430\u043d\u0441\u0430. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/529\/0ab\/f17\/5290abf1745ee2d7bdb4bb9ca27f140d.png\" width=\"1288\" height=\"134\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/529\/0ab\/f17\/5290abf1745ee2d7bdb4bb9ca27f140d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/529\/0ab\/f17\/5290abf1745ee2d7bdb4bb9ca27f140d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432 INP, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u043d\u0430\u0448\u0443 <a href=\"https:\/\/turtle-artists.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u0441\u0442\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/a> \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u0432 \u0447\u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0433\u043e \u0432\u0435\u043b\u0438\u043a\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0430-\u043d\u0438\u043d\u0434\u0437\u044f. \u041d\u0430\u0436\u043c\u0451\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\u00bb.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a5\/e7d\/e58\/8a5e7de583d93a66cbbb2d98894712fe.png\" width=\"1620\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8a5\/e7d\/e58\/8a5e7de583d93a66cbbb2d98894712fe.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a5\/e7d\/e58\/8a5e7de583d93a66cbbb2d98894712fe.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\u00bb \u0438\u043b\u0438 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0443\u00bb INP \u0443\u0436\u0435 \u043d\u0430\u0447\u043d\u0451\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0437\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 INP. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u0437\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 CLS (\u0434\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e), \u0433\u0434\u0435 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0443, \u0432 INP \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430: iframe. \u0422\u0443\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435.<\/p>\n<h4>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: RUM, CrUX \u0438 \u0432 \u0447\u0435\u043c \u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f<\/h4>\n<p>\u0415\u0441\u0442\u044c RUM \u2014 Real User Monitoring \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u00ab\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u00bb. \u0410 \u0435\u0441\u0442\u044c CrUX \u2014 \u0441\u0431\u043e\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 Google (Chrome User Experience). \u042d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 Google, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\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 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Chrome.\u00a0<\/p>\n<p>\u0414\u0438\u043b\u0435\u043c\u043c\u0430 \u0432\u043e\u0442 \u0432 \u0447\u0451\u043c: \u0438\u0437-\u0437\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 RUM-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 iframe \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0434\u043e\u043c\u0435\u043d\u043e\u0432, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a CrUX \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0442\u0447\u0451\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 Chrome. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, INP \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430 \u0432 iframe \u043c\u043e\u0436\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 CrUX, \u043d\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 RUM. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \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 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e. <\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 INP<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0427\u0442\u043e\u0431\u044b \u043b\u0438\u0447\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c, \u0447\u0435\u043c \u043f\u043b\u043e\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c INP, \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043d\u0430\u0448 <a href=\"https:\/\/turtle-artists.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442<\/a> \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u00abChange INP delay\u00bb. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\/\u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0443\u00bb.<\/p>\n<\/div>\n<\/details>\n<h4>\u041a\u0430\u043a \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f INP \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0439?<\/h4>\n<p>\u041f\u043e\u0434\u0441\u0447\u0451\u0442 INP \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443. \u0415\u0441\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u043d\u0435 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0437\u0430\u0442\u0435\u043c \u0438\u0434\u0451\u0442 \u044d\u0442\u0430\u043f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0432\u0443\u0430\u043b\u044f \u2014 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 frame \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d, INP \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u0430\u043d! \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u043e\u043a \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d, \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u044b \u0436\u0434\u0451\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u2014 \u0438 \u0432\u0440\u0435\u043c\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 INP.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c69\/0d7\/3cf\/c690d73cfdcfb27ea4d4f955c6962ca8.jpg\" width=\"1300\" height=\"509\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c69\/0d7\/3cf\/c690d73cfdcfb27ea4d4f955c6962ca8.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c69\/0d7\/3cf\/c690d73cfdcfb27ea4d4f955c6962ca8.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 CLS, \u0443 INP \u0435\u0441\u0442\u044c \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u2014 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043b\u0430\u0437 \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u0435\u0435 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0437\u0430 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0434\u043b\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c. \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u0435\u043d\u0435\u0435 200 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442; \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 500, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b\u0448\u0435 500, \u0443\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/57c\/8de\/b3f\/57c8deb3f0d0326463857d509d0c1196.jpg\" width=\"1300\" height=\"509\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/57c\/8de\/b3f\/57c8deb3f0d0326463857d509d0c1196.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/57c\/8de\/b3f\/57c8deb3f0d0326463857d509d0c1196.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u043b\u044f INP \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0435 50 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 INP \u0437\u0430 \u0432\u0435\u0441\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0441\u0430\u0439\u0442\u0430.\u00a0<\/p>\n<h4>\u041a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 INP?<\/h4>\n<p>\u041a\u0430\u043a \u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043d\u0435\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0435\u0441\u0442\u044c:<\/p>\n<p>\u2014 \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c loader \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435. \u0422\u0430\u043a \u0432\u044b \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0442\u043e \u0435\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0430 \u0441\u0430\u0439\u0442 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441. INP \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u043c, \u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0435 \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<p>\u2014 \u0421\u0442\u043e\u0438\u0442 \u0447\u0430\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0442\u043e\u043a\u0443. \u041f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u044b \u0432 \u043a\u043e\u043b\u0431\u044d\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u043a\u0440\u043e\u0437\u0430\u0434\u0430\u0447\u0438. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c setTimeout, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a, \u0438\u043b\u0438 requestIdleCallback, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043b\u043e\u0436\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d.<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">export const optimizedHandleLogEvent = (heavyFunction: () =&gt; void, timeout: number = 5000): void =&gt; {    if (typeof window !== 'undefined') {        if ('requestIdleCallback' in window) {            requestIdleCallback(logFunction, { timeout });        } else {            setTimeout(logFunction, 0);        }    } }; <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0432\u0435\u0434\u0443\u0442 \u043a \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442\u0443 layout, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u0438\u043c. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <a href=\"https:\/\/web.dev\/articles\/avoid-large-complex-layouts-and-layout-thrashing\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.\u00a0<\/p>\n<h3>Largest Contentful Paint (LCP). \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/h3>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a \u0436\u0435 \u0442\u0440\u0443\u0434\u043d\u043e, \u043a\u0430\u043a \u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041e\u043d\u0438 \u0435\u0441\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u0430\u0439\u0442\u0435, \u0438 \u0438\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f. LCP \u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u043c\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 (\u0438\u043b\u0438 \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p>\u0423 LCP \u0435\u0441\u0442\u044c \u0434\u0432\u043e\u044e\u0440\u043e\u0434\u043d\u044b\u0439 \u0431\u0440\u0430\u0442 \u2014 FCP: First Contentful Paint. \u042d\u0442\u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0430, \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0449\u0430\u044f \u0432\u0440\u0435\u043c\u044f \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 \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0410 \u0434\u0432\u043e\u044e\u0440\u043e\u0434\u043d\u044b\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e FCP \u043d\u0435 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 Core Web Vitals.<\/p>\n<p>\u0412 \u043f\u043e\u0434\u0441\u0447\u0435\u0442 LCP \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043d\u043e \u0438:<\/p>\n<ul>\n<li>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0442\u0435\u0433\u043e\u043c &lt;img&gt; (\u0447\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e);<\/p>\n<\/li>\n<li>\n<p>\u0442\u0435\u0433 &lt;video&gt; ;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432 css, \u0442\u043e \u0435\u0441\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 &lt;p&gt;.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043f\u0443\u043d\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c\u0441\u044f. \u0418\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u0443\u043f\u0435\u0440-\u043b\u0451\u0433\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0438 \u043f\u0443\u0441\u0442\u044c Google \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0435\u0451 \u0437\u0430 LCP. \u0418\u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 0. \u0421\u043a\u0440\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u043e\u0434 opacity: 0 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u0435\u0435 100%.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043d\u0442\u0440\u043e\u043f\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 0,05.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041f\u043e\u043d\u044f\u0442\u0438\u0435 \u00ab\u044d\u043d\u0442\u0440\u043e\u043f\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u00bb \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c<a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/refs\/heads\/main\/docs\/speed\/metrics_changelog\/2023%5C_04%5C_lcp.md\" rel=\"noopener noreferrer nofollow\"> \u0432 \u0430\u043f\u0440\u0435\u043b\u0435 2023 \u0433\u043e\u0434\u0430<\/a>, \u043a\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u00ab\u043f\u0443\u0441\u0442\u044b\u0448\u0435\u043a\u00bb \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0441\u0438\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e, \u0430 \u043c\u0435\u0441\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438 \u043c\u043d\u043e\u0433\u043e.\u00a0<\/p>\n<p>\u042d\u043d\u0442\u0440\u043e\u043f\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0437\u0443\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u043d\u0442\u0440\u043e\u043f\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u0435\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0431\u0430\u0439\u0442\u0430\u0445 \/ \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u043e\u0440\u0442\u0440\u0435\u0442 \u0441\u043a\u0443\u043b\u044c\u043f\u0442\u043e\u0440\u0430 \u0414\u043e\u043d\u0430\u0442\u0435\u043b\u043b\u043e.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/339\/ee3\/982\/339ee398265dcdb61bf24b4dea634926.png\" width=\"960\" height=\"1145\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/339\/ee3\/982\/339ee398265dcdb61bf24b4dea634926.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/339\/ee3\/982\/339ee398265dcdb61bf24b4dea634926.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d. \u0412 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0438\u043b\u043e 46,7 \u041a\u0431 \u0438 \u0431\u044b\u043b\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 355 * 300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0421\u0447\u0438\u0442\u0430\u0435\u043c:<\/p>\n<p><img decoding=\"async\" class=\"formula\" source=\"46{,}7\\,\\text{kb}\\,\\rightarrow\\,46\\,700\\,\\text{bytes}\" alt=\"46{,}7\\,\\text{kb}\\,\\rightarrow\\,46\\,700\\,\\text{bytes}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d2d\/bb2\/4d0\/d2dbb24d00fa97f8b036e929fd1bd318.svg\" width=\"197\" height=\"21\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d2d\/bb2\/4d0\/d2dbb24d00fa97f8b036e929fd1bd318.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d2d\/bb2\/4d0\/d2dbb24d00fa97f8b036e929fd1bd318.svg 781w\" loading=\"lazy\" decode=\"async\"\/><img decoding=\"async\" class=\"formula\" source=\"355\\,\\times\\,300\\,=\\,106\\,500\" alt=\"355\\,\\times\\,300\\,=\\,106\\,500\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d09\/05a\/1f1\/d0905a1f13d6f334a6d527ddff5b4f84.svg\" width=\"184\" height=\"17\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d09\/05a\/1f1\/d0905a1f13d6f334a6d527ddff5b4f84.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d09\/05a\/1f1\/d0905a1f13d6f334a6d527ddff5b4f84.svg 781w\" loading=\"lazy\" decode=\"async\"\/><img decoding=\"async\" class=\"formula\" source=\"\\text{\u042d\u043d\u0442\u0440\u043e\u043f\u0438\u044f}\\,=\\,\\frac{46\\,700}{106\\,500}\\,=\\,0{,}15\" alt=\"\\text{\u042d\u043d\u0442\u0440\u043e\u043f\u0438\u044f}\\,=\\,\\frac{46\\,700}{106\\,500}\\,=\\,0{,}15\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/992\/140\/ed8\/992140ed8b52c98090e9b28da321512f.svg\" width=\"235\" height=\"43\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/992\/140\/ed8\/992140ed8b52c98090e9b28da321512f.svg 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/992\/140\/ed8\/992140ed8b52c98090e9b28da321512f.svg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 0,15 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c 0,05. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u0432 \u043f\u043e\u0434\u0441\u0447\u0435\u0442 LCP. \u0410 \u0432\u043e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u044d\u043d\u0442\u0440\u043e\u043f\u0438\u0435\u0439 \u043c\u0435\u043d\u0435\u0435 0,05 \u2014 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442. \u0418 \u044d\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c.<\/p>\n<h4>\u041a\u0430\u043a \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f LCP \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c?<\/h4>\n<p>\u0417\u0430\u043f\u0438\u0441\u044c LCP \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0430\u0440\u0441\u0438\u0442 HTML \u0438 \u0441\u0442\u0440\u043e\u0438\u0442 DOM-\u0434\u0435\u0440\u0435\u0432\u043e, \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u043e\u043b\u044c \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043e\u043d \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043b\u0438\u0434\u0435\u0440\u0430 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.\u00a0<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 2,5 \u0441\u0435\u043a\u0443\u043d\u0434 \u2014\u00a0 \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 LCP. \u041e\u0442 2,5 \u0434\u043e 4 \u0441\u0435\u043a\u0443\u043d\u0434 \u2014 \u00ab\u0436\u0451\u043b\u0442\u0430\u044f \u0437\u043e\u043d\u0430\u00bb. \u0412\u0441\u0451, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043b\u043e\u0445\u043e.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b6a\/55b\/494\/b6a55b494ce8b467a30043f53f37d644.jpg\" width=\"1300\" height=\"509\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b6a\/55b\/494\/b6a55b494ce8b467a30043f53f37d644.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b6a\/55b\/494\/b6a55b494ce8b467a30043f53f37d644.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u0444\u0430\u043a\u0442: \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 LCP \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0438\u043a\u0430\u0442\u044c \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u0438\u043b\u0438 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c (\u0437\u0430\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c\u0441\u044f INP). \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043b\u044e\u0431\u044f\u0442 \u043d\u0435\u0440\u0432\u043d\u0438\u0447\u0430\u0442\u044c, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e.<\/p>\n<h4>\u041a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c LCP?\u00a0<\/h4>\n<p>\u0421\u0430\u043c\u043e\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432\u0435\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0430\u0431\u043e \u043f\u043e\u043c\u043e\u0447\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c:<\/p>\n<p>\u2014 Time To First Byte (TTFB) \u2014 \u0432\u043b\u0438\u044f\u0435\u0442 \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430 LCP;<\/p>\n<p>\u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430;<\/p>\n<p>\u2014 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430;<\/p>\n<p>\u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/p>\n<p>\u041d\u0430 \u0432\u0441\u0435 \u044d\u0442\u0438 \u043f\u0443\u043d\u043a\u0442\u044b (\u043a\u0440\u043e\u043c\u0435 TTFB) \u0432\u043b\u0438\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430, \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5c2\/2bf\/cab\/5c22bfcabe723c70fb5de80732632bd1.jpg\" width=\"1300\" height=\"700\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/5c2\/2bf\/cab\/5c22bfcabe723c70fb5de80732632bd1.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5c2\/2bf\/cab\/5c22bfcabe723c70fb5de80732632bd1.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<p>\u2014 \u041b\u0443\u0447\u0448\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043d\u0435\u0446 &lt;body&gt; \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c async\/defer.<\/p>\n<p>\u2014 \u0421\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 &lt;head&gt;, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438.<\/p>\n<p>\u2014 \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 preload \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, font-display: swap \u0434\u043b\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u044f FOIT.<\/p>\n<p>\u2014 \u0421\u0442\u043e\u0438\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c TTFB \u0438 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0434\u043b\u044f SPA, SSR \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 CDN.<\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u00a0<\/h4>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c Core Web Vitals \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0430\u0439\u0442\u0430\u043c\u0438. \u0412\u0435\u0434\u044c \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0430 \u043e\u043d\u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043b\u043e\u0445\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439. Core Web Vital (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e) \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u2014 \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432\u043e\u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0431\u0438\u0442\u044c \u0442\u0440\u0435\u0432\u043e\u0433\u0443, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0438\u0445.\u00a0\u00a0<\/p>\n<h4>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h4>\n<p><a href=\"https:\/\/shifty.site\/game\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/a>, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u043b\u043e\u0445\u043e\u0439 CLS\u00a0<\/p>\n<p><a href=\"https:\/\/pagespeed.web.dev\/\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u0443\u0447\u0438\u0442\u044c<\/a> \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u00a0\u00a0<\/p>\n<p><a href=\"https:\/\/github.com\/salute-developers\/web-telemetry\" rel=\"noopener noreferrer nofollow\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a> \u0441 \u043d\u0430\u0448\u0435\u0439 \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u0435\u0439\u00a0<\/p>\n<p><a href=\"https:\/\/turtle-artists.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0448 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442<\/a> \u0441 \u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0430\u043c\u0438-\u043d\u0438\u043d\u0434\u0437\u044f, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u043e\u044f\u0442 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0438 \u044d\u043f\u043e\u0445\u0438 \u0420\u0435\u043d\u0435\u0441\u0441\u0430\u043d\u0441\u0430 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/940578\/\"> https:\/\/habr.com\/ru\/articles\/940578\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u0421\u0430\u043b\u044e\u0442, \u0425\u0430\u0431\u0440!\u00a0<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041f\u0430\u0448\u0430, \u044f \u0432\u0445\u043e\u0436\u0443 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432; \u043d\u0435\u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u00ab\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u00bb SberDevices. \u041c\u044b \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442\u044b <a href=\"http:\/\/sberdevices.ru\" rel=\"noopener noreferrer nofollow\">sberdevices.ru<\/a>, <a href=\"http:\/\/giga.chat\" rel=\"noopener noreferrer nofollow\">giga.chat<\/a>, <a href=\"http:\/\/developers.sber.ru\" rel=\"noopener noreferrer nofollow\">developers.sber.ru<\/a> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442, \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u043e \u0441 \u043d\u0435\u0433\u043e \u0443\u0439\u0434\u0451\u0442 (\u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c).<\/p>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0446\u0435\u043d\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a \u043d\u0438\u043c. \u041d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0441\u0442\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u044b, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 Google \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0441\u0430\u0439\u0442\u044b \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0447\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0445 \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, Google \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0440\u0435\u043c\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 \u2014 Core Web Vitals. \u0414\u0432\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043c\u0430\u044f 2020 \u0433\u043e\u0434\u0430, \u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c \u0438 \u0433\u043e\u0434\u0430. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0431\u0435\u0437 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c). \u0410 \u0435\u0449\u0451 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u0440\u0438\u043a Core Web Vitals \u0441\u0430\u0439\u0442 \u0440\u0430\u043d\u0436\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u0445 \u0432\u044b\u0448\u0435. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n<h3>Cumulative Layout Shift (CLS): \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0430\u0439\u0442\u0430 \u0440\u0435\u0437\u043a\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u043d\u0435 \u0436\u0434\u0430\u043b\u0438<\/h3>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0430\u0439\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0447\u0435\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0438\u043b\u0438 \u043a\u0443\u043f\u0438\u0442\u044c \u0442\u043e\u0432\u0430\u0440 \u2014 \u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e \u00ab\u0434\u0451\u0440\u0433\u0430\u0435\u0442\u0441\u044f\u00bb: \u0438\u0437-\u0437\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u0438\u043b\u0438 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u043d \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0438\u043b\u0438 \u043d\u0435 \u0442\u0443\u0434\u0430, \u043a\u0443\u0434\u0430 \u0445\u043e\u0442\u0435\u043b, \u0438 \u0432\u043e\u0442 \u0443\u0436\u0435 \u0435\u043c\u0443 \u0441\u0438\u043b\u044c\u043d\u043e \u0438 \u043d\u0435\u0443\u0434\u0435\u0440\u0436\u0438\u043c\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0443\u0439\u0442\u0438 \u0441 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e, Google \u0432\u0432\u0451\u043b \u043c\u0435\u0442\u0440\u0438\u043a\u0443 CLS (Cumulative Layout Shift) \u2014 \u043e\u043d\u0430 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u00ab\u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0445\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>CLS \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u044e\u0442 \u043c\u0435\u043b\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0435\u0434\u043e\u0447\u0451\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0440\u0435\u043a\u043b\u0430\u043c\u0430 \u0438\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441 \u043e\u043f\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c, \u0432\u044b\u0442\u0435\u0441\u043d\u044f\u044f \u0443\u0436\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 DOM, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438. \u0415\u0449\u0451 \u043c\u0435\u0434\u0438\u0430 \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (\u0432\u0438\u0434\u0435\u043e \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 width\/height \u0440\u0435\u0437\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435). \u0418 \u0448\u0440\u0438\u0444\u0442\u044b-\u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043a\u0438: \u0435\u0441\u043b\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0434\u043e\u043b\u0433\u043e, \u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0435\u0440\u0432 \u0432\u0440\u043e\u0434\u0435 Arial \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0435\u043a\u0441\u0442 \u00ab\u043f\u0440\u044b\u0433\u0430\u0435\u0442\u00bb.<\/p>\n<p>\u041f\u043e\u0434\u0441\u0447\u0451\u0442 CLS \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 CLS, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 <strong>\u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430.<\/strong><\/p>\n<p>\u041e\u043a\u043d\u043e \u0441\u0435\u0430\u043d\u0441\u0430 CLS \u2014 \u044d\u0442\u043e \u043f\u044f\u0442\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0438. \u041e\u043d \u043f\u0440\u043e\u0434\u043b\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043c\u0435\u043d\u0435\u0435 1 \u0441\u0435\u043a\u0443\u043d\u0434\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2013 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u044b\u0435 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u00ab\u0434\u0451\u0440\u0433\u0430\u043d\u0438\u044f\u00bb: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0431\u0430\u043d\u043d\u0435\u0440\u044b, \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041a\u0430\u0436\u0434\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043b\u044e\u0441\u0443\u0435\u0442\u0441\u044f \u043a CLS. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043f\u0438\u043a\u0430 \u2014 0,3.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0430\u0443\u0437\u0430 5 \u0441\u0435\u043a\u0443\u043d\u0434, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u043d\u0435\u0442. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0441\u0435\u0430\u043d\u0441\u0430, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CLS \u0440\u0430\u0432\u043d\u044b\u043c 0,3. \u041d\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043d\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u0435\u0430\u043d\u0441\u0430. \u0415\u0441\u043b\u0438 \u0432\u043d\u043e\u0432\u044c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 CLS \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0443\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u043e\u043a\u043d\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 google lighthouse, SEO) \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 CLS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u043e\u043a\u043d\u0430\u0445 \u0441\u0435\u0430\u043d\u0441\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u041a\u0430\u043a \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c CLS \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c?<\/h4>\n<p>CLS \u2014 \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0430\u044f \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0443 \u043d\u0435\u0451 \u043d\u0435\u0442 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u0415\u0441\u0442\u044c \u043b\u0438\u0448\u044c \u0444\u043e\u0440\u043c\u0443\u043b\u0430:<\/p>\n<p><strong>Impact fraction<\/strong> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u044b\u043b\u043e \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0430 \u2014 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0438\u0437\u043c\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0438\u043b\u0438 \u0432 vh-vw, \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445) \u043d\u0430 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0438\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u2014 \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438, viewport. \u0422\u0435\u0441\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<figure class=\"full-width\"><\/figure>\n<details class=\"spoiler\">\n<summary>\u0422\u0430 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u043d\u0435\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><\/figure>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0431\u0430\u043d\u043d\u0435\u0440 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0438\u0436\u0435 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 CLS \u043d\u0435 \u0442\u0430\u043a \u0432\u0435\u043b\u0438\u043a. \u0415\u0441\u043b\u0438 \u0431\u044b \u0431\u0430\u043d\u043d\u0435\u0440 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u044b\u0448\u0435 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, impact fraction \u0431\u044b\u043b \u0431\u044b \u0440\u0430\u0432\u0435\u043d \u0435\u0434\u0438\u043d\u0438\u0446\u0435.\u00a0 \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 (viewheight) \u0440\u0430\u0432\u043d\u0430 768px, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 header \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0430\u0432\u043d\u0430 360px. \u0422\u043e\u0433\u0434\u0430:<\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<strong> distance fraction<\/strong>, \u043a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0431\u044b\u043b \u0441\u0434\u0432\u0438\u043d\u0443\u0442 (\u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d) \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0441\u0430\u0439\u0442\u0430 \u0441 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0437\u0430 \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443, \u0440\u0430\u0432\u043d\u0443\u044e 50px. \u0422\u043e\u0433\u0434\u0430 distance fraction \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a:<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, <\/p>\n<p>0,03 \u2014 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c. \u0425\u043e\u0440\u043e\u0448\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CLS \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u044e\u0442 0,1. \u041d\u0430 \u0434\u0435\u043b\u0435 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u0430\u0439\u0442\u0430\u0445 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c CLS \u0432\u044b\u0448\u0435 0,1 \u0442\u0440\u0443\u0434\u043d\u043e \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0431\u0440\u043e\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 (\u043a\u0430\u043a \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c). \u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b\u0448\u0435 0,1, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u041a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 CLS?<\/h4>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0437\u0432\u0430\u043b \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043a\u0440\u044b\u043b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u0440\u0430\u0441\u043a\u0440\u044b\u043b \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u042d\u0442\u0438 \u0441\u0434\u0432\u0438\u0433\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0422\u043e\u0433\u0434\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u044c \u0431\u0443\u0434\u0435\u0442 \u044f\u0441\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0414\u043b\u044f \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 500 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0444\u043b\u0430\u0433 hadRecentInput, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b (\u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e) \u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0435 \u0443\u0434\u0438\u0432\u043b\u044f\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 CLS, \u043d\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u0439\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u041a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e, \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u041d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0431\u0430\u0440\u0449\u0438\u0432\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439: \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u043c \u0432\u0435\u0441\u0442\u0438\u0431\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043f\u043b\u043e\u0445\u0435\u0442\u044c (\u21c0\u2038\u21bc\u2036)<\/p>\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion\" rel=\"noopener noreferrer nofollow\">prefers-reduced-motion<\/a> \u2014 \u0438\u043d\u0430\u0447\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435\u043c \u0438\u0437-\u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. Prefers-reduced-motion \u2014 \u044d\u0442\u043e media css \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u00ab\u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\u00bb \u0438\u043b\u0438 \u00ab\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u00bb. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441 \u0432\u0435\u0441\u0442\u0438\u0431\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043b\u044e\u0431\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 MacOS: \u043d\u0438\u0436\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0435\u0434\u0438\u0430-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c prefers-reduced-motion:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">.animation {     animation: pulse 1s linear infinite both;     background-color: purple; }   @media (prefers-reduced-motion) {    .animation {      animation: dissolve 4s linear infinite both;      background-color: green;      text-decoration: overline;    }  }    .animation {    color: #fff;    font: 1.2em sans-serif;    width: 10em;    padding: 1em;    border-radius: 1em;    text-align: center;  } <\/code><\/pre>\n<\/div>\n<\/details>\n<h3>Interaction to Next Paint (INP): \u043e\u0431\u043c\u0430\u043d\u0447\u0438\u0432\u043e\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0437\u0430\u0432\u0438\u0441<\/h3>\n<p>\u0422\u0440\u0443\u0434\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u0439\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u0436\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u0443\u0434\u0430-\u0442\u043e (\u043a\u0440\u043e\u043c\u0435 \u0441\u0430\u0439\u0442\u043e\u0432-\u0432\u0438\u0437\u0438\u0442\u043e\u043a). 99% \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u0432 \u0432\u0435\u0431\u0435 \u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043a\u043b\u0438\u043a\u0430\u044e\u0442, \u043f\u0435\u0447\u0430\u0442\u0430\u044e\u0442, \u0441\u043c\u043e\u0442\u0440\u044f\u0442 \u0432\u0438\u0434\u0435\u043e, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043f\u0435\u0441\u043d\u0438 \u0438 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u044e\u0442 \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442\u2026 \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0415\u0441\u043b\u0438\u00a0 \u043f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u043c CLS \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0440\u0435\u0437\u043a\u043e \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0431\u0430\u043d\u043d\u0435\u0440, \u0442\u043e \u043f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u043c INP \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u0441\u0440\u0430\u0437\u0443.\u00a0<\/p>\n<p>INP (Interaction to Next Paint) \u2014 \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0430 First Input Delay \u0432 CWV. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u0435\u0442\u043e\u0434 onFid, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u0440\u0438\u043a\u0438, \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043a\u0430\u043a deprecated. FID, \u043a\u0430\u043a \u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0441\u0447\u0438\u0442\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 INP \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0436\u0438\u0437\u043d\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u0435\u0430\u043d\u0441\u0430. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432 INP, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u043d\u0430\u0448\u0443 <a href=\"https:\/\/turtle-artists.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u0441\u0442\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/a> \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u0432 \u0447\u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0433\u043e \u0432\u0435\u043b\u0438\u043a\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0430-\u043d\u0438\u043d\u0434\u0437\u044f. \u041d\u0430\u0436\u043c\u0451\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\u00bb.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\u00bb \u0438\u043b\u0438 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0443\u00bb INP \u0443\u0436\u0435 \u043d\u0430\u0447\u043d\u0451\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0437\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 INP. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u0437\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 CLS (\u0434\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e), \u0433\u0434\u0435 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043c\u0435\u0442\u0440\u0438\u043a\u0443, \u0432 INP \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430: iframe. \u0422\u0443\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435.<\/p>\n<h4>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: RUM, CrUX \u0438 \u0432 \u0447\u0435\u043c \u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f<\/h4>\n<p>\u0415\u0441\u0442\u044c RUM \u2014 Real User Monitoring \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u00ab\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u00bb. \u0410 \u0435\u0441\u0442\u044c CrUX \u2014 \u0441\u0431\u043e\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 Google (Chrome User Experience). \u042d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 Google, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\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 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Chrome.\u00a0<\/p>\n<p>\u0414\u0438\u043b\u0435\u043c\u043c\u0430 \u0432\u043e\u0442 \u0432 \u0447\u0451\u043c: \u0438\u0437-\u0437\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 RUM-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 iframe \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0434\u043e\u043c\u0435\u043d\u043e\u0432, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a CrUX \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0442\u0447\u0451\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 Chrome. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, INP \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430 \u0432 iframe \u043c\u043e\u0436\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 CrUX, \u043d\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 RUM. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \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 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e. <\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 INP<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0427\u0442\u043e\u0431\u044b \u043b\u0438\u0447\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c, \u0447\u0435\u043c \u043f\u043b\u043e\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c INP, \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043d\u0430\u0448 <a href=\"https:\/\/turtle-artists.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442<\/a> \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u00abChange INP delay\u00bb. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430\/\u0447\u0435\u0440\u0435\u043f\u0430\u0448\u043a\u0443\u00bb.<\/p>\n<\/div>\n<\/details>\n<h4>\u041a\u0430\u043a \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f INP \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0439?<\/h4>\n<p>\u041f\u043e\u0434\u0441\u0447\u0451\u0442 INP \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443. \u0415\u0441\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u043d\u0435 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0437\u0430\u0442\u0435\u043c \u0438\u0434\u0451\u0442 \u044d\u0442\u0430\u043f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0432\u0443\u0430\u043b\u044f \u2014 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 frame \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d, INP \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u0430\u043d! \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u043e\u043a \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d, \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u044b \u0436\u0434\u0451\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u2014 \u0438 \u0432\u0440\u0435\u043c\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 INP.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 CLS, \u0443 INP \u0435\u0441\u0442\u044c \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u2014 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043b\u0430\u0437 \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u0435\u0435 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0437\u0430 100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u0434\u043b\u044f<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-472163","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/472163","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=472163"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/472163\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=472163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=472163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=472163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}