{"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\/de\/blog\/comment-ameliorer-le-cls-cumulative-layout-shift\/","title":{"rendered":"Wie kann ich das CLS - Cumulative Layout Shift - verbessern?"},"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;\">Autor<\/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;\">Olivier Perbet<\/h3><\/div><div class=\"fusion-text fusion-text-1 article-author-description\" style=\"--awb-text-transform:none;\"><p>Verantwortlicher f\u00fcr den Bereich SEO<\/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>Es ist nun schon 1 Jahr her, dass Google in seinen Suchergebnissen die Erfahrung von Nutzern als Positionsfaktor ber\u00fccksichtigt hat. Die Web-Performance-KPIs, die zu den Core Web Vitals geh\u00f6ren, werden von den SEO-Verantwortlichen bereits seit langem \u00fcberwacht. Informieren Sie sich heute \u00fcber die kumulative Layout-Verschiebung.<\/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>Les <a href=\"https:\/\/www.artefact.com\/de\/news-seo\/la-vitesse-et-lux-impactent-elles-le-seo\/\">Core Web Vitals<\/a> (Signaux Web Essentiels en fran\u00e7ais) bewerten die Leistung des Ladevorgangs einer Webseite f\u00fcr einen Internetnutzer:<\/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\">Wie lange dauert es, bis das erste Element sichtbar ist (LCP)?<\/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\">Quelle stabilit\u00e9 visuelle lors du chargement (CLS) ?<\/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;\">Was ist die kumulative Layout-Verschiebung?<\/h2><\/div><div class=\"fusion-text fusion-text-4\" style=\"--awb-text-transform:none;\"><p>Das CLS (Cumulative Layout Shift) misst also die visuelle Stabilit\u00e4t einer Seite. Das bekannteste Beispiel ist eine Medienseite, die von Natur aus eine dichte \u00d6ffentlichkeitsarbeit hat. Der Titel und der Anfang eines Artikels erscheinen, und der Benutzer versucht, sie zu lesen, aber in dem Moment, in dem er klickt, erscheint eine Werbebotschaft. Wenn der Benutzer also auf eine nicht gew\u00fcnschte Seite gelangt, muss er nach vorne gehen, um zu seinem Artikel zur\u00fcckzukehren, und aufpassen, dass er nicht erneut auf die Werbebanderole klickt.<\/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>Optimieren der kumulativen Layout-Verschiebung - Google - <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/em><\/p>\n<p>Da sich die Situation auf modernen Websites verschlechtert hat, ist es koh\u00e4rent, dass Google einen Indikator f\u00fcr die Messung eingef\u00fchrt hat, um die Herausgeber von Websites zu ermutigen, die Qualit\u00e4t zu verbessern.<\/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;\">Wie kann ich das messen?<\/h2><\/div><div class=\"fusion-text fusion-text-6\" style=\"--awb-text-transform:none;\"><p>Es handelt sich um ein aus zwei Elementen bestehendes System:<\/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>Oberfl\u00e4che = die Oberfl\u00e4che des Bildschirms, die von der Dekalierung betroffen ist<\/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>Entfernung = die Anzahl der betroffenen Elemente, deren Abstand auf dem Bildschirm angezeigt wird<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-7\" style=\"--awb-text-transform:none;\"><p>Ein Beispiel: Das Hauptger\u00e4t deckt 50% des Bildschirms ab und wird durch 25% ersetzt, so dass insgesamt 75% des Bildschirms genutzt werden.<\/p>\n<p>Le CLS est donc : Fl\u00e4che x Abstand = 0,75 * 0,25 = 0,1875<\/p>\n<p>Sie befinden sich also in der Phase der Verbesserung, die notwendig ist, damit die betreffende Seite als CLS-erweitert betrachtet werden kann.<\/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>Dar\u00fcber hinaus k\u00f6nnen Sie mit den Web-Performance-Tools von Google den CLS einer bestimmten Seite auslesen: PageSpeed Insights (Website-Tiers) und Lighthouse (Modul des Google Chrome Navigators). Die beste Datenquelle bleibt naturgem\u00e4\u00df die, die die aktuellen Daten der Nutzer wiedergibt, wie z.B. die Search Console. Im Bericht \u00fcber die wichtigsten Webdaten wird die Anzahl der Seiten angezeigt, die als mangelhaft oder verbesserungsbed\u00fcrftig eingestuft werden, und jeder KPI verf\u00fcgt \u00fcber einen eigenen Bericht.<\/p>\n<p>So k\u00f6nnen Sie die betroffenen Seiten leicht identifizieren, indem Sie sie nach \u00e4hnlichen Seiten gruppieren (Gabarit \/ Vorlage).<\/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;\">Wie l\u00e4sst sich das CLS verbessern?<\/h2><\/div><div class=\"fusion-text fusion-text-9\" style=\"--awb-text-transform:none;\"><p>Bonne nouvelle, en plus de nous donner le maximum de donn\u00e9es de mesure, <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">Google nous guide<\/a> um eventuelle Probleme der visuellen Instabilit\u00e4t zu beheben.<br \/>\nPlusieurs sc\u00e9narios courants sont abord\u00e9s :<\/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>Bilder oder Werbematerialien ohne definierte Abmessungen<\/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>Dynamisch eingespeister Inhalt (Pop-ins)<\/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>Anrechnung von Policen<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-10\" style=\"--awb-text-transform:none;\"><p>Der Fall, dass Bilder nach der Seitenstruktur aufgeladen werden, ist bei jeder Art von Website \u00fcblich, insbesondere im Bereich des elektronischen Gesch\u00e4ftsverkehrs (Tabellen oder Listen von Produkten).<\/p>\n<p>Im folgenden Beispiel wird der Produktname zuerst geladen, dann folgen die Produktbilder. Diese l\u00f6schen die bereits geladenen Namen, wodurch die Seite w\u00e4hrend des Ladevorgangs instabil wird.<\/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>Sie k\u00f6nnen dieses Verhalten verhindern, indem Sie die f\u00fcr diese Bilder reservierten Bereiche festlegen, bevor Sie sie aufladen.<\/p>\n<p>Eine der m\u00f6glichen Methoden besteht darin, die Abmessungen des Bildes anzugeben. Die Navigatoren k\u00f6nnen dann die Gr\u00f6\u00dfe des Bildes durch Berechnung des Verh\u00e4ltnisses zwischen Gr\u00f6\u00dfe und H\u00f6he (aspect-ratio) bestimmen.<\/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>Es ist auch m\u00f6glich, im CSS direkt ein Seitenverh\u00e4ltnis anzugeben, um es auf eine Kategorie \u00e4hnlicher Bilder anwenden zu k\u00f6nnen.<\/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>Wir weisen darauf hin, dass diese Verbesserung die Bewertung der betreffenden Website seit ihrer Inbetriebnahme insgesamt verbessert hat: von einem CLS von 0,178 sind wir auf 0,002 gekommen. Und von 26% der Besucher, die von einer visuellen Instabilit\u00e4t der Website betroffen waren, sind wir auf 1,27% gestiegen (Angaben aus der Search Console, die die von den Nutzern der Website ermittelten Leistungen widerspiegeln).<\/p>\n<\/div><\/div><\/div><\/div><\/article><\/p>","protected":false},"excerpt":{"rendered":"<p>Int\u00e9ressons-nous aujourd'hui au Cumulative Layout Shift.<\/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\/de\/wp-json\/wp\/v2\/blog\/67574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/media\/67575"}],"wp:attachment":[{"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/media?parent=67574"}],"wp:term":[{"taxonomy":"blog-category","embeddable":true,"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/blog-category?post=67574"},{"taxonomy":"blog-language","embeddable":true,"href":"https:\/\/www.artefact.com\/de\/wp-json\/wp\/v2\/blog-language?post=67574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}