{"id":61912,"date":"2023-01-23T09:41:10","date_gmt":"2023-01-23T08:41:10","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=61912&#038;preview=true&#038;preview_id=61912"},"modified":"2023-08-20T15:08:27","modified_gmt":"2023-08-20T13:08:27","slug":"carga-diferida-en-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/","title":{"rendered":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/es\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> es un framework frontend de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>\u00a0desarrollado por Google para crear aplicaciones web escalables de nivel empresarial. Algunas de estas aplicaciones pueden llegar a ser bastante grandes, afectando al tiempo de carga de tu aplicaci\u00f3n.<\/p>\n<p>Para reducir el tiempo de carga y mejorar la experiencia general de tus usuarios, puedes utilizar una t\u00e9cnica conocida como carga diferida (lazy loading). Esta funci\u00f3n nativa de Angular te permite cargar primero s\u00f3lo las partes necesarias de la aplicaci\u00f3n web y, a continuaci\u00f3n, cargar otros m\u00f3dulos seg\u00fan sea necesario.<\/p>\n<p>En este art\u00edculo, aprender\u00e1s sobre la carga diferida y c\u00f3mo puede ayudarte a acelerar tu aplicaci\u00f3n 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>\u00bfQu\u00e9 Es la Carga Diferida?<\/h2>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#what-is-lazy-loading\">carga diferida<\/a> se refiere a la t\u00e9cnica de cargar los elementos de una p\u00e1gina web s\u00f3lo cuando son necesarios. Su contrapartida es la <em>carga ansiosa <\/em>(<em>eager loading<\/em>), cuando todo se carga &#8211; o intenta cargarse &#8211; inmediatamente. Obtener todas las im\u00e1genes, v\u00eddeos, CSS y c\u00f3digo JavaScript de forma ansiosa puede implicar largos tiempos de carga, una mala noticia para los usuarios.<\/p>\n<p>La carga diferida se utiliza a menudo para im\u00e1genes y v\u00eddeos en sitios que alojan mucho contenido. En lugar de cargar todos los medios a la vez, lo que consumir\u00eda mucho ancho de banda y entorpecer\u00eda la visualizaci\u00f3n de la p\u00e1gina, esos elementos se cargan cuando su ubicaci\u00f3n en la p\u00e1gina est\u00e1 a punto de aparecer.<\/p>\n<p>Angular es un framework de aplicaciones de una sola p\u00e1gina que depende de JavaScript para gran parte de su funcionalidad. La colecci\u00f3n de JavaScript de tu aplicaci\u00f3n puede hacerse grande f\u00e1cilmente a medida que la aplicaci\u00f3n crece, y esto conlleva el correspondiente aumento del uso de datos y del tiempo de carga. Para acelerar las cosas, puedes utilizar la carga diferida para obtener primero los m\u00f3dulos necesarios y aplazar la carga de otros m\u00f3dulos hasta que sean necesarios.<\/p>\n<h2>Ventajas de la Carga Diferida en Angular<\/h2>\n<p>La carga diferida ofrece ventajas que har\u00e1n que tu sitio sea m\u00e1s f\u00e1cil de usar. Entre ellas est\u00e1n:<\/p>\n<ul>\n<li><strong>Tiempo de carga m\u00e1s r\u00e1pido:<\/strong> JavaScript contiene instrucciones para mostrar tu p\u00e1gina y cargar sus datos. Por ello, es un <em>recurso que bloquea la renderizaci\u00f3n<\/em>. Esto significa que el navegador tiene que esperar a cargar todo el JavaScript antes de mostrar tu p\u00e1gina. En la carga diferida de Angular, el JavaScript se divide en fragmentos que se cargan por separado. El trozo inicial s\u00f3lo contiene la l\u00f3gica necesaria para el m\u00f3dulo principal de la p\u00e1gina. Se carga ansiosamente y, a continuaci\u00f3n, se cargan diferidamente los m\u00f3dulos restantes. Al reducir el tama\u00f1o del trozo inicial, har\u00e1s que <a href=\"https:\/\/kinsta.com\/es\/aprender\/optimizacion-de-velocidad-del-sitio\/\" target=\"_blank\" rel=\"noopener noreferrer\">el sitio se cargue y se renderice m\u00e1s r\u00e1pido<\/a>.<\/li>\n<li><strong>Menos uso de datos:<\/strong> Al dividir los datos en trozos y cargarlos seg\u00fan sea necesario, podr\u00edas utilizar menos <a href=\"https:\/\/kinsta.com\/es\/blog\/uso-de-ancho-de-banda-en-cpanel\/\" target=\"_blank\" rel=\"noopener noreferrer\">ancho de banda<\/a>.<\/li>\n<li><strong>Conservaci\u00f3n de los recursos del navegador:<\/strong> Como el navegador s\u00f3lo carga los trozos que necesita, no malgasta memoria ni CPU intentando interpretar y renderizar c\u00f3digo que no es necesario.<\/li>\n<\/ul>\n\n<h2>Implementaci\u00f3n de la Carga Diferida en Angular<\/h2>\n<p>Para seguir este tutorial, necesitar\u00e1s lo siguiente:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> instalado<\/li>\n<li>Conocimientos b\u00e1sicos de Angular<\/li>\n<\/ul>\n<h3>Crea tu proyecto<\/h3>\n<p>Utilizar\u00e1s la <a href=\"https:\/\/angular.io\/cli\">CLI de Angular<\/a> para crear tu proyecto. Puedes instalar la CLI utilizando <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">npm<\/a> ejecutando el comando:<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Despu\u00e9s de eso, crea un proyecto llamado Lazy Loading Demo como este:<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Ese comando crea un nuevo proyecto Angular, completo con enrutamiento. Trabajar\u00e1s exclusivamente en la carpeta <code>src\/app<\/code>, que contiene el c\u00f3digo de tu aplicaci\u00f3n. Esta carpeta contiene tu archivo de enrutamiento principal, <code>app-routing.module.ts<\/code>. La estructura de la carpeta deber\u00eda ser la siguiente:<\/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=\"La estructura de carpetas de un proyecto Angular.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">La estructura de carpetas de un proyecto Angular.<\/figcaption><\/figure>\n<h3>Crear un m\u00f3dulo de funciones con rutas<\/h3>\n<p>A continuaci\u00f3n, crear\u00e1s un m\u00f3dulo de funciones que se cargar\u00e1 diferidamente. Para crear este m\u00f3dulo, ejecuta este comando:<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Este comando crea un m\u00f3dulo llamado <code>BlogModule<\/code>, junto con el enrutamiento. Si abres <code>src<\/code><code>\/app\/app-routing.module.ts<\/code> , ver\u00e1s que ahora tiene este aspecto:<\/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 para la carga diferida es la tercera l\u00ednea:<\/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>Esa l\u00ednea define las rutas. La ruta para el blog utiliza el argumento <code>loadChildren<\/code> en lugar de <code>component<\/code>. El argumento <code>loadChildren<\/code> indica a Angular que cargue la ruta diferidamente, es decir, que importe din\u00e1micamente el m\u00f3dulo s\u00f3lo cuando se visite la ruta, y luego lo devuelva al enrutador. El m\u00f3dulo define sus propias rutas hijas, como <code>blog\/**<\/code>, en su archivo <code>routing.module.ts<\/code>. El m\u00f3dulo blog que has generado tiene este aspecto:<\/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>Observar\u00e1s que este archivo de enrutamiento contiene una \u00fanica ruta, <code>''<\/code>. \u00c9sta resuelve para <code>\/blog<\/code> y apunta al BlogComponent. Puedes a\u00f1adir m\u00e1s componentes y definir esas rutas en este archivo.<\/p>\n<p>Por ejemplo, si quisieras a\u00f1adir un componente que extrajera detalles sobre una entrada concreta del blog, podr\u00edas crear el componente con este comando:<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Que genera el componente para los detalles del blog y lo a\u00f1ade al m\u00f3dulo blog. Para a\u00f1adirle una ruta, s\u00f3lo tienes que a\u00f1adirlo a tu matriz de rutas:<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Esto a\u00f1ade una ruta que resuelve para <code>blog\/:title<\/code> (por ejemplo, <code>blog\/angular-tutorial<\/code>). Esta matriz de rutas se carga de forma diferidamente y no se incluye en el paquete inicial.<\/p>\n<h2>Verificar la Carga Diferida<\/h2>\n<p>Puedes comprobar f\u00e1cilmente que la carga diferida funciona ejecutando <code>ng serve<\/code> y observando la salida. En la parte inferior de la salida, deber\u00edas obtener algo como esto:<\/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=\"Verificaci\u00f3n de la carga diferida mediante ng serve de Angular.\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">Verificaci\u00f3n de la carga diferida mediante <code>ng serve<\/code> de Angular.<\/figcaption><\/figure>\n<p>La salida anterior se divide en dos partes: <code>Initial Chunk Files<\/code> son los archivos cargados cuando la p\u00e1gina se carga por primera vez. <code>Lazy Chunk Files<\/code> son los archivos cargados diferidamente. En este ejemplo aparece el m\u00f3dulo blog.<\/p>\n<h3>Comprobaci\u00f3n de la carga diferida a trav\u00e9s de los registros de red del navegador<\/h3>\n<p>Otra forma de confirmar la carga perezosa es utilizando la pesta\u00f1a <strong>Red<\/strong> del panel Herramientas de desarrollo de tu navegador. (En Windows, es <strong>F12<\/strong> en Chrome y Microsoft Edge, y <strong>Ctrl<\/strong>\u2013<strong>Shift<\/strong>\u2013<strong>I<\/strong> en Firefox. En Mac, es <strong>Comando<\/strong>\u2013<strong>Opci\u00f3n<\/strong>\u2013<strong>I<\/strong> en Chrome, Firefox y Safari.)<\/p>\n<p>Selecciona el filtro <code>JS<\/code> para ver s\u00f3lo los archivos JavaScript cargados a trav\u00e9s de la red. Tras la carga inicial de la aplicaci\u00f3n, deber\u00edas obtener algo como esto:<\/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 descargas de JavaScript visto en Herramientas de desarrollo.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Registro inicial de descargas de JavaScript visto en Herramientas de desarrollo.<\/figcaption><\/figure>\n<p>Cuando navegues a <code>\/blog<\/code>, te dar\u00e1s cuenta de que se ha cargado un nuevo chunk, <code>src_app_blog_blog_module_ts.js<\/code>. Esto significa que tu m\u00f3dulo se solicit\u00f3 s\u00f3lo cuando navegabas hacia esa ruta, y se est\u00e1 cargando diferidamente. El registro de red deber\u00eda tener este aspecto:<\/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 cargado perezosamente que aparece en las descargas registradas por las Herramientas para desarrolladores.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">M\u00f3dulo cargado perezosamente que aparece en las descargas registradas por las Herramientas para desarrolladores.<\/figcaption><\/figure>\n\n<h2>Carga Diferida vs Carga Ansiosa<\/h2>\n<p>Para comparar, vamos a crear tambi\u00e9n un m\u00f3dulo de carga ansiosa y ver c\u00f3mo afecta al tama\u00f1o del archivo y al tiempo de carga. Para demostrarlo, crear\u00e1s un m\u00f3dulo para la autenticaci\u00f3n. Un m\u00f3dulo de este tipo puede necesitar ser cargado ansiosamente, ya que la autenticaci\u00f3n es algo que puedes exigir a todos los usuarios.<\/p>\n<p>Genera un AuthModule ejecutando este comando en la CLI:<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Que genera el m\u00f3dulo y un archivo de enrutamiento. Tambi\u00e9n a\u00f1ade el m\u00f3dulo al archivo <code>app.module.ts<\/code>. Sin embargo, a diferencia del comando que utilizamos la \u00faltima vez para generar un m\u00f3dulo, \u00e9ste no a\u00f1ade una ruta cargada diferidamente. Utiliza el par\u00e1metro <code>--routing<\/code> en lugar de <code>--route &lt;name&gt;<\/code>. Eso a\u00f1ade el m\u00f3dulo de autenticaci\u00f3n a la matriz <code>imports<\/code> en <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>A\u00f1adir AuthModule a tu matriz de importaciones AppModule significa que el m\u00f3dulo de autenticaci\u00f3n se a\u00f1ade a los archivos chunk iniciales y se incluir\u00e1 con el paquete JavaScript principal. Para comprobarlo, puedes volver a ejecutar <code>ng serve<\/code> y observar la salida:<\/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=\"Salida del comando ng serve de Angular despu\u00e9s de a\u00f1adir el m\u00f3dulo de autenticaci\u00f3n.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">Salida del comando <code>ng serve<\/code> de Angular despu\u00e9s de a\u00f1adir el m\u00f3dulo de autenticaci\u00f3n.<\/figcaption><\/figure>\n<p>Como puedes ver, el m\u00f3dulo de autenticaci\u00f3n no se incluye como parte de los archivos lazy chunk. Adem\u00e1s, el tama\u00f1o del paquete inicial ha aumentado. El archivo <code>main.js<\/code> casi ha duplicado su tama\u00f1o, pasando de 8 KB a 15 KB. En este ejemplo, el aumento es peque\u00f1o, ya que los componentes no contienen mucho c\u00f3digo. Pero, a medida que llenes los componentes de l\u00f3gica, el tama\u00f1o de este archivo aumentar\u00e1, lo que constituye un argumento de peso a favor de la carga lenta.<\/p>\n<h2>Resumen<\/h2>\n<p>Has aprendido a utilizar la carga diferida en Angular para obtener m\u00f3dulos s\u00f3lo cuando son necesarios. La carga diferida es una gran t\u00e9cnica para mejorar los tiempos de carga, reducir el uso de datos y utilizar mejor los recursos de tu <a href=\"https:\/\/kinsta.com\/es\/blog\/backend-vs-frontend\/\">frontend y backend<\/a>.<\/p>\n<p>La carga diferida, junto con tecnolog\u00edas como <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cdn\/\">las redes de distribuci\u00f3n de contenidos<\/a> y la <a href=\"https:\/\/kinsta.com\/es\/blog\/minificar-javascript\/\">minificaci\u00f3n de JavaScript<\/a>, mejorar\u00e1 tanto el rendimiento de tu sitio web como la satisfacci\u00f3n de tus usuarios.<\/p>\n<p>Si est\u00e1s desarrollando un sitio de WordPress y quieres aumentar realmente la velocidad, lee sobre <a href=\"https:\/\/kinsta.com\/es\/blog\/edge-caching\/\">Kinsta Edge Caching<\/a> para ver algunas cifras impresionantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular es un framework frontend de JavaScript\u00a0desarrollado por Google para crear aplicaciones web escalables de nivel empresarial. Algunas de estas aplicaciones pueden llegar a ser bastante &#8230;<\/p>\n","protected":false},"author":271,"featured_media":61939,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1269],"class_list":["post-61912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"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>La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.\" \/>\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\/es\/blog\/carga-diferida-en-angular\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)\" \/>\n<meta property=\"og:description\" content=\"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:41:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-20T13:08:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Nyamande\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\/es\/blog\/carga-diferida-en-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)\",\"datePublished\":\"2023-01-23T08:41:10+00:00\",\"dateModified\":\"2023-08-20T13:08:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\"},\"wordCount\":1688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\",\"name\":\"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\",\"datePublished\":\"2023-01-23T08:41:10+00:00\",\"dateModified\":\"2023-08-20T13:08:27+00:00\",\"description\":\"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/angular\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web) - Kinsta\u00ae","description":"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.","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\/es\/blog\/carga-diferida-en-angular\/","og_locale":"es_ES","og_type":"article","og_title":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)","og_description":"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.","og_url":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-01-23T08:41:10+00:00","article_modified_time":"2023-08-20T13:08:27+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Michael Nyamande","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)","datePublished":"2023-01-23T08:41:10+00:00","dateModified":"2023-08-20T13:08:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/"},"wordCount":1688,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/","url":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/","name":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","datePublished":"2023-01-23T08:41:10+00:00","dateModified":"2023-08-20T13:08:27+00:00","description":"Los activos de carga diferida pueden reducir los cuellos de botella que ralentizan tu sitio web. A continuaci\u00f3n te explicamos c\u00f3mo acelerar las cosas con Angular, un framework de JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/01\/carga-diferida-en-angular.jpeg","width":1460,"height":730,"caption":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/carga-diferida-en-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Angular","item":"https:\/\/kinsta.com\/es\/secciones\/angular\/"},{"@type":"ListItem","position":3,"name":"La Carga Diferida en Angular (Ponlo en Pr\u00e1ctica en Tu Sitio Web)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/61912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=61912"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/61912\/revisions"}],"predecessor-version":[{"id":69227,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/61912\/revisions\/69227"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/61912\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/61939"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=61912"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=61912"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=61912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}