{"id":92904,"date":"2022-10-15T15:25:02","date_gmt":"2022-10-15T13:25:02","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/optimize-largest-contentful-paint\/"},"modified":"2020-10-12T06:13:38","modified_gmt":"2020-10-12T09:13:38","slug":"optimize-largest-contentful-paint","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/","title":{"rendered":"Optimieren Sie die gr\u00f6\u00dfte inhaltliche Farbe"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/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:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Slow-server-response-times\" >Langsame Serverantwortzeiten<\/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:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Optimize-your-server\" >Optimieren Sie Ihren Server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Route-users-to-a-nearby-CDN\" >Leiten Sie Benutzer zu einem nahe gelegenen CDN weiter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Cache-assets\" >Cache-Assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Serve-HTML-pages-cache-first\" >Stellen Sie HTML-Seiten zuerst im Cache bereit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Establish-third-party-connections-early\" >Stellen Sie fr\u00fchzeitig Verbindungen zu Drittanbietern her<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Render-blocking-JavaScript-and-CSS\" >Rendern blockiert JavaScript und CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Reduce-CSS-blocking-time\" >Reduzieren Sie die CSS-Blockierungszeit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Minify-CSS\" >CSS minimieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Defer-non-critical-CSS\" >Verschieben Sie unkritisches CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Inline-critical-CSS\" >Inline-kritisches CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Reduce-JavaScript-blocking-time\" >Reduzieren Sie die JavaScript-Blockierungszeit<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Slow-resource-load-times\" >Langsame Ladezeiten der Ressourcen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Optimize-and-compress-images\" >Bilder optimieren und komprimieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Preload-important-resources\" >Laden Sie wichtige Ressourcen vor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Compress-text-files\" >Komprimieren Sie Textdateien<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Adaptive-serving\" >Adaptives Servieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Cache-assets-using-a-service-worker\" >Zwischenspeichern von Assets mithilfe eines Servicemitarbeiters<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Client-side-rendering\" >Clientseitiges Rendern<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Minimize-critical-JavaScript\" >Minimieren Sie kritisches JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Use-server-side-rendering\" >Verwenden Sie serverseitiges Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimize-largest-contentful-paint\/#Use-pre-rendering\" >Verwenden Sie das Pre-Rendering<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          So rendern Sie Ihre Hauptinhalte schneller.\n        <\/p>\n<p>\n          <time>5. Mai 2020<\/time><br \/>\n            Aktualisiert <time>20. August 2020<\/time>\n        <\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Optimieren Sie f\u00fcr Core Web Vitals\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/AQqFZ5t8uNc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<blockquote>\n<p>\n    Ich kann keinen n\u00fctzlichen Inhalt sehen! Warum dauert das Laden so lange? \ud83d\ude16\n  <\/p>\n<\/blockquote>\n<p>Ein Faktor, der zu einer schlechten Benutzererfahrung beitr\u00e4gt, ist, wie lange ein Benutzer ben\u00f6tigt, um Inhalte anzuzeigen<br \/>\nauf den Bildschirm gerendert. First Contentful Paint (FCP) misst, wie lange es dauert<br \/>\nEs dauert, bis der erste DOM-Inhalt gerendert ist, es wird jedoch nicht erfasst, wie lange es am gr\u00f6\u00dften gedauert hat<br \/>\n(normalerweise aussagekr\u00e4ftiger) Inhalt auf der zu rendernden Seite.<\/p>\n<p>Largest Contentful Paint (LCP) ist ein Kernweb<br \/>\nVitals Metrik und misst, wann das gr\u00f6\u00dfte Inhaltselement in der<br \/>\nAnsichtsfenster wird sichtbar. Es kann verwendet werden, um festzustellen, wann der Hauptinhalt der Seite fertig ist<br \/>\nRendern auf dem Bildschirm.<\/p>\n<picture><source srcset=\"https:\/\/web.dev\/..\/vitals\/lcp_8x2.svg\" media=\"(min-width: 640px)\"><img decoding=\"async\" class=\"w-screenshot w-screenshot--filled\" src=\"https:\/\/webdev.imgix.net\/vitals\/lcp_4x3.svg\" alt=\"Gute LCP-Werte sind 2,5 Sekunden, schlechte Werte sind gr\u00f6\u00dfer als 4,0 Sekunden und alles dazwischen muss verbessert werden\"><br \/>\n<\/source><\/picture>\n<p>Die h\u00e4ufigsten Ursachen f\u00fcr ein schlechtes LCP sind:<\/p>\n<h2 id=\"slow-servers\"><span class=\"ez-toc-section\" id=\"Slow-server-response-times\"><\/span>Langsame Serverantwortzeiten <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je l\u00e4nger ein Browser ben\u00f6tigt, um Inhalte vom Server zu empfangen, desto l\u00e4nger dauert das Rendern<br \/>\nalles auf dem Bildschirm. Eine schnellere Serverantwortzeit verbessert direkt das Laden jeder einzelnen Seite<br \/>\nMetrik, einschlie\u00dflich LCP.<\/p>\n<p>Verbessern Sie vor allem, wie und wo Ihr Server mit Ihren Inhalten umgeht. Benutzen <strong>Zeit zum Ersten<br \/>\nByte<\/strong> (TTFB), um die Antwortzeiten Ihres Servers zu messen. Sie k\u00f6nnen<br \/>\nVerbessern Sie Ihren TTFB auf verschiedene Weise:<\/p>\n<ul>\n<li>Optimieren Sie Ihren Server<\/li>\n<li>Leiten Sie Benutzer zu einem nahe gelegenen CDN weiter<\/li>\n<li>Cache-Assets<\/li>\n<li>Stellen Sie HTML-Seiten zuerst im Cache bereit<\/li>\n<li>Stellen Sie fr\u00fchzeitig Verbindungen zu Drittanbietern her<\/li>\n<\/ul>\n<h3 id=\"optimize-your-server\"><span class=\"ez-toc-section\" id=\"Optimize-your-server\"><\/span>Optimieren Sie Ihren Server <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>F\u00fchren Sie teure Abfragen aus, deren Ausf\u00fchrung Ihrem Server viel Zeit in Anspruch nimmt? Oder<br \/>\nGibt es andere komplexe Vorg\u00e4nge auf der Serverseite, die den Prozess zur R\u00fcckgabe der Seite verz\u00f6gern?<br \/>\nInhalt? Durch die Analyse und Verbesserung der Effizienz Ihres serverseitigen Codes wird die<br \/>\nZeit, die der Browser ben\u00f6tigt, um die Daten zu empfangen.<\/p>\n<p>Anstatt nur sofort eine statische Seite auf einer Browseranforderung bereitzustellen, werden viele serverseitige Web<br \/>\nFrameworks m\u00fcssen die Webseite dynamisch erstellen. Mit anderen Worten, anstatt nur eine zu senden<br \/>\nVollst\u00e4ndige HTML-Datei, die bereits bereit ist, wenn der Browser sie anfordert. Die Frameworks m\u00fcssen ausgef\u00fchrt werden<br \/>\nLogik zum Erstellen der Seite. Dies kann auf ausstehende Ergebnisse einer Datenbankabfrage oder sogar zur\u00fcckzuf\u00fchren sein<br \/>\nweil Komponenten von einem UI-Framework (z<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/react-dom-server.html\">Reagieren<\/a>). Viele Webframeworks, die auf dem Server ausgef\u00fchrt werden<br \/>\nSie verf\u00fcgen \u00fcber Leistungsrichtlinien, mit denen Sie diesen Prozess beschleunigen k\u00f6nnen.<\/p>\n<h3 id=\"route-users-to-a-nearby-cdn\"><span class=\"ez-toc-section\" id=\"Route-users-to-a-nearby-CDN\"><\/span>Leiten Sie Benutzer zu einem nahe gelegenen CDN weiter <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ein Content Delivery Network (CDN) ist ein Netzwerk von Servern, die an vielen verschiedenen Standorten verteilt sind. Wenn<br \/>\nDer Inhalt Ihrer Webseite wird auf einem einzelnen Server gehostet, Ihre Website wird langsamer geladen<br \/>\nBenutzer, die geografisch weiter entfernt sind, weil ihre Browseranforderungen buchst\u00e4blich reisen m\u00fcssen<br \/>\nauf der ganzen Welt. Verwenden Sie ein CDN, um sicherzustellen, dass Ihre Benutzer niemals auf das Netzwerk warten m\u00fcssen<br \/>\nAnfragen an weit entfernte Server.<\/p>\n<h3 id=\"cache-assets\"><span class=\"ez-toc-section\" id=\"Cache-assets\"><\/span>Cache-Assets <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn Ihr HTML-Code statisch ist und nicht bei jeder Anforderung ge\u00e4ndert werden muss, kann dies durch Caching verhindert werden<br \/>\nunn\u00f6tig neu erstellt werden. Durch Speichern einer Kopie des generierten HTML-Codes auf der Festplatte wird serverseitiges Caching durchgef\u00fchrt<br \/>\nkann TTFB reduzieren und den Ressourcenverbrauch minimieren.<\/p>\n<p>Abh\u00e4ngig von Ihrer Toolchain gibt es viele verschiedene M\u00f6glichkeiten, das Server-Caching anzuwenden:<\/p>\n<ul>\n<li>Reverse Proxys konfigurieren (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/varnish-cache.org\/\">Lack<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nginx.com\/\">Nginx<\/a>) um zwischengespeicherten Inhalt bereitzustellen oder als Cache-Server zu fungieren, wenn<br \/>\nvor einem Anwendungsserver installiert<\/li>\n<li>Konfigurieren und verwalten Sie die Ihres Cloud-Anbieters<br \/>\n(<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/firebase.google.com\/docs\/hosting\/manage-cache\">Feuerbasis<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/caching\/\">AWS<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/architecture\/best-practices\/caching\">Azurblau<\/a>) Cache-Verhalten<\/li>\n<li>Verwenden Sie ein CDN, das Edgeserver bereitstellt, damit Ihre Inhalte zwischengespeichert und n\u00e4her an gespeichert werden<br \/>\nIhre Benutzer<\/li>\n<\/ul>\n<h3 id=\"serve-html-pages-cache-first\"><span class=\"ez-toc-section\" id=\"Serve-HTML-pages-cache-first\"><\/span>Stellen Sie HTML-Seiten zuerst im Cache bereit <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn installiert, a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">Bedienung<br \/>\nArbeiter<\/a> l\u00e4uft im Browser<br \/>\nHintergrund und kann Anforderungen vom Server abfangen. Diese Ebene der programmatischen Cache-Steuerung<br \/>\nerm\u00f6glicht es, einen Teil oder den gesamten Inhalt der HTML-Seite zwischenzuspeichern und den Cache nur zu aktualisieren, wenn die<br \/>\nInhalt hat sich ge\u00e4ndert.<\/p>\n<p>Die folgende Tabelle zeigt, wie LCP-Verteilungen auf einer Site mithilfe dieses Musters reduziert wurden:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-sw-caching-5521599' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-sw-caching-5521599.png'><figcaption class=\"w-figcaption\">Gr\u00f6\u00dfte Contentful Paint-Verteilung zum Laden von Seiten mit und ohne Servicemitarbeiter - <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/philipwalton.com\/articles\/smaller-html-payloads-with-service-workers\/\">philipwalton.com<\/a><\/figcaption><\/figure>\n<p>Die Grafik zeigt die Verteilung f\u00fcr LCP von einem einzelnen Standort in den letzten 28 Tagen, segmentiert nach<br \/>\nServicemitarbeiter Staat. Beachten Sie, wie weit mehr Seitenladevorg\u00e4nge nach Cache-First-HTML einen schnelleren LCP-Wert haben<br \/>\nDie Seitenbereitstellung wurde im Servicemitarbeiter eingef\u00fchrt (blauer Teil des Diagramms).<\/p>\n<h3 id=\"establish-third-party-connections-early\"><span class=\"ez-toc-section\" id=\"Establish-third-party-connections-early\"><\/span>Stellen Sie fr\u00fchzeitig Verbindungen zu Drittanbietern her <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Serveranforderungen an Urspr\u00fcnge von Drittanbietern k\u00f6nnen sich auch auf LCP auswirken, insbesondere wenn sie zur Anzeige ben\u00f6tigt werden<br \/>\nkritischer Inhalt auf der Seite. Benutzen <code>rel = &quot;Preconnect&quot;<\/code> um den Browser dar\u00fcber zu informieren, dass Ihre Seite dies beabsichtigt<br \/>\nStellen Sie so schnell wie m\u00f6glich eine Verbindung her.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>vorverbinden<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Sie k\u00f6nnen auch verwenden <code>DNS-Prefetch<\/code>  um DNS-Lookups schneller aufzul\u00f6sen.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>DNS-Prefetch<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Obwohl beide Hinweise unterschiedlich funktionieren, sollten Sie die Verwendung in Betracht ziehen <code>DNS-Prefetch<\/code> als Fallback f\u00fcr Browser, die<br \/>\nnicht unterst\u00fctzen <code>vorverbinden<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Kopf<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br>\u2026<br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>vorverbinden<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>DNS-Prefetch<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>Kopf<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"render-blocking-resources\"><span class=\"ez-toc-section\" id=\"Render-blocking-JavaScript-and-CSS\"><\/span>Rendern blockiert JavaScript und CSS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bevor ein Browser Inhalte rendern kann, muss er das HTML-Markup in einen DOM-Baum analysieren. Der HTML<br \/>\nDer Parser wird angehalten, wenn er auf externe Stylesheets st\u00f6\u00dft (<code><\/code>) oder synchron<br \/>\nJavaScript-Tags (<code><\/code>).<\/p>\n<p>Skripte und Stylesheets sind beide Renderblockierungsressourcen, die FCP und folglich LCP verz\u00f6gern.<br \/>\nVerschieben Sie nicht kritisches JavaScript und CSS, um das Laden des Hauptinhalts Ihrer Webseite zu beschleunigen.<\/p>\n<h3 id=\"reduce-css-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-CSS-blocking-time\"><\/span>Reduzieren Sie die CSS-Blockierungszeit <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Stellen Sie sicher, dass nur die minimale Menge an erforderlichem CSS das Rendern auf Ihrer Site mit dem blockiert<br \/>\nFolgendes:<\/p>\n<ul>\n<li>CSS minimieren<\/li>\n<li>Verschieben Sie unkritisches CSS<\/li>\n<li>Inline-kritisches CSS<\/li>\n<\/ul>\n<h3 id=\"minify-css\"><span class=\"ez-toc-section\" id=\"Minify-CSS\"><\/span>CSS minimieren <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Zur besseren Lesbarkeit k\u00f6nnen CSS-Dateien Zeichen wie Abst\u00e4nde, Einr\u00fcckungen oder Kommentare enthalten.<br \/>\nDiese Zeichen sind f\u00fcr den Browser nicht erforderlich, und durch Minimieren dieser Dateien wird dies sichergestellt<br \/>\nsie werden entfernt. Letztendlich wird die Reduzierung der Menge an blockierendem CSS immer die Zeit daf\u00fcr verbessern<br \/>\ndauert, um den Hauptinhalt der Seite (LCP) vollst\u00e4ndig zu rendern.<\/p>\n<p>Wenn Sie einen Modulb\u00fcndler oder ein Build-Tool verwenden, f\u00fcgen Sie ein geeignetes Plugin hinzu, um CSS-Dateien zu minimieren<br \/>\njeder Build:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-change-minify-css-7170870' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-change-minify-css-7170870.png'><figcaption class=\"w-figcaption\">Beispiel f\u00fcr eine LCP-Verbesserung: Vor und nach der Minimierung von CSS<\/figcaption><\/figure>\n<h3 id=\"defer-non-critical-css\"><span class=\"ez-toc-section\" id=\"Defer-non-critical-CSS\"><\/span>Verschieben Sie unkritisches CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Verwenden Sie die <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/coverage\">Abdeckung<\/a> Registerkarte in Chrome<br \/>\nDevTools, um nicht verwendetes CSS auf Ihrer Webseite zu finden.<\/p>\n<p><img alt='Coverage-Panel-CSS-4830925' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/coverage-panel-css-4830925.png'><\/p>\n<p>Optimieren:<\/p>\n<ul>\n<li>\n<p>Entfernen Sie nicht verwendetes CSS vollst\u00e4ndig oder verschieben Sie es in ein anderes Stylesheet, wenn es auf einem separaten verwendet wird<br \/>\nSeite Ihrer Website.<\/p>\n<\/li>\n<li>\n<p>Verwenden Sie f\u00fcr jedes CSS, das f\u00fcr das anf\u00e4ngliche Rendern nicht ben\u00f6tigt wird<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/filamentgroup\/loadCSS\/blob\/master\/README.md\">loadCSS<\/a> Dateien laden<br \/>\nasynchron, was nutzt <code>rel = &quot;Vorspannung&quot;<\/code>und <code>onload<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet.css<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Stil<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onload<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>this.rel=<span class=\"token punctuation\">'<\/span>stylesheet<span class=\"token punctuation\">'<\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<\/ul>\n<figure class=\"w-figure\">\n  <img alt='lcp-defer-css-8932491' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-defer-css-8932491.png'><figcaption class=\"w-figcaption\">Beispiel f\u00fcr eine LCP-Verbesserung: Vor und nach dem Aufschieben von nicht kritischem CSS<\/figcaption><\/figure>\n<h3 id=\"inline-critical-css\"><span class=\"ez-toc-section\" id=\"Inline-critical-CSS\"><\/span>Inline-kritisches CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Inline-CSS f\u00fcr kritische Pfade, das f\u00fcr Inhalte verwendet wird, die \u00fcber dem Falz liegen, indem Sie es direkt in CSS aufnehmen <code>.<\/code><\/p>\n<figure class=\"w-figure\">\n  <img alt='Critical-CSS-8264750' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/critical-css-8264750.png' class=\"w-screenshot w-screenshot--filled\"><figcaption class=\"w-figcaption\">Kritisches CSS inline<\/figcaption><\/figure>\n<p>Durch das Inlining wichtiger Stile entf\u00e4llt die Notwendigkeit einer Roundtrip-Anforderung zum Abrufen kritischer CSS-Dateien.<br \/>\nWenn Sie den Rest verschieben, wird die CSS-Blockierungszeit minimiert.<\/p>\n<p>Wenn Sie Ihrer Site keine Inline-Stile manuell hinzuf\u00fcgen k\u00f6nnen, verwenden Sie eine Bibliothek, um den Prozess zu automatisieren. Etwas<br \/>\nBeispiele:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-Critical-CSS-4439024' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-critical-css-4439024.png'><figcaption class=\"w-figcaption\">Beispiel f\u00fcr eine LCP-Verbesserung: Vor und nach dem Inlining von kritischem CSS<\/figcaption><\/figure>\n<h3 id=\"reduce-javascript-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-JavaScript-blocking-time\"><\/span>Reduzieren Sie die JavaScript-Blockierungszeit <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Laden Sie die minimale Menge an JavaScript herunter und stellen Sie sie den Benutzern zur Verf\u00fcgung. Reduzierung der Menge von<br \/>\nDas Blockieren von JavaScript f\u00fchrt zu einem schnelleren Rendern und folglich zu einem besseren LCP.<\/p>\n<p>Dies kann erreicht werden, indem Sie Ihre Skripte auf verschiedene Arten optimieren:<\/p>\n<h2 id=\"slow-resource-load-times\"><span class=\"ez-toc-section\" id=\"Slow-resource-load-times\"><\/span>Langsame Ladezeiten der Ressourcen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Obwohl eine Verl\u00e4ngerung der CSS- oder JavaScript-Blockierungszeit direkt zu einer schlechteren Leistung f\u00fchrt,<br \/>\nDie Zeit, die zum Laden vieler anderer Arten von Ressourcen ben\u00f6tigt wird, kann sich auch auf die Malzeiten auswirken. Die Arten von<br \/>\nElemente, die LCP beeinflussen, sind:<\/p>\n<ul>\n<li><code>&lt;img&gt;<\/code> Elemente<\/li>\n<li><code><\/code> Elemente innerhalb eines <code><\/code> Element<\/li>\n<li><code><video><\/code> Elemente (falls angegeben, die<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video#attr-poster\">Poster<\/a> Bild ist<br \/>\nverwendet, um LCP zu messen)<\/li>\n<li>Ein Element mit einem Hintergrundbild, das \u00fcber das geladen wird<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/url()\"><code>url ()<\/code><\/a> Funktion (im Gegensatz zu einem CSS<br \/>\nGradient)<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Block-level_elements\">Blockebene<\/a> Elemente<br \/>\nEnth\u00e4lt Textknoten oder andere Textelemente auf Inline-Ebene<\/li>\n<\/ul>\n<p>Die Zeit, die zum Laden dieser Elemente ben\u00f6tigt wird, wenn sie \u00fcber dem Falz gerendert werden, wirkt sich direkt auf aus<br \/>\nLCP. Es gibt verschiedene M\u00f6glichkeiten, um sicherzustellen, dass diese Dateien so schnell wie m\u00f6glich geladen werden:<\/p>\n<ul>\n<li>Bilder optimieren und komprimieren<\/li>\n<li>Laden Sie wichtige Ressourcen vor<\/li>\n<li>Komprimieren Sie Textdateien<\/li>\n<li>Bereitstellung verschiedener Assets basierend auf der Netzwerkverbindung (adaptives Serving)<\/li>\n<li>Zwischenspeichern von Assets mithilfe eines Servicemitarbeiters<\/li>\n<\/ul>\n<h3 id=\"optimize-and-compress-images\"><span class=\"ez-toc-section\" id=\"Optimize-and-compress-images\"><\/span>Bilder optimieren und komprimieren <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>F\u00fcr viele Websites sind Bilder das gr\u00f6\u00dfte Element in der Ansicht, wenn die Seite vollst\u00e4ndig geladen wurde. Held<br \/>\nBeispiele hierf\u00fcr sind Bilder, gro\u00dfe Karussells oder Bannerbilder.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Bild-gr\u00f6\u00dftes-Element-1207643' width=\"300\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/image-largest-element-1207643.png'><figcaption>Bild als gr\u00f6\u00dftes Seitenelement: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.google\/\">design.google<\/a><\/figcaption><\/figure>\n<p>Wenn Sie verbessern, wie lange das Laden und Rendern dieser Bildtypen dauert, wird LCP direkt beschleunigt. Zu<br \/>\nmach das:<\/p>\n<ul>\n<li>Verwenden Sie in erster Linie kein Bild. Wenn es f\u00fcr den Inhalt nicht relevant ist,<br \/>\nentfernen Sie es.<\/li>\n<li>Bilder komprimieren (zum Beispiel mit Imagemin)<\/li>\n<li>Konvertieren Sie Bilder in neuere Formate (JPEG 2000, JPEG XR oder WebP).<\/li>\n<li>Verwenden Sie reaktionsschnelle Bilder<\/li>\n<li>Erw\u00e4gen Sie die Verwendung eines Image-CDN<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>Schauen Sie sich Optimize your an<br \/>\nBilder f\u00fcr Anleitungen und Ressourcen, die alle diese Techniken im Detail erkl\u00e4ren.<\/p>\n<\/div>\n<h3 id=\"preload-important-resources\"><span class=\"ez-toc-section\" id=\"Preload-important-resources\"><\/span>Laden Sie wichtige Ressourcen vor <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Manchmal k\u00f6nnen wichtige Ressourcen, die in einer bestimmten CSS- oder JavaScript-Datei deklariert oder verwendet werden, vorhanden sein<br \/>\nsp\u00e4ter abgerufen, als Sie m\u00f6chten, z. B. eine Schriftart, die tief in einer der vielen CSS-Dateien eines<br \/>\nAnwendung.<\/p>\n<p>Wenn Sie wissen, dass eine bestimmte Ressource priorisiert werden sollte, verwenden Sie <code><\/code> um es zu holen<br \/>\nfr\u00fcher. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">Viele Arten von<br \/>\nRessourcen<\/a><br \/>\nkann vorinstalliert werden, aber Sie sollten sich zuerst auf das kritische Vorladen konzentrieren<br \/>\nAssets wie Schriftarten, Bilder oder Videos \u00fcber dem Falz,<br \/>\nund CSS oder JavaScript mit kritischem Pfad.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Skript<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>script.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Stil<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>style.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Bild<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>img.png<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Video<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>vid.webm<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Art<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>video\/webm<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Art<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font\/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Crossorigin<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Seit Chrome 73 kann das Vorladen zusammen mit reaktionsschnellen Bildern verwendet werden, um beide zu kombinieren<br \/>\nMuster f\u00fcr ein viel schnelleres Laden von Bildern.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Verkn\u00fcpfung<\/span><br><span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Vorspannung<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">As<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Bild<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf.jpg<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">imagesrcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">Bildgr\u00f6\u00dfen<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50vw<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"compress-text-files\"><span class=\"ez-toc-section\" id=\"Compress-text-files\"><\/span>Komprimieren Sie Textdateien <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Komprimierungsalgorithmen, wie<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=whGwm0Lky2s&amp;feature=youtu.be&amp;t=14m11s\">Gzip<\/a> und<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/opensource.googleblog.com\/2015\/09\/introducing-brotli-new-compression.html\">Brotli<\/a>, k\u00f6nnen<br \/>\nReduzieren Sie die Gr\u00f6\u00dfe von Textdateien (HTML, CSS, JavaScript) beim \u00dcbertragen erheblich<br \/>\nder Server und Browser. Gzip wird effektiv in allen Browsern und Brotli unterst\u00fctzt, die bietet<br \/>\nnoch bessere Komprimierungsergebnisse, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=brotli\">kann in fast allen neueren verwendet werden<br \/>\nBrowser<\/a>.<\/p>\n<p>Durch die Komprimierung Ihrer Ressourcen wird deren Liefergr\u00f6\u00dfe minimiert, wodurch die Ladezeiten und folglich die Ladezeiten verbessert werden<br \/>\nLCP.<\/p>\n<ol>\n<li>\u00dcberpr\u00fcfen Sie zun\u00e4chst, ob Ihr Server Dateien bereits automatisch komprimiert. Die meisten Hosting<br \/>\nPlattformen, CDNs und Reverse-Proxy-Server codieren Assets entweder standardm\u00e4\u00dfig mit Komprimierung oder<br \/>\nSie k\u00f6nnen sie einfach konfigurieren.<\/li>\n<li>Wenn Sie Ihren Server \u00e4ndern m\u00fcssen, um Dateien zu komprimieren, sollten Sie Brotli anstelle von gzip verwenden<br \/>\nda es bessere Kompressionsverh\u00e4ltnisse liefern kann.<\/li>\n<li>Wenn Sie einen zu verwendenden Komprimierungsalgorithmus ausgew\u00e4hlt haben, komprimieren Sie die Assets vorab w\u00e4hrend des Builds<br \/>\nProzess statt on-the-fly, wie sie vom Browser angefordert werden. Dies minimiert den Server<br \/>\nOverhead und verhindert Verz\u00f6gerungen bei Anfragen, insbesondere bei Verwendung hoher Komprimierungsraten.<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='lcp-compress-5003269' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-compression-5003269.png'><figcaption class=\"w-figcaption\">Beispiel f\u00fcr eine LCP-Verbesserung: Vor und nach der Brotli-Komprimierung <\/figcaption><\/figure>\n<h3 id=\"adaptive-serving\"><span class=\"ez-toc-section\" id=\"Adaptive-serving\"><\/span>Adaptives Servieren <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn Sie Ressourcen laden, aus denen der Hauptinhalt einer Seite besteht, kann dies unter bestimmten Bedingungen effektiv sein<br \/>\nRufen Sie je nach Ger\u00e4t oder Netzwerkbedingungen des Benutzers unterschiedliche Assets ab. Dies kann mit erfolgen<br \/>\ndas <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/netinfo\/\">Netzwerkinformationen<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/device-memory\/\">Ger\u00e4t<br \/>\nErinnerung<\/a>, und<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/workers.html#navigator.hardwareconcurrency\">HardwareConcurrency<\/a><br \/>\nAPIs.<\/p>\n<p>Wenn Sie \u00fcber gro\u00dfe Assets verf\u00fcgen, die f\u00fcr das anf\u00e4ngliche Rendern von entscheidender Bedeutung sind, k\u00f6nnen Sie verschiedene Varianten verwenden<br \/>\nder gleichen Ressource abh\u00e4ngig von der Verbindung oder dem Ger\u00e4t des Benutzers. Beispielsweise k\u00f6nnen Sie eine anzeigen<br \/>\nBild anstelle eines Videos f\u00fcr Verbindungsgeschwindigkeiten unter 4G:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>Navigator<span class=\"token punctuation\">.<\/span>Verbindung <span class=\"token operator\">&amp;&amp;<\/span> Navigator<span class=\"token punctuation\">.<\/span>Verbindung<span class=\"token punctuation\">.<\/span>effectiveType<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>Navigator<span class=\"token punctuation\">.<\/span>Verbindung<span class=\"token punctuation\">.<\/span>effectiveType <span class=\"token operator\">===<\/span> <span class=\"token string\">'4g'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Eine Liste n\u00fctzlicher Eigenschaften, die Sie verwenden k\u00f6nnen:<\/p>\n<ul>\n<li><code>navigator.connection.effectiveType<\/code>: Effektiver Verbindungstyp<\/li>\n<li><code>navigator.connection.saveData<\/code>: Datenspeicher aktiviert \/ deaktiviert<\/li>\n<li><code>navigator.hardwareConcurrency<\/code>: CPU-Kernanzahl<\/li>\n<li><code>navigator.deviceMemory<\/code>: Ger\u00e4tespeicher<\/li>\n<\/ul>\n<h3 id=\"cache-assets-using-a-service-worker\"><span class=\"ez-toc-section\" id=\"Cache-assets-using-a-service-worker\"><\/span>Zwischenspeichern von Assets mithilfe eines Servicemitarbeiters <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Servicemitarbeiter k\u00f6nnen f\u00fcr viele n\u00fctzliche Aufgaben verwendet werden, einschlie\u00dflich der Bereitstellung kleinerer HTML-Antworten als<br \/>\nweiter oben in diesem Artikel erw\u00e4hnt. Sie k\u00f6nnen auch verwendet werden, um statische Ressourcen zwischenzuspeichern<br \/>\nWird bei wiederholten Anforderungen an den Browser anstatt aus dem Netzwerk gesendet.<\/p>\n<p>Durch das Zwischenspeichern kritischer Ressourcen mithilfe eines Servicemitarbeiters k\u00f6nnen die Ladezeiten erheblich verk\u00fcrzt werden.<br \/>\ninsbesondere f\u00fcr Benutzer, die die Webseite mit einer schw\u00e4cheren Verbindung neu laden (oder sogar offline darauf zugreifen).<br \/>\nBibliotheken m\u00f6gen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/\">Arbeitsbox<\/a> kann den Prozess von machen<br \/>\nDas Aktualisieren vorgespeicherter Assets ist einfacher als das Schreiben eines benutzerdefinierten Servicemitarbeiters, um dies selbst zu erledigen.<\/p>\n<h2 id=\"client-side-rendering\"><span class=\"ez-toc-section\" id=\"Client-side-rendering\"><\/span>Clientseitiges Rendern <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Viele Websites verwenden clientseitige JavaScript-Logik, um Seiten direkt im Browser zu rendern. Frameworks und<br \/>\nBibliotheken, wie <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">Reagieren<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/angular.io\/\">Winkelig<\/a>, und<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue<\/a>haben es einfacher gemacht, einseitige Anwendungen zu erstellen, die damit umgehen<br \/>\nverschiedene Facetten einer Webseite vollst\u00e4ndig auf dem Client und nicht auf dem Server.<\/p>\n<p>Wenn Sie eine Site erstellen, die haupts\u00e4chlich auf dem Client gerendert wird, sollten Sie sich vor dem Effekt in Acht nehmen<br \/>\nkann auf LCP haben, wenn ein gro\u00dfes JavaScript-Bundle verwendet wird. Wenn keine Optimierungen vorhanden sind, um dies zu verhindern<br \/>\nIn diesem Fall k\u00f6nnen Benutzer m\u00f6glicherweise keine Inhalte auf der Seite sehen oder mit ihnen interagieren, bis das gesamte kritische JavaScript vorhanden ist<br \/>\nDownload und Ausf\u00fchrung beendet.<\/p>\n<p>Ber\u00fccksichtigen Sie beim Erstellen einer clientseitig gerenderten Site die folgenden Optimierungen:<\/p>\n<ul>\n<li>Minimieren Sie kritisches JavaScript<\/li>\n<li>Verwenden Sie serverseitiges Rendering<\/li>\n<li>Verwenden Sie das Pre-Rendering<\/li>\n<\/ul>\n<h3 id=\"minimize-critical-javascript\"><span class=\"ez-toc-section\" id=\"Minimize-critical-JavaScript\"><\/span>Minimieren Sie kritisches JavaScript <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn Inhalte auf Ihrer Website erst nach einer bestimmten Anzahl von sichtbar werden oder mit ihnen interagiert werden k\u00f6nnen<br \/>\nJavaScript wird heruntergeladen: Es wird noch wichtiger, die Gr\u00f6\u00dfe Ihres Bundles als zu reduzieren<br \/>\nso viel wie m\u00f6glich. Dies kann erfolgen durch:<\/p>\n<ul>\n<li>JavaScript minimieren<\/li>\n<li>Nicht verwendetes JavaScript verschieben<\/li>\n<li>Minimierung nicht verwendeter Polyfills<\/li>\n<\/ul>\n<p>Gehen Sie zur\u00fcck zum Abschnitt Reduzieren der JavaScript-Blockierungszeit, um mehr dar\u00fcber zu erfahren<br \/>\ndiese Optimierungen.<\/p>\n<h3 id=\"use-server-side-rendering\"><span class=\"ez-toc-section\" id=\"Use-server-side-rendering\"><\/span>Verwenden Sie serverseitiges Rendering <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Minimieren der Menge an JavaScript sollte immer das erste sein, auf das Sie sich bei Websites konzentrieren sollten<br \/>\nmeistens vom Kunden gerendert. Sie sollten jedoch auch in Betracht ziehen, ein Server-Rendering-Erlebnis mit zu kombinieren<br \/>\nverbessern Sie LCP so weit wie m\u00f6glich.<\/p>\n<p>Dieses Konzept funktioniert, indem der Server verwendet wird, um die Anwendung in HTML zu rendern, wo der Client dann<br \/>\n\u00ab<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/docs\/react-hydration\/\">Hydrate<\/a>\u00bbAlle JavaScript und erforderlichen Daten<br \/>\nauf den gleichen DOM-Inhalt. Dies kann LCP verbessern, indem sichergestellt wird, dass der Hauptinhalt der Seite an erster Stelle steht<br \/>\nAuf dem Server und nicht nur auf dem Client gerendert, es gibt jedoch einige Nachteile:<\/p>\n<ul>\n<li>Die gleiche JavaScript-gerenderte Anwendung auf dem Server und dem Client kann beibehalten werden<br \/>\nKomplexit\u00e4t erh\u00f6hen.<\/li>\n<li>Durch Ausf\u00fchren von JavaScript zum Rendern einer HTML-Datei auf dem Server wird der Server immer vergr\u00f6\u00dfert<br \/>\nAntwortzeiten (TTFB) im Vergleich zum Bereitstellen statischer Seiten vom Server.<\/li>\n<li>Eine vom Server gerenderte Seite sieht m\u00f6glicherweise so aus, als k\u00f6nnte mit ihr interagiert werden, kann jedoch auf keine reagieren<br \/>\nBenutzereingabe, bis das gesamte clientseitige JavaScript ausgef\u00fchrt wurde. Kurz gesagt, es kann machen <strong>Zeit zum<br \/>\nInteraktiv<\/strong> (TTI) schlimmer.<\/li>\n<\/ul>\n<h3 id=\"use-pre-rendering\"><span class=\"ez-toc-section\" id=\"Use-pre-rendering\"><\/span>Verwenden Sie das Pre-Rendering <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pre-Rendering ist eine separate Technik, die weniger komplex ist als serverseitiges Rendern<br \/>\nbietet eine M\u00f6glichkeit, LCP in Ihrer Anwendung zu verbessern. Ein kopfloser Browser, bei dem es sich um einen Browser ohne<br \/>\nBenutzeroberfl\u00e4che, wird verwendet, um statische HTML-Dateien f\u00fcr jede Route w\u00e4hrend der Erstellungszeit zu generieren. Diese Dateien<br \/>\nkann dann zusammen mit den f\u00fcr die Anwendung ben\u00f6tigten JavaScript-Bundles ausgeliefert werden.<\/p>\n<p>Beim Pre-Rendering wird TTI immer noch negativ beeinflusst, aber die Serverantwortzeiten sind nicht so stark wie<br \/>\nSie w\u00fcrden mit einer serverseitigen Rendering-L\u00f6sung arbeiten, die jede Seite erst danach dynamisch rendert<br \/>\nes ist angefordert.<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-prerendering-3562107' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-prerendering-3562107.png'><figcaption class=\"w-figcaption\">Beispiel f\u00fcr eine LCP-Verbesserung: Vor und nach dem Pre-Rendering<\/figcaption><\/figure>\n<div class=\"w-aside w-aside--note\">\n<p>Werfen Sie einen Blick darauf, um einen tieferen Einblick in verschiedene Server-Rendering-Architekturen zu erhalten <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/rendering-on-the-web\">Rendern auf dem<br \/>\nNetz<\/a>.<\/p>\n<\/div>\n<p>Zum Messen und Debuggen von LCP stehen eine Reihe von Tools zur Verf\u00fcgung:<\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Leuchtturm 6.0<\/a> beinhaltet Unterst\u00fctzung f\u00fcr<br \/>\nMessung des LCP in einer Laborumgebung.<\/p>\n<p><img alt='Leuchtturm-2324548' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lighthouse-2324548.jpg'><\/p>\n<\/li>\n<li>\n<p>Das <strong>Timings<\/strong> Abschnitt der<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\">Performance<\/a><br \/>\nDas Bedienfeld in Chrome DevTools enth\u00e4lt einen LCP-Marker und zeigt Ihnen, welchem Element zugeordnet ist<br \/>\nLCP, wenn Sie mit der Maus dar\u00fcber fahren <strong>Verwandter Knoten<\/strong> Feld.<\/p>\n<p><img alt='lcp-chrome-devtools-1981471' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-chrome-devtools-1981471.png'><\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\">Chrome User Experience Report<\/a><br \/>\nbietet reale LCP-Werte, die auf Ursprungsebene aggregiert werden<\/p>\n<\/li>\n<\/ul>\n<p><em>Vielen Dank an Philip Walton, Katie Hempenius, Kayce Basques und Ilya Grigorik f\u00fcr ihre Bewertungen.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#8217;t see any useful content! Why does it take so long to load? \ud83d\ude16 One&#8230;<\/p>","protected":false},"author":1,"featured_media":92905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92904","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimize Largest Contentful Paint - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#039;t see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimisez-la-plus-grande-peinture-riche\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Largest Contentful Paint\" \/>\n<meta property=\"og:description\" content=\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#039;t see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimisez-la-plus-grande-peinture-riche\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-15T13:25:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Optimize Largest Contentful Paint\",\"datePublished\":\"2022-10-15T13:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"},\"wordCount\":2488,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\",\"name\":\"Optimize Largest Contentful Paint - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"datePublished\":\"2022-10-15T13:25:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero2-4461504-4002585-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimize Largest Contentful Paint - R Marketing Digital","description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","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:\/\/rmarketingdigital.com\/de\/dev\/optimisez-la-plus-grande-peinture-riche\/","og_locale":"de_DE","og_type":"article","og_title":"Optimize Largest Contentful Paint","og_description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/optimisez-la-plus-grande-peinture-riche\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-15T13:25:02+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Optimize Largest Contentful Paint","datePublished":"2022-10-15T13:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"},"wordCount":2488,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","name":"Optimize Largest Contentful Paint - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","datePublished":"2022-10-15T13:25:02+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","width":1200,"height":360,"caption":"hero2-4461504-4002585-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/92904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=92904"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/92904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/92905"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=92904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=92904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=92904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}