{"id":49586,"date":"2023-01-23T09:41:48","date_gmt":"2023-01-23T08:41:48","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=49586&#038;preview=true&#038;preview_id=49586"},"modified":"2023-05-23T10:32:14","modified_gmt":"2023-05-23T08:32:14","slug":"lazy-loading-in-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/","title":{"rendered":"Lazy loading in Angular (zo zet je het aan het werk op jouw website)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> is een frontend <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> framework dat is ontwikkeld door Google voor het bouwen van schaalbare zakelijke webapplicaties. Sommige van deze applicaties kunnen behoorlijk groot worden, waardoor de laadtijd van je applicatie wordt be\u00efnvloed.<\/p>\n<p>Om de laadtijd te verkorten en de algehele ervaring van je gebruikers te verbeteren, kun je een techniek gebruiken die bekend staat als lazy loading. Met deze ingebouwde Angular feature kun je eerst alleen de benodigde onderdelen van de webapp laden, en daarna pas andere modules als dat nodig is.<\/p>\n<p>In dit artikel leer je meer over lazy loading en hoe het je webapp kan helpen versnellen.<\/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>Wat is lazy loading?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-lazyload\/#what-is-lazy-loading\">Lazy loading<\/a> verwijst naar de techniek om webpagina-elementen alleen te laden als ze nodig zijn. De tegenhanger is <em>eager loading<\/em>, waarbij alles onmiddellijk wordt geladen &#8211; of probeert te laden. Het eager loading van alle afbeeldingen, video&#8217;s, CSS en JavaScript code kan lange laadtijden betekenen &#8211; slecht nieuws voor gebruikers.<\/p>\n<p>Lazy loading wordt vaak gebruikt voor afbeeldingen en video&#8217;s op sites met veel content. In plaats van alle media in \u00e9\u00e9n keer te laden, wat veel bandbreedte zou gebruiken en de pagina&#8217;s zou vertragen, worden die elementen pas geladen als hun plaats op de pagina in beeld komt.<\/p>\n<p>Angular is een single-page framework dat voor veel van zijn functionaliteit afhankelijk is van JavaScript. De verzameling JavaScript van je app kan gemakkelijk groot worden naarmate de app groeit, en dat gaat gepaard met een overeenkomstige toename van het gegevensgebruik en de laadtijd. Om de zaken te versnellen kun je lazy loading gebruiken om eerst de vereiste modules op te halen en het laden van andere modules uit te stellen tot ze nodig zijn. <\/p>\n<h2>Voordelen van lazy loading in Angular<\/h2>\n<p>Lazy loading biedt voordelen die je site gebruiksvriendelijker maken. Dit zijn:<\/p>\n<ul>\n<li><strong>Snellere laadtijd:<\/strong> JavaScript bevat instructies voor het weergeven van je pagina en het laden van de gegevens ervan. Daarom is het een <em>render-blocking resource<\/em>. Dit betekent dat de browser moet wachten om alle JavaScript te laden voordat hij je pagina weergeeft. Bij lazy loading in Angular wordt de JavaScript opgesplitst in brokken die afzonderlijk worden geladen. Het eerste deel bevat alleen de logica die nodig is voor de hoofdmodule van de pagina. Hierbij wordt gebruik gemaakt van eager loading, waarna de overige modules gebruik maken van lazy loading. Door de omvang van het initi\u00eble deel te verkleinen, laat je <a href=\"https:\/\/kinsta.com\/nl\/leren\/snelheidsoptimalisatie\/\" target=\"_blank\" rel=\"noopener noreferrer\">de site sneller laden en renderen<\/a>.<\/li>\n<li><strong>Minder datagebruik:<\/strong> Door de data op te delen in brokken en te laden als dat nodig is, gebruik je mogelijk minder <a href=\"https:\/\/kinsta.com\/blog\/cpanel-bandwidth-usage\/\" target=\"_blank\" rel=\"noopener noreferrer\">bandbreedte<\/a>.<\/li>\n<li><strong>Bespaarde browserresources:<\/strong> Omdat de browser alleen de benodigde delen laadt, verspilt hij geen geheugen en CPU aan het interpreteren en renderen van code die niet nodig is.<\/li>\n<\/ul>\n\n<h2>Lazy loading implementeren in Angular<\/h2>\n<p>Om deze tutorial te volgen heb je het volgende nodig:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> ge\u00efnstalleerd<\/li>\n<li>Basiskennis van Angular<\/li>\n<\/ul>\n<h3>Je project opzetten<\/h3>\n<p>Je zult de <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a> gebruiken om je project te maken. Je kunt de CLI installeren met <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a> door het commando uit te voeren:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Maak daarna als volgt een project met de naam Lazy Loading Demo:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Dit commando cre\u00ebert een nieuw Angular project, compleet met routing. Je werkt uitsluitend in de map <code>src\/app<\/code>, die de code voor je app bevat. Deze map bevat je belangrijkste routingbestand, <code>app-routing.module.ts<\/code>. De structuur van de map moet er als volgt uitzien:<\/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: de Angular mapstructuur weergegeven in een terminal.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">De mapstructuur van een Angular project.<\/figcaption><\/figure>\n<h3>Maak een featuremodule met Routes<\/h3>\n<p>Vervolgens maak je een featuremodule die lazy geladen wordt. Om deze module te maken voer je dit commando uit:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Dit commando maakt een module genaamd <code>BlogModule<\/code>, samen met routing. Als je <code>src<\/code><code>\/app\/app-routing.module.ts<\/code> opent, zie je dat het er nu zo uitziet:<\/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>Het deel dat belangrijk is voor lazy loading is de derde regel:<\/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>Die regel definieert de routes. De route voor de blog gebruikt het <code>loadChildren<\/code> argument in plaats van <code>component<\/code>. Het <code>loadChildren<\/code> argument vertelt Angular om de route lazy te laden &#8211; om de module alleen dynamisch te importeren als de route wordt bezocht, en dan terug te sturen naar de router. De module definieert zijn eigen childroutes, zoals <code>blog\/**<\/code>, in zijn <code>routing.module.ts<\/code> bestand. De blogmodule die je hebt gegenereerd ziet er als volgt uit:<\/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>Je kunt zien dat dit routingsbestand een enkele route bevat, <code>''<\/code>. Deze lost op voor <code>\/blog<\/code> en wijst naar het BlogComponent. Je kunt meer componenten toevoegen en die routes in dit bestand defini\u00ebren.<\/p>\n<p>Als je bijvoorbeeld een component wilt toevoegen die details over een bepaalde blogpost ophaalt, kun je die component met dit commando maken:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Dat genereert de component voor de blogdetails en voegt hem toe aan de blogmodule. Om er een route voor toe te voegen, kun je die gewoon toevoegen aan je routes array:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Dit voegt een route toe die oplost voor <code>blog\/:title<\/code> (bijvoorbeeld <code>blog\/angular-tutorial<\/code>). Deze array van routes is lazy-loaded en niet opgenomen in de initi\u00eble bundel. <\/p>\n<h2>Lazy loading verifi\u00ebren<\/h2>\n<p>Je kunt eenvoudig controleren of lazy loading werkt door <code>ng serve<\/code> uit te voeren en de output te observeren. Onderaan je output zou je zoiets als dit moeten krijgen:<\/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: uitvoer van Angular's ng serve commando in de terminal.\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">Lazy loading verifi\u00ebren met Angular&#8217;s <code>ng serve<\/code>.<\/figcaption><\/figure>\n<p>De uitvoer hierboven is verdeeld in twee delen: <code>Initial Chunk Files<\/code> zijn de bestanden die worden geladen als de pagina voor het eerst wordt geladen. <code>Lazy Chunk Files<\/code>zijn lazy-loaded. De blogmodule staat in dit voorbeeld.<\/p>\n<h3>Controleren op lazy loading via de netwerklogs van de browser<\/h3>\n<p>Een andere manier om lazy loading te bevestigen is via het tabblad <strong>Network<\/strong>\u00a0 in het paneel Developer Tools van je browser. (Op Windows is dat <strong>F12<\/strong> in Chrome en Microsoft Edge, en <strong>Ctrl-Shift-I<\/strong> in Firefox. Op een Mac is dat <strong>Command<\/strong>&#8211;<strong>Option<\/strong>&#8211;<strong>I<\/strong> in Chrome, Firefox en Safari).<\/p>\n<p>Selecteer het filter <code>JS<\/code> om alleen JavaScript bestanden te zien die via het netwerk zijn geladen. Na het eerste laden van de app zou je zoiets als dit moeten krijgen:<\/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: Angular JavaScript bestanden gelogd in Developer Tools.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Eerste log van JavaScript downloads bekeken in Developer Tools.<\/figcaption><\/figure>\n<p>Als je navigeert naar <code>\/blog<\/code>, zie je dat er een nieuw deaal, <code>src_app_blog_blog_module_ts.js<\/code>, is geladen. Dit betekent dat je module alleen werd opgevraagd toen je naar die route navigeerde, en dat hij lazy wordt geladen. Het netwerklog zou er ongeveer zo uit moeten zien:<\/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: bijgewerkte weergave van Angular JavaScript bestanden die zijn gelogd in Developer Tools.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">Lazy geladen module verschijnt in downloads gelogd door Developer Tools.<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n\n<h2>Lazy loading versus eager loading<\/h2>\n<p>Laten we, ter vergelijking, ook een eager geladen module maken en zien hoe dat de bestandsgrootte en laadtijd be\u00efnvloedt. Om dit te demonstreren maak je een module voor authenticatie. Zo&#8217;n module moet wellicht eager geladen worden, omdat authenticatie iets is dat je misschien van alle gebruikers verlangt.<\/p>\n<p>Genereer een AuthModule door dit commando in de CLI uit te voeren:<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Dit genereert de module en een routeringsbestand. Het voegt ook de module toe aan het bestand <code>app.module.ts<\/code>. In tegenstelling tot het commando dat we de vorige keer gebruikten om een module te genereren, voegt dit commando echter geen lazy-loaded route toe. Het gebruikt de <code>--routing<\/code> parameter in plaats van <code>--route &lt;name&gt;<\/code>. Dat voegt de authenticatiemodule toe aan de <code>imports<\/code> array in <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>Het toevoegen van AuthModule aan je AppModule imports array betekent dat de authenticatie module wordt toegevoegd aan het initi\u00eble deel bestanden en wordt opgenomen met de hoofd JavaScript bundel. Om dit te verifi\u00ebren kun je <code>ng serve<\/code> opnieuw uitvoeren en de uitvoer observeren:<\/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 scripts nadat de authenticatiemodule is toegevoegd.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">Uitvoer van Angular&#8217;s <code>ng serve<\/code> commando nadat authenticatiemodule is toegevoegd.<\/figcaption><\/figure>\n<p>Zoals je ziet is de authenticatiemodule niet opgenomen als onderdeel van het lazy deel van de bestanden. Bovendien is de grootte van de initi\u00eble bundel toegenomen. Het bestand <code>main.js<\/code> is bijna verdubbeld in omvang en is toegenomen van 8 KB tot 15 KB. In dit voorbeeld is de toename klein, omdat de componenten niet veel code bevatten. Maar als je de componenten vult met logica, zal deze bestandsgrootte toenemen, wat een sterk argument is voor lazy loading. <\/p>\n<h2>Samenvatting<\/h2>\n<p>Je hebt geleerd hoe je lazy loading in Angular kunt gebruiken om modules alleen op te halen als ze nodig zijn. Lazy loading is een geweldige techniek om laadtijden te verbeteren, gegevensgebruik te verminderen, en je <a href=\"https:\/\/kinsta.com\/nl\/blog\/backend-vs-frontend\/\">frontend en backend<\/a> resources beter te benutten.<\/p>\n<p>Lazy loading zal, samen met technologie als <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-cdn\/\">content distributie netwerken<\/a> en het <a href=\"https:\/\/kinsta.com\/nl\/blog\/minificeer-javascript\/\">minifceren van JavaScript<\/a>, zowel de prestaties van je website als de tevredenheid van je gebruikers verbeteren.<\/p>\n<p>Als je een WordPress site ontwikkelt en je wilt de snelheid \u00e9cht opvoeren, lees dan over <a href=\"https:\/\/kinsta.com\/nl\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> om een aantal indrukwekkende statistieken te zien.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is een frontend JavaScript framework dat is ontwikkeld door Google voor het bouwen van schaalbare zakelijke webapplicaties. Sommige van deze applicaties kunnen behoorlijk groot worden, &#8230;<\/p>\n","protected":false},"author":271,"featured_media":49587,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[823,848],"class_list":["post-49586","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 (zo zet je het aan het werk op jouw website) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het 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\/nl\/blog\/lazy-loading-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy loading in Angular (zo zet je het aan het werk op jouw website)\" \/>\n<meta property=\"og:description\" content=\"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/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-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:41:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-23T08:32:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\" \/>\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=\"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Lazy loading in Angular (zo zet je het aan het werk op jouw website)\",\"datePublished\":\"2023-01-23T08:41:48+00:00\",\"dateModified\":\"2023-05-23T08:32:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/\"},\"wordCount\":1480,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/\",\"name\":\"Lazy loading in Angular (zo zet je het aan het werk op jouw website) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\",\"datePublished\":\"2023-01-23T08:41:48+00:00\",\"dateModified\":\"2023-05-23T08:32:14+00:00\",\"description\":\"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript tutorials\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy loading in Angular (zo zet je het aan het werk op jouw website)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy loading in Angular (zo zet je het aan het werk op jouw website) - Kinsta\u00ae","description":"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het 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\/nl\/blog\/lazy-loading-in-angular\/","og_locale":"nl_NL","og_type":"article","og_title":"Lazy loading in Angular (zo zet je het aan het werk op jouw website)","og_description":"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.","og_url":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-01-23T08:41:48+00:00","article_modified_time":"2023-05-23T08:32:14+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Michael Nyamande","Geschatte leestijd":"9 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Lazy loading in Angular (zo zet je het aan het werk op jouw website)","datePublished":"2023-01-23T08:41:48+00:00","dateModified":"2023-05-23T08:32:14+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/"},"wordCount":1480,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/","url":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/","name":"Lazy loading in Angular (zo zet je het aan het werk op jouw website) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","datePublished":"2023-01-23T08:41:48+00:00","dateModified":"2023-05-23T08:32:14+00:00","description":"Het lazy loaden van assets kan de knelpunten verminderen die je website vertragen. Hier lees je hoe je dingen kunt versnellen met behulp van het Angular JavaScript framework.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/01\/lazy-loading-in-angular.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/lazy-loading-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript tutorials","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Lazy loading in Angular (zo zet je het aan het werk op jouw website)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=49586"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49586\/revisions"}],"predecessor-version":[{"id":49758,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/49586\/revisions\/49758"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/translations\/dk"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/49586\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/49587"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=49586"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=49586"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=49586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}