{"id":63983,"date":"2023-01-23T09:41:37","date_gmt":"2023-01-23T08:41:37","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=63983&#038;preview=true&#038;preview_id=63983"},"modified":"2023-02-22T15:42:32","modified_gmt":"2023-02-22T14:42:32","slug":"lazy-loading-in-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/","title":{"rendered":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/it\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> \u00e8 un framework <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> frontend sviluppato da Google per la creazione di applicazioni web scalabili di livello enterprise. Alcune di queste applicazioni possono diventare molto grandi e influire sul tempo di caricamento dell&#8217;applicazione.<\/p>\n<p>Per ridurre i tempi di caricamento e migliorare l&#8217;esperienza complessiva dei vostri utenti, potete usare una tecnica nota come lazy loading (letteralmente \u201ccaricamento pigro\u201d). Questa funzione nativa di Angular vi permette di caricare prima solo le parti necessarie dell&#8217;applicazione web, per poi caricare gli altri moduli in base alle necessit\u00e0.<\/p>\n<p>In questo articolo scoprirete come funziona il lazy loading e come pu\u00f2 aiutarvi a velocizzare la vostra applicazione web.<\/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>Cos&#8217;\u00c8 il Lazy Loading?<\/h2>\n<p>Il <a href=\"https:\/\/kinsta.com\/it\/blog\/lazy-load-in-wordpress\/#what-is-lazy-loading\">lazy loading<\/a> si riferisce alla tecnica di caricare gli elementi della pagina web solo quando sono necessari. La sua controparte \u00e8 l&#8217;<em>eager loading<\/em>, quando tutto viene caricato &#8211; o si cerca di farlo &#8211; immediatamente. Recuperare tutte le immagini, i video, i CSS e il codice JavaScript in modo avventato pu\u00f2 significare tempi di caricamento lunghi, una pessima notizia per gli utenti.<\/p>\n<p>Il lazy loading \u00e8 spesso usato per le immagini e i video nei siti che ospitano molti contenuti. Invece di caricare tutti i media in una volta sola, cosa che consumerebbe molta banda e rallenterebbe le visualizzazioni della pagina, questi elementi vengono caricati quando la loro posizione sulla pagina sta per essere visualizzata.<\/p>\n<p>Angular \u00e8 un framework per applicazioni a pagina singola che si basa su JavaScript per gran parte delle sue funzionalit\u00e0. La collezione di JavaScript della vostra applicazione pu\u00f2 facilmente aumentare man mano che l&#8217;applicazione cresce, con un conseguente aumento dell&#8217;utilizzo dei dati e del tempo di caricamento. Per accelerare i tempi, potete usare il lazy loading per recuperare prima i moduli necessari e rimandare il caricamento degli altri moduli fino a quando non sono necessari.<\/p>\n<h2>Vantaggi del Lazy Loading in Angular<\/h2>\n<p>Il lazy loading offre vantaggi che rendono il vostro sito pi\u00f9 facile da usare. Questi includono:<\/p>\n<ul>\n<li><strong>Tempi di caricamento pi\u00f9 rapidi:<\/strong> JavaScript contiene le istruzioni per la visualizzazione della pagina e il caricamento dei dati. Per questo motivo, \u00e8 una <em>risorsa che blocca il rendering<\/em>. Ci\u00f2 significa che il browser deve attendere il caricamento di tutto il JavaScript prima di eseguire il rendering della pagina. Durante il lazy loading in Angular, il JavaScript viene suddiviso in parti che vengono caricate separatamente. Il pezzo iniziale contiene solo la logica necessaria per il modulo principale della pagina. Viene caricato in modo eager, quindi i moduli rimanenti vengono caricati in modo lazy. Riducendo le dimensioni del pezzo iniziale, il <a href=\"https:\/\/kinsta.com\/it\/impara\/velocita-pagina\/\" target=\"_blank\" rel=\"noopener noreferrer\">sito verr\u00e0 caricato e renderizzato pi\u00f9 velocemente.<\/a><\/li>\n<li><strong>Minore utilizzo di dati:<\/strong> Suddividendo i dati in parti e caricandoli quando necessario, potrete usare meno <a href=\"https:\/\/kinsta.com\/it\/blog\/utilizzo-larghezza-di-banda-cpanel\/\" target=\"_blank\" rel=\"noopener noreferrer\">larghezza di banda<\/a>.<\/li>\n<li><strong>Conservazione delle risorse del browser:<\/strong> Poich\u00e9 il browser carica solo i pezzi necessari, non spreca memoria e CPU cercando di interpretare e renderizzare codice non necessario.<\/li>\n<\/ul>\n\n<h2>Implementare il Lazy Loading in Angular<\/h2>\n<p>Per seguire questo tutorial, avrete bisogno di quanto segue:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> installato<\/li>\n<li>Conoscenza di base di Angular<\/li>\n<\/ul>\n<h3>Creare il Vostro Progetto<\/h3>\n<p>Per creare il vostro progetto userete la <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">CLI di Angular<\/a>. Potete installare la CLI usando <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a> ed eseguendo il comando:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Dopodich\u00e9, create un progetto chiamato Lazy Loading Demo come questo:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Questo comando crea un nuovo progetto Angular, completo di routing. Lavorerete esclusivamente nella cartella <code>src\/app<\/code>, che contiene il codice della vostra applicazione. Questa cartella contiene il file di routing principale, <code>app-routing.module.ts<\/code>. La struttura della cartella dovrebbe essere la seguente:<\/p>\n<figure id=\"attachment_143115\" aria-describedby=\"caption-attachment-143115\" 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=\"Schermata: La struttura delle cartelle di Angular visualizzata in un terminale.\" width=\"1034\" height=\"530\"><figcaption id=\"caption-attachment-143115\" class=\"wp-caption-text\">La struttura delle cartelle di un progetto Angular.<\/figcaption><\/figure>\n<h3>Creare un Modulo Funzionale con il Routing<\/h3>\n<p>Successivamente, creerete un modulo funzionale che verr\u00e0 caricato con lazy loading. Per creare questo modulo, eseguite questo comando:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Questo comando crea un modulo chiamato <code>BlogModule<\/code>, insieme al routing. Se aprite <code>src<\/code><code>\/app\/app-routing.module.ts<\/code>, vedrete che ora ha questo aspetto:<\/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>La parte importante per il lazy loading \u00e8 la terza riga:<\/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>Questa riga definisce i percorsi (routes). Il route per il blog utilizza l&#8217;argomento <code>loadChildren<\/code> invece di <code>component<\/code>. L&#8217;argomento <code>loadChildren<\/code> indica ad Angular di caricare in modo lazy il route, ossia di importare dinamicamente il modulo solo quando il route viene visitato, per poi restituirlo al router. Il modulo definisce i propri route figli, come per esempio <code>blog\/**<\/code>, nel suo file <code>routing.module.ts<\/code>. Il modulo del blog che avete generato si presenta cos\u00ec:<\/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>Noterete che questo file di routing contiene un solo percorso, <code>''<\/code>. Questo si risolve per <code>\/blog<\/code> e punta al BlogComponent. Potete aggiungere altri componenti e definire i relativi percorsi in questo file.<\/p>\n<p>Per esempio, se voleste aggiungere un componente che raccolga i dettagli di un particolare articolo del blog, potreste creare il componente con questo comando:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Questo genera il componente per i dettagli del blog e lo aggiunge al modulo blog. Per aggiungere un percorso, potete semplicemente aggiungerlo all&#8217;array dei routes:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                    \t{path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Questo aggiunge un percorso che si risolve per <code>blog\/:title<\/code> (per esempio, <code>blog\/angular-tutorial<\/code>). Questo array di routes \u00e8 caricato in modo lazy e non \u00e8 incluso nel bundle iniziale.<\/p>\n<h2>Verificare il Lazy Loading<\/h2>\n<p>Potete verificare facilmente che il lazy loading funzioni eseguendo <code>ng serve<\/code> e osservando l&#8217;output. In fondo all&#8217;output, dovreste ottenere qualcosa di simile a questo:<\/p>\n<figure id=\"attachment_143119\" aria-describedby=\"caption-attachment-143119\" 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=\"Schermata: Output del comando ng serve di Angular nel terminal.\" width=\"867\" height=\"342\"><figcaption id=\"caption-attachment-143119\" class=\"wp-caption-text\">Verifica del lazy loading con <code>ng serve<\/code> di Angular.<\/figcaption><\/figure>\n<p>L&#8217;output qui sopra \u00e8 diviso in due parti: <code>Initial Chunk Files<\/code> sono i file caricati al primo caricamento della pagina. <code>Lazy Chunk Files<\/code>sono i file caricati in modo lazy. Il modulo blog \u00e8 mostrato in questo esempio.<\/p>\n<h3>Verifica del Lazy Loading Attraverso i Log di Rete del Browser<\/h3>\n<p>Un altro modo per confermare il lazy loading \u00e8 quello di usare la scheda <strong>Rete<\/strong> nel pannello Strumenti per sviluppatori del browser. (Su Windows \u00e8 <strong>F12<\/strong> in Chrome e Microsoft Edge e <strong>Ctrl-Shift-I<\/strong> in Firefox. Su Mac \u00e8 <strong>Command-Option-I<\/strong> in Chrome, Firefox e Safari)<\/p>\n<p>Selezionate il filtro <code>JS<\/code> per visualizzare solo i file JavaScript caricati in rete. Dopo il caricamento iniziale dell&#8217;applicazione, dovreste ottenere qualcosa di simile a questo:<\/p>\n<figure id=\"attachment_143125\" aria-describedby=\"caption-attachment-143125\" 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=\"Schermata: File JavaScript Angular registrati negli Strumenti per sviluppatori.\" width=\"1040\" height=\"603\"><figcaption id=\"caption-attachment-143125\" class=\"wp-caption-text\">Registro iniziale dei download di JavaScript visualizzati negli Strumenti per sviluppatori.<\/figcaption><\/figure>\n<p>Quando navigate su <code>\/blog<\/code>, noterete che \u00e8 stato caricato un nuovo chunk, <code>src_app_blog_blog_module_ts.js<\/code>. Questo significa che il vostro modulo \u00e8 stato richiesto solo quando avete navigato verso quel percorso e viene caricato con lazy loading. Il log di rete dovrebbe essere simile a questo:<\/p>\n<figure id=\"attachment_143123\" aria-describedby=\"caption-attachment-143123\" 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=\"Schermata: Vista aggiornata dei file JavaScript Angular registrati negli Strumenti per sviluppatori.\" width=\"1040\" height=\"604\"><figcaption id=\"caption-attachment-143123\" class=\"wp-caption-text\">Il modulo caricato con lazy loading appare nei download registrati da Developer Tools.<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n\n<h2>Lazy Loading vs Eager Loading<\/h2>\n<p>Per fare un paragone, creiamo anche un modulo caricato con eager loading e vediamo come influisce sulla dimensione del file e sul tempo di caricamento. Per dimostrarlo, creeremo un modulo per l&#8217;autenticazione. Un modulo di questo tipo potrebbe avere bisogno di essere caricato con eager loading, poich\u00e9 l&#8217;autenticazione \u00e8 un&#8217;operazione che potreste richiedere a tutti gli utenti.<\/p>\n<p>Generate un AuthModule eseguendo questo comando nella CLI:<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Questo genera il modulo e un file di routing. Inoltre aggiunge il modulo al file <code>app.module.ts<\/code>. Tuttavia, a differenza del comando che abbiamo usato per generare un modulo l&#8217;ultima volta, questo non aggiunge un percorso lazy-loaded. Usa il parametro <code>--routing<\/code> invece di <code>--route &lt;name&gt;<\/code>. Questo aggiunge il modulo di autenticazione all&#8217;array <code>imports<\/code> in <code>app.module.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">@NgModule({\n  declarations: [\n\tAppComponent\n  ],\n  imports: [\n\tBrowserModule,\n\tAppRoutingModule,\n\tAuthModule \/\/added auth module\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n<\/code><\/pre>\n<p>L&#8217;aggiunta di AuthModule all&#8217;array AppModule imports significa che il modulo di autenticazione viene aggiunto ai file chunk iniziali e sar\u00e0 incluso nel bundle JavaScript principale. Per verificarlo, potete eseguire nuovamente <code>ng serve<\/code> e osservare l&#8217;output:<\/p>\n<figure id=\"attachment_143127\" aria-describedby=\"caption-attachment-143127\" 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=\"Schermata: Script Angular dopo l'aggiunta del modulo di autenticazione.\" width=\"752\" height=\"332\"><figcaption id=\"caption-attachment-143127\" class=\"wp-caption-text\">Output del comando <code>ng serve<\/code> di Angular dopo l&#8217;aggiunta del modulo di autenticazione.<\/figcaption><\/figure>\n<p>Come potete vedere, il modulo di autenticazione non \u00e8 incluso nei chunk di file lazy. Inoltre, le dimensioni del bundle iniziale sono aumentate. Il file <code>main.js<\/code> \u00e8 quasi raddoppiato, passando da 8 KB a 15 KB. In questo esempio, l&#8217;aumento \u00e8 minimo perch\u00e9 i componenti non contengono molto codice. Tuttavia, man mano che i componenti vengono riempiti di logica, le dimensioni del file aumenteranno, il che rende pi\u00f9 che mai opportuno il lazy loading.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Avete imparato a usare il lazy loading in Angular per recuperare i moduli solo quando sono necessari. Il lazy loading \u00e8 un&#8217;ottima tecnica per migliorare i tempi di caricamento, ridurre l&#8217;utilizzo dei dati e utilizzare meglio le risorse del <a href=\"https:\/\/kinsta.com\/it\/blog\/backend-vs-frontend\/\">frontend e del backend<\/a>.<\/p>\n<p>Il lazy loading, insieme a tecnologie come le <a href=\"https:\/\/kinsta.com\/it\/blog\/cdn-per-wordpress\/\">reti di distribuzione dei contenuti (CDN)<\/a> e la <a href=\"https:\/\/kinsta.com\/it\/blog\/minimizzare-javascript\/\">minificazione di JavaScript<\/a>, migliorer\u00e0 le prestazioni del vostro sito web e la soddisfazione dei vostri utenti.<\/p>\n<p>Se state sviluppando un sito WordPress e volete aumentare la velocit\u00e0, leggete <a href=\"https:\/\/kinsta.com\/it\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> e scoprirete numeri impressionanti.<\/p>\n<p>\u200b\u200b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u00e8 un framework JavaScript frontend sviluppato da Google per la creazione di applicazioni web scalabili di livello enterprise. Alcune di queste applicazioni possono diventare molto &#8230;<\/p>\n","protected":false},"author":271,"featured_media":63984,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26214,25847],"class_list":["post-63983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular","topic-tutorial-javascript"],"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 (Mettilo al Servizio del Tuo Sito Web) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.\" \/>\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\/it\/blog\/lazy-loading-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)\" \/>\n<meta property=\"og:description\" content=\"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:41:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T14:42:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)\",\"datePublished\":\"2023-01-23T08:41:37+00:00\",\"dateModified\":\"2023-02-22T14:42:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\"},\"wordCount\":1483,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\",\"name\":\"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg\",\"datePublished\":\"2023-01-23T08:41:37+00:00\",\"dateModified\":\"2023-02-22T14:42:32+00:00\",\"description\":\"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial JavaScript\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/tutorial-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web) - Kinsta\u00ae","description":"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.","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\/it\/blog\/lazy-loading-in-angular\/","og_locale":"it_IT","og_type":"article","og_title":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)","og_description":"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.","og_url":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-01-23T08:41:37+00:00","article_modified_time":"2023-02-22T14:42:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Michael Nyamande","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)","datePublished":"2023-01-23T08:41:37+00:00","dateModified":"2023-02-22T14:42:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/"},"wordCount":1483,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/","url":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/","name":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","datePublished":"2023-01-23T08:41:37+00:00","dateModified":"2023-02-22T14:42:32+00:00","description":"Il lazy-loading delle risorse pu\u00f2 ridurre le strozzature che rallentano il tuo sito. Ecco come velocizzare le cose con il framework JavaScript Angular.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/lazy-loading-in-angular.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/lazy-loading-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Tutorial JavaScript","item":"https:\/\/kinsta.com\/it\/argomenti\/tutorial-javascript\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading in Angular (Mettilo al Servizio del Tuo Sito Web)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/63983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=63983"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/63983\/revisions"}],"predecessor-version":[{"id":64197,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/63983\/revisions\/64197"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/translations\/dk"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/63983\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/63984"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=63983"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=63983"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=63983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}