{"id":826,"date":"2021-01-04T08:00:50","date_gmt":"2021-01-04T07:00:50","guid":{"rendered":"https:\/\/development-by.schwarzer.de\/blog\/?p=826"},"modified":"2022-02-15T10:25:13","modified_gmt":"2022-02-15T09:25:13","slug":"google-core-web-vitals-optimierung","status":"publish","type":"post","link":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/","title":{"rendered":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps"},"content":{"rendered":"<p><!-- <ezTOC> -->Ab Mai 2021 sind sie Ranking-Faktor bei Google. Die Rede ist von den <strong>Google Core Web Vitals. Optimierung<\/strong> der Webseite steht an, doch wo soll man beginnen? Wir geben 7 gute Tipps und 1 hilfreiche Checkliste.<br \/>\n<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_16 counter-hierarchy\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Inhaltsverzeichnis: Das erwartet Sie in diesem Artikel<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Google-Core-Web-Vitals-Optimierung-der-Webseite\" title=\"Google Core Web Vitals: Optimierung der Webseite\">Google Core Web Vitals: Optimierung der Webseite<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Welche-Aufgaben-stehen-an\" title=\"Welche Aufgaben stehen an?\">Welche Aufgaben stehen an?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Warum-macht-Google-sowas\" title=\"Warum macht Google sowas?\">Warum macht Google sowas?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Checkliste-Diese-Kennzahlen-stehen-zur-Optimierung-an\" title=\"Checkliste: \nDiese Kennzahlen stehen zur Optimierung an\">Checkliste: \nDiese Kennzahlen stehen zur Optimierung an<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Loading-LCP-Largest-Colorful-Paint\" title=\"Loading: LCP \/ Largest Colorful Paint\">Loading: LCP \/ Largest Colorful Paint<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Interactivity-FID-First-Input-Delay\" title=\"Interactivity: FID \/ First Input Delay\">Interactivity: FID \/ First Input Delay<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Visual-Stability-CLS-Cumulative-Layout-Shift\" title=\"Visual Stability: CLS \/ Cumulative Layout Shift\">Visual Stability: CLS \/ Cumulative Layout Shift<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#7-Tipps-zur-Optimierung-der-Webseite-fuer-die-Google-Core-Web-Vitals\" title=\"7 Tipps zur Optimierung der Webseite f\u00fcr die Google Core Web Vitals\">7 Tipps zur Optimierung der Webseite f\u00fcr die Google Core Web Vitals<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Unsere-Tipps-zur-Optimierung-fuer-LCP-Largest-Colorful-Paint\" title=\"Unsere Tipps zur Optimierung f\u00fcr LCP \/ Largest Colorful Paint\">Unsere Tipps zur Optimierung f\u00fcr LCP \/ Largest Colorful Paint<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Unsere-Tipps-zur-Optimierung-fuer-FID-First-Input-Delay\" title=\"Unsere Tipps zur Optimierung f\u00fcr FID \/ First Input Delay\">Unsere Tipps zur Optimierung f\u00fcr FID \/ First Input Delay<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Unsere-Tipps-zur-Optimierung-der-CLS-Cumulative-Layout-Shift\" title=\"Unsere Tipps zur Optimierung der CLS \/ Cumulative Layout Shift\">Unsere Tipps zur Optimierung der CLS \/ Cumulative Layout Shift<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Wer-setzt-die-Optimierung-um\" title=\"Wer setzt die Optimierung um?\">Wer setzt die Optimierung um?<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Wie-kann-ich-die-kritischen-Punkte-ermitteln\" title=\"Wie kann ich die kritischen Punkte ermitteln?\">Wie kann ich die kritischen Punkte ermitteln?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Wie-geht-man-bei-der-Optimierung-am-besten-vor\" title=\"Wie geht man bei der Optimierung am besten vor?\">Wie geht man bei der Optimierung am besten vor?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#Welche-Alternativen-gibt-es\" title=\"Welche Alternativen gibt es?\">Welche Alternativen gibt es?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Google-Core-Web-Vitals-Optimierung-der-Webseite\"><\/span>Google Core Web Vitals: Optimierung der Webseite<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Google Core Web Vitals fordern uns ein wenig heraus. Zuerst hie\u00df es, dass Optimierung nicht n\u00f6tig sei, weil die Google Core Web Vitals noch in der Erprobungsphase seien. Im November <a href=\"https:\/\/webmasters.googleblog.com\/2020\/11\/timing-for-page-experience.html\" rel=\"noopener noreferrer\" target=\"_blank\">hat Google seine Meinung ge\u00e4ndert<\/a>. Doch wie gehen wir die Optimierung an?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Welche-Aufgaben-stehen-an\"><\/span>Welche Aufgaben stehen an?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Derzeit gibt es <strong>drei KPI<\/strong> bei Google. Auf diese wird man optimieren und wenn man sie sich mal genauer ansieht, wird schnell klar, was man tun muss.<\/p>\n<figure id=\"attachment_868\" aria-describedby=\"caption-attachment-868\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-report.jpg\" alt=\"In der Search Console stellt Google zu seinen Core Web Vitals in einem Report seine Bewertung Ihrer Webseite bereit.\" width=\"600\" height=\"374\" class=\"size-full wp-image-868\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-report.jpg 600w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-report-300x187.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-868\" class=\"wp-caption-text\">In der Search Console stellt Google zu seinen Core Web Vitals in einem Report seine Bewertung Ihrer Webseite bereit.<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Warum-macht-Google-sowas\"><\/span>Warum macht Google sowas?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Mit den meisten Dingen, die sich Google einfallen l\u00e4sst, m\u00f6chte Google uns nur \u00e4rgern. Das denken wir sicher oft und es wird viel Wahres dran sein. Mit den Google Core Web Vitals hat Google eine Lanze f\u00fcr den Nutzer gebrochen. Denn wer die Google Core Web Vitals ber\u00fccksichtigt, macht dem Nutzer den Besuch seiner Webseite angenehmer. Auch wenn es uns Arbeit verschafft, hat Google hier eine sehr sinnvolle Sache auf den Weg gebracht.<\/p>\n<p>(Sorry, wenn ich Google beipflichte, aber es ist einfach so&#8230;)<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Checkliste-Diese-Kennzahlen-stehen-zur-Optimierung-an\"><\/span>Checkliste:<br \/>\nDiese Kennzahlen stehen zur Optimierung an<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure id=\"attachment_834\" aria-describedby=\"caption-attachment-834\" style=\"width: 700px\" class=\"wp-caption alignnone\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-checkliste.jpg\" alt=\"Unsere Checkliste zur Optimierung der Google Core Web Vitals. (Foto: shutterstock - nepool)\" width=\"700\" height=\"407\" class=\"size-full wp-image-834\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-checkliste.jpg 700w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-checkliste-300x174.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-834\" class=\"wp-caption-text\">Unsere Checkliste zur Optimierung der Google Core Web Vitals. (Foto: shutterstock &#8211; nepool)<\/figcaption><\/figure>\n<ul>\n<li>\n<h3><span class=\"ez-toc-section\" id=\"Loading-LCP-Largest-Colorful-Paint\"><\/span>Loading: LCP \/ Largest Colorful Paint<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>So neu ist es nicht: braucht die Seite lange zum Laden, springen ungeduldige Nutzer auch wieder ab. <strong>Maximal 2,5 Sekunden<\/strong> l\u00e4sst Google einer Webseite Zeit, die Inhalte zu laden. Bleibt der Google Core Web Vitals KPI darunter, erh\u00e4lt die Seite ein <strong>&#8220;Gut&#8221;<\/strong>. Liegt die Seite dar\u00fcber und liegt die Ladezeit nicht \u00fcber 4 Sekunden erkennt Google auf ein <strong>&#8220;Optimierung erforderlich&#8221;<\/strong>. Seiten mit Ladezeiten \u00fcber 4 Sekunden, werden mit <strong>&#8220;Schlecht&#8221;<\/strong> bewertet.<\/p>\n<p>Wer sich den Paramater LCP mal auf der Zunge zergehen l\u00e4sst, stellt irgendwann fest, dass hier nicht die Ladezeit der Seite insgesamt gemeint ist, sondern nur die Ladezeit bis zum ersten Colorful Paint, also bis die Seite &#8220;ansehnlich&#8221; geladen ist. Was danach noch nachgeladen wird, interessiert also nicht mehr.<\/p>\n<p>Das macht unsere anstehende Optimierung einfacher: wir m\u00fcssen nur eine Sache ganz schnell hinbekommen: das Laden der Seite bis zur ersten vollst\u00e4ndigen Darstellung. Darauf gehe ich gleich nochmal ein.<\/li>\n<li>\n<h3><span class=\"ez-toc-section\" id=\"Interactivity-FID-First-Input-Delay\"><\/span>Interactivity: FID \/ First Input Delay<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Klicken Nutzer in den Suchergebnissen auf einen Link zu einer Webseite, dann l\u00e4dt diese zwar oft schnell, doch <strong>bis man dort das erste Mal etwas Anklicken kann<\/strong>, das dauert oft ewig. Was Nutzer (und uns ja auch) nervt, das st\u00f6rt auch Google. W\u00e4hrend der Nutzer einfach gefrustet entschwindet, gibt Google Abstriche in der B-Note: Dauert es <strong>mehr als 0,1 Sekunden<\/strong> bis zur Bedienbarkeit der Seite, dann ist Google unzufrieden und wertet die Seite ab. Das wiederum bedeutet schlechtere Rankings der eigenen Site im Vergleich zu anderen Webseiten.<\/p>\n<p>Auch hier beginnen wir die Arbeit der Optimierung mit einem kurzen Nachdenken. Was muss denn eigentlich in den maximal 0,1 Sekunden passieren? Die Seite ist geladen. Da sollte der Nutzer doch eigentlich schnell losklicken k\u00f6nnen. Die <strong>Zeitfresser zu identifizieren<\/strong>, wird gleich eine wichtige Aufgabe bei der Optimierung f\u00fcr die Google Core Web Vitals sein. Darauf gehe ich nochmals im Detail ein.<\/li>\n<li>\n<h3><span class=\"ez-toc-section\" id=\"Visual-Stability-CLS-Cumulative-Layout-Shift\"><\/span>Visual Stability: CLS \/ Cumulative Layout Shift<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Diesen Fall kennen wir alle ganz gewiss. Wir klicken zu einer Seite, sie l\u00e4dt und wir wollen ein Element anklicken. Aber dann zuckt die Seite pl\u00f6tzlich und ein bisher nicht sichtbares Element nimmt genau dort Platz, wo wir gerade eben hinklicken wollten. Oft ist es Werbung und Sie haben sicher auch schon mal auf diese Weise auf Werbung geklickt, w\u00e4hrend Sie etwas ganz anderes anklicken wollten. Insofern ist es eine gute Tat, wenn Google derlei Misst\u00e4nde ankreidet. Manchmal kommt man ja auch auf den Gedanken, dass dieses Aufpoppen der Werbung an gerne geklickten Stellen nicht ganz zuf\u00e4llig geschieht&#8230;<\/p>\n<p>Google errechnet f\u00fcr dieses &#8220;Verschubbeln&#8221; der Bildschirmelemente einen Wert. Dieser muss unter 0,1 liegen, sonst runzelt Google die Stirn und wertet die Seite ab.<\/p>\n<p>Welche weiteren Elemente gibt es noch, die pl\u00f6tzlich erscheinen oder ihre Darstellungsgr\u00f6\u00dfe ver\u00e4ndern k\u00f6nnen? Nun, das k\u00f6nnen <strong>auch Bilder sein<\/strong>, welche in Ihrem Content eingebunden sind. Nicht immer erkennt der Browser sofort, wie gro\u00df das Bild sein wird. Dann wird erst beim Aufbereiten des Bildes zur Anzeige im Browser <strong>der n\u00f6tige Platz &#8220;freigemacht&#8221;<\/strong>. Dieses <strong>&#8220;Freimachen&#8221;<\/strong> nimmt der Nutzer dann als Zucken wahr. Darum wird es unsere Aufgabe sein, auf der Webseite alle Elemente zu identifizieren, welche eine solche Zuckung erzeugen k\u00f6nnten. Auch auf deren Optimierung werde ich gleich nochmal gesondert eingehen.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"7-Tipps-zur-Optimierung-der-Webseite-fuer-die-Google-Core-Web-Vitals\"><\/span>7 Tipps zur Optimierung der Webseite f\u00fcr die Google Core Web Vitals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure id=\"attachment_835\" aria-describedby=\"caption-attachment-835\" style=\"width: 699px\" class=\"wp-caption alignnone\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-7-tipps.jpg\" alt=\"Unsere 7 Tipps zur Optimierung der Google Core Web Vitals bringen viele Quick Wins f\u00fcr Sie. (Foto: shutterstock - Sundry Studio)\" width=\"699\" height=\"365\" class=\"size-full wp-image-835\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-7-tipps.jpg 699w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-7-tipps-300x157.jpg 300w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><figcaption id=\"caption-attachment-835\" class=\"wp-caption-text\">Unsere 7 Tipps zur Optimierung der Google Core Web Vitals bringen viele Quick Wins f\u00fcr Sie. (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Unsere-Tipps-zur-Optimierung-fuer-LCP-Largest-Colorful-Paint\"><\/span>Unsere Tipps zur Optimierung f\u00fcr LCP \/ Largest Colorful Paint<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4>Tipp #1: Ladezeiten-Optimierung durch Lade-Split<\/h4>\n<figure id=\"attachment_843\" aria-describedby=\"caption-attachment-843\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-1.jpg\" alt=\"Tipp #1: Ladezeiten-Optimierung durch Lade-Split (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-843\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-1.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-1-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-843\" class=\"wp-caption-text\">Tipp #1: Ladezeiten-Optimierung durch Lade-Split (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Wenn Sie WordPress einsetzen und viele Plugins nutzen, dann bringt in aller Regel jedes Plugin ein St\u00fcck CSS mit. Und eventuell bringen viele Plugins auch JavaScript mit. Jedes dieser Elemente wird meist in einer eigenen Datei geladen. Das WordPress-Theme hat da in aller Regel auch noch eigene CSS-Bl\u00f6cke und Javascript-Dateien, die geladen werden wollen.<\/p>\n<p>Nicht aller CSS-Code wird f\u00fcr die Darstellung des Minimalumfangs der Seite (dem Largest Colorful Paint) ben\u00f6tigt. Viel CSS ist f\u00fcr Details gedacht, welche erst sp\u00e4ter zum Einsatz kommen. Wenn Sie den gesamten CSS-Code in zwei Gruppen aufteilen, n\u00e4mlich<\/p>\n<ul>\n<li>in den CSS-Code, der f\u00fcr den (ersten) Largest Colorful Paint ben\u00f6tigt wird und<\/li>\n<li>in den CSS-Code, der erst sp\u00e4ter ben\u00f6tigt wird,<\/li>\n<\/ul>\n<p>dann k\u00f6nnen Sie den CSS-Code der ersten Gruppe zeitgleich mit der Seite laden und den ganzen Rest (Gruppe 2) zu einem sp\u00e4teren Zeitpunkt, was nicht mehr in die Messung des LCP hineinl\u00e4uft. Das verk\u00fcrzt die von Google bewertete Ladezeit enorm.<\/p>\n<h4>Tipp #2: Ladezeiten-Optimierung durch Zusammenfassung<\/h4>\n<figure id=\"attachment_844\" aria-describedby=\"caption-attachment-844\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-2.jpg\" alt=\"Tipp #2: Ladezeiten-Optimierung durch Zusammenfassung (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-844\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-2.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-2-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-844\" class=\"wp-caption-text\">Tipp #2: Ladezeiten-Optimierung durch Zusammenfassung (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Jedes Mal, wenn eine CSS- oder JavaScript-Datei vom Browser im HTML-Code entdeckt wird, fordert er diese bei Ihrem Webserver an. Sind das viele Dateien, kommt es zu ebenso vielen Anforderungen an Ihren Webserver. Diese kosten Zeit, auch wenn die Datei noch gar nicht geladen wurde.<\/p>\n<p>Wesentlich schneller ist der Ablauf, wenn alle CSS-Partien und aller Javascript-Code auf einmal geladen wird. Die vielen Datei-Anforderungen reduzieren sich auf nur noch 2&#8230; <\/p>\n<p>Dar\u00fcber hinaus wird oft CSS-Code und Javascript-Code von WordPress in die HTML-Seite hineingerendert. Der wird dann mit jedem Seitenaufruf neu \u00fcbermittelt. Den sollten Sie ebenfalls in die einzelne Datei integrieren. Das spart unglaublich viel Zeit.<\/p>\n<p>In unserem vorhergehenden Tipp haben wir empfohlen, die CSS-Codes und JavaScript-Codes in zwei Gruppen aufzuteilen. Wenn Sie dies umsetzen, dann haben Sie zwei CSS-Dateien und zwei JavaScript-Dateien, welche teils zu Beginn und teils am Ende der Seite geladen werden.<\/p>\n<h4>Tipp #3: Ladezeiten-Optimierung f\u00fcr Bilddateien<\/h4>\n<figure id=\"attachment_845\" aria-describedby=\"caption-attachment-845\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-3.jpg\" alt=\"Tipp #3: Ladezeiten-Optimierung f\u00fcr Bilddateien (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-845\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-3.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-3-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-845\" class=\"wp-caption-text\">Tipp #3: Ladezeiten-Optimierung f\u00fcr Bilddateien (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Einen Kn\u00fcppel wirft uns der Zeitgeist zwischen die Beine: Webseiten leben heutzutage oft davon, dass gro\u00dfformatige Bilder in den Content eingef\u00fcgt werden oder als Hintergrundbilder verwendet werden. Vollbreitenbilder haben oft weit \u00fcber 100 Kilobytes an Gewicht. Bilder dieser Gr\u00f6\u00dfe verlangsamen das Laden der gesamten Seite.<\/p>\n<ul>\n<li>Pr\u00fcfen Sie, ob es verzichtbare Bilder gibt.<\/li>\n<li>Pr\u00fcfen Sie, ob Bilder st\u00e4rker komprimiert werden k\u00f6nnen. Das GIF-Format komprimiert besser bei Bildern mit wenig verschiedenen und fl\u00e4chigen Farben. Das JPG\/PNG-Format komprimiert besser bei Bildern mit vielen Farben und Farb\u00fcberg\u00e4ngen. Hier kann eine \u00c4nderung des Dateiformats bereits viel Ladevolumen einsparen. Das wirkt sich dann direkt auf die Google Core Web Vitals aus.<\/li>\n<li>Pr\u00fcfen Sie, ob JPG-Bilder eventuell st\u00e4rker komprimiert werden k\u00f6nnen. Der Komprimierungsfaktor kann bei jedem Bild individuell gew\u00e4hlt werden.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Unsere-Tipps-zur-Optimierung-fuer-FID-First-Input-Delay\"><\/span>Unsere Tipps zur Optimierung f\u00fcr FID \/ First Input Delay<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4>Tipp #4: JavaScript splitten<\/h4>\n<figure id=\"attachment_846\" aria-describedby=\"caption-attachment-846\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-4.jpg\" alt=\"Tipp #4: JavaScript splitten (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-846\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-4.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-4-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-846\" class=\"wp-caption-text\">Tipp #4: JavaScript splitten (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>M\u00fcssen alle JavaScripte vor der ersten m\u00f6glichen Bedienung der Seite anlaufen? Mit Anlaufen meine ich sowohl das Initialisieren wie das Ausf\u00fchren der ersten Funktionen. Sicher m\u00fcssen nicht alle JavaScripte schon zu Beginn gestartet werden. Dennoch erfordert jedes ausgef\u00fchrte JavaScript Rechenleistung vom Browser und Endger\u00e4t und damit Zeit. Und diese Zeit flie\u00dft negativ in die Bewertung der Google Core Web Vitals ein. <\/p>\n<p>Ein Schritt zur Optimierung ist es, alle JavaScripte, die nicht sofort gestartet werden m\u00fcssen, erst zu einem sp\u00e4teren Zeitpunkt zu starten. Damit geben Sie den dringend ben\u00f6tigten JavaScripten den Weg frei und ersparen sich wertvolle Zehntelsekunden bei der Errechnung des Google Core Web Vitals &#8220;First Input Delay&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Unsere-Tipps-zur-Optimierung-der-CLS-Cumulative-Layout-Shift\"><\/span>Unsere Tipps zur Optimierung der CLS \/ Cumulative Layout Shift<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4>Tipp #5: Template-Check<\/h4>\n<figure id=\"attachment_847\" aria-describedby=\"caption-attachment-847\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-5.jpg\" alt=\"Tipp #5: Template-Check (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-847\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-5.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-5-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-847\" class=\"wp-caption-text\">Tipp #5: Template-Check (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Oftmals wird im Template ( bzw. im Theme ) einiges an Grafiken mitgeladen. Nicht immer sind den Grafikdateien Gr\u00f6\u00dfenangaben mitgegeben. Pr\u00fcfen Sie alle eingef\u00fcgten Grafikdateien darauf, ob Gr\u00f6\u00dfenangaben vorhanden sind. Wenn nicht, erg\u00e4nzen Sie diese. Das gilt f\u00fcr <strong>WordPress<\/strong> und seine Themes und Plugins, es gilt f\u00fcr <strong>TYPO3<\/strong> und seine Templates und Extensions und es gilt f\u00fcr alle anderen CMS-Systeme, die stets das Layout in Template-artigen Modulen bereitstellen.<\/p>\n<p>Oftmals werden JavaScript f\u00fcr Ads eingebunden. Diese haben meist keine Gr\u00f6\u00dfenangaben und belegen zun\u00e4chst &#8220;keinen Platz&#8221; und expandieren dann zu gr\u00f6\u00dferen Bannerformaten, je nach Devicetyp und Bildschirmgr\u00f6\u00dfe. Erfragen Sie beim Lieferanten f\u00fcr die Scripte M\u00f6glichkeiten, Gr\u00f6\u00dfenangaben vorzugeben. Wenn der Browser beim Laden und Ausf\u00fchren des Scripts bereits wei\u00df, wie viel Raum es zur Ausbreitung zur Verf\u00fcgung haben soll, kann der Browser den Platz zur Verf\u00fcgung stellen. So vermeiden Sie das sp\u00e4tere Zucken auf dem Bildschirm.<\/p>\n<p>Gut f\u00fcr Sie: alles, was Sie im Template \u00e4ndern, wirkt sich auf die Optimierung der gesamten Webseite aus. Hier rechnet sich jede eingesetzte Minute doppelt.<\/p>\n<h4>Tipp #6: Content-Check<\/h4>\n<figure id=\"attachment_848\" aria-describedby=\"caption-attachment-848\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-6.jpg\" alt=\"Tipp #6: Content-Check (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-848\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-6.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-6-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-848\" class=\"wp-caption-text\">Tipp #6: Content-Check (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Der Content enth\u00e4lt oft Infografiken, Produktbilder oder Illustrationen. Vielfach werden auch Player f\u00fcr Bewegtbild und Audio eingesetzt. Pr\u00fcfen Sie, ob alle diese Elemente mit einer Gr\u00f6\u00dfenangabe (height, width) ausgestattet sind. Wenn eine der Angaben fehlt, erg\u00e4nzen Sie diese. Mit den vollst\u00e4ndigen Angaben kann der Browser beim Ausspielen bzw. Rendern der Elemente sofort die ben\u00f6tigte Platzgr\u00f6\u00dfe belegen und der folgende Content wird entsprechend an anderer Stelle ausgespielt. Dies vermeidet das Zucken auf dem Bildschirm, das zu schlechten Werten beim CLS \/ Cumulative Layout Shift f\u00fchrt.<\/p>\n<h4>Tipp #7: DIV-Boxen f\u00fcr widerspenstige Genossen<\/h4>\n<figure id=\"attachment_849\" aria-describedby=\"caption-attachment-849\" style=\"width: 200px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-7.jpg\" alt=\"Tipp #7: DIV-Boxen f\u00fcr widerspenstige Genossen (Foto: shutterstock - Sundry Studio)\" width=\"200\" height=\"500\" class=\"size-full wp-image-849\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-7.jpg 200w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-tipp-7-120x300.jpg 120w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-849\" class=\"wp-caption-text\">Tipp #7: DIV-Boxen f\u00fcr widerspenstige Genossen (Foto: shutterstock &#8211; Sundry Studio)<\/figcaption><\/figure>\n<p>Wenn Objekte verbleiben, welche keinerlei Gr\u00f6\u00dfenvorgaben akzeptieren wollen, dann schlie\u00dfen Sie diese doch einfach in eine DIV-Box ein, die Sie um das Objekt herumrendern lassen. <\/p>\n<p>Geben Sie der DIV-Box die Gr\u00f6\u00dfeninformation als height\/width mit und dann kann der Browser die n\u00f6tige Fl\u00e4che belegen. Das Objekt kann den Raum in der DIV-Box dann sp\u00e4ter gem\u00fctlich ausf\u00fcllen &#8211; ohne das typische Zucken auf dem Bildschirm.<\/p>\n<p>Die Gr\u00f6\u00dfenangaben f\u00fcr die DIV-Box k\u00f6nnen Sie bequem f\u00fcr alle drei responsiven Viewports in der CSS-Datei mitgeben. <\/p>\n<h4>Tipp #8: AMP &#8211; Accelerated Mobile Pages<\/h4>\n<p>Die Accelerated Mobile Pages sind vereinfachte Varianten der Seiten Ihrer Webseite, die Sie bewusst f\u00fcr den Mobile-User bereitstellen. Die Seiten zeichnen sich durch ein reduziertes Design und sehr schnelle ladezeiten aus. Pr\u00fcfen Sie, ob Sie nicht per AMP den mobilen Teil Ihrer Webseite beschleunigen k\u00f6nnen.<\/p>\n<p><strong>&#8220;Wieso geht AMP so einfach?&#8221;<\/strong> werden Sie sich jetzt fragen. Nun, f\u00fcr WordPress stehen Plugins zur Verf\u00fcgung, welche (fast) nur durch Installation des Plugins eine AMP-Version der Webseite bereitstellen. Das reduziert den Aufwand erheblich. Und eventuell wird die AMP-Variante auch viele Desktop-Nutzer zufriedenstellen&#8230;<\/p>\n<p>Eine Option f\u00fcr WordPress <a href=\"https:\/\/de.wordpress.org\/plugins\/amp\/\" rel=\"noopener noreferrer\" target=\"_blank\">ist dieses Plugin<\/a>.<\/p>\n<p>(Sorry, ich hatte 7 Tipps versprochen, aber der 8. mit AMP kam noch als Nachz\u00fcgler&#8230;)<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wer-setzt-die-Optimierung-um\"><\/span>Wer setzt die Optimierung um?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure id=\"attachment_838\" aria-describedby=\"caption-attachment-838\" style=\"width: 700px\" class=\"wp-caption alignright\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-how-to.jpg\" alt=\"How to? Wer setzt die Optimierung f\u00fcr die Google Core Web Vitals um? Vieles kann das Team im Hause erledigen. F\u00fcr einige Aufgaben braucht es Webentwickler. (Foto: shutterstock - Agor2012)\" width=\"700\" height=\"331\" class=\"size-full wp-image-838\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-how-to.jpg 700w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-how-to-300x142.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-838\" class=\"wp-caption-text\">How to? Wer setzt die Optimierung f\u00fcr die Google Core Web Vitals um? Vieles kann das Team im Hause erledigen. F\u00fcr einige Aufgaben braucht es Webentwickler. (Foto: shutterstock &#8211; Agor2012)<\/figcaption><\/figure>\n<p>Das Pr\u00fcfen von Template, Content und Bildern kann das Redaktionsteam mit Leichtigkeit \u00fcbernehmen, auch das Komprimieren von Bildern. Etwas schwieriger wird es bei der Aufteilung der CSS-Codes und JavaScript-Codes und auch das Bewerten, was fr\u00fch und was sp\u00e4ter zu laden ist. Hier bietet es sich an, die IT-Abteilung, einen Web-Programmierer oder die Agentur anzusprechen. Die Umsetzung der Aufteilung von Code und das zeitversetzte Ausf\u00fchren von Code ist ebenfalls eine T\u00e4tigkeit, bei der Programmierkenntnisse ben\u00f6tigt werden. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Wie-kann-ich-die-kritischen-Punkte-ermitteln\"><\/span>Wie kann ich die kritischen Punkte ermitteln?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hierf\u00fcr stellt Google in der Search Console die <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" rel=\"noopener noreferrer\" target=\"_blank\">Page Speed Insights<\/a> bereit.<\/p>\n<figure id=\"attachment_833\" aria-describedby=\"caption-attachment-833\" style=\"width: 840px\" class=\"wp-caption alignnone\"><img src=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-search-console-page-speed-insights-1024x623.jpg\" alt=\"Mit den Page Speed Insights aus der Search Console lassen sich die Google Core Web Vitals m\u00fchelos f\u00fcr eine Optimierung heranziehen.\" width=\"840\" height=\"511\" class=\"size-large wp-image-833\" srcset=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-search-console-page-speed-insights-1024x623.jpg 1024w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-search-console-page-speed-insights-300x183.jpg 300w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-search-console-page-speed-insights-768x467.jpg 768w, https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung-search-console-page-speed-insights.jpg 1234w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><figcaption id=\"caption-attachment-833\" class=\"wp-caption-text\">Mit den Page Speed Insights aus der Search Console lassen sich die Google Core Web Vitals m\u00fchelos f\u00fcr eine Optimierung heranziehen.<\/figcaption><\/figure>\n<p>Vorsicht bitte: wenn man die Page Speed Insights zum ersten Mal aufruft, kann man schnell einen Schreck bekommen. Die von Google berichteten Defizite lassen sich zumeist auf die von mir oben genannten Punkte reduzieren. Doch auf den ersten Blick schauts manchmal grauslig aus.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Wie-geht-man-bei-der-Optimierung-am-besten-vor\"><\/span>Wie geht man bei der Optimierung am besten vor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Klare Antwort: am besten geht man in Schritten vor. Setzen Sie ein Thema um und testen Sie anschlie\u00dfend die Auswirkung auf die Google Core Web Vitals. Und ein kleines Erfolgserlebnis zwischendurch erh\u00f6ht die Motivation, weiterzumachen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Welche-Alternativen-gibt-es\"><\/span>Welche Alternativen gibt es?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn Ihnen f\u00fcr die Optimierung Ihrer Webseite f\u00fcr die Google Core Web Vitals die Zeit fehlt, dann <strong>rufen Sie mich einfach jetzt an: <a href=\"tel:+4961313029213\">+49 6131 \/ 30 292-13<\/a><\/strong> und erfahren Sie, wie wir das am besten gemeinsam l\u00f6sen.<\/p>\n<p>Ihr Hans-J\u00fcrgen Schwarzer<!-- <\/ezTOC> --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ab Mai 2021 sind sie Ranking-Faktor bei Google. Die Rede ist von den Google Core Web Vitals. Optimierung der Webseite [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"features_image":"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg","rk_cat":null,"rk_date":"04.01.2021","yoast_head":"<title>Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de\" \/>\n<meta property=\"og:description\" content=\"Ab Mai 2021 sind sie Ranking-Faktor bei Google. Die Rede ist von den Google Core Web Vitals. Optimierung der Webseite [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/\" \/>\n<meta property=\"og:site_name\" content=\"development-by.schwarzer.de\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-04T07:00:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-15T09:25:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"378\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hans-J\u00fcrgen Schwarzer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/#website\",\"url\":\"https:\/\/development-by.schwarzer.de\/blog\/\",\"name\":\"development-by.schwarzer.de\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/development-by.schwarzer.de\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg\",\"contentUrl\":\"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg\",\"width\":1080,\"height\":378,\"caption\":\"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#webpage\",\"url\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/\",\"name\":\"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de\",\"isPartOf\":{\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#primaryimage\"},\"datePublished\":\"2021-01-04T07:00:50+00:00\",\"dateModified\":\"2022-02-15T09:25:13+00:00\",\"author\":{\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/#\/schema\/person\/31bc0011f4b960a9aa559e3f04da4a06\"},\"breadcrumb\":{\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/development-by.schwarzer.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/#\/schema\/person\/31bc0011f4b960a9aa559e3f04da4a06\",\"name\":\"Hans-J\u00fcrgen Schwarzer\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/development-by.schwarzer.de\/blog\/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2e9a54aaac87c32742c669aa0d5556c1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2e9a54aaac87c32742c669aa0d5556c1?s=96&d=mm&r=g\",\"caption\":\"Hans-J\u00fcrgen Schwarzer\"},\"description\":\"Hans-J\u00fcrgen Schwarzer leitet die Digital-Agentur schwarzer.de software + internet gmbh. Als Unternehmer und Verleger in Personalunion wie auch als leidenschaftlicher Blogger geh\u00f6rt er zu den Hauptautoren verschiedener Online-Magazine. Innerhalb seiner breiten Palette an Themen liegen dem Mainzer Lokalpatrioten dabei vermeintlich \u201eschr\u00e4ge\u201c Ideen und technische Novit\u00e4ten besonders am Herzen - Nerdstuff, wie es heute hei\u00dft.\",\"sameAs\":[\"http:\/\/www.schwarzer.de\"],\"url\":\"#\"}]}<\/script>","yoast_head_json":{"title":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/","og_locale":"de_DE","og_type":"article","og_title":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de","og_description":"Ab Mai 2021 sind sie Ranking-Faktor bei Google. Die Rede ist von den Google Core Web Vitals. Optimierung der Webseite [&hellip;]","og_url":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/","og_site_name":"development-by.schwarzer.de","article_published_time":"2021-01-04T07:00:50+00:00","article_modified_time":"2022-02-15T09:25:13+00:00","og_image":[{"width":1080,"height":378,"url":"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Hans-J\u00fcrgen Schwarzer","Gesch\u00e4tzte Lesezeit":"12 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/development-by.schwarzer.de\/blog\/#website","url":"https:\/\/development-by.schwarzer.de\/blog\/","name":"development-by.schwarzer.de","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/development-by.schwarzer.de\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"ImageObject","@id":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#primaryimage","inLanguage":"de-DE","url":"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg","contentUrl":"https:\/\/development-by.schwarzer.de\/blog\/wp-content\/uploads\/2021\/01\/google-core-web-vitals-optimierung.jpg","width":1080,"height":378,"caption":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps"},{"@type":"WebPage","@id":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#webpage","url":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/","name":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps - development-by.schwarzer.de","isPartOf":{"@id":"https:\/\/development-by.schwarzer.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#primaryimage"},"datePublished":"2021-01-04T07:00:50+00:00","dateModified":"2022-02-15T09:25:13+00:00","author":{"@id":"https:\/\/development-by.schwarzer.de\/blog\/#\/schema\/person\/31bc0011f4b960a9aa559e3f04da4a06"},"breadcrumb":{"@id":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/development-by.schwarzer.de\/blog\/google-core-web-vitals-optimierung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/development-by.schwarzer.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Google Core Web Vitals Optimierung: 1 hilfreiche Checkliste und 7 gute Tipps"}]},{"@type":"Person","@id":"https:\/\/development-by.schwarzer.de\/blog\/#\/schema\/person\/31bc0011f4b960a9aa559e3f04da4a06","name":"Hans-J\u00fcrgen Schwarzer","image":{"@type":"ImageObject","@id":"https:\/\/development-by.schwarzer.de\/blog\/#personlogo","inLanguage":"de-DE","url":"https:\/\/secure.gravatar.com\/avatar\/2e9a54aaac87c32742c669aa0d5556c1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2e9a54aaac87c32742c669aa0d5556c1?s=96&d=mm&r=g","caption":"Hans-J\u00fcrgen Schwarzer"},"description":"Hans-J\u00fcrgen Schwarzer leitet die Digital-Agentur schwarzer.de software + internet gmbh. Als Unternehmer und Verleger in Personalunion wie auch als leidenschaftlicher Blogger geh\u00f6rt er zu den Hauptautoren verschiedener Online-Magazine. Innerhalb seiner breiten Palette an Themen liegen dem Mainzer Lokalpatrioten dabei vermeintlich \u201eschr\u00e4ge\u201c Ideen und technische Novit\u00e4ten besonders am Herzen - Nerdstuff, wie es heute hei\u00dft.","sameAs":["http:\/\/www.schwarzer.de"],"url":"#"}]}},"_links":{"self":[{"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/posts\/826"}],"collection":[{"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":31,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/posts\/826\/revisions"}],"predecessor-version":[{"id":871,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/posts\/826\/revisions\/871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/media\/830"}],"wp:attachment":[{"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/media?parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/categories?post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/development-by.schwarzer.de\/blog\/wp-json\/wp\/v2\/tags?post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}