{"id":58145,"date":"2023-01-23T09:40:51","date_gmt":"2023-01-23T08:40:51","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=58145&#038;preview=true&#038;preview_id=58145"},"modified":"2023-07-27T09:42:17","modified_gmt":"2023-07-27T08:42:17","slug":"lazy-loading-in-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/","title":{"rendered":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/de\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> ist ein <a href=\"https:\/\/kinsta.com\/javascript\/\">Frontend-JavaScript-Framework<\/a>, das von Google entwickelt wurde, um skalierbare, unternehmenstaugliche Webanwendungen zu erstellen. Einige dieser Anwendungen k\u00f6nnen ziemlich gro\u00df werden und die Ladezeit deiner Anwendung beeintr\u00e4chtigen.<\/p>\n<p>Um die Ladezeit zu verk\u00fcrzen und das Gesamterlebnis deiner Nutzer\/innen zu verbessern, kannst du eine Technik nutzen, die als Lazy Loading bekannt ist. Mit dieser nativen Angular-Funktion kannst du zun\u00e4chst nur die ben\u00f6tigten Teile der Webanwendung laden und dann bei Bedarf weitere Module nachladen.<\/p>\n<p>In diesem Artikel erf\u00e4hrst du, was Lazy Loading ist und wie du damit deine Webanwendung beschleunigen kannst.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Lazy Loading?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-lazy-load\/#what-is-lazy-loading\">Lazy Loading<\/a> ist eine Technik, bei der Elemente einer Webseite nur dann geladen werden, wenn sie ben\u00f6tigt werden. Das Gegenst\u00fcck dazu ist das <em>Eager Loading<\/em>, bei dem alles sofort geladen wird &#8211; oder versucht wird, es zu laden. Wenn alle Bilder, Videos, CSS- und JavaScript-Code eager geladen werden, kann das zu langen Ladezeiten f\u00fchren &#8211; eine schlechte Nachricht f\u00fcr die Nutzer\/innen.<\/p>\n<p>Lazy Loading wird oft f\u00fcr Bilder und Videos auf Websites verwendet, die viele Inhalte enthalten. Anstatt alle Medien auf einmal zu laden, was viel Bandbreite verbrauchen und die Seitenaufrufe verz\u00f6gern w\u00fcrde, werden diese Elemente erst dann geladen, wenn ihre Position auf der Seite zu sehen ist.<\/p>\n<p>Angular ist ein Single-Page-Application-Framework, das f\u00fcr einen Gro\u00dfteil seiner Funktionen auf JavaScript angewiesen ist. Die JavaScript-Sammlung deiner App kann mit der Zeit sehr gro\u00df werden, was zu einem erh\u00f6hten Datenverbrauch und einer l\u00e4ngeren Ladezeit f\u00fchrt. Um die Dinge zu beschleunigen, kannst du Lazy Loading verwenden, um zuerst die ben\u00f6tigten Module zu laden und das Laden anderer Module aufzuschieben, bis sie ben\u00f6tigt werden.<\/p>\n<h2>Vorteile von Lazy Loading in Angular<\/h2>\n<p>Lazy Loading bietet Vorteile, die deine Website benutzerfreundlicher machen. Dazu geh\u00f6ren:<\/p>\n<ul>\n<li><strong>Schnellere Ladezeit:<\/strong> JavaScript enth\u00e4lt Anweisungen f\u00fcr die Anzeige deiner Seite und das Laden ihrer Daten. Aus diesem Grund ist es eine <em>Rendering-Blocking-Ressource<\/em>. Das bedeutet, dass der Browser warten muss, bis das gesamte JavaScript geladen ist, bevor deine Seite angezeigt wird. Beim Lazy Loading in Angular wird das JavaScript in einzelne Teile aufgeteilt, die separat geladen werden. Der erste Brocken enth\u00e4lt nur die Logik, die f\u00fcr das Hauptmodul der Seite ben\u00f6tigt wird. Es wird eager geladen, dann werden die restlichen Module lazy geladen. Indem du die Gr\u00f6\u00dfe des ersten Brocken reduzierst, wird die <a href=\"https:\/\/kinsta.com\/de\/lernen\/website-geschwindigkeit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Seite schneller geladen und gerendert<\/a>.<\/li>\n<li><strong>Weniger Datenverbrauch:<\/strong> Indem du die Daten in St\u00fccke aufteilst und nach Bedarf l\u00e4dst, verbrauchst du m\u00f6glicherweise weniger <a href=\"https:\/\/kinsta.com\/de\/blog\/cpanel-bandbreitennutzung\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bandbreite<\/a>.<\/li>\n<li><strong>Gesparte Browser-Ressourcen:<\/strong> Da der Browser nur die Brocken l\u00e4dt, die ben\u00f6tigt werden, verschwendet er keinen Speicher und keine CPU, um Code zu interpretieren und zu rendern, der nicht ben\u00f6tigt wird.<\/li>\n<\/ul>\n\n<h2>Lazy Loading in Angular implementieren<\/h2>\n<p>Um diesem Tutorial zu folgen, brauchst du Folgendes:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> installiert<\/li>\n<li>Grundlegende Kenntnisse \u00fcber Angular<\/li>\n<\/ul>\n<h3>Erstelle dein Projekt<\/h3>\n<p>Du wirst das <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a> verwenden, um dein Projekt zu erstellen. Du kannst das CLI mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> installieren, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Danach erstellst du ein Projekt mit dem Namen Lazy Loading Demo wie folgt:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Dieser Befehl erstellt ein neues Angular-Projekt, komplett mit Routing. Du wirst ausschlie\u00dflich im Ordner <code>src\/app<\/code> arbeiten, der den Code f\u00fcr deine App enth\u00e4lt. Dieser Ordner enth\u00e4lt deine Haupt-Routing-Datei, <code>app-routing.module.ts<\/code>. Die Struktur des Ordners sollte folgenderma\u00dfen aussehen:<\/p>\n<figure style=\"width: 1034px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/angular-src-folder-structure-lazy-loading.png\" alt=\"Screenshot: Die Angular-Ordnerstruktur wird in einem Terminal angezeigt.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">Die Ordnerstruktur eines Angular-Projekts<\/figcaption><\/figure>\n<h3>Ein Feature-Modul mit Routes erstellen<\/h3>\n<p>Als N\u00e4chstes erstellst du ein Feature-Modul, das lazy geladen werden soll. Um dieses Modul zu erstellen, f\u00fchre diesen Befehl aus:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Dieser Befehl erstellt ein Modul mit dem Namen <code>BlogModule<\/code> sowie ein Routing. Wenn du <code>src<\/code><code>\/app\/app-routing.module.ts<\/code> \u00f6ffnest, siehst du, dass es jetzt wie folgt aussieht:<\/p>\n<pre><code class=\"typescript\">import { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\n\nconst routes: Routes = [ { path: 'blog', loadChildren: () =&gt; import('.\/blog\/blog.module').then(m =&gt; m.BlogModule) }];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { } \n<\/code><\/pre>\n<p>Der Teil, der f\u00fcr das Lazy Loading wichtig ist, ist die dritte Zeile:<\/p>\n<pre><code class=\"language=typescript\">const routes: Routes = [ { path: 'blog', loadChildren: () =&gt; import('.\/blog\/blog.module').then(m =&gt; m.BlogModule) }];\n<\/code><\/pre>\n<p>In dieser Zeile werden die Routen definiert. Die Route f\u00fcr den Blog verwendet das Argument <code>loadChildren<\/code> anstelle von <code>component<\/code>. Das Argument <code>loadChildren<\/code> weist Angular an, die Route lazy zu laden &#8211; das Modul nur dann dynamisch zu importieren, wenn die Route besucht wird, und es dann an den Router zur\u00fcckzugeben. Das Modul definiert seine eigenen Child-Routen, wie z. B. <code>blog\/**<\/code>, in seiner <code>routing.module.ts<\/code> Datei. Das Blog-Modul, das du erstellt hast, sieht so aus:<\/p>\n<pre><code class=\"typescript\">import { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { BlogComponent } from '.\/blog.component';\n\nconst routes: Routes = [{ path: '', component: BlogComponent }];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule]\n})\nexport class BlogRoutingModule { }\n\n<\/code><\/pre>\n<p>Du wirst feststellen, dass diese Routing-Datei eine einzige Route enth\u00e4lt, <code>''<\/code>. Diese wird f\u00fcr <code>\/blog<\/code> aufgel\u00f6st und verweist auf die BlogComponent. Du kannst weitere Komponenten hinzuf\u00fcgen und diese Routen in dieser Datei definieren.<\/p>\n<p>Wenn du zum Beispiel eine Komponente hinzuf\u00fcgen m\u00f6chtest, die Details zu einem bestimmten Blogbeitrag liefert, k\u00f6nntest du die Komponente mit diesem Befehl erstellen:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Das erzeugt die Komponente f\u00fcr das Blog-Detail und f\u00fcgt sie dem Blog-Modul hinzu. Um eine Route f\u00fcr die Komponente hinzuzuf\u00fcgen, kannst du sie einfach zu deinem Routen-Array hinzuf\u00fcgen:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Dadurch wird eine Route hinzugef\u00fcgt, die nach <code>blog\/:title<\/code> aufl\u00f6st (zum Beispiel <code>blog\/angular-tutorial<\/code>). Dieses Array von Routen wird nach und nach geladen und ist nicht im urspr\u00fcnglichen Bundle enthalten.<\/p>\n<h2>\u00dcberpr\u00fcfe Lazy Loading<\/h2>\n<p>Du kannst leicht \u00fcberpr\u00fcfen, ob Lazy Loading funktioniert, indem du <code>ng serve<\/code> ausf\u00fchrst und die Ausgabe beobachtest. Am Ende deiner Ausgabe solltest du etwa Folgendes erhalten:<\/p>\n<figure style=\"width: 867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/lazy-loading-verification-via-ng-serve.png\" alt=\"Screenshot: Ausgabe des ng serve-Befehls von Angular im Terminal.\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">\u00dcberpr\u00fcfen von Lazy Loading mit Angulars <code>ng serve<\/code>.<\/figcaption><\/figure>\n<p>Die obige Ausgabe ist in zwei Teile unterteilt: <code>Initial Chunk Files<\/code> sind die Dateien, die beim ersten Laden der Seite geladen werden. <code>Lazy Chunk Files<\/code> sind die Dateien, die mit Lazy Loading geladen werden. Das Blog-Modul ist in diesem Beispiel aufgef\u00fchrt.<\/p>\n<h3>\u00dcberpr\u00fcfen von Lazy Loading anhand der Netzwerkprotokolle des Browsers<\/h3>\n<p>Eine weitere M\u00f6glichkeit, Lazy Loading zu \u00fcberpr\u00fcfen, ist die Registerkarte <strong>Netzwerk<\/strong> in den Developer Tools deines Browsers. (Unter Windows ist das die Taste <strong>F12<\/strong> in Chrome und Microsoft Edge und die Taste <strong>Strg<\/strong>\u2013<strong>Umschalt<\/strong>\u2013<strong>I<\/strong> in Firefox. Auf dem Mac ist es <strong>Befehl<\/strong>\u2013<strong>Option<\/strong>\u2013<strong>I<\/strong> in Chrome, Firefox und Safari.)<\/p>\n<p>W\u00e4hle den Filter <code>JS<\/code>, um nur JavaScript-Dateien anzuzeigen, die \u00fcber das Netzwerk geladen wurden. Nachdem die App zum ersten Mal geladen wurde, solltest du in etwa folgendes sehen:<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/lazy-loading-verification-with-devtools-initial.png\" alt=\"Screenshot: In den Developer Tools protokollierte Angular JavaScript-Dateien.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Erstes Protokoll der JavaScript-Downloads in den Developer Tools<\/figcaption><\/figure>\n<p>Wenn du zu <code>\/blog<\/code> navigierst, wirst du feststellen, dass ein neuer Brocken, <code>src_app_blog_blog_module_ts.js<\/code>, geladen wurde. Das bedeutet, dass dein Modul nur angefordert wurde, als du zu dieser Route navigiert hast, und dass es lazy geladen wird. Das Netzwerkprotokoll sollte in etwa so aussehen:<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/lazy-loading-verification-with-devtools.png\" alt=\"Screenshot: Aktualisierte Ansicht der in den Developer Tools protokollierten Angular JavaScript-Dateien.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">Lazy-geladenes Modul erscheint in Downloads, die von Developer Tools protokolliert werden<\/figcaption><\/figure>\n\n<h2>Lazy Loading vs. Eager Loading<\/h2>\n<p>Zum Vergleich wollen wir auch ein eager geladenes Modul erstellen und sehen, wie es sich auf die Dateigr\u00f6\u00dfe und die Ladezeit auswirkt. Um das zu demonstrieren, erstellst du ein Modul f\u00fcr die Authentifizierung. Ein solches Modul muss m\u00f6glicherweise eager geladen werden, da die Authentifizierung etwas ist, das du von allen Benutzern verlangst.<\/p>\n<p>Erstelle ein AuthModule, indem du diesen Befehl in der CLI ausf\u00fchrst:<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Dadurch werden das Modul und eine Routing-Datei erzeugt. Au\u00dferdem wird das Modul der Datei <code>app.module.ts<\/code> hinzugef\u00fcgt. Im Gegensatz zu dem Befehl, den wir beim letzten Mal verwendet haben, um ein Modul zu generieren, f\u00fcgt dieser Befehl jedoch keine &#8222;Lazy Loaded&#8220;-Route hinzu. Er verwendet den Parameter <code>--routing<\/code> anstelle von <code>--route &lt;name&gt;<\/code>. Dadurch wird das Authentifizierungsmodul dem Array <code>imports<\/code> in <code>app.module.ts<\/code> hinzugef\u00fcgt:<\/p>\n<pre><code class=\"typescript\">@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    AuthModule \/\/added auth module\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n<\/code><\/pre>\n<p>Wenn du AuthModule zu deinem AppModule-Imports-Array hinzuf\u00fcgst, bedeutet das, dass das Authentifizierungsmodul zu den ersten Chunk-Dateien hinzugef\u00fcgt und in das Haupt-JavaScript-Bundle aufgenommen wird. Um dies zu \u00fcberpr\u00fcfen, kannst du <code>ng serve<\/code> erneut ausf\u00fchren und die Ausgabe beobachten:<\/p>\n<figure style=\"width: 752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/lazy-loading-verification-angular-auth-module.png\" alt=\"Screenshot: Angular-Skripte, nachdem das Authentifizierungsmodul hinzugef\u00fcgt wurde.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">Ausgabe des Befehls <code>ng serve<\/code> von Angular, nachdem das Authentifizierungsmodul hinzugef\u00fcgt wurde<\/figcaption><\/figure>\n<p>Wie du siehst, ist das Authentifizierungsmodul nicht Teil der Lazy Chunk-Dateien. Au\u00dferdem ist die Gr\u00f6\u00dfe des urspr\u00fcnglichen Pakets gestiegen. Die Datei <code>main.js<\/code> hat sich fast verdoppelt und ist von 8 KB auf 15 KB angewachsen. In diesem Beispiel ist die Zunahme gering, da die Komponenten nicht viel Code enthalten. Aber wenn du die Komponenten mit Logik f\u00fcllst, wird diese Dateigr\u00f6\u00dfe zunehmen, was ein starkes Argument f\u00fcr das Lazy Loading ist.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Du hast gelernt, wie du Lazy Loading in Angular einsetzen kannst, um Module nur dann zu laden, wenn sie ben\u00f6tigt werden. Lazy Loading ist eine gro\u00dfartige Technik, um die Ladezeiten zu verbessern, den Datenverbrauch zu reduzieren und die Ressourcen im <a href=\"https:\/\/kinsta.com\/de\/blog\/backend-vs-frontend\/\">Frontend und Backend<\/a> besser zu nutzen.<\/p>\n<p>Zusammen mit Technologien wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\">Content Distribution Networks<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-minimieren\/\">Minifying von JavaScript<\/a> verbessert Lazy Loading die Leistung deiner Website und die Zufriedenheit deiner Nutzer\/innen.<\/p>\n<p>Wenn du eine WordPress-Website entwickelst und die Geschwindigkeit erh\u00f6hen willst, solltest du dich \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> informieren, um beeindruckende Zahlen zu sehen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular ist ein Frontend-JavaScript-Framework, das von Google entwickelt wurde, um skalierbare, unternehmenstaugliche Webanwendungen zu erstellen. Einige dieser Anwendungen k\u00f6nnen ziemlich gro\u00df werden und die Ladezeit deiner &#8230;<\/p>\n","protected":false},"author":271,"featured_media":58476,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[924,952],"class_list":["post-58145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lazy Loading in Angular (Nutze es f\u00fcr deine Website) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)\" \/>\n<meta property=\"og:description\" content=\"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:40:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T08:42:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Nyamande\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)\",\"datePublished\":\"2023-01-23T08:40:51+00:00\",\"dateModified\":\"2023-07-27T08:42:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\"},\"wordCount\":1530,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\",\"name\":\"Lazy Loading in Angular (Nutze es f\u00fcr deine Website) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\",\"datePublished\":\"2023-01-23T08:40:51+00:00\",\"dateModified\":\"2023-07-27T08:42:17+00:00\",\"description\":\"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/angular\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d24f398602d37d19af81daafe43c64b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d24f398602d37d19af81daafe43c64b?s=96&d=mm&r=g\",\"caption\":\"Michael Nyamande\"},\"description\":\"A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website) - Kinsta\u00ae","description":"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.","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:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/","og_locale":"de_DE","og_type":"article","og_title":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)","og_description":"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.","og_url":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-01-23T08:40:51+00:00","article_modified_time":"2023-07-27T08:42:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Michael Nyamande","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)","datePublished":"2023-01-23T08:40:51+00:00","dateModified":"2023-07-27T08:42:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/"},"wordCount":1530,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/","url":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/","name":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","datePublished":"2023-01-23T08:40:51+00:00","dateModified":"2023-07-27T08:42:17+00:00","description":"Das Lazy Loading von Assets kann Engp\u00e4sse reduzieren, die deine Website verlangsamen. Hier erf\u00e4hrst du, wie du mit dem Angular JavaScript-Framework schneller wirst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/01\/lazy-loading-in-angular-1.jpeg","width":1460,"height":730,"caption":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/lazy-loading-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Angular","item":"https:\/\/kinsta.com\/de\/thema\/angular\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading in Angular (Nutze es f\u00fcr deine Website)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d24f398602d37d19af81daafe43c64b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d24f398602d37d19af81daafe43c64b?s=96&d=mm&r=g","caption":"Michael Nyamande"},"description":"A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.","url":"https:\/\/kinsta.com\/de\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=58145"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58145\/revisions"}],"predecessor-version":[{"id":64199,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58145\/revisions\/64199"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58145\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/58476"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=58145"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=58145"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=58145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}