{"id":67574,"date":"2022-06-24T16:39:38","date_gmt":"2022-06-24T15:39:38","guid":{"rendered":"https:\/\/www.artefact.com\/?post_type=news-seo&#038;p=67574"},"modified":"2025-09-04T14:03:39","modified_gmt":"2025-09-04T13:03:39","slug":"comment-ameliorer-le-cls-cumulative-layout-shift","status":"publish","type":"blog","link":"https:\/\/www.artefact.com\/zh\/blog\/comment-ameliorer-le-cls-cumulative-layout-shift\/","title":{"rendered":"\u5982\u4f55\u6539\u8fdb CLS - \u7d2f\u79ef\u7248\u9762\u79fb\u52a8\uff1f"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling article-author\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-background-color:#ffffff;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">\u4f5c\u8005<\/h2><\/div><img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27150%27%20height%3D%270%27%20viewBox%3D%270%200%20150%200%27%3E%3Crect%20width%3D%27150%27%20height%3D%270%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2021\/02\/Olivier-Perbet-.png\" alt=\"Image\" class=\"lazyload artefact-elegant-image align-left article-author-image\" style=\"width: 150px; border-radius: 54% 46% 77% 23% \/ 74% 40% 60% 26%; overflow: hidden;\" width=\"150\" height=\"auto\" \/><div class=\"fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-three article-author-name-title\" style=\"--awb-margin-bottom-small:8px;\"><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:20;line-height:1.2;\">\u5965\u5229\u7ef4\u8036-\u4f69\u5c14\u8d1d\u7279<\/h3><\/div><div class=\"fusion-text fusion-text-1 article-author-description\" style=\"--awb-text-transform:none;\"><p>\u641c\u7d22\u5f15\u64ce\u4f18\u5316\u90e8\u95e8\u8d1f\u8d23\u4eba<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-2 description\" style=\"--awb-text-transform:none;\"><p>1 \u5e74\u524d\uff0cGoogle \u5c31\u5c06\u7528\u6237\u4f53\u9a8c\u4f5c\u4e3a\u641c\u7d22\u7ed3\u679c\u4e2d\u7684\u5b9a\u4f4d\u56e0\u7d20\u3002\u7f51\u7ad9\u6027\u80fd\u5173\u952e\u7ee9\u6548\u6307\u6807\uff08KPIs de webperformance que sont les Core Web Vitals\uff09\u5df2\u88ab SEO \u8d1f\u8d23\u4eba\u5e7f\u6cdb\u91c7\u7528\u3002\u8bf7\u5728\u4eca\u5929\u5411\u6211\u4eec\u63d0\u51fa\u6709\u5173\u7d2f\u79ef\u5e03\u5c40\u504f\u79fb\u7684\u95ee\u9898\u3002.<\/p>\n<\/div><\/div><\/div><\/div><\/div><article class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-3\" style=\"--awb-text-transform:none;\"><p>\u83b1\u65af <a href=\"https:\/\/www.artefact.com\/zh\/news-seo\/la-vitesse-et-lux-impactent-elles-le-seo\/\">\u6838\u5fc3\u7f51\u7edc\u6d3b\u529b<\/a> (Signaux Web Essentiels en fran\u00e7ais)\u8bc4\u4f30\u4e86\u7f51\u9875\u5bf9\u7528\u6237\u7684\u6536\u8d39\u60c5\u51b5\uff1a<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-1 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\u7b2c\u4e00\u89c6\u89c9\u5143\u7d20\uff08LCP\uff09\u4e4b\u524d\u7684\u7b49\u5f85\u65f6\u95f4\u662f\u591a\u4e45\uff1f<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">Quelle r\u00e9activit\u00e9 de la page \u00e0 une interaction (FID) ?<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\u5145\u7535\uff08CLS\uff09\u65f6\u7684\u89c6\u89c9\u7a33\u5b9a\u6027\u5982\u4f55\uff1f<\/div><\/li><\/ul><div class=\"fusion-title title fusion-title-3 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">\u4ec0\u4e48\u662f\u7d2f\u8ba1\u7248\u9762\u79fb\u52a8\uff1f<\/h2><\/div><div class=\"fusion-text fusion-text-4\" style=\"--awb-text-transform:none;\"><p>CLS\uff08\u7d2f\u79ef\u7248\u9762\u504f\u79fb\uff09\u8861\u91cf\u9875\u9762\u7684\u89c6\u89c9\u7a33\u5b9a\u6027\u3002\u6700\u5178\u578b\u7684\u4f8b\u5b50\u662f\u516c\u5171\u7f51\u7ad9\u3002\u5f53\u4e00\u7bc7\u6587\u7ae0\u7684\u6807\u9898\u548c\u5f00\u5934\u51fa\u73b0\u65f6\uff0c\u7528\u6237\u4f1a\u70b9\u51fb \"\u663e\u793a\"\uff0c\u4f46\u5f53\u4ed6\u70b9\u51fb \"\u663e\u793a \"\u65f6\uff0c\u9875\u9762\u4e0a\u5c31\u4f1a\u51fa\u73b0\u4e00\u4e2a \"\u5ba3\u4f20\u6761\u5e45\"\u3002\u56e0\u6b64\uff0c\u5982\u679c\u7528\u6237\u88ab\u544a\u77e5\u4ed6\u5c06\u8bbf\u95ee\u4e00\u4e2a\u4e0d\u53d7\u6b22\u8fce\u7684\u7f51\u7ad9\uff0c\u4ed6\u5c31\u5fc5\u987b\u5411\u53f3\u79fb\u52a8\uff0c\u4ee5\u4fbf\u91cd\u65b0\u9605\u8bfb\u6587\u7ae0\uff0c\u5e76\u4fdd\u6301\u8b66\u60d5\uff0c\u907f\u514d\u518d\u6b21\u70b9\u51fb\u60ca\u5947\u5934\u50cf\u3002.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"277\" alt=\"Cumulative Layout Shift \" title=\"CLS1\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS1.png\" class=\"lazyload img-responsive wp-image-67575\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27277%27%20viewBox%3D%270%200%20512%20277%27%3E%3Crect%20width%3D%27512%27%20height%3D%27277%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1-200x108.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1-400x216.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-5\" style=\"--awb-text-transform:none;\"><p><em>\u4f18\u5316\u7d2f\u79ef\u5e03\u5c40\u504f\u79fb - Google - <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/em><\/p>\n<p>\u5728\u73b0\u4ee3\u7f51\u7ad9\u4e0a\uff0c\u8fd9\u79cd\u60c5\u51b5\u975e\u5e38\u666e\u904d\uff0c\u56e0\u6b64\u8c37\u6b4c\u63a8\u51fa\u4e86\u4e00\u79cd\u6d4b\u91cf\u6307\u6807\uff0c\u4ee5\u9f13\u52b1\u7f51\u7ad9\u7f16\u8f91\u6539\u8fdb\u7f51\u7ad9\u3002.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-4 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">\u5982\u4f55\u6d4b\u91cf\uff1f<\/h2><\/div><div class=\"fusion-text fusion-text-6\" style=\"--awb-text-transform:none;\"><p>C'est une m\u00e9trique compos\u00e9e deux \u00e9l\u00e9ments \uff1a<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-2 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>\u8868\u9762 = \u53d7\u964d\u989d\u5f71\u54cd\u7684\u5c4f\u5e55\u8868\u9762<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>\u8ddd\u79bb = \u6709\u5173\u8bbe\u5907\u7684\u6298\u7b97\u503c\uff0c\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u8ddd\u79bb<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-7\" style=\"--awb-text-transform:none;\"><p>\u4f8b\u5982\uff1a\u4e3b\u8bbe\u5907\u5360\u7528\u4e86 50% \u7684\u5c4f\u5e55\u7a7a\u95f4\uff0c\u5e76\u5c06\u5176\u4ece 25% \u4e2d\u79fb\u51fa\uff0c\u56e0\u6b64\u5b83\u603b\u5171\u5360\u7528\u4e86 75% \u7684\u5c4f\u5e55\u7a7a\u95f4\u3002.<\/p>\n<p>CLS \u662f \uff1a\u8868\u9762 x \u8ddd\u79bb = 0,75 * 0,25 = 0,1875<\/p>\n<p>\u56e0\u6b64\uff0c\u8981\u4f7f\u6709\u5173\u9875\u9762\u88ab\u89c6\u4e3a CLS \u9875\u9762\uff0c\u5fc5\u987b\u8fdb\u884c\u4fee\u6b63\u3002<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-2 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"104\" alt=\"Plus simplement, les outils de webperformance de Google permettent de relever le Cumulative Layout Shift d\u2019une page donn\u00e9e : PageSpeed Insights (site tiers) et Lighthouse (module du navigateur Google Chrome).\" title=\"CLS-2\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg\" class=\"lazyload img-responsive wp-image-67576\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27104%27%20viewBox%3D%270%200%20512%20104%27%3E%3Crect%20width%3D%27512%27%20height%3D%27104%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2-200x41.jpeg 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2-400x81.jpeg 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-8\" style=\"--awb-text-transform:none;\"><p>\u66f4\u7b80\u5355\u5730\u8bf4\uff0cGoogle \u7684\u7f51\u7edc\u6027\u80fd\u5de5\u5177\u5141\u8bb8\u53d1\u5e03\u6307\u5b9a\u9875\u9762\u7684 CLS\uff1aPageSpeed Insights\uff08\u7f51\u7ad9\u5c42\uff09\u548c Lighthouse\uff08Google Chrome \u6d4f\u89c8\u5668\u6a21\u5757\uff09\u3002\u6700\u597d\u7684\u6570\u636e\u6e90\u81ea\u7136\u8fd8\u662f\u7528\u6237\u7684\u539f\u59cb\u6570\u636e\uff0c\u4f8b\u5982\u641c\u7d22\u63a7\u5236\u53f0\u3002\u5728 Signaux Web Essentiels \u62a5\u544a\u4e2d\uff0c\u6211\u4eec\u91cd\u65b0\u5217\u51fa\u4e86\u88ab\u89c6\u4e3a \"\u7f3a\u9677 \"\u6216\u9700\u8981\u6539\u8fdb\u7684\u9875\u9762\u6570\u91cf\uff0c\u6bcf\u4e2a\u5173\u952e\u7ee9\u6548\u6307\u6807\u90fd\u6709\u81ea\u5df1\u7684\u62a5\u544a\u3002.<\/p>\n<p>\u8fd9\u6837\u5c31\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u8bc6\u522b\u51fa\u53d7\u5f71\u54cd\u8f83\u5927\u7684\u9875\u9762\uff0c\u5e76\u4e0e\u7c7b\u4f3c\u9875\u9762\uff08gabarit\/\u6a21\u677f\uff09\u8fdb\u884c\u5206\u7ec4\u3002.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-5 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">\u5982\u4f55\u6539\u8fdb CLS\uff1f<\/h2><\/div><div class=\"fusion-text fusion-text-9\" style=\"--awb-text-transform:none;\"><p>\u5f88\u597d\u7684\u521b\u65b0\uff0c\u6b64\u5916\u6211\u4eec\u8fd8\u63d0\u4f9b\u4e86\u6700\u5927\u7684\u6d4b\u91cf\u6570\u636e\u3001, <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">\u8c37\u6b4c\u6307\u5357<\/a> pour r\u00e9soudre d'\u00e9ventuels probl\u00e8mes d'instabilit\u00e9 visuelle.<br \/>\n\u6211\u4eec\u8fd8\u8ba8\u8bba\u4e86\u591a\u4e2a\u672a\u6765\u573a\u666f\uff1a<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-3 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>\u65e0\u660e\u786e\u5c3a\u5bf8\u7684\u56fe\u7247\u6216\u5ba3\u4f20\u54c1<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>\u52a8\u6001\u6ce8\u5165\u5185\u5bb9\uff08\u5f39\u51fa\u7a97\u53e3\uff09<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>\u653f\u7b56\u6536\u8d39<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-10\" style=\"--awb-text-transform:none;\"><p>\u5728\u9875\u9762\u7ed3\u6784\u4e4b\u540e\u7ed9\u56fe\u7247\u5145\u7535\u7684\u60c5\u51b5\u5728\u5404\u79cd\u7c7b\u578b\u7684\u7f51\u7ad9\u4e0a\u90fd\u5f88\u5e38\u89c1\uff0c\u5c24\u5176\u662f\u7535\u5b50\u5546\u52a1\u7f51\u7ad9\uff08\u56fe\u7247\u6216\u4ea7\u54c1\u5217\u8868\uff09\u3002.<\/p>\n<p>\u5728\u4e0b\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u4ea7\u54c1\u540d\u79f0\u9996\u5148\u88ab\u5145\u5165\uff0c\u7136\u540e\u662f\u4ea7\u54c1\u56fe\u50cf\u3002\u8fd9\u4e9b\u56fe\u7247\u4f1a\u5220\u9664\u5df2\u5145\u5165\u7684\u540d\u79f0\uff0c\u4f7f\u9875\u9762\u5728\u5145\u5165\u671f\u95f4\u4e0d\u7a33\u5b9a\u3002.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-3 hover-type-none\"><img decoding=\"async\" width=\"475\" height=\"326\" alt=\"Cumulative Layout Shift \" title=\"CLS-3\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-3.png\" class=\"lazyload img-responsive wp-image-67577\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27475%27%20height%3D%27326%27%20viewBox%3D%270%200%20475%20326%27%3E%3Crect%20width%3D%27475%27%20height%3D%27326%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3-200x137.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3-400x275.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3.png 475w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 475px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-11\" style=\"--awb-text-transform:none;\"><p>\u5728\u5bf9\u8fd9\u4e9b\u56fe\u50cf\u5145\u7535\u4e4b\u524d\uff0c\u53ef\u4ee5\u4e3a\u5b83\u4eec\u6307\u5b9a\u4e13\u7528\u533a\u57df\uff0c\u4ece\u800c\u907f\u514d\u8fd9\u79cd\u60c5\u51b5\u7684\u53d1\u751f\u3002.<\/p>\n<p>\u5176\u4e2d\u4e00\u79cd\u53ef\u80fd\u7684\u65b9\u6cd5\u662f\u8bf4\u660e\u56fe\u50cf\u7684\u5c3a\u5bf8\uff0c\u7136\u540e\u5bfc\u822a\u5458\u901a\u8fc7\u8ba1\u7b97\u5927\u4e0e\u5c0f\u7684\u6bd4\u4f8b\uff08\u5bbd\u9ad8\u6bd4\uff09\u6765\u786e\u5b9a\u56fe\u50cf\u7684\u7a7a\u95f4\u5927\u5c0f\u3002.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-4 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"328\" alt=\"Cumulative Layout Shift\" title=\"CLS-4\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-4.png\" class=\"lazyload img-responsive wp-image-67578\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27328%27%20viewBox%3D%270%200%20512%20328%27%3E%3Crect%20width%3D%27512%27%20height%3D%27328%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4-200x128.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4-400x256.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-12\" style=\"--awb-text-transform:none;\"><p>\u8fd8\u53ef\u4ee5\u5728 CSS \u4e2d\u76f4\u63a5\u8bf4\u660e\u5bbd\u9ad8\u6bd4\uff0c\u4ee5\u4fbf\u5e94\u7528\u4e8e\u7c7b\u4f3c\u7684\u56fe\u50cf\u7c7b\u522b\u3002.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-5 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"159\" alt=\"Comment am\u00e9liorer le CLS - Cumulative Layout Shift ?\" title=\"CLS-5\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-5.png\" class=\"lazyload img-responsive wp-image-67579\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27159%27%20viewBox%3D%270%200%20512%20159%27%3E%3Crect%20width%3D%27512%27%20height%3D%27159%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5-200x62.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5-400x124.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-13\" style=\"--awb-text-transform:none;\"><p>\u6211\u4eec\u6ce8\u610f\u5230\uff0c\u8fd9\u4e00\u6539\u8fdb\u5728\u7f51\u7ad9\u6295\u5165\u4f7f\u7528\u65f6\u63d0\u9ad8\u4e86\u76f8\u5173\u7f51\u7ad9\u7684\u51c0\u5f97\u5206\uff1a\u4ece 0.178 \u7684 CLS \u4e0b\u964d\u5230 0.002\u3002\u53d7\u7f51\u7ad9\u4e0d\u7a33\u5b9a\u6027\u5f71\u54cd\u7684\u8bbf\u95ee\u8005\u4ece 26% \u4e0b\u964d\u5230 1,27% \uff08\u6570\u636e\u6765\u6e90\u4e8e\u641c\u7d22\u63a7\u5236\u53f0\uff0c\u4e0e\u7f51\u7ad9\u7528\u6237\u7684\u8868\u73b0\u4e00\u81f4\uff09\u3002.<\/p>\n<\/div><\/div><\/div><\/div><\/article><\/p>","protected":false},"excerpt":{"rendered":"<p>\u73b0\u5728\u5c31\u5411\u60a8\u4ecb\u7ecd\u7d2f\u79ef\u5e03\u5c40\u53d8\u6362\u3002.<\/p>","protected":false},"featured_media":67575,"parent":0,"template":"","meta":{"_acf_changed":false,"ep_exclude_from_search":false},"blog-category":[],"blog-language":[],"class_list":["post-67574","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/blog\/67574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/media\/67575"}],"wp:attachment":[{"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/media?parent=67574"}],"wp:term":[{"taxonomy":"blog-category","embeddable":true,"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/blog-category?post=67574"},{"taxonomy":"blog-language","embeddable":true,"href":"https:\/\/www.artefact.com\/zh\/wp-json\/wp\/v2\/blog-language?post=67574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}