{"id":52146,"date":"2023-04-18T07:00:32","date_gmt":"2023-04-18T14:00:32","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52146"},"modified":"2025-01-16T11:30:44","modified_gmt":"2025-01-16T19:30:44","slug":"pagespeed-insights-bericht","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/","title":{"rendered":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung &#038; Tipps f\u00fcr eine Punktzahl von 100)"},"content":{"rendered":"\n<p>Im Internet gibt es kein Tempolimit \u2013 aber zum Gl\u00fcck gibt es einen Tachometer.<\/p>\n\n\n\n<p>Die Geschwindigkeit und Leistung Ihrer Website hat einen gro\u00dfen Einfluss auf das Gesch\u00e4ft. Es kann Ihre Suchrankings und SEO verbessern, das Engagement auf der Website erh\u00f6hen und mehr Konversionen \u2013 und damit Einnahmen \u2013 erzielen.<\/p>\n\n\n\n<p>Aber bevor Sie die Geschwindigkeit Ihrer Website optimieren k\u00f6nnen, m\u00fcssen Sie wissen, wie sie sich verh\u00e4lt.<\/p>\n\n\n\n<p>Das ist der Punkt, an dem <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a> ins Spiel kommt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights.jpg\" alt=\"Screenshot von PageSpeed Insights\" class=\"wp-image-40108 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Dieses kostenlose Tool von Google hilft Ihnen, die Leistung Ihrer Website zu verstehen, aber es kann kompliziert sein, damit zu beginnen.<\/p>\n\n\n\n<p>Schlie\u00dflich, was bedeuten all diese verschiedenen Begriffe und Bewertungen? Wie sollen Sie wissen, was zu tun ist oder wo Sie anfangen sollen?<\/p>\n\n\n\n<p>Dieser Leitfaden konzentriert sich darauf, was mit den Ergebnissen Ihres PageSpeed Insights-Berichts zu tun ist und wie man strategisch spezifische L\u00f6sungen durcharbeitet, um jede Ihrer Bewertungen zu verbessern, unabh\u00e4ngig davon, welche Probleme angegangen werden m\u00fcssen!<\/p>\n\n\n\n<p>Heute werden wir jeden der Schl\u00fcsselfaktoren durchgehen und Strategien zur Verbesserung Ihrer Leistung mit jedem einzelnen zeigen.<\/p>\n\n\n\n<h2 id=\"h-what-is-google-pagespeed-insights\" class=\"wp-block-heading\">Was ist Google PageSpeed Insights?<\/h2>\n\n\n\n<p>PageSpeed Insights ist ein Tool, das Ihre Website testet, misst und \u00fcber deren Leistung berichtet. Es erfasst wichtige Daten dar\u00fcber, wie Benutzer Ihre Website erleben und nutzen, indem es Aspekte wie Website-Geschwindigkeit, Ladezeit und Benutzererfahrung analysiert.<\/p>\n\n\n\n<p>Zus\u00e4tzlich dazu, dass Ihre Website anhand einer Reihe wichtiger Leistungskennzahlen bewertet wird, f\u00fchrt PageSpeed Insights eine Reihe von Diagnosen durch und empfiehlt auch spezifische Ma\u00dfnahmen, um die Leistung Ihrer Website zu verbessern.<\/p>\n\n\n\n<p>PageSpeed Insights wird betrieben von <a href=\"https:\/\/developers.google.com\/search\/blog\/2018\/11\/pagespeed-insights-now-powered-by#:~:text=Historically%2C%20these%20tools%20have%20used,Lighthouse%20as%20its%20analysis%20engine.\" target=\"_blank\" rel=\"noopener\">Googles Open-Source-Analysemotor, Lighthouse<\/a>.<\/p>\n\n\n\n<p>Was PageSpeed Insights besonders wichtig f\u00fcr Webmaster und Vermarkter macht, ist, dass die Leistung der Website eng mit der Benutzererfahrung (UX), SEO, Traffic, Konversionen und allen anderen KPIs verbunden ist, die f\u00fcr das Gesch\u00e4ft am wichtigsten sind.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Website-Leistung<\/h3>\n    <p>Die Leistung einer Website bezieht sich auf die Geschwindigkeit und Verf\u00fcgbarkeit der Website. Eine besser performende Website wird schnellere Ladezeiten haben, reibungsloser funktionieren und wenig bis gar keine Ausfallzeiten aufweisen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/website-performance\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>100% bei PageSpeed Insights zu erreichen ist so etwas wie das Bestehen Ihrer SAT mit Bravour.<\/p>\n\n\n\n<p>Das bedeutet nicht unbedingt, dass Sie im College gro\u00dfartig abschneiden werden, aber es verschafft Ihnen definitiv einen Vorteil.<\/p>\n\n\n\n<h2 id=\"h-page-speed-and-seo\" class=\"wp-block-heading\">Seitengeschwindigkeit und SEO<\/h2>\n\n\n\n<p>Beantworten wir zuerst die Hauptfrage.<\/p>\n\n\n\n<p>Ja, die Geschwindigkeit und Leistung Ihrer Website k\u00f6nnen die Suchmaschinenoptimierung (SEO) beeinflussen.<\/p>\n\n\n\n<p>Insbesondere kann eine schlechte Leistung Ihr SEO <i>sch\u00e4digen<\/i>. Es ist hilfreich, Ihre PageSpeed Insights als \u201eGovernor\u201c f\u00fcr Ihre Website zu betrachten. Wenn Ihre Punktzahlen niedrig sind, bedeutet das, dass die Website langsam ist \u2013 was auch Ihr Wachstum in den SERPs (Search Engine Results Page) verlangsamt!<\/p>\n\n\n\n<p>Google hat <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noopener\">\u00f6ffentlich erkl\u00e4rt, dass sie Website-Geschwindigkeitssignale verwenden<\/a>, die sie als \u201eSeitenerfahrung\u201c bezeichnen, als SEO-Rankingfaktor.<\/p>\n\n\n\n<p>Es gibt drei zentrale Faktoren, die in den Suchalgorithmus einbezogen werden, auf die Google als <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/verbessern-sie-die-core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a> verweist:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Laden &#8211; Largest Contentful Paint (LCP)<\/li>\n\n\n\n<li>Interaktivit\u00e4t &#8211; First Input Delay (FID)<\/li>\n\n\n\n<li>Visuelle Stabilit\u00e4t &#8211; Cumulative Layout Shift (CLS)<\/li>\n\n\n<\/ol>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Was sind Core Web Vitals?<\/h3>\n    <p>Core Web Vitals (CWV) wurde von Google entwickelt und repr\u00e4sentiert ein Trio von Benutzererfahrungsmetriken, die dazu dienen, ein schnelleres, zug\u00e4nglicheres und qualitativ hochwertigeres Web-Browsing-Erlebnis zu schaffen. Die drei Core Web Vitals-Metriken umfassen Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/core-web-vitals\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>All diese Faktoren messen, wie schnell Ihre Website l\u00e4dt und die Geschwindigkeit und Qualit\u00e4t der Benutzererfahrung, was auch die Zug\u00e4nglichkeit beeinflussen kann.<\/p>\n\n\n\n<p>Diese drei Faktoren sind Teil der insgesamt sechs gemessenen Metriken von PageSpeed Insights.<\/p>\n\n\n\n<h2 id=\"h-how-pagespeed-insights-works\" class=\"wp-block-heading\">Wie PageSpeed Insights funktioniert<\/h2>\n\n\n\n<p>Jetzt, da wir das Wer, Was, Wo und Warum verstehen&#8230; bleibt nur noch das <i>wie<\/i>.<\/p>\n\n\n\n<p>Wie funktioniert PageSpeedInsights und wie verwenden Sie die bereitgestellten Informationen?<\/p>\n\n\n\n<p>Zuerst ein wenig dar\u00fcber, wie das Tool hinter den Kulissen funktioniert, direkt von Google:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201ePageSpeed Insights bietet sowohl Labordaten als auch Felddaten \u00fcber eine Seite. Labordaten sind n\u00fctzlich f\u00fcr die Fehlersuche, da sie in einer kontrollierten Umgebung gesammelt werden. Sie erfassen jedoch m\u00f6glicherweise nicht die Engp\u00e4sse der realen Welt. Felddaten sind n\u00fctzlich, um die echte Benutzererfahrung in der realen Welt zu erfassen &#8211; haben jedoch einen begrenzteren Satz von Metriken.\u201c<\/p>\n\n\n<\/blockquote>\n\n\n\n<p>Mit anderen Worten, PageSpeed Insights betrachtet zwei Dinge.<\/p>\n\n\n\n<p>Zuerst laden Googles Computer Ihre Webseite, um zu sehen, wie sie funktioniert.<\/p>\n\n\n\n<p>Zweitens, da die Computer von Google nicht dieselben sind wie ein Laptop, den Sie zu Hause oder bei der Arbeit verwenden k\u00f6nnten, sehen sie sich ein Protokoll von historischen Daten von echten Benutzern an, die Ihre Website in den letzten 28 Tagen besucht haben. (Diese Daten stammen aus dem Chrome User Experience Report, oft \u201eCrUX\u201c genannt, und sie werden von Benutzern gesammelt, die den Chrome-Browser verwenden.)<\/p>\n\n\n\n<p>Dann kombiniert PageSpeed Insights diese beiden Tests und bewertet Ihre Website basierend darauf, wie echte Benutzer sie erleben k\u00f6nnten.<\/p>\n\n\n\n<p>Der PageSpeed Insights Score ist eine Sammlung von Metriken \u00fcber die Leistung Ihrer Website, die aufschl\u00fcsselt, welche Bereiche gut sind und welche m\u00f6glicherweise Arbeit ben\u00f6tigen.<\/p>\n\n\n\n<p>Es gibt 6 Punktzahlen zu wissen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Erster Inhaltlicher Farbanstrich (FCP)<\/li>\n\n\n\n<li>Verz\u00f6gerung der ersten Eingabe (FID)<\/li>\n\n\n\n<li>Gr\u00f6\u00dfter Inhaltlicher Farbanstrich (LCP)<\/li>\n\n\n\n<li>Kumulative Layoutverschiebung (CLS)<\/li>\n\n\n\n<li>Interaktion bis zum n\u00e4chsten Anstrich (INP)<\/li>\n\n\n\n<li>Zeit bis zum ersten Byte (TTFB)<\/li>\n\n\n<\/ol>\n\n\n\n<p>Jede dieser Metriken wird gemessen und dann entsprechend der Leistungsstufe bewertet.<\/p>\n\n\n\n<p>Wenn Sie einen PageSpeed Insights-Bericht f\u00fcr Ihre Website erstellen, erhalten Sie eine Punktzahl und eine \u201eNote\u201c f\u00fcr jeden dieser Punkte, die in eine von drei Kategorien fallen wird:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Gut<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig<\/li>\n\n\n\n<li>Schlecht<\/li>\n\n\n<\/ol>\n\n\n\n<p>Diese Noten werden durch vordefinierte Bereiche bestimmt, die Google festlegt:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<\/td><td><b>Gut<\/b><\/td><td><b>Verbesserungsbed\u00fcrftig<\/b><\/td><td><b>Schlecht<\/b><\/td><\/tr><tr><td>FCP<\/td><td>[0, 1800ms]<\/td><td>(1800ms, 3000ms]<\/td><td>\u00fcber 3000ms<\/td><\/tr><tr><td>FID<\/td><td>[0, 100ms]<\/td><td>(100ms, 300ms]<\/td><td>\u00fcber 300ms<\/td><\/tr><tr><td>LCP<\/td><td>[0, 2500ms]<\/td><td>(2500ms, 4000ms]<\/td><td>\u00fcber 4000ms<\/td><\/tr><tr><td>CLS<\/td><td>[0, 0.1]<\/td><td>(0.1, 0.25]<\/td><td>\u00fcber 0.25<\/td><\/tr><tr><td>INP (experimentell)<\/td><td>[0, 200ms]<\/td><td>(200ms, 500ms]<\/td><td>\u00fcber 500ms<\/td><\/tr><tr><td>TTFB (experimentell)<\/td><td>[0, 800ms]<\/td><td>(800ms, 1800ms]<\/td><td>\u00fcber 1800ms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\" class=\"wp-block-heading\">Wie Sie diesen Leitfaden verwenden, um Ihre PageSpeed Insights-Bewertung zu verbessern<\/h2>\n\n\n\n<p>Das Verst\u00e4ndnis von PageSpeed Insights ist der erste Teil der Schlacht.<\/p>\n\n\n\n<p>Als n\u00e4chstes m\u00fcssen wir herausfinden, wie wir alle Bewertungen, Zahlen und Vorschl\u00e4ge in einen umsetzbaren Plan zur Verbesserung \u00fcbersetzen k\u00f6nnen.<\/p>\n\n\n\n<p>Hier erfahren Sie, wie Sie diesen Leitfaden verwenden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">F\u00fchren Sie Ihren Website PageSpeed Insights-Bericht aus<\/a>.<\/li>\n\n\n\n<li>Suchen Sie nach fehlgeschlagenen CWV-Tests oder Metriken am \u201eschlechten\u201c Ende der Skala.<\/li>\n\n\n\n<li>Finden Sie den Abschnitt unten, der sich auf diese spezifischen Metriken bezieht.<\/li>\n\n\n\n<li>Arbeiten Sie die Schritte ab (in der Reihenfolge von h\u00f6chstem zu niedrigstem Einfluss pr\u00e4sentiert).<\/li>\n\n\n\n<li>F\u00fchren Sie den PageSpeed Insights-Bericht erneut aus.<\/li>\n\n\n\n<li>Wiederholen Sie den Prozess bei Bedarf f\u00fcr alle Metriken, die immer noch als \u201eschlecht\u201c gekennzeichnet sind.<\/li>\n\n\n\n<li>Wechseln Sie zu den Metriken, die als \u201eVerbesserungsbedarf\u201c gekennzeichnet sind.<\/li>\n\n\n\n<li>Wiederholen Sie von vorne.<\/li>\n\n\n<\/ul>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-1-first-contentful-paint-fcp\" class=\"wp-block-heading\">#1 &#8211; Erster Inhaltlicher Anstrich (FCP)<\/h2>\n\n\n\n<p>Lassen Sie uns in die erste Metrik auf Googles Liste eintauchen.<\/p>\n\n\n\n<p>Es ist der First Contentful Paint, oder FCP, und er misst, wie schnell der Benutzer Ihre Website beim Laden sehen kann.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-contentful-paint\">Was ist First Contentful Paint?<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">First Contentful Paint<\/a> (FCP) ist die Zeit, die es dauert, bis das erste Objekt im Browser eines Benutzers geladen wird. Dies unterscheidet sich von der Seitenladegeschwindigkeit oder Ladezeit, da es nicht die Zeit ist, die die gesamte Seite zum Rendern ben\u00f6tigt \u2014 Es ist nur das erste St\u00fcck der Seite, das auf dem Bildschirm erscheint.<\/p>\n\n\n\n<p>Dies ist aus der Perspektive des Benutzers wichtig, da er Fortschritte sehen kann, w\u00e4hrend die Seite zu erscheinen beginnt.<\/p>\n\n\n\n<p>Das bedeutet auch, dass die Strategien zur Beschleunigung von FCP einzigartig sind, im Gegensatz dazu, einfach die gesamte Seite schneller zu laden.<\/p>\n\n\n\n<p>FCP wird in Sekunden gemessen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 1,8 Sekunden<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 1,8 &#8211; 3 Sekunden<\/li>\n\n\n\n<li>Schlecht: &gt; 3 Sekunden<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fcp\">Techniken zur Verbesserung der FCP<\/h3>\n\n\n\n<p>Angenommen, Sie haben bei Ihrem FCP-Score 2,2s erreicht. Sie hoffen, ihn auf 1,8s zu senken.<\/p>\n\n\n\n<p>Welche Werkzeuge stehen Ihnen zur Verf\u00fcgung?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-render-blocking-resources\">Minimierung von renderblockierenden Ressourcen<\/h4>\n\n\n\n<p>Denken Sie daran, First Contentful Paint geht nicht nur darum, wie lange die gesamte Seite zum Laden ben\u00f6tigt. Es geht darum, die <i>ersten<\/i> Pixel so schnell wie m\u00f6glich auf dem Bildschirm erscheinen zu lassen.<\/p>\n\n\n\n<p>Eine Schl\u00fcsselstrategie besteht einfach darin, die Reihenfolge der Inhalte auf Ihrer Seite zu \u00e4ndern.<\/p>\n\n\n\n<p>Lassen Sie den Browser den wichtigsten Text, die Bilder und Stile <i>vor<\/i> dem Laden schwerer Skripte, ausgefallener Animationen und Inhalte, die \u201eunterhalb der Falte\u201c sind, rendern.<\/p>\n\n\n\n<p>Das Erste, was Sie tun sollten: <b>L\u00f6schen Sie alle ungenutzten Stile oder Skripte von Ihrer Seite.<\/b><\/p>\n\n\n\n<p>Wenn Sie JavaScript oder CSS auf die Seite laden (normalerweise im Head-Bereich der Website), wird dies das FCP verlangsamen. Wenn Sie sie nicht verwenden, dann verlangsamen sie Sie nur unn\u00f6tig.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>JavaScript<\/h3>\n    <p>JavaScript ist eine Programmiersprache, die es Ihnen erm\u00f6glicht, Dinge innerhalb einer Webseite oder auf einem Webserver zu erstellen. Wenn Sie eine Webseite anzeigen, wird der JavaScript-Code automatisch ausgef\u00fchrt.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/javascript\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>In WordPress k\u00f6nnen Sie dies normalerweise erreichen, indem Sie ungenutzte Plugins deaktivieren, die m\u00f6glicherweise Code auf die Seite laden, auch wenn das Plugin nicht verwendet oder angezeigt wird.<\/p>\n\n\n\n<p>Wenn Sie sich die Ergebnisse in Ihrem PageSpeed Insights-Bericht ansehen, wird Code markiert, der in die Seite geladen, aber nicht verwendet wird:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report.jpg\" alt=\"PageSpeed Insights (PSI) Bericht\" class=\"wp-image-40109 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Dies sollte Ihnen sagen, welchen Code oder welche Plugins Sie sicher entfernen k\u00f6nnen.<\/p>\n\n\n\n<p>(Hinweis: Nur weil Code auf einer Seite nicht verwendet wird, bedeutet das nicht, dass er nicht auf anderen Seiten Ihrer Website vorhanden ist! Seien Sie vorsichtig, bevor Sie anfangen, Dinge von Ihren Seiten zu hacken und zu schneiden.)<\/p>\n\n\n\n<p>N\u00e4chster: <b>Skripte verz\u00f6gern oder asynchron laden.<\/b><\/p>\n\n\n\n<p>Wenn Sie Skripte oder Styling auf Ihrer Seite ben\u00f6tigen, die jedoch nicht sofort f\u00fcr den ersten Inhalt, den der Benutzer sieht, wesentlich sind, k\u00f6nnen Sie das, was man als Verz\u00f6gerung bezeichnet, anwenden oder sie asynchron laden. Dies weist den Browser an, mit dem Laden zu warten, anstatt sie in der Reihenfolge zu laden, in der sie auf der Seite erscheinen.<\/p>\n\n\n\n<p>Dies ist ziemlich einfach \u2014 Sie k\u00f6nnen Ihrer Webseite etwas zus\u00e4tzlichen Code hinzuf\u00fcgen, der den Browser anweist, das Laden zu verz\u00f6gern oder asynchron durchzuf\u00fchren (oder beides):<\/p>\n\n\n\n<p><code>&lt;script src=\"app.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>(Nerd-Hinweis: Async und defer sind technisch gesehen nicht dasselbe. Aber f\u00fcr die meisten von uns ist der Unterschied haupts\u00e4chlich semantisch. Trotzdem, f\u00fchlen Sie sich frei, <a href=\"https:\/\/stackoverflow.com\/questions\/10808109\/script-tag-async-defer\" target=\"_blank\" rel=\"noopener\">in den Kaninchenbau hinabzusteigen und mehr \u00fcber die feinen Nuancen herauszufinden<\/a>.)<\/p>\n\n\n\n<p>Wenn Sie eine einfachere M\u00f6glichkeit suchen, diesen Schritt zu handhaben, erw\u00e4gen Sie die Verwendung des <a href=\"https:\/\/wordpress.org\/plugins\/jetpack-boost\/\" target=\"_blank\" rel=\"noopener\">JetPack Boost Plugin f\u00fcr WordPress<\/a>.<\/p>\n\n\n\n<p>JetPack ist eine kostenlose Plugin-Suite, die Ihnen alle Arten von Werkzeugen bietet, um die Geschwindigkeit und Leistung Ihrer Website zu optimieren. Bemerkenswert ist, dass Sie mit einem einfachen Klick das Laden nicht wesentlicher JavaScript verz\u00f6gern k\u00f6nnen.<\/p>\n\n\n\n<p>Von innerhalb WordPress, gehen Sie zu <i>Plugins &gt; Add New<\/i>.<\/p>\n\n\n\n<p>Dann suchen Sie nach Boost. Klicken Sie auf \u201eInstallieren\u201c und \u201eAktivieren\u201c.<\/p>\n\n\n\n<p>Sie sollten ein neues Men\u00fc in Ihrer linken Navigation sehen, das \u201eJetPack\u201c hei\u00dft.<\/p>\n\n\n\n<p>Gehen Sie zu <i>JetPack &gt; Boost<\/i>.<\/p>\n\n\n\n<p>Das Plugin wird Ihre Seite im Hintergrund rendern und Ihren Punktestand sowie Optionen zur Verbesserung anzeigen. Um nicht wesentliches JS zu verz\u00f6gern, klicken Sie einfach auf den Umschalter, um es zu aktivieren.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost.jpg\" alt=\"Screenshot des JetPack Boost Plugins f\u00fcr WordPress\" class=\"wp-image-40111 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Schlie\u00dflich: <b>Neustrukturierung von CSS (Styling).<\/b><\/p>\n\n\n\n<p>Wenn Sie mit CSS vertraut sind, wissen Sie, dass es \u00fcblich ist, alle Ihre Stile in einen gro\u00dfen Codeblock zu werfen und sie alle in einer Standarddatei wie style.css zu laden.<\/p>\n\n\n\n<p>Es ist nicht <i>falsch<\/i>. Es ist nur nicht sehr leistungsf\u00e4hig.<\/p>\n\n\n\n<p>Um FCP zu verbessern, k\u00f6nnen Sie Ihre CSS-Struktur optimieren:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Entfernen Sie alle Stile, die auf Inhalte anwendbar sind, die Teil des FCP sind (alles \u201eoberhalb der Falte\u201c).<\/li>\n\n\n\n<li>F\u00fcgen Sie diese Stile als Inline-Style-Block in den Header Ihrer Website ein.<\/li>\n\n\n\n<li>Laden Sie die verbleibenden Stile asynchron mit einer \u201ePreload\u201c-Funktion (unten dargestellt).<\/li>\n\n\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;preload&quot; href=&quot;styles.css&quot; as=&quot;style&quot; onload=&quot;this.onload=null;this.rel=&#039;stylesheet&#039;&quot;&gt;\n&amp;lt;noscript&gt;&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;&amp;lt;\/noscript&gt;\n<\/pre><\/div>\n\n\n<p>Alternativ, wenn Sie viele separate Stile f\u00fcr verschiedene Ger\u00e4te und Browser haben, m\u00f6chten Sie vielleicht Ihr Stylesheet in mehrere Dateien aufteilen und eine <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener\">Medienabfrage @import verwenden, um nur die entsprechenden Stile zu laden<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimizing-images-and-videos\">Optimierung von Bildern und Videos<\/h4>\n\n\n\n<p>Da FCP haupts\u00e4chlich darum geht, die ersten paar hundert Pixel oben auf der Seite zu optimieren, werden wir hier nicht zu sehr ins Detail gehen, was die Optimierung von Bildern und Videos betrifft.<\/p>\n\n\n\n<p>Aber wenn Ihr Header viele Bilder enth\u00e4lt oder Sie ein Video am Anfang der Seite haben, dann k\u00f6nnte es sich lohnen zu untersuchen, wie man diese Assets optimieren kann, um die anf\u00e4ngliche Ladegeschwindigkeit zu verbessern. Siehe unten f\u00fcr weitere Details zur Optimierung.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-a-content-delivery-network-cdn\">Verwendung eines Content Delivery Network (CDN)<\/h4>\n\n\n\n<p>Wie oben. CDNs k\u00f6nnen dabei helfen, Ihre gesamte Seite schneller zu laden, was der FCP eine kleine Beschleunigung verleiht. Siehe unten f\u00fcr weitere Details zur Verwendung eines CDN.<\/p>\n\n\n\n<h2 id=\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\" class=\"wp-block-heading\">#2 &#8211; First Input Delay (FID), Total Blocking Time (TBT) und Time to Interactive (TTI)<\/h2>\n\n\n\n<p>Jetzt sprechen wir \u00fcber Kompromisse.<\/p>\n\n\n\n<p>Wenn Sie nur auf den First Contentful Paint achten w\u00fcrden, k\u00f6nnten Sie denken, dass alles, was Sie tun m\u00fcssen, um Ihre PageSpeed Insights-Wertung zu verbessern, das Verschieben und sp\u00e4tere Laden aller Ihrer Ressourcen ist, um den oberen Teil Ihrer Website schnell zu laden.<\/p>\n\n\n\n<p>Aber wenn die Webseite <i>schnell zu laden scheint<\/i>, ich jedoch nicht damit interagieren kann, dann ist das auch eine schlechte Benutzererfahrung.<\/p>\n\n\n\n<p>Geben Sie ein: First Input Delay.<\/p>\n\n\n\n<p>First Input Delay ist auch mit den Metriken Total Blocking Time (TBT) und Time to Interactive (TTI) verbunden.<\/p>\n\n\n\n<p>Lassen Sie uns jedes davon auspacken und wie sie zusammenh\u00e4ngen, aber unterschiedlich sind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-input-delay\">Was ist First Input Delay?<\/h3>\n\n\n\n<p>First Input Delay (FID) ist die Zeit, die der Browser ben\u00f6tigt, um auf die erste Eingabe oder Interaktion eines Benutzers zu reagieren (z.B. das Klicken auf einen Link oder einen Knopf). Die Leistung Ihrer Website beeinflusst die Verz\u00f6gerung, da die meisten Interaktionen nicht verarbeitet werden k\u00f6nnen, w\u00e4hrend der Browser Code l\u00e4dt oder rendert.<\/p>\n\n\n\n<p>Mit anderen Worten, wenn Ihr Code lange braucht, um das Laden abzuschlie\u00dfen, wird es den Benutzer daran hindern, mit der Website zu interagieren, und es wird eine Verz\u00f6gerung oder Verz\u00f6gerungszeit geben zwischen dem Moment, in dem sie klicken und dem Zeitpunkt, zu dem die Aktion stattfindet.<\/p>\n\n\n\n<p>Diese Metrik wird in Millisekunden gemessen und basiert auf realen Benutzerdaten.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 100ms<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 100 &#8211; 300ms<\/li>\n\n\n\n<li>Schlecht: &gt; 300ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-interactive-tti\">Was ist Time to Interactive (TTI)?<\/h3>\n\n\n\n<p>Time to Interactive ist die Zeit, die ben\u00f6tigt wird, damit die Seite \u201ezuverl\u00e4ssig interaktiv\u201c wird.<\/p>\n\n\n\n<p>Google definiert \u201ezuverl\u00e4ssig interaktiv\u201c als den Zustand, wenn der Hauptthread des Browsers mindestens 5 Sekunden lang frei ist, wodurch die Seite vollst\u00e4ndig interaktiv f\u00fcr den Benutzer wird.<\/p>\n\n\n\n<p>Dies ist eine von Google&#8217;s Lighthouse gemessene Metrik, sie basiert also nicht auf tats\u00e4chlichen Nutzerdaten. Stattdessen wird sie unter spezifischen, kontrollierten Kriterien gemessen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-total-blocking-time-tbt\">Was ist die Gesamte Blockierungszeit (TBT)?<\/h3>\n\n\n\n<p>Total Blocking Time misst die gesamte Zeitspanne zwischen FCP und TTI.<\/p>\n\n\n\n<p>Mit anderen Worten, die Uhr beginnt erst zu laufen, wenn der obere Teil der Seite gerendert ist, und sie stoppt, nachdem die Seite als \u201ezuverl\u00e4ssig interaktiv\u201c betrachtet wird oder 5 Sekunden, nachdem der Hauptthread frei ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-first-input-delay-vs-time-to-interactive-vs-total-blocking-time\">Verz\u00f6gerung der ersten Eingabe vs Zeit bis zur Interaktivit\u00e4t vs Gesamtblockierungszeit<\/h3>\n\n\n\n<p>Diese drei Metriken sind verwandt, aber nicht identisch.<\/p>\n\n\n\n<p>First Input Delay basiert auf echten Benutzerdaten und Core Web Vitals. TTI und TBT werden durch den Leistungsbericht in PageSpeed Insights gemessen, unterst\u00fctzt von Googles Lighthouse.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"2560\" height=\"1920\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg\" alt=\"Verz\u00f6gerung der ersten Eingabe vs. Zeit bis zur Interaktivit\u00e4t vs. Gesamtblockierzeit\" class=\"wp-image-40112 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-300x225.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1024x768.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-768x576.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1536x1152.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-2048x1536.jpg 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-600x450.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1200x900.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-730x548.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1460x1095.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-784x588.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1568x1176.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-877x658.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1754x1316.jpg.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1920;\" \/><\/figure>\n\n\n\n<p>Bez\u00fcglich der Verbesserung der Leistung dieser drei Metriken sind die L\u00f6sungen ebenfalls \u00e4hnlich, aber nicht identisch. Insbesondere L\u00f6sungen zur Verbesserung des FID, die das Zur\u00fcckstellen des JavaScript-Renderings beinhalten, verbessern nicht TTI oder TBT, weil JavaScript dennoch geladen werden muss.<\/p>\n\n\n\n<p>Aber L\u00f6sungen wie das Entfernen, Minimieren und Cachen sollten helfen, alle drei Metriken zu verbessern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fid-tti-and-tbt\">Techniken zur Verbesserung von FID, TTI und TBT<\/h3>\n\n\n\n<p>Bisher hat das auf Ihrer Seite geladene JavaScript den gr\u00f6\u00dften Einfluss auf FID.<\/p>\n\n\n\n<p>Sie k\u00f6nnen sich JavaScript wie ein separates Gleis f\u00fcr den Browser vorstellen. W\u00e4hrend es JavaScript-Code rendert oder ausf\u00fchrt, kann es keine anderen Aufgaben erledigen oder auf Eingaben wie das Klicken eines Benutzers auf einen Link reagieren (der \u201eHauptthread\u201c muss frei sein, damit der Browser reagieren kann).<\/p>\n\n\n\n<p>Je l\u00e4nger es dauert, das JavaScript beim ersten Laden der Seite zu lesen und auszuf\u00fchren, desto l\u00e4nger wird die Verz\u00f6gerung sein, wenn der Benutzer beginnt, mit der Seite zu interagieren.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-reduce-the-impact-of-third-party-code\">Reduzieren Sie die Auswirkungen von Drittanbieter-Code<\/h4>\n\n\n\n<p>Ein \u00fcblicher Verd\u00e4chtiger f\u00fcr langsame Eingabeantworten ist, dass die Website immer noch alle Arten von Drittanbieter-Tools, Widgets und Apps auf Ihrer Website l\u00e4dt.<\/p>\n\n\n\n<p>Jedes Mal, wenn Sie Dinge wie Facebook, Drift, Intercom, HotJar oder andere Drittanbieter-Tools und -Dienste zu Ihrer Website hinzuf\u00fcgen, wird ein wenig Code hinzugef\u00fcgt, der geladen und auf der Seite dargestellt werden muss.<\/p>\n\n\n\n<p>Wenn Sie viele dieser Dienste haben, kann es lange dauern, sie alle zu laden.<\/p>\n\n\n\n<p>Noch schlimmer ist, dass Sie keine Kontrolle dar\u00fcber haben, wie schnell diese Ressourcen auf Ihrer Website geladen werden. Wenn der Browser also versucht, JavaScript von einer Website eines Drittanbieters auf einem langsamen Server abzurufen, k\u00f6nnte dies erhebliche Verz\u00f6gerungen verursachen.<\/p>\n\n\n\n<p>Lassen Sie uns das reparieren.<\/p>\n\n\n\n<p>Option #1: <b>L\u00f6schen Sie alle ungenutzten Drittanbieter-Tools.<\/b><\/p>\n\n\n\n<p>Es ist wahrscheinlich, dass Sie im Laufe der Jahre alle m\u00f6glichen Dienste, Plugins und Werkzeuge auf Ihrer Website installiert haben. Und Sie verwenden wahrscheinlich nur einige davon.<\/p>\n\n\n\n<p>Jetzt ist der Zeitpunkt, diejenigen zu l\u00f6schen oder zu deinstallieren, die Sie nicht aktiv verwenden.<\/p>\n\n\n\n<p>Um eine vollst\u00e4ndige Liste des von Drittanbietern geladenen JavaScripts auf Ihrer Seite zu erhalten, beziehen Sie sich auf Ihren PageSpeed Insights-Bericht oder <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\">f\u00fchren Sie einen separaten Lighthouse-Bericht durch<\/a>.<\/p>\n\n\n\n<p>Sie sollten eine Liste aller geladenen Skripte und deren Ladezeit sehen:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"960\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools.jpg\" alt=\"L\u00f6schen Sie alle ungenutzten Drittanbieter-Tools. Wahrscheinlich haben Sie im Laufe der Jahre alle m\u00f6glichen Dienste, Plugins und Tools auf Ihrer Website installiert.\" class=\"wp-image-40113 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-300x180.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1024x614.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-768x461.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1536x922.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-600x360.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1200x720.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-730x438.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1460x876.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-784x470.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1568x941.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-877x526.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/960;\" \/><\/figure>\n\n\n\n<p>Mit diesen Informationen k\u00f6nnen Sie nun entscheiden, welche davon kritisch sind und welche sicher entfernt werden k\u00f6nnen.<\/p>\n\n\n\n<p>Je nachdem, welche Dienste Sie l\u00f6schen m\u00f6chten, m\u00fcssen Sie m\u00f6glicherweise den Code manuell von Ihrer Website entfernen, ein WordPress-Plugin deinstallieren oder Code entfernen, der \u00fcber den Google Tag Manager hinzugef\u00fcgt wurde, um die Seitenleistung zu verbessern.<\/p>\n\n\n\n<p>Option #2: <b>JavaScript asynchron laden<\/b>.<\/p>\n\n\n\n<p>Es sei denn, es ist wesentlich f\u00fcr das Rendering des FCP, ist es fast immer ratsam, Skripte von Drittanbietern asynchron zu rendern. Wenn Sie wichtiges JavaScript haben, das FID verlangsamt, aber Sie es nicht entfernen k\u00f6nnen, dann <a href=\"https:\/\/web.dev\/efficiently-load-third-party-javascript\/\" target=\"_blank\" rel=\"noopener\">versuchen Sie, es stattdessen asynchron zu laden<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-javascript-execution-time\">Minimierung der Ausf\u00fchrungszeit von JavaScript<\/h4>\n\n\n\n<p>Code von Drittanbietern kann ein Schurke sein, aber was ist mit unserem eigenen Code, den wir auf unserer Website verwendet haben?<\/p>\n\n\n\n<p>Es ist wahrscheinlich nicht unschuldig an der langsamen Ladezeit.<\/p>\n\n\n\n<p>Wenn Sie nicht wesentliches JavaScript haben, das Sie zu Ihrer eigenen Website hinzugef\u00fcgt haben, m\u00f6chten Sie es vielleicht entfernen.<\/p>\n\n\n\n<p>Wenn Sie den PageSpeed Insights-Bericht betrachten, sollten Sie einen Abschnitt sehen, der ungenutztes JavaScript erw\u00e4hnt:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript.jpg\" alt=\"Ein Abschnitt ungenutzten JavaScripts im PSI-Bericht\" class=\"wp-image-40114 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1536x672.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-730x319.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1460x639.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1568x686.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/700;\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wenn das JavaScript zu 100% ungenutzt ist, erw\u00e4gen Sie, es zu l\u00f6schen<\/li>\n\n\n\n<li>Wenn das JavaScript auf anderen Seiten verwendet wird, erw\u00e4gen Sie, es nur selektiv auf den Seiten zu liefern, auf denen es notwendig ist (auch bekannt als &#8220;<a href=\"https:\/\/web.dev\/reduce-javascript-payloads-with-code-splitting\/\" target=\"_blank\" rel=\"noopener\">Code-Splitting<\/a>&#8220;)<\/li>\n\n\n<\/ul>\n\n\n\n<p>Sie k\u00f6nnen auch Optionen zur Verbesserung der Ladezeit von JavaScript erkunden.<\/p>\n\n\n\n<p>Der h\u00e4ufigste Weg, die Ladezeit zu beschleunigen, besteht darin, die Dateigr\u00f6\u00dfe zu reduzieren. Und bei JavaScript gibt es zwei Hauptstrategien:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minimierung \u2013 Entfernen aller Leerzeichen, Zeilenumbr\u00fcche usw. im Code<\/li>\n\n\n\n<li>Kompression \u2013 \u201eZippen\u201c der Datei, um sie zu verkleinern<\/li>\n\n\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/web.dev\/reduce-network-payloads-using-text-compression\/\" target=\"_blank\" rel=\"noopener\">Jedes von diesen k\u00f6nnte helfen, Ihren Code leistungsf\u00e4higer zu machen<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-prioritizing-visible-content\">Sichtbaren Inhalt priorisieren<\/h4>\n\n\n\n<p>Wenn Sie sich haupts\u00e4chlich darauf konzentrieren m\u00f6chten, die FID zu verbessern, sollten Sie vielleicht darauf abzielen, JavaScript und andere Seitenelemente zu verz\u00f6gern, um sich ausschlie\u00dflich auf den Inhalt innerhalb des ersten sichtbaren Inhalts zu konzentrieren.<\/p>\n\n\n\n<p>Schlie\u00dflich k\u00f6nnen Benutzer nicht mit Elementen interagieren, die nicht gerendert wurden.<\/p>\n\n\n\n<h2 id=\"h-3-largest-contentful-paint-lcp\" class=\"wp-block-heading\">#3 &#8211; Gr\u00f6\u00dfter inhaltsvoller Anstrich (LCP)<\/h2>\n\n\n\n<p>Wenn FCP die 0 auf 60 Zeit Ihres Autos ist, dann ist LCP seine Viertelmeile.<\/p>\n\n\n\n<p>Okay, f\u00fcr diejenigen, die sich nicht so gut auskennen, bedeutet das, dass LCP misst, wie schnell der Benutzer den \u201eHaupt\u201c-Inhalt auf Ihrer Webseite sehen kann.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-largest-contentful-paint\">Was ist Largest Contentful Paint?<\/h3>\n\n\n\n<p>Largest Contentful Paint (LCP) ist eine Kennzahl, die misst, wie lange es dauert, bis der gr\u00f6\u00dfte Inhaltsblock auf einer Seite f\u00fcr den Benutzer sichtbar ist. Im Gegensatz zu FCP betrachtet es die Ladezeit f\u00fcr den gr\u00f6\u00dften Block von Bild oder Text auf der Seite, unabh\u00e4ngig von seiner Position oder Reihenfolge.<\/p>\n\n\n\n<p>Es misst den gr\u00f6\u00dften Inhaltsblock basierend auf seinen Abmessungen innerhalb des Anzeigebereichs des Benutzers. Mit anderen Worten, wenn es ein einzelnes &lt;div&gt; mit viel Text oder ein einzelnes Bild gibt, das einen gro\u00dfen Teil des Bildschirms einnimmt, kann dies als der gr\u00f6\u00dfte Inhaltsblock angesehen werden und zur Berechnung des LCP verwendet werden.<\/p>\n\n\n\n<p>Es wird in Sekunden gemessen und basiert auf realen Nutzerdaten (oder \u201eim Feld\u201c):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 2,5s<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 2,5 &#8211; 4s<\/li>\n\n\n\n<li>Schlecht: &gt; 4s<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-lcp\">Techniken zur Verbesserung des LCP<\/h3>\n\n\n\n<p>Bevor Sie beginnen, Ihre LCP zu optimieren, m\u00f6chten Sie vielleicht herausfinden, welcher Teil Ihrer Seite als der gr\u00f6\u00dfte Inhaltsblock betrachtet wird.<\/p>\n\n\n\n<p>Dies kann Ihnen helfen, Ihre Bem\u00fchungen zur Leistungsverbesserung auf einer bestimmten Seite oder Vorlage zu konzentrieren.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"750\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost.jpg\" alt=\"Screenshot der DreamHost-Startseite\" class=\"wp-image-40115 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-300x141.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1024x480.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-768x360.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1536x720.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-600x281.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1200x563.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-730x342.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1460x684.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-784x368.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1568x735.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-877x411.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/750;\" \/><\/figure>\n\n\n\n<p>Sie k\u00f6nnen dies tun, indem Sie <a href=\"https:\/\/www.twicpics.com\/blog\/how-to-find-the-lcp-element-a-complete-guide\" target=\"_blank\" rel=\"noopener\">Chrome DevTools in Ihrem Browser verwenden, um die LCP-Ressource<\/a> auf einer bestimmten Seite zu identifizieren.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-loading-priority\">Lade-Priorit\u00e4t optimieren<\/h4>\n\n\n\n<p>In den obigen Abschnitten haben wir Optionen wie die Verwendung von asynchronen oder Verz\u00f6gerungsstrategien besprochen, um das Rendern wichtiger Teile der Seite zu beschleunigen.<\/p>\n\n\n\n<p>Sie sollten diese hier als erste Option in Betracht ziehen.<\/p>\n\n\n\n<p>Das Entfernen oder Verschieben von renderblockierenden Ressourcen kann dazu beitragen, dass der Hauptinhalt schneller geladen wird. Beachten Sie jedoch, dass, wenn diese Ressourcen das Layout oder die Struktur der Seite erheblich ver\u00e4ndern, dies tats\u00e4chlich \u00e4ndern k\u00f6nnte, welcher Block als der gr\u00f6\u00dfte angesehen wird und LCP verlangsamen k\u00f6nnte, anstatt es zu verbessern!<\/p>\n\n\n\n<p>Sie k\u00f6nnen diese Strategie noch einen Schritt weiter gehen. Insbesondere, wenn der gr\u00f6\u00dfte Inhaltsblock ein Bild ist.<\/p>\n\n\n\n<p>Sie k\u00f6nnen das als <a href=\"https:\/\/web.dev\/apply-instant-loading-with-prpl\/\" target=\"_blank\" rel=\"noopener\">PRPL<\/a> (Preload, Render, Precache, Lazy load) bekannte Framework anwenden, um gezielt Ressourcen auf Ihrer Seite anzusprechen und diese zuerst in der Warteschlange zu laden. Wenn dieses Bild der gr\u00f6\u00dfte Inhaltsblock ist, wird dies Ihre LCP-Bewertung erheblich verbessern.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Lazy Loading<\/h3>\n    <p>Lazy Loading ist ein Entwurfsmuster, das in der Softwareentwicklung verwendet wird, um die Leistung zu verbessern und den Ressourcenverbrauch zu reduzieren. Es beinhaltet das Verschieben der Initialisierung oder des Ladens eines Objekts, bis es ben\u00f6tigt wird.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/lazy-loading\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Zus\u00e4tzlich zu den asynchronen Renderingoptionen bietet dieses Framework weitere Strategien zur Optimierung des Renderingpfads.<\/p>\n\n\n\n<p>Eine der einfachsten Methoden ist das Vorladen kritischer Ressourcen.<\/p>\n\n\n\n<p>Sie k\u00f6nnen dies tun, indem Sie einfach einen kleinen Ausschnitt zu dem Header Ihrer Website hinzuf\u00fcgen, der dem Browser mitteilt, kritische Bilder, Schriftarten, Stile oder Skripte zu priorisieren, die f\u00fcr Ihren gr\u00f6\u00dften Inhaltsbereich entscheidend sein k\u00f6nnten.<\/p>\n\n\n\n<p>Beispielsweise, wenn Sie ein Heldenbild haben, das der gr\u00f6\u00dfte Block auf der Seite ist, dann m\u00f6chten Sie vielleicht dieses Bild auf jeder Seite mit einem Schnipsel wie diesem vorladen:<\/p>\n\n\n\n<p><code>&lt;link rel=\"preload\" as=\"image\" href=\"image1.png\"&gt;<\/code><\/p>\n\n\n\n<p>Dies weist den Browser an, mit dem Laden dieser Ressource sofort zu beginnen, bevor sie auf der Seite entdeckt wird.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-file-resource-size\">Dateigr\u00f6\u00dfe (Ressource) optimieren<\/h4>\n\n\n\n<p>Lassen Sie uns nun \u00fcber die Dateigr\u00f6\u00dfe sprechen.<\/p>\n\n\n\n<p>Gr\u00f6\u00dfere Dateien ben\u00f6tigen l\u00e4ngere Ladezeiten. Dies gilt f\u00fcr Bilder, Skripte, Videos, Schriftarten und alles andere auf Ihrer Seite, das als Teil des gr\u00f6\u00dften Inhaltsblocks geladen werden k\u00f6nnte.<\/p>\n\n\n\n<p>Eine M\u00f6glichkeit, Ihre LCP-Bewertung zu verbessern, ist die Optimierung der Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n<p>Strategien zur Optimierung der Dateigr\u00f6\u00dfe h\u00e4ngen vom Format der Datei ab.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-images\">Bilder optimieren<\/h5>\n\n\n\n<p>H\u00e4ufig erzielen Sie gro\u00dfe Vorteile, indem Sie Ihre Bilder komprimieren und optimieren.<\/p>\n\n\n\n<p>Beginnen Sie mit der Bewertung dieser Bereiche f\u00fcr Verbesserungen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Format<\/b>: Verschiedene Bildformate bieten unterschiedliche Kompressionsniveaus und Qualit\u00e4t. F\u00fcr die meisten Webanwendungsf\u00e4lle sind JPEG, PNG und WebP die g\u00e4ngigsten Formate.\n<ul class=\"wp-block-list\">\n<li>JPEG ist in der Regel am besten f\u00fcr Fotos geeignet.<\/li>\n\n\n\n<li>PNG eignet sich in der Regel am besten f\u00fcr gestaltete Bilder mit Text oder scharfen Kanten.<\/li>\n\n\n\n<li>WebP ist ein effizienteres Format, das eine bessere Kompression bietet, ohne die Qualit\u00e4t zu beeintr\u00e4chtigen, aber es wird m\u00f6glicherweise nicht von allen Browsern unterst\u00fctzt.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Kompression<\/b>: In vielen F\u00e4llen k\u00f6nnen Sie die Dateigr\u00f6\u00dfe eines Bildes komprimieren, ohne viel oder \u00fcberhaupt keine visuelle Qualit\u00e4t zu verlieren.\n<ul class=\"wp-block-list\">\n<li>Online-Bildkompressionstools: <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a> (f\u00fcr PNG und JPEG), <a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\">Squoosh<\/a> (f\u00fcr WebP).<\/li>\n\n\n\n<li>WordPress-Bildkompressionstools: <a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener\">ShortPixel<\/a>, <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\">Imagify<\/a>.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Bildgr\u00f6\u00dfe<\/b>: Wenn Sie rohe Bilder oder Fotos auf Ihre Webseite hochladen und dann auf Ihrer Seite einf\u00fcgen, sind sie wahrscheinlich viel gr\u00f6\u00dfer, als sie sein m\u00fcssen, was die Ladezeit verlangsamt.\n<ul class=\"wp-block-list\">\n<li>Passen Sie Ihre Bilder an und laden Sie nur die Gr\u00f6\u00dfe hoch, die Sie ben\u00f6tigen.<\/li>\n\n\n\n<li>Verwenden Sie ein <a href=\"https:\/\/wordpress.org\/plugins\/resize-image-after-upload\/\" target=\"_blank\" rel=\"noopener\">WordPress-Plugin, um Bilder automatisch zu skalieren<\/a>, wenn sie hochgeladen werden.<\/li>\n\n\n\n<li>Verwenden Sie die Attribute &#8220;srcset&#8221; und &#8220;sizes&#8221; im &#8220;img&#8221;-Tag, um <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" target=\"_blank\" rel=\"noopener\">mehrere Bildquellen und Gr\u00f6\u00dfen anzugeben<\/a>. Der Browser w\u00e4hlt automatisch das am besten geeignete Bild basierend auf der Bildschirmgr\u00f6\u00dfe und Aufl\u00f6sung des Benutzers aus.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-scripts-and-styles\">Skripte und Styles optimieren<\/h5>\n\n\n\n<p>Alle Ressourcen, die zum Rendern des gr\u00f6\u00dften Inhaltsblocks erforderlich sind, m\u00fcssen vollst\u00e4ndig geladen sein, bevor der LCP berechnet wird.<\/p>\n\n\n\n<p>Dies umfasst Skripte und Stile, die Ihren gr\u00f6\u00dften Inhaltsblock beeinflussen.<\/p>\n\n\n\n<p>Mit einigen der Techniken, die wir zuvor besprochen haben, k\u00f6nnen Sie LCP verbessern, indem Sie die Dateigr\u00f6\u00dfe und den Renderpfad f\u00fcr JavaScript, CSS usw. optimieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dateien verkleinern.<\/li>\n\n\n\n<li>Code-Aufteilung, um die Dateigr\u00f6\u00dfe zu reduzieren.<\/li>\n\n\n\n<li>Styles und Skripte in-line einf\u00fcgen.<\/li>\n\n\n\n<li>Vorladen oder Cache.<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-videos\">Videos optimieren<\/h5>\n\n\n\n<p>Wenn Ihre LCP-Ressource ein Video sein k\u00f6nnte, sollten Sie M\u00f6glichkeiten zur Optimierung von Videos in Betracht ziehen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hosten Sie das Video auf YouTube oder einem anderen Dienst mit einem schnellen CDN anstatt es direkt hochzuladen.<\/li>\n\n\n\n<li>Komprimieren Sie die Videodateigr\u00f6\u00dfe.<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-fonts\">Schriftarten optimieren<\/h5>\n\n\n\n<p>Wenn die fragliche LCP-Ressource ein Text ist und dieser Text eine importierte Schriftart verwendet (z.B. von Google Fonts), dann k\u00f6nnen Sie optimieren, indem Sie die Ladegeschwindigkeit der Schriftartdatei verbessern.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verwenden Sie nur <a href=\"http:\/\/caniuse.com\/#feat=woff2\" target=\"_blank\" rel=\"noopener\">WOFF und WOFF2.0 Dateischriften<\/a> f\u00fcr das Web.<\/li>\n\n\n\n<li>Laden Sie die Schriftdatei vorab mit einem Link-Rel-Tag (siehe oben).<\/li>\n\n\n\n<li>Erkunden Sie weitere Optionen zur <a href=\"https:\/\/web.dev\/reduce-webfont-size\/\" target=\"_blank\" rel=\"noopener\">weiteren Reduzierung der Ladezeit von Schriftdateien<\/a>.<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-a-cdn\">Ein CDN implementieren<\/h4>\n\n\n\n<p>Denken Sie an ein CDN wie an eine Fahrgemeinschaftsspur auf der Autobahn.<\/p>\n\n\n\n<p>Es hilft dem Browser, Ressourcen schneller herunterzuladen, indem sie <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/ein-umfassender-leitfaden-zum-website-caching\/\" target=\"_blank\" rel=\"noopener\">weltweit auf Servern zwischengespeichert werden<\/a>.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN ist die Abk\u00fcrzung f\u00fcr u201cContent Delivery Networku201d. Es bezieht sich auf ein geografisch verteiltes Netzwerk von Webservern (und deren Datenzentren). Die Einheiten, die ein CDN bilden, arbeiten zusammen, um eine schnelle Inhaltslieferung \u00fcber das Internet sicherzustellen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Das Wichtigste, was Sie wissen m\u00fcssen, ist dies: Die Implementierung eines CDN kann die Leistung der Website durchgehend erheblich verbessern. Und besonders bei LCP kann es helfen, Bilder, Skripte und andere Ressourcen schneller zu rendern als der normale Server Ihres Webhosts.<\/p>\n\n\n\n<p>Um ein CDN zu implementieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Einen CDN-Anbieter ausw\u00e4hlen<\/b>: Es gibt mehrere beliebte CDN-Anbieter auf dem Markt, wie zum Beispiel <a href=\"http:\/\/cloudflare.com\" target=\"_blank\" rel=\"noopener\">Cloudflare<\/a>, <a href=\"https:\/\/aws.amazon.com\/cloudfront\/\" target=\"_blank\" rel=\"noopener\">Amazon CloudFront<\/a>, <a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noopener\">Google Cloud CDN<\/a> und <a href=\"https:\/\/www.fastly.com\/\" target=\"_blank\" rel=\"noopener\">Fastly<\/a>.<\/li>\n\n\n\n<li><b>Ein Konto einrichten und den CDN konfigurieren<\/b>: Nachdem Sie einen CDN-Anbieter ausgew\u00e4hlt haben, registrieren Sie sich f\u00fcr ein Konto und konfigurieren Sie die CDN-Einstellungen. Dies umfasst in der Regel die Erstellung einer CDN-Zone, die Konfiguration von Caching-Regeln und die Einrichtung einer SSL\/TLS-Verschl\u00fcsselung.<\/li>\n\n\n\n<li><b>Den CDN mit Ihrer Website integrieren<\/b>: Um den CDN mit Ihrer Website zu integrieren, m\u00fcssen Sie die URLs des Inhalts, den Sie \u00fcber den CDN bereitstellen m\u00f6chten, aktualisieren. Dies beinhaltet das \u00c4ndern der Nameservers, sodass sie auf den CDN anstatt auf Ihren normalen Server verweisen.<\/li>\n\n\n\n<li><b>Den CDN testen<\/b>: Nachdem Sie den CDN mit Ihrer Website integriert haben, f\u00fchren Sie Tests durch, um sicherzustellen, dass der Inhalt \u00fcber den CDN bereitgestellt wird und dass die LCP-Leistung verbessert wurde.<\/li>\n\n\n<\/ul>\n\n\n\n<p>F\u00fcr eine detailliertere Anleitung, schauen Sie sich unseren Artikel \u00fcber <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-zur-verwendung-eines-cdn-mit-wp\/\" target=\"_blank\" rel=\"noopener\">die Nutzung eines CDN mit WordPress<\/a> an.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-improve-server-performance\">Serverleistung verbessern<\/h4>\n\n\n\n<p>Zuletzt, aber sicherlich nicht am wenigsten, spielt auch die Serverleistung Ihres <a href=\"https:\/\/www.dreamhost.com\/de\/\" target=\"_blank\" rel=\"noopener\">Webhosts<\/a> eine Schl\u00fcsselrolle f\u00fcr das LCP.<\/p>\n\n\n\n<p>Wir werden dies ausf\u00fchrlich behandeln, wenn wir in TTFB eintauchen; es gen\u00fcgt zu sagen, dass der Browser Ressourcen nur so schnell herunterladen kann, wie es der Server erlaubt. Wenn es lange dauert, bis der Server antwortet, wird es auch lange dauern, bis die Ressource geladen ist.<\/p>\n\n\n\n<h2 id=\"h-4-cumulative-layout-shift-cls\" class=\"wp-block-heading\">#4 &#8211; Kumulative Layoutverschiebung (CLS)<\/h2>\n\n\n\n<p>Wussten Sie, dass Websites tanzen k\u00f6nnen?<\/p>\n\n\n\n<p>Nun, sozusagen. Und nicht sehr gut.<\/p>\n\n\n\n<p>Genauer gesagt, sie k\u00f6nnen sich verschieben. Die Elemente auf der Seite bewegen sich, w\u00e4hrend verschiedene Bilder, Skripte, Stile und Texte gerendert werden, bis die Seite vollst\u00e4ndig geladen ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-cumulative-layout-shift\">Was ist Cumulative Layout Shift?<\/h3>\n\n\n\n<p>Kumulative Layoutverschiebung misst, wie weit Bilder, Texte, Schaltfl\u00e4chen und andere Elemente auf Ihrer Seite auf dem Bildschirm verschoben werden, w\u00e4hrend der Benutzer darauf wartet, dass die Seite geladen wird. Ein niedrigerer CLS wird als besser f\u00fcr die Benutzererfahrung angesehen.<\/p>\n\n\n\n<p>Das ist nicht wirklich \u00fcberraschend, wenn man die eigenen Surf-Gewohnheiten betrachtet.<\/p>\n\n\n\n<p>Wenn Sie das Gef\u00fchl haben, dass Sie beim Versuch, einen Link anzuklicken, der immer weiter nach unten rutscht, Wackeldackel spielen, werden Sie wahrscheinlich frustriert sein und die Seite ganz verlassen. (Hallo, Absprungrate!)<\/p>\n\n\n\n<p>Diese Erfahrung kann besonders \u00e4rgerlich sein, wenn man auf einem mobilen Ger\u00e4t surft.<\/p>\n\n\n\n<p>CLS ist Felddaten von echten Benutzern und wird als Punktzahl gemessen, die den \u201eImpact-Fraktion\u201c (welcher Prozentsatz der Elemente im Viewport verschoben wurde) und \u201eDistanz-Fraktion\u201c (wie weit sie sich relativ zur Gesamtgr\u00f6\u00dfe des Bildschirms bewegt haben) kombiniert.<\/p>\n\n\n\n<p>Es gibt auch eine spezielle Bezeichnung f\u00fcr \u201eerwartete Verschiebungen\u201c (z.B. das Klicken auf einen Button, der einen neuen Abschnitt auf der Seite \u00f6ffnet) und \u201eunerwartete Verschiebungen\u201c, die nicht durch Benutzereingaben ausgel\u00f6st werden.<\/p>\n\n\n\n<p>CLS wird gemessen, indem der Einflussfaktor und der Distanzfaktor multipliziert werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 0.1<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 0.1 &#8211; 0.25<\/li>\n\n\n\n<li>Schlecht: &gt; 0.25<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-cls\">Techniken zur Verbesserung von CLS<\/h3>\n\n\n\n<p>Die Wahrscheinlichkeit ist hoch, dass, wenn Sie nicht absichtlich versuchen, Ihre Benutzer zu verwirren, indem Sie Dinge auf Ihrer Seite verschieben, Ihr CLS standardm\u00e4\u00dfig ziemlich niedrig ist, aber es gibt einige unschuldige Fehler, die Sie machen k\u00f6nnen und die es wert sind, behoben zu werden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-define-the-sizes-of-all-images-and-videos\">Definieren Sie die Gr\u00f6\u00dfen aller Bilder und Videos<\/h4>\n\n\n\n<p>Eine kleine Sache mit gro\u00dfer Wirkung. Wenn Sie die Gr\u00f6\u00dfe der Bilder und Videos auf Ihrer Seite nicht explizit festlegen, kann dies zu einer Verschiebung des Layouts f\u00fchren, da der Browser nicht sicher ist, wie viel Platz f\u00fcr diese Ressource reserviert werden soll.<\/p>\n\n\n\n<p>Dies ist so einfach wie das Hinzuf\u00fcgen des Attributs f\u00fcr ein beliebiges Bild oder Video auf der Seite:<\/p>\n\n\n\n<p><code>&lt;img src=\"hero_image.jpg\" width=\"400\" height=\"400\"&gt;<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-avoid-ads-and-pop-ups-that-cause-layout-shifts\">Vermeiden Sie Werbung und Pop-ups, die Layoutverschiebungen verursachen<\/h4>\n\n\n\n<p>Sie m\u00fcssen die Rechnungen irgendwie bezahlen, aber vermeiden Sie es, Pop-Ins oder Pop-Ups zu verwenden, die das Seitenlayout verschieben. Wenn nichts anderes, verwenden Sie eine <a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" target=\"_blank\" rel=\"noopener\">CSS-Aspect-Ratio-Box<\/a>, um Platz f\u00fcr Anzeigen oder andere Nachrichten zu \u201ereservieren\u201c, die in die Seite geladen werden, w\u00e4hrend der Benutzer interagiert.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-choose-animations-wisely\">W\u00e4hlen Sie Animationen weise<\/h4>\n\n\n\n<p>Mit modernem CSS und JavaScript k\u00f6nnen wir alle Arten von coolen und ausgefallenen Animationen auf der Seite implementieren.<\/p>\n\n\n\n<p>Aber aus der Perspektive des Benutzers hat Funktion immer Vorrang vor Form.<\/p>\n\n\n\n<p>Entfernen Sie alle Animationen, die Layout\u00e4nderungen ausl\u00f6sen, da jede Zustands\u00e4nderung zur gesamten Layoutverschiebung beitragen und Ihre CLS-Bewertung beeintr\u00e4chtigen kann.<\/p>\n\n\n\n<h2 id=\"h-5-interaction-to-next-paint-inp\" class=\"wp-block-heading\">#5 &#8211; Interaktion bis zum n\u00e4chsten Anstrich (INP)<\/h2>\n\n\n\n<p>Wie Jay-Z einmal sagte: \u201eIch habe keine Geduld. Und ich hasse es zu warten.\u201c<\/p>\n\n\n\n<p><i>Nicht wahr?<\/i><\/p>\n\n\n\n<p>Obwohl wir bereits die Eingabeverz\u00f6gerung bei der ersten Interaktion mit Ihrer Website (FID) behandelt haben, ist INP eine umfassendere Metrik, die die Gesamtreaktionsf\u00e4higkeit Ihrer Website bewertet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-interaction-to-next-paint\">Was ist Interaction to Next Paint?<\/h3>\n\n\n\n<p>Interaction to Next Paint misst, wie lange es dauert, bis das n\u00e4chste \u201ePaint\u201c oder aktualisierte Bild auf Ihrer Website erscheint, nachdem der Benutzer mit einem Button oder einem Seitenelement interagiert hat. Es misst die Gesamtreaktionsf\u00e4higkeit der Website und wie fl\u00fcssig die Interaktionen wirken.<\/p>\n\n\n\n<p>Dies ist besonders wichtig f\u00fcr Web-Apps, die eine erhebliche Benutzerinteraktion erfordern und tr\u00e4ge und verwirrend wirken k\u00f6nnen, wenn es eine zu lange Eingabeverz\u00f6gerung oder Verz\u00f6gerung zwischen der Aktion und dem Ergebnis gibt.<\/p>\n\n\n\n<p>INP wird in Millisekunden gemessen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 200ms<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 200 &#8211; 500ms<\/li>\n\n\n\n<li>Schlecht: &gt; 500ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-inp\">Techniken zur Verbesserung von INP<\/h3>\n\n\n\n<p>Wenn Sie INP-Probleme haben, tut es mir leid f\u00fcr Sie, mein Sohn. (Entschuldigung, das ist ein anderer Jay-Z-Text.)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg\" alt=\"Zerlegung der Interaktion bis zum n\u00e4chsten Bildaufbau\" class=\"wp-image-40116 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-877x439.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n\n<p>Gl\u00fccklicherweise k\u00f6nnen Sie die meisten Probleme in drei Hauptprobleme unterteilen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Eingabeverz\u00f6gerung<\/li>\n\n\n\n<li>Interaktionsverz\u00f6gerung<\/li>\n\n\n\n<li>Pr\u00e4sentationsverz\u00f6gerung<\/li>\n\n\n<\/ol>\n\n\n\n<p>Dies ist der wirklich schwierige Teil; Um das Problem genauer zu diagnostizieren, m\u00fcssen Sie entweder <a href=\"https:\/\/web.dev\/optimize-inp\/\" target=\"_blank\" rel=\"noopener\">den Leistungsprofiler von Google Chrome oder die Aufnahmefunktion von Lighthouse verwenden<\/a>.<\/p>\n\n\n\n<p>Hier k\u00f6nnen Sie eine einzelne Interaktion vergr\u00f6\u00dfern und sehen, wo die l\u00e4ngste Verz\u00f6gerung auftritt.<\/p>\n\n\n\n<p>Von dort aus k\u00f6nnen wir nach einigen L\u00f6sungen f\u00fcr jedes einzelne suchen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-input-delay\">Behebung der Eingabeverz\u00f6gerung<\/h4>\n\n\n\n<p>Die Eingabeverz\u00f6gerung wird verursacht, wenn der Hauptthread zum Zeitpunkt der Interaktion besch\u00e4ftigt ist. Das bedeutet, dass etwas anderes passiert, wenn der Klick oder Tastendruck stattfindet.<\/p>\n\n\n\n<p>Um dies zu beheben, sollten Sie untersuchen, welche Prozesse als Teil des Hauptthreads ausgef\u00fchrt werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entfernen oder optimieren Sie JavaScript von Drittanbietern.<\/li>\n\n\n\n<li>Verwenden Sie <a href=\"https:\/\/web.dev\/off-main-thread\/\" target=\"_blank\" rel=\"noopener\">Web Workers<\/a>, um JavaScript au\u00dferhalb des Hauptthreads auszuf\u00fchren.<\/li>\n\n\n\n<li>Verwenden Sie Listener wie isInputPending(), um den Hauptthread freizugeben (dies ist die fortschrittlichste Option.)<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-interaction-delay\">Behebung der Interaktionsverz\u00f6gerung<\/h4>\n\n\n\n<p>Wenn die Interaktion selbst der Schuldige ist \u2013 das bedeutet, es dauert lange, bis die Interaktion tats\u00e4chlich ausgef\u00fchrt wird \u2013 dann m\u00fcssen Sie den Code f\u00fcr diese Eingabe \u00fcberarbeiten.<\/p>\n\n\n\n<p>Die Hauptempfehlung hier ist, nicht wesentliche Berechnungen zu verschieben.<\/p>\n\n\n\n<p>Mit anderen Worten, f\u00fchren Sie den Teil der Interaktion aus, den der Benutzer sofort sieht und erwartet. F\u00fchren Sie dann nach dem Aktualisieren des Rahmens alle anderen Berechnungen oder Interaktionen hinter den Kulissen durch.<\/p>\n\n\n\n<p>Nehmen wir an, dass der Benutzer einen Knopf dr\u00fcckt, der ein Fenster \u00f6ffnet und gleichzeitig ein Ereignis protokolliert, das zeigt, dass sie den Knopf gedr\u00fcckt haben. Sie w\u00fcrden wollen, dass Ihr Code zuerst das Fenster \u00f6ffnet, um die Interaktion aus der Sicht des Benutzers \u201eabzuschlie\u00dfen\u201c.<\/p>\n\n\n\n<p>Dann, nachdem die Interaktion abgeschlossen ist, protokollieren Sie das Ereignis, das der Benutzer nicht direkt sehen oder erleben wird.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-presentation-delay\">Behebung der Pr\u00e4sentationsverz\u00f6gerung<\/h4>\n\n\n\n<p>Es ist m\u00f6glich, dass die Eingabe und die Interaktion beide ziemlich schnell stattfinden, aber es dauert lange, bis der Browser die Darstellung mit dem neuen Frame aktualisiert.<\/p>\n\n\n\n<p>Leider gibt es nicht <i>viel<\/i>, was bei diesem Refactoring helfen k\u00f6nnte.<\/p>\n\n\n\n<p>Aber einige Dinge k\u00f6nnten eine l\u00e4ngere als normale Verz\u00f6gerung verursachen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00dcberm\u00e4\u00dfiger Gebrauch von <b>requestAnimationFrame()<\/b>. Jedes Mal, wenn diese Funktion aufgerufen wird, entsteht eine kleine Verz\u00f6gerung. Suchen Sie nach F\u00e4llen, in denen sie m\u00f6glicherweise zu h\u00e4ufig oder unn\u00f6tig verwendet wird.<\/li>\n\n\n\n<li>\u201eAsync\u201c-Attribute laufen schief. Je nach Kontext k\u00f6nnten einige Ressourcen, die Sie f\u00fcr asynchrones Rendering markiert haben, die Direktive ignorieren oder unerwartet laden. Wenn das passiert, verz\u00f6gert es andere Elemente des Renderpfads und den n\u00e4chsten Frame.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"h-6-time-to-first-byte-ttfb\" class=\"wp-block-heading\">#6 &#8211; Zeit bis zum ersten Byte (TTFB)<\/h2>\n\n\n\n<p>Nun denken wir \u00fcber den allerersten Moment nach, wenn eine Webseite geladen wird.<\/p>\n\n\n\n<p>Bevor die Seite \u00fcberhaupt zu rendern beginnt, muss der Browser des Benutzers Kontakt mit dem Webserver aufnehmen, herausfinden, mit wem er sich verbindet, und Anweisungen erhalten, was in welcher Reihenfolge geladen werden soll.<\/p>\n\n\n\n<p>Dieser anf\u00e4ngliche Handschlag enth\u00e4lt das erste Informationsbyte. Wie schnell dieses Byte ankommt, ist wie der Pistolenschuss zu Beginn eines Pferderennens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-first-byte\">Was ist Time to First Byte?<\/h3>\n\n\n\n<p>Time to First Byte ist die Zeit, die Ihr Browser ben\u00f6tigt, um Prozesse wie DNS-Suche, TCP- und SSL-Handshakes sowie Verbindungsaufbau zu durchlaufen, um die ersten Bytes an Informationen von einem Webserver anzufordern \u2013 und zu empfangen. Die Geschwindigkeit, mit der eine Verbindung zum Webserver hergestellt wird, h\u00e4ngt fast ausschlie\u00dflich vom Server selbst und davon ab, wie die Website gehostet wird.<\/p>\n\n\n\n<p>Es wird in Millisekunden gemessen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gut: &lt; 800ms<\/li>\n\n\n\n<li>Verbesserungsbed\u00fcrftig: 800 &#8211; 1800ms<\/li>\n\n\n\n<li>Schlecht: &gt; 1800ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-ttfb\">Techniken zur Verbesserung von TTFB<\/h3>\n\n\n\n<p>Sie k\u00f6nnen TTFB als die Zeit betrachten, die Sie an der Startlinie verbringen, bevor der Startschuss f\u00e4llt. Alles, was das anf\u00e4ngliche Startsignal verz\u00f6gert, verl\u00e4ngert die TTFB und die gesamte Seitenladezeit.<\/p>\n\n\n\n<p>Welche M\u00f6glichkeiten zur Verbesserung haben Sie?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-eliminate-redirects\">Redirects beseitigen<\/h4>\n\n\n\n<p>Zun\u00e4chst einmal sollten Sie Seitenweiterleitungen wann immer m\u00f6glich eliminieren. Wenn Sie Benutzer von einer Seite zur anderen weiterleiten, f\u00e4llt die daf\u00fcr ben\u00f6tigte Zeit in das TTFB-Fenster, was bedeutet, dass Sie Ihrer Bewertung erheblich Zeit hinzuf\u00fcgen werden.<\/p>\n\n\n\n<p>Dies umfasst 301-Weiterleitungen von alten URLs auf eine neue, sowie tempor\u00e4re Weiterleitungen und andere Implementierungen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-upgrade-your-web-hosting\">Aktualisieren Sie Ihr Web-Hosting<\/h4>\n\n\n\n<p>Hosting spielt eine enorme Rolle bei der Gesamtgeschwindigkeit und Leistungsbewertung Ihrer Website, insbesondere in Bezug auf TTFB.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Hosting Provider<\/h3>\n    <p>Ein Hosting Provider ist ein Unternehmen, das eine Geb\u00fchr f\u00fcr das u201cVermietenu201d von Serverplatz und Ressourcen berechnet. Sie k\u00f6nnen jeden beliebigen Hosting Provider w\u00e4hlen, um eine neue Website zu starten.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/hosting-provider\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Sie sollten die Details Ihres Webhosting-Anbieters genau betrachten und dabei besonders auf Folgendes achten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Shared vs dediziertes Hosting<\/b>: Wird Ihre Website auf ihrer eigenen Instanz gehostet oder teilt sie sich Ressourcen mit anderen Benutzern und deren Websites? Dediziertes Hosting kostet normalerweise mehr, bietet jedoch eine konsistentere Leistung.<\/li>\n\n\n\n<li><b>Speicher (RAM)<\/b>: Der Speicher, auf den Ihre Website auf dem Server zugreifen kann, spielt eine gro\u00dfe Rolle f\u00fcr die Gesamtleistung. Wenn der Speicher ausgelastet ist, kann der Server nicht auf neue Anfragen reagieren und diese verarbeiten.<\/li>\n\n\n\n<li><b>CPU \/ Prozessor:<\/b> Die Geschwindigkeit des Prozessors des Servers spielt ebenfalls eine Rolle bei der Reaktionsgeschwindigkeit und Verarbeitungszeit.<\/li>\n\n\n\n<li><b>Infrastruktur-Updates<\/b>: Wird die Software auf dem Server auf dem neuesten Stand gehalten und frei von Fehlern oder Konflikten? Aktualisieren Sie auf die neuesten Versionen von PHP, MySQL und anderen wichtigen Anwendungen, um die Leistung zu maximieren.<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-caching\">Caching implementieren<\/h4>\n\n\n\n<p>Auf so genannten \u201edynamischen Websites\u201c, wie Websites, die auf WordPress laufen, kann das Cachen Ihrer Seiten enorme Verbesserungen der Seitenladezeiten und der TTFB bewirken.<\/p>\n\n\n\n<p>Caching bedeutet im Wesentlichen, dass anstatt bei jedem Laden einer Seite Informationen aus der Datenbank Ihrer Website abzurufen, die Website eine Kopie der Seite speichert und diese dem Benutzer zur Verf\u00fcgung stellt. Es ist viel schneller, als jedes Mal Informationen nachzuschlagen.<\/p>\n\n\n\n<p>F\u00fcr eine Aufschl\u00fcsselung der Funktionsweise lesen Sie <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/ein-umfassender-leitfaden-zum-website-caching\/\" target=\"_blank\" rel=\"noopener\">unseren Leitfaden zum Website-Caching<\/a>.<\/p>\n\n\n\n<h2 id=\"h-a-note-about-speed-index\" class=\"wp-block-heading\">Eine Anmerkung zum Geschwindigkeitsindex<\/h2>\n\n\n\n<p>Wir haben in diesem Leitfaden keinen separaten Abschnitt \u00fcber den Speed-Index-Metrik aufgenommen, da dies im Wesentlichen die <i>gesamte <\/i>Ladezeit der Seite misst.<\/p>\n\n\n\n<p>Dies bedeutet, dass die Behandlung von Speed Index-Problemen in der Regel eine Angelegenheit von Angriff auf die anderen bereits besprochenen verwandten Metriken ist:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Erstes inhaltliches Paint<\/li>\n\n\n\n<li>Gr\u00f6\u00dftes inhaltliches Paint<\/li>\n\n\n\n<li>Interaktion bis zum n\u00e4chsten Paint<\/li>\n\n\n\n<li>Zeit bis zum ersten Byte<\/li>\n\n\n<\/ul>\n\n\n\n<p>Jeder wird eine kleine Rolle bei der kumulativen Seitenladegeschwindigkeit spielen und sie direkt anzusprechen, sollte Ihre gesamte Speed-Index-Wertung verbessern.<\/p>\n\n\n\n<h2 id=\"h-final-thoughts-on-pagespeed-insights\" class=\"wp-block-heading\">Abschlie\u00dfende Gedanken zu PageSpeed Insights<\/h2>\n\n\n\n<p>In diesem Leitfaden haben wir nahezu alles abgedeckt, was es \u00fcber den PageSpeed Insights-Bericht zu wissen gibt und wie Sie jedes m\u00f6gliche Problem strategisch angehen k\u00f6nnen.<\/p>\n\n\n\n<p>Insgesamt erwarte ich, dass die Leistung der Seite, Zug\u00e4nglichkeit und technische Best Practices weiterhin an Bedeutung gewinnen werden. Wir bauen das Web gemeinsam auf \u2013 eine Website nach der anderen \u2013 und das setzt voraus, dass wir alle in ein offenes, zug\u00e4ngliches und sch\u00f6nes Web investieren.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      \u00dcbernehmen Sie die Kontrolle mit flexiblem VPS-Hosting\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Hier sind die Vorteile des VPS-Angebots von DreamHost: 24\/7-Kundensupport, ein intuitives Panel, skalierbarer RAM, unbegrenzte Bandbreite, unbegrenztes Hosting von Domains und SSD-Speicherung.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/hosting\/vps\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            W\u00e4hlen Sie Ihren VPS-Plan                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Im Internet gibt es kein Geschwindigkeitslimit \u2013 aber zum Gl\u00fcck gibt es einen Geschwindigkeitsmesser. Die Geschwindigkeit und Leistung Ihrer Website hat einen gro\u00dfen Einfluss auf das Gesch\u00e4ft. Sie kann Ihre Suchrankings und SEO verbessern, das Engagement auf der Website erh\u00f6hen und mehr Konversionen \u2013 und Umsatz \u2013 erzielen. Aber bevor Sie die Geschwindigkeit Ihrer Website optimieren k\u00f6nnen, m\u00fcssen Sie [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":40101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-what-is-google-pagespeed-insights\",\"Was ist Google PageSpeed Insights?\"],[\"h-page-speed-and-seo\",\"Seitengeschwindigkeit und SEO\"],[\"h-how-pagespeed-insights-works\",\"Wie PageSpeed Insights funktioniert\"],[\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\",\"Wie Sie diesen Leitfaden verwenden, um Ihre PageSpeed Insights-Bewertung zu verbessern\"],[\"h-1-first-contentful-paint-fcp\",\"#1 - Erster Inhaltlicher Anstrich (FCP)\"],[\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\",\"#2 - First Input Delay (FID), Total Blocking Time (TBT) und Time to Interactive (TTI)\"],[\"h-3-largest-contentful-paint-lcp\",\"#3 - Gr\u00f6\u00dfter inhaltsvoller Anstrich (LCP)\"],[\"h-4-cumulative-layout-shift-cls\",\"#4 - Kumulative Layoutverschiebung (CLS)\"],[\"h-5-interaction-to-next-paint-inp\",\"#5 - Interaktion bis zum n\u00e4chsten Anstrich (INP)\"],[\"h-6-time-to-first-byte-ttfb\",\"#6 - Zeit bis zum ersten Byte (TTFB)\"],[\"h-a-note-about-speed-index\",\"Eine Anmerkung zum Geschwindigkeitsindex\"],[\"h-final-thoughts-on-pagespeed-insights\",\"Abschlie\u00dfende Gedanken zu PageSpeed Insights\"]]","hide_toc":false,"footnotes":""},"categories":[14493,14495],"tags":[],"class_list":["post-52146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-de","category-tutorials-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung &amp; Tipps f\u00fcr eine Punktzahl von 100) - DreamHost Blog<\/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:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung &amp; Tipps f\u00fcr eine Punktzahl von 100)\" \/>\n<meta property=\"og:description\" content=\"Im Internet gibt es kein Geschwindigkeitslimit \u2013 aber zum Gl\u00fcck gibt es einen Geschwindigkeitsmesser. Die Geschwindigkeit und Leistung Ihrer Website hat einen gro\u00dfen Einfluss auf das Gesch\u00e4ft. Sie kann Ihre Suchrankings und SEO verbessern, das Engagement auf der Website erh\u00f6hen und mehr Konversionen \u2013 und Umsatz \u2013 erzielen. Aber bevor Sie die Geschwindigkeit Ihrer Website optimieren k\u00f6nnen, m\u00fcssen Sie [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-18T14:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:30:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung & Tipps f\u00fcr eine Punktzahl von 100) - DreamHost Blog","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:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/","og_locale":"en_US","og_type":"article","og_title":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung & Tipps f\u00fcr eine Punktzahl von 100)","og_description":"Im Internet gibt es kein Geschwindigkeitslimit \u2013 aber zum Gl\u00fcck gibt es einen Geschwindigkeitsmesser. Die Geschwindigkeit und Leistung Ihrer Website hat einen gro\u00dfen Einfluss auf das Gesch\u00e4ft. Sie kann Ihre Suchrankings und SEO verbessern, das Engagement auf der Website erh\u00f6hen und mehr Konversionen \u2013 und Umsatz \u2013 erzielen. Aber bevor Sie die Geschwindigkeit Ihrer Website optimieren k\u00f6nnen, m\u00fcssen Sie [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-18T14:00:32+00:00","article_modified_time":"2025-01-16T19:30:44+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"32 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung &#038; Tipps f\u00fcr eine Punktzahl von 100)","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-01-16T19:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/"},"wordCount":6265,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","articleSection":["Marketing","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/","name":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung & Tipps f\u00fcr eine Punktzahl von 100) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-01-16T19:30:44+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","width":1460,"height":1095,"caption":"PageSpeed Insights Report Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/pagespeed-insights-bericht\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"PageSpeed Insights Tiefeneintauchung (Vollst\u00e4ndige Durchf\u00fchrung &#038; Tipps f\u00fcr eine Punktzahl von 100)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"de","translations":{"de":52146,"es":40181,"en":40100,"pl":57393,"pt":57397,"ru":57400,"uk":57406,"it":68951,"fr":71550,"nl":71577},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52146"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52146\/revisions"}],"predecessor-version":[{"id":62795,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52146\/revisions\/62795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40101"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}