{"id":56478,"date":"2023-01-23T05:39:28","date_gmt":"2023-01-23T08:39:28","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=56478&#038;preview=true&#038;preview_id=56478"},"modified":"2023-08-21T10:05:33","modified_gmt":"2023-08-21T13:05:33","slug":"lazy-loading-no-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/","title":{"rendered":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> \u00e9 um framework de frontend <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> desenvolvido pelo Google para construir aplicativos web escal\u00e1veis de n\u00edvel empresarial. Alguns desses aplicativos podem ficar bastante grandes, afetando o tempo de carregamento do seu aplicativo.<\/p>\n<p>Para reduzir o tempo de carregamento e melhorar a experi\u00eancia geral dos seus usu\u00e1rios, voc\u00ea pode usar uma t\u00e9cnica conhecida como carregamento pregui\u00e7oso &#8220;lazy loading&#8221;. Essa funcionalidade nativa do Angular permite que voc\u00ea carregue apenas as partes necess\u00e1rias do aplicativo web primeiro e, em seguida, carregue outros m\u00f3dulos conforme necess\u00e1rio.<\/p>\n<p>Neste artigo, voc\u00ea aprender\u00e1 sobre o lazy loading e como ele pode ajudar a acelerar seu aplicativo 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>O que \u00e9 Lazy Loading?<\/h2>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/lazy-load-no-wordpress\/#what-is-lazy-loading\">lazy loading<\/a> refere-se \u00e0 t\u00e9cnica de carregar elementos de uma p\u00e1gina da web somente quando eles s\u00e3o necess\u00e1rios. Seu oposto \u00e9 o eager loading, quando tudo \u00e9 carregado \u2014 ou tenta ser carregado \u2014 imediatamente. Carregar todas as imagens, v\u00eddeos, CSS e c\u00f3digos JavaScript com eagerness pode significar tempos de carregamento longos \u2014 uma m\u00e1 not\u00edcia para os usu\u00e1rios.<\/p>\n<p>O lazy loading \u00e9 frequentemente usado para imagens e v\u00eddeos em sites que hospedam muito conte\u00fado. Em vez de carregar todo o conte\u00fado de m\u00eddia de uma vez, o que usaria muita largura de banda e deixaria a p\u00e1gina mais lenta, esses elementos s\u00e3o carregados quando sua posi\u00e7\u00e3o na p\u00e1gina est\u00e1 prestes a ser visualizada durante a rolagem.<\/p>\n<p>Angular \u00e9 um framework de aplicativo de p\u00e1gina \u00fanica que depende do JavaScript para grande parte da sua funcionalidade. A cole\u00e7\u00e3o de JavaScript do seu aplicativo pode facilmente se tornar grande \u00e0 medida que o aplicativo cresce, e isso vem com um aumento correspondente no uso de dados e tempo de carregamento. Para acelerar tudo, voc\u00ea pode usar o lazy loading para primeiro buscar os m\u00f3dulos necess\u00e1rios e adiar o carregamento de outros m\u00f3dulos at\u00e9 que eles sejam necess\u00e1rios.<\/p>\n<h2>Benef\u00edcios do Lazy Loading no Angular<\/h2>\n<p>O lazy loading oferece benef\u00edcios que tornar\u00e3o o seu site mais f\u00e1cil de usar. Estes incluem:<\/p>\n<ul>\n<li><strong>Tempo de carregamento mais r\u00e1pido:<\/strong> JavaScript cont\u00e9m instru\u00e7\u00f5es para exibir sua p\u00e1gina e carregar seus dados. Por causa disso, \u00e9 um recurso que bloqueia a renderiza\u00e7\u00e3o. Isso significa que o navegador precisa esperar para carregar todo o JavaScript antes de renderizar sua p\u00e1gina. Ao usar o lazy loading em Angular, o JavaScript \u00e9 dividido em partes que s\u00e3o carregados separadamente. A parte inicial cont\u00e9m apenas a l\u00f3gica necess\u00e1ria para o m\u00f3dulo principal da p\u00e1gina sendo carregado imediatamente. Em seguida, os demais m\u00f3dulos s\u00e3o carregados de forma pregui\u00e7osa (lazy loading). Reduzir o tamanho da parte inicial <a href=\"https:\/\/kinsta.com\/pt\/aprenda\/velocidade-de-sites\/\" target=\"_blank\" rel=\"noopener noreferrer\">far\u00e1 o site carregar e renderizar mais rapidamente<\/a>.<\/li>\n<li><strong>Menos uso de dados:<\/strong> Dividindo os dados em partes e carregando conforme necess\u00e1rio, voc\u00ea poder\u00e1 usar menos <a href=\"https:\/\/kinsta.com\/pt\/blog\/utilizacao-de-largura-de-banda-do-cpanel\/\" target=\"_blank\" rel=\"noopener noreferrer\">largura de banda<\/a>.<\/li>\n<li><strong>Recursos conservados do navegador:<\/strong> Como o navegador carrega apenas as partes que s\u00e3o necess\u00e1rias, ele n\u00e3o desperdi\u00e7a mem\u00f3ria e CPU tentando interpretar e renderizar c\u00f3digo que n\u00e3o \u00e9 necess\u00e1rio.<\/li>\n<\/ul>\n\n<h2>Implementando o Lazy Loading no\u00a0Angular<\/h2>\n<p>Para seguir com este tutorial, voc\u00ea precisar\u00e1:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> instalado<\/li>\n<li>Conhecimentos b\u00e1sicos do Angular<\/li>\n<\/ul>\n<h3>Eleve o n\u00edvel do seu projeto<\/h3>\n<p>Voc\u00ea usar\u00e1 o <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">CLI Angular<\/a> para criar seu projeto. Voc\u00ea pode instalar o CLI usando <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a>, executando o comando:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Depois disso, crie um projeto chamado Lazy Loading Demo como este:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Esse comando cria um novo projeto angular, completo com roteamento. Voc\u00ea estar\u00e1 trabalhando exclusivamente na pasta <code>src\/app<\/code>, que cont\u00e9m o c\u00f3digo para o seu aplicativo. Esta pasta cont\u00e9m o seu arquivo principal de roteamento, <code>app-routing.module.ts<\/code>. A estrutura da pasta deve ser parecida com esta:<\/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=\"A estrutura de pastas de um projeto Angular.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">A estrutura de pastas de um projeto Angular.<\/figcaption><\/figure>\n<h3>Crie um m\u00f3dulo de recurso com scripts<\/h3>\n<p>A seguir, voc\u00ea criar\u00e1 um m\u00f3dulo de recursos que utilizar\u00e1 o lazy loading. Para criar este m\u00f3dulo, execute este comando:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Este comando cria um m\u00f3dulo chamado <code>BlogModule<\/code>, com o roteamento. Se voc\u00ea abrir <code>src<\/code><code>\/app\/app-routing.module.ts<\/code>, voc\u00ea ver\u00e1 agora que ele se parece com isso:<\/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>A parte importante para o lazy loading \u00e9 a terceira linha:<\/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>Essa linha define as rotas. A rota para o blog usa o argumento <code>loadChildren<\/code> ao inv\u00e9s de <code>component<\/code>. O argumento <code>loadChildren<\/code> diz ao Angular para carregar de forma pregui\u00e7osa (Lazy loading) a rota \u2014 para importar dinamicamente o m\u00f3dulo somente quando a rota \u00e9 visitada, e, em seguida, devolv\u00ea-lo ao roteador. O m\u00f3dulo define suas pr\u00f3prias rotas filhas, como <code>blog\/**<\/code>, em seu arquivo <code>routing.module.ts<\/code>. O m\u00f3dulo de blog que voc\u00ea gerou deve se parecer com isso:<\/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>Voc\u00ea notar\u00e1 que este arquivo de roteamento cont\u00e9m uma \u00fanica rota, <code>''<\/code>. Isso resolve para <code>\/blog<\/code> e aponta para o BlogComponent. Voc\u00ea pode adicionar mais componentes e definir essas rotas neste arquivo.<\/p>\n<p>Por exemplo, se voc\u00ea quisesse adicionar um componente que puxasse detalhes sobre um determinado artigo de blog, voc\u00ea poderia criar o componente com este comando:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Isso gera o componente para o detalhe do blog e o adiciona ao m\u00f3dulo do blog. Para adicionar uma rota para ele, voc\u00ea pode simplesmente adicion\u00e1-lo \u00e0 sua array de rotas:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Isso adiciona uma rota que resolve para <code>blog\/:title<\/code> (por exemplo, <code>blog\/angular-tutorial<\/code>). Esta array de rotas \u00e9 lazy e n\u00e3o est\u00e1 inclu\u00edda no plano inicial.<\/p>\n<h2>Verifique o carregamento pregui\u00e7oso (Lazy loading)<\/h2>\n<p>Voc\u00ea pode verificar facilmente se o lazy loading est\u00e1 funcionando, executando o comando <code>ng serve<\/code> e observando a sa\u00edda. Na parte inferior da sa\u00edda, voc\u00ea deve obter algo como isso:<\/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=\"Verifica\u00e7\u00e3o do lazy loading usando o comando &lt;code&gt;ng serve&lt;\/code&gt;.\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">Verifica\u00e7\u00e3o do lazy loading usando o comando <code>ng serve<\/code>.<\/figcaption><\/figure>\n<p>A sa\u00edda acima \u00e9 dividida em duas partes: <code>Initial Chunk Files<\/code> s\u00e3o os arquivos carregados quando a p\u00e1gina \u00e9 carregada pela primeira vez. <code>Lazy Chunk Files<\/code>s\u00e3o lazy loading. O m\u00f3dulo do blog est\u00e1 listado neste exemplo.<\/p>\n<h3>Verificando o Lazy Loading atrav\u00e9s dos registros da rede do navegador:<\/h3>\n<p>Outra maneira de confirmar o lazy loading \u00e9 usando a aba <strong>Network<\/strong> no painel de Ferramentas do Desenvolvedor do seu navegador. (No Windows, apenas pressione <strong>F12<\/strong> para Chrome e Microsoft Edge, e <strong>Ctrl-Shift-I<\/strong> no Firefox. Em um Mac, pressione <strong>Command-Option-I<\/strong> para Chrome, Firefox e Safari)<\/p>\n<p>Selecione o filtro <code>JS<\/code> para visualizar apenas arquivos JavaScript carregados atrav\u00e9s da rede. Ap\u00f3s o carregamento inicial do aplicativo, voc\u00ea deve obter algo como isso:<\/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=\"Registro inicial de downloads em JavaScript visualizados em Ferramentas de Desenvolvedores.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Registro inicial de downloads em JavaScript visualizados em Ferramentas de Desenvolvedores.<\/figcaption><\/figure>\n<p>Quando voc\u00ea navegar para <code>\/blog<\/code>, voc\u00ea notar\u00e1 que uma nova parte, <code>src_app_blog_blog_module_ts.js<\/code>, est\u00e1 carregada. Isso significa que seu m\u00f3dulo foi solicitado somente quando voc\u00ea navegou para aquela rota, e ele est\u00e1 sendo carregado de forma pregui\u00e7osa (lazy loading). O registro da rede deve ser algo parecido com isso:<\/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=\"M\u00f3dulo lazy que aparece nos downloads registrados pelas Ferramentas do Desenvolvedor.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">M\u00f3dulo lazy que aparece nos downloads registrados pelas Ferramentas do Desenvolvedor.<\/figcaption><\/figure>\n\n<h2>Lazy Loading vs Eager Loading<\/h2>\n<p>Para fins de compara\u00e7\u00e3o, criaremos um m\u00f3dulo carregado de forma eager e ver como isso impacta o tamanho do arquivo e o tempo de carregamento. Para demonstrar isso, voc\u00ea criar\u00e1 um m\u00f3dulo para autentica\u00e7\u00e3o. Um m\u00f3dulo desse tipo pode precisar ser carregado de forma eager, j\u00e1 que a autentica\u00e7\u00e3o \u00e9 algo que todos os usu\u00e1rios precisam fazer.<\/p>\n<p>Para gerar um AuthModule, execute o seguinte comando no terminal (CLI):<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Isso ir\u00e1 gerar o m\u00f3dulo e um arquivo de roteamento. Ele tamb\u00e9m adiciona o m\u00f3dulo ao arquivo <code>app.module.ts<\/code>. Entretanto, ao contr\u00e1rio do comando que usamos para gerar um m\u00f3dulo da \u00faltima vez, este n\u00e3o adiciona uma rota carregada de forma pregui\u00e7osa (Lazy loading). Ele usa o par\u00e2metro <code>--routing<\/code> ao inv\u00e9s de <code>--route &lt;name&gt;<\/code>. Isso adiciona o m\u00f3dulo de autentica\u00e7\u00e3o ao array <code>imports<\/code> em <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})\u00a0<\/code><\/pre>\n<p><span style=\"font-size: 1rem\">Adicionar o AuthModule ao array de imports do AppModule significa que o m\u00f3dulo de autentica\u00e7\u00e3o ser\u00e1 adicionado aos arquivos do chunk inicial e ser\u00e1 inclu\u00eddo no plano JavaScript principal.<\/span> Para verificar isso, voc\u00ea pode executar o comando <code>ng serve<\/code> novamente e observar a sa\u00edda:<\/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=\"A sa\u00edda do comando &lt;code&gt;ng serve&lt;\/code&gt; da Angular ap\u00f3s o m\u00f3dulo de autentica\u00e7\u00e3o \u00e9 adicionada.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">A sa\u00edda do comando <code>ng serve<\/code> da Angular ap\u00f3s o m\u00f3dulo de autentica\u00e7\u00e3o \u00e9 adicionada.<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, o m\u00f3dulo de autentica\u00e7\u00e3o n\u00e3o est\u00e1 incluso como parte dos arquivos de lazy partes. Al\u00e9m disso, o tamanho do plano inicial aumentou. O arquivo <code>main.js<\/code> quase dobrou de tamanho, aumentando de 8 KB para 15 KB. Neste exemplo, o aumento \u00e9 pequeno, j\u00e1 que os componentes n\u00e3o cont\u00eam muito c\u00f3digo.\u00a0<span style=\"font-size: 1rem\">No entanto, \u00e0 medida que voc\u00ea preenche os componentes com l\u00f3gica, o tamanho deste arquivo aumentar\u00e1, refor\u00e7ando a necessidade do lazy loading.<\/span><span style=\"font-size: 1rem\">\u00a0<\/span><\/p>\n<h2>Resumo<\/h2>\n<p>Voc\u00ea aprendeu como usar o carregamento pregui\u00e7oso (lazy loading) no Angular para buscar m\u00f3dulos somente quando eles s\u00e3o necess\u00e1rios. O carregamento pregui\u00e7oso \u00e9 uma \u00f3tima t\u00e9cnica para melhorar os tempos de carregamento, reduzir o uso de dados e utilizar melhor seus recursos <a href=\"https:\/\/kinsta.com\/pt\/blog\/backend-vs-frontend\/\">frontend e backend<\/a>.<\/p>\n<p>O lazy loading, juntamente com tecnologias como <a href=\"https:\/\/kinsta.com\/pt\/blog\/cdn-para-wordpress\/\">redes de distribui\u00e7\u00e3o de conte\u00fado<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/minificar-javascript\/\">minifica\u00e7\u00e3o de JavaScript<\/a>, melhorar\u00e1 tanto o desempenho do seu site quanto a satisfa\u00e7\u00e3o dos usu\u00e1rios.<\/p>\n<p>Se voc\u00ea est\u00e1 desenvolvendo um site WordPress e quer aumentar a velocidade, leia sobre o <a href=\"https:\/\/kinsta.com\/pt\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> para ver alguns n\u00fameros impressionantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u00e9 um framework de frontend JavaScript desenvolvido pelo Google para construir aplicativos web escal\u00e1veis de n\u00edvel empresarial. Alguns desses aplicativos podem ficar bastante grandes, afetando &#8230;<\/p>\n","protected":false},"author":271,"featured_media":56479,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[950,978],"class_list":["post-56478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular","topic-tutoriais-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 no Angular (Coloque em Pr\u00e1tica em seu Site) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o 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\/pt\/blog\/lazy-loading-no-angular\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)\" \/>\n<meta property=\"og:description\" content=\"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:39:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T13:05:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)\",\"datePublished\":\"2023-01-23T08:39:28+00:00\",\"dateModified\":\"2023-08-21T13:05:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\"},\"wordCount\":1666,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\",\"name\":\"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg\",\"datePublished\":\"2023-01-23T08:39:28+00:00\",\"dateModified\":\"2023-08-21T13:05:33+00:00\",\"description\":\"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/angular\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site) - Kinsta\u00ae","description":"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o 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\/pt\/blog\/lazy-loading-no-angular\/","og_locale":"pt_PT","og_type":"article","og_title":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)","og_description":"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.","og_url":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-01-23T08:39:28+00:00","article_modified_time":"2023-08-21T13:05:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Michael Nyamande","Tempo estimado de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)","datePublished":"2023-01-23T08:39:28+00:00","dateModified":"2023-08-21T13:05:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/"},"wordCount":1666,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/","url":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/","name":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","datePublished":"2023-01-23T08:39:28+00:00","dateModified":"2023-08-21T13:05:33+00:00","description":"Carregar recursos com lazy loading pode reduzir gargalos que tornam seu site lento. Veja como acelerar tudo usando o framework JavaScript Angular.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/lazy-loading-in-angular.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/lazy-loading-no-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Angular","item":"https:\/\/kinsta.com\/pt\/topicos\/angular\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading no Angular (Coloque em Pr\u00e1tica em seu Site)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=56478"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56478\/revisions"}],"predecessor-version":[{"id":62393,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56478\/revisions\/62393"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56478\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/56479"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=56478"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=56478"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=56478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}