{"id":48148,"date":"2023-01-23T09:40:26","date_gmt":"2023-01-23T08:40:26","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=48148&#038;preview=true&#038;preview_id=48148"},"modified":"2023-08-23T10:11:07","modified_gmt":"2023-08-23T09:11:07","slug":"lazy-loading-i-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/","title":{"rendered":"Lazy Loading i Angular (brug det p\u00e5 dit websted)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> er en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-framework<\/a>\u00a0til frontend-applikationer, der er udviklet af Google til at bygge skalerbare webapplikationer i virksomhedskvalitet. Nogle af disse applikationer kan blive ret store, hvilket p\u00e5virker indl\u00e6sningstiden for din applikation.<\/p>\n<p>For at reducere indl\u00e6sningstiden og forbedre den samlede oplevelse for dine brugere kan du bruge en teknik, der kaldes lazy loading. Denne native Angular-funktion giver dig mulighed for kun at indl\u00e6se de n\u00f8dvendige dele af webappen f\u00f8rst og derefter indl\u00e6se andre moduler efter behov.<\/p>\n<p>I denne artikel vil du l\u00e6re om lazy loading, og hvordan det kan hj\u00e6lpe med at fremskynde din webapp.<\/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>Hvad er lazy loading?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/blog\/wordpress-lazy-load\/#what-is-lazy-loading\">Lazy loading<\/a> henviser til teknikken til kun at indl\u00e6se websideelementer, n\u00e5r de er n\u00f8dvendige. Dens modstykke er <em>eager loading<\/em>, hvor alt indl\u00e6ses &#8211; eller fors\u00f8ger at indl\u00e6se &#8211; med det samme. En for ivrig hentning af alle billeder, videoer, CSS og JavaScript-kode kan betyde lange indl\u00e6sningstider &#8211; ikke godt for brugerne.<\/p>\n<p>Lazy loading bruges ofte til billeder og videoer p\u00e5 websteder, der er v\u00e6rt for en masse indhold. I stedet for at indl\u00e6se alle medier p\u00e5 \u00e9n gang, hvilket ville bruge en masse b\u00e5ndbredde og forplumre sidevisningerne, indl\u00e6ses disse elementer, n\u00e5r deres placering p\u00e5 siden er ved at rulle ind til visning.<\/p>\n<p>Angular er et framework for applikationer med en enkelt side, som er baseret p\u00e5 JavaScript til en stor del af sin funktionalitet. Din app&#8217;s samling af JavaScript kan nemt blive stor, efterh\u00e5nden som app&#8217;en vokser, og det medf\u00f8rer en tilsvarende stigning i dataforbrug og indl\u00e6sningstid. For at fremskynde tingene kan du bruge lazy loading til f\u00f8rst at hente de n\u00f8dvendige moduler og udskyde indl\u00e6sningen af andre moduler, indtil der er brug for dem.<\/p>\n<h2>Fordele ved lazy loading i Angular<\/h2>\n<p>Lazy loading giver fordele, der g\u00f8r dit websted mere brugervenligt. Disse omfatter bl.a:<\/p>\n<ul>\n<li><strong>Hurtigere indl\u00e6sningstid:<\/strong> JavaScript indeholder instruktioner til visning af din side og indl\u00e6sning af dens data. P\u00e5 grund af dette er det en <em>ressource, der blokerer for rendering<\/em>. Det betyder, at browseren skal vente p\u00e5 at indl\u00e6se alt JavaScript, f\u00f8r din side kan vises. Ved lazy loading i Angular opdeles JavaScript i stykker, som indl\u00e6ses separat. Den f\u00f8rste chunk indeholder kun logik, der er n\u00f8dvendig for sidens hovedmodul. Det indl\u00e6ses ivrigt, hvorefter de resterende moduler indl\u00e6ses lazily. Ved at reducere st\u00f8rrelsen af den indledende chunk <a href=\"https:\/\/kinsta.com\/learn\/page-speed\/\">f\u00e5r du siden til at indl\u00e6ses og gengives hurtigere<\/a>.<\/li>\n<li><strong>Mindre dataforbrug:<\/strong> Ved at opdele dataene i chunks og indl\u00e6se efter behov bruger du muligvis mindre <a href=\"https:\/\/kinsta.com\/blog\/cpanel-bandwidth-usage\/\" target=\"_blank\" rel=\"noopener noreferrer\">b\u00e5ndbredde<\/a>.<\/li>\n<li><strong>Bevarede browserressourcer:<\/strong> Da browseren kun indl\u00e6ser de chunks, der er n\u00f8dvendige, spilder den ikke hukommelse og CPU p\u00e5 at fortolke og gengive kode, der ikke er n\u00f8dvendig.<\/li>\n<\/ul>\n\n<h2>Implementering af lazy loading i Angular<\/h2>\n<p>For at f\u00f8lge med i denne tutorial skal du bruge f\u00f8lgende:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> installeret<\/li>\n<li>Grundl\u00e6ggende kendskab til Angular<\/li>\n<\/ul>\n<h3>Opstart dit projekt<\/h3>\n<p>Du skal bruge <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a> til at oprette dit projekt. Du kan installere CLI&#8217;en ved hj\u00e6lp af <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a> ved at k\u00f8re kommandoen:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Derefter opretter du et projekt med navnet Lazy Loading Demo som f\u00f8lger:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Denne kommando opretter et nyt Angular-projekt, komplet med routing. Du vil udelukkende arbejde i mappen <code>src\/app<\/code>, som indeholder koden til din app. Denne mappe indeholder din vigtigste routing-fil, <code>app-routing.module.ts<\/code>. Strukturen i mappen skal se s\u00e5ledes ud:<\/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=\"Sk\u00e6rmbillede: Angular mappestrukturen vist i en terminal.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">Mappestrukturen i et Angular-projekt.<\/figcaption><\/figure>\n<h3>Oprettelse af et funktionsmodul med ruter<\/h3>\n<p>Dern\u00e6st skal du oprette et funktionsmodul, der skal lazy loades. For at oprette dette modul skal du k\u00f8re denne kommando:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Denne kommando opretter et modul ved navn <code>BlogModule<\/code>, sammen med routing. Hvis du \u00e5bner <code>src<\/code><code>\/app\/app-routing.module.ts<\/code> , vil du se, at det nu ser s\u00e5ledes ud:<\/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>Den del, der er vigtig for lazy loading, er den tredje linje:<\/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>Denne linje definerer ruterne. Ruten til bloggen bruger <code>loadChildren<\/code> -argumentet i stedet for <code>component<\/code>. <code>loadChildren<\/code> -argumentet fort\u00e6ller Angular, at ruten skal lazy loades &#8211; at modulet kun skal importeres dynamisk, n\u00e5r ruten bes\u00f8ges, og derefter returneres til routeren. Modulet definerer sine egne underordnede ruter, f.eks. <code>blog\/**<\/code>, i filen <code>routing.module.ts<\/code>. Det blogmodul, du genererede, ser s\u00e5ledes ud:<\/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 vil bem\u00e6rke, at denne routing-fil indeholder en enkelt rute, <code>''<\/code>. Denne er opl\u00f8st til <code>\/blog<\/code> og peger p\u00e5 BlogComponent. Du kan tilf\u00f8je flere komponenter og definere disse ruter i denne fil.<\/p>\n<p>Hvis du f.eks. \u00f8nsker at tilf\u00f8je en komponent, der kan hente detaljer om et bestemt blogindl\u00e6g, kan du oprette komponenten med denne kommando:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Det genererer komponenten til blogdetaljerne og tilf\u00f8jer den til blogmodulet. Hvis du vil tilf\u00f8je en rute til den, kan du blot tilf\u00f8je den til dit routes-array:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Dette tilf\u00f8jer en rute, der opl\u00f8ser for <code>blog\/:title<\/code> (f.eks. <code>blog\/angular-tutorial<\/code>). Dette array af ruter er lazy-loaded og er ikke inkluderet i det oprindelige bundle.<\/p>\n<h2>Bekr\u00e6ft lazy loading<\/h2>\n<p>Du kan nemt kontrollere, at lazy loading fungerer, ved at k\u00f8re <code>ng serve<\/code> og observere output. Nederst i dit output b\u00f8r du f\u00e5 noget i stil med dette:<\/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=\"Sk\u00e6rmbillede: Output af Angulars ng serve-kommando i terminalen.\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">Verificering af lazy loading ved hj\u00e6lp af Angular&#8217;s <code>ng serve<\/code>.<\/figcaption><\/figure>\n<p>Ovenst\u00e5ende output er opdelt i to dele: <code>Initial Chunk Files<\/code> er de filer, der indl\u00e6ses, n\u00e5r siden f\u00f8rst indl\u00e6ses. <code>Lazy Chunk Files<\/code> er lazy-loaded. Blogmodulet er opf\u00f8rt i dette eksempel.<\/p>\n<h3>Kontrol af lazy loading gennem browserens netv\u00e6rkslogfiler<\/h3>\n<p>En anden m\u00e5de at bekr\u00e6fte lazy loading p\u00e5 er ved at bruge fanen <strong>Netv\u00e6rk<\/strong> i din browsers panel Udviklingsv\u00e6rkt\u00f8jer. (P\u00e5 Windows er det <strong>F12<\/strong> i Chrome og Microsoft Edge og <strong>Ctrl<\/strong>\u2013<strong>Shift<\/strong>\u2013<strong>I<\/strong> i Firefox. P\u00e5 en Mac er det <strong>Command<\/strong>\u2013<strong>Option<\/strong>\u2013<strong>I<\/strong> i Chrome, Firefox og Safari.)<\/p>\n<p>V\u00e6lg filteret <code>JS<\/code> for kun at f\u00e5 vist JavaScript-filer, der er indl\u00e6st via netv\u00e6rket. Efter den f\u00f8rste indl\u00e6sning af appen b\u00f8r du f\u00e5 noget, der ligner dette:<\/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=\"Sk\u00e6rmbillede: Angular JavaScript-filer logget i udviklerv\u00e6rkt\u00f8jer.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Den f\u00f8rste log over JavaScript-downloads, der er vist i Developer Tools.<\/figcaption><\/figure>\n<p>N\u00e5r du navigerer til <code>\/blog<\/code>, vil du bem\u00e6rke, at der er indl\u00e6st en ny chunk, <code>src_app_blog_blog_module_ts.js<\/code>. Det betyder, at dit modul kun blev anmodet om, da du navigerede til denne rute, og at det bliver lazy loaded. Netv\u00e6rksloggen b\u00f8r se nogenlunde s\u00e5dan her ud:<\/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=\"Sk\u00e6rmbillede: Opdateret visning af Angular JavaScript-filer, der er logget i udviklerv\u00e6rkt\u00f8jer.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">Lazy-loaded modul vises i downloads logget af Developer Tools.<\/figcaption><\/figure>\n\n<h2>Lazy Loading vs Eager Loading<\/h2>\n<p>Lad os til sammenligning ogs\u00e5 oprette et modul med ivrig indl\u00e6sning og se, hvordan det p\u00e5virker filst\u00f8rrelsen og indl\u00e6sningstiden. For at demonstrere dette vil du oprette et modul til autentificering. Et s\u00e5dant modul skal muligvis indl\u00e6ses ivrigt, da autentificering er noget, som du m\u00e5ske kr\u00e6ver, at alle brugere skal g\u00f8re.<\/p>\n<p>Generer et AuthModule ved at k\u00f8re denne kommando i CLI&#8217;en:<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Det genererer modulet og en routing-fil. Den tilf\u00f8jer ogs\u00e5 modulet til filen <code>app.module.ts<\/code>. Men i mods\u00e6tning til den kommando, vi brugte til at generere et modul sidste gang, tilf\u00f8jer denne kommando ikke en lazy-loaded route. Den bruger parameteren <code>--routing<\/code> i stedet for <code>--route &lt;name&gt;<\/code>. Det tilf\u00f8jer autentifikationsmodulet til <code>imports<\/code> -arrayet i <code>app.module.ts<\/code>:<\/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>Tilf\u00f8jelse af AuthModule til dit AppModule imports array betyder, at autentificeringsmodulet tilf\u00f8jes til de oprindelige chunk-filer og vil blive inkluderet sammen med JavaScript-hovedbundlen. For at verificere dette kan du k\u00f8re <code>ng serve<\/code> igen og observere output:<\/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=\"Sk\u00e6rmbillede: Vinklede scripts efter at godkendelsesmodulet er tilf\u00f8jet.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">Output af Angular&#8217;s <code>ng serve<\/code> kommando efter tilf\u00f8jelse af godkendelsesmodulet.<\/figcaption><\/figure>\n<p>Som du kan se, er autentifikationsmodulet ikke inkluderet som en del af de lazy chunk-filer. Derudover er st\u00f8rrelsen af det oprindelige bundle steget. Filen <code>main.js<\/code> er n\u00e6sten fordoblet i st\u00f8rrelse, idet den er steget fra 8 KB til 15 KB. I dette eksempel er stigningen lille, da komponenterne ikke indeholder meget kode. Men efterh\u00e5nden som du fylder komponenterne med logik, vil denne filst\u00f8rrelse stige, hvilket er et godt argument for lazy loading.<\/p>\n<h2>Opsummering<\/h2>\n<p>Du har l\u00e6rt, hvordan du kan bruge lazy loading i Angular til kun at hente moduler, n\u00e5r de er n\u00f8dvendige. Lazy loading er en fantastisk teknik til at forbedre indl\u00e6sningstider, reducere dataforbruget og bedre udnytte dine <a href=\"https:\/\/kinsta.com\/blog\/backend-vs-frontend\/\">frontend- og backend-ressourcer<\/a>.<\/p>\n<p>Lazy loading vil sammen med teknologi som <a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-cdn\/\">content delivery network<\/a>\u00a0og <a href=\"https:\/\/kinsta.com\/blog\/minify-javascript\/\">minifying JavaScript<\/a> forbedre b\u00e5de dit websteds ydeevne og dine brugeres tilfredshed.<\/p>\n<p>Hvis du er ved at udvikle et WordPress-websted og virkelig vil skrue op for hastigheden, kan du l\u00e6se om <a href=\"https:\/\/kinsta.com\/dk\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> for at se nogle imponerende tal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular er en JavaScript-framework\u00a0til frontend-applikationer, der er udviklet af Google til at bygge skalerbare webapplikationer i virksomhedskvalitet. Nogle af disse applikationer kan blive ret store, hvilket &#8230;<\/p>\n","protected":false},"author":271,"featured_media":48149,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[678,706],"class_list":["post-48148","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 i Angular (s\u00e6t det til at fungere p\u00e5 dit websted) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.\" \/>\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\/dk\/blog\/lazy-loading-i-angular\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading i Angular (brug det p\u00e5 dit websted)\" \/>\n<meta property=\"og:description\" content=\"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:40:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T09:11:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-i-angular.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=\"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-i-angular.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Lazy Loading i Angular (brug det p\u00e5 dit websted)\",\"datePublished\":\"2023-01-23T08:40:26+00:00\",\"dateModified\":\"2023-08-23T09:11:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\"},\"wordCount\":1523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg\",\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\",\"name\":\"Lazy Loading i Angular (s\u00e6t det til at fungere p\u00e5 dit websted) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg\",\"datePublished\":\"2023-01-23T08:40:26+00:00\",\"dateModified\":\"2023-08-23T09:11:07+00:00\",\"description\":\"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/angular\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy Loading i Angular (brug det p\u00e5 dit websted)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"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\/dk\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy Loading i Angular (s\u00e6t det til at fungere p\u00e5 dit websted) - Kinsta\u00ae","description":"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.","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\/dk\/blog\/lazy-loading-i-angular\/","og_locale":"da_DK","og_type":"article","og_title":"Lazy Loading i Angular (brug det p\u00e5 dit websted)","og_description":"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.","og_url":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-01-23T08:40:26+00:00","article_modified_time":"2023-08-23T09:11:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-i-angular.jpeg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-i-angular.jpeg","twitter_creator":"@kinsta_dk","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Michael Nyamande","Estimeret l\u00e6setid":"9 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Lazy Loading i Angular (brug det p\u00e5 dit websted)","datePublished":"2023-01-23T08:40:26+00:00","dateModified":"2023-08-23T09:11:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/"},"wordCount":1523,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg","inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/","url":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/","name":"Lazy Loading i Angular (s\u00e6t det til at fungere p\u00e5 dit websted) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg","datePublished":"2023-01-23T08:40:26+00:00","dateModified":"2023-08-23T09:11:07+00:00","description":"Lazy loading af aktiver kan reducere flaskehalse, der g\u00f8r din hjemmeside langsommere. S\u00e5dan fremskyndes tingene ved hj\u00e6lp af Angular JavaScript-framework.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/01\/lazy-loading-in-angular.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/lazy-loading-i-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"Angular","item":"https:\/\/kinsta.com\/dk\/emner\/angular\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading i Angular (brug det p\u00e5 dit websted)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","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\/dk\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=48148"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48148\/revisions"}],"predecessor-version":[{"id":52297,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/48148\/revisions\/52297"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/translations\/dk"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/48148\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/48149"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=48148"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=48148"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=48148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}