{"id":65417,"date":"2023-01-23T09:41:23","date_gmt":"2023-01-23T08:41:23","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=65417&#038;preview=true&#038;preview_id=65417"},"modified":"2023-08-21T15:45:40","modified_gmt":"2023-08-21T14:45:40","slug":"chargement-differe-angular","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/","title":{"rendered":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/angular-vs-vue\/#what-is-angular\">Angular<\/a> est un framework <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> frontend d\u00e9velopp\u00e9 par Google pour cr\u00e9er des applications web \u00e9volutives de niveau entreprise. Certaines de ces applications peuvent devenir assez volumineuses, ce qui affecte le temps de chargement de votre application.<\/p>\n<p>Pour r\u00e9duire le temps de chargement et am\u00e9liorer l&rsquo;exp\u00e9rience globale de vos utilisateurs, vous pouvez utiliser une technique connue sous le nom de chargement diff\u00e9r\u00e9 ou \u00ab lazy loading \u00bb. Cette fonctionnalit\u00e9 native d&rsquo;Angular vous permet de charger d&rsquo;abord uniquement les \u00e9l\u00e9ments requis de l&rsquo;application web, puis de charger d&rsquo;autres modules au besoin.<\/p>\n<p>Dans cet article, vous d\u00e9couvrirez le chargement diff\u00e9r\u00e9 et comment il peut contribuer \u00e0 acc\u00e9l\u00e9rer votre application 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>Qu&rsquo;est-ce que le chargement diff\u00e9r\u00e9 ?<\/h2>\n<p>Le <a href=\"https:\/\/kinsta.com\/fr\/blog\/lazy-load-wordpress\/#what-is-lazy-loading\">chargement diff\u00e9r\u00e9<\/a> fait r\u00e9f\u00e9rence \u00e0 la technique consistant \u00e0 charger les \u00e9l\u00e9ments d&rsquo;une page web uniquement lorsqu&rsquo;ils sont n\u00e9cessaires. Son pendant est le <em>chargement rapide ou eager loading<\/em>, lorsque tout se charge &#8211; ou tente de se charger &#8211; imm\u00e9diatement. Le fait de r\u00e9cup\u00e9rer toutes les images, les vid\u00e9os, les feuilles de style en cascade (CSS) et le code JavaScript de fa\u00e7on pr\u00e9cipit\u00e9e peut entrainer des temps de chargement longs, ce qui est une mauvaise nouvelle pour les utilisateurs.<\/p>\n<p>Le chargement diff\u00e9r\u00e9 est souvent utilis\u00e9 pour les images et les vid\u00e9os sur les sites qui h\u00e9bergent beaucoup de contenu. Au lieu de charger tous les m\u00e9dias en une seule fois, ce qui utiliserait beaucoup de bande passante et ralentirait l&rsquo;affichage des pages, ces \u00e9l\u00e9ments sont charg\u00e9s lorsque leur emplacement sur la page est sur le point de d\u00e9filer \u00e0 la vue.<\/p>\n<p>Angular est un framework d&rsquo;application \u00e0 page unique qui s&rsquo;appuie sur JavaScript pour la plupart de ses fonctionnalit\u00e9s. La collection de JavaScript de votre application peut facilement devenir importante \u00e0 mesure que l&rsquo;application se d\u00e9veloppe, ce qui s&rsquo;accompagne d&rsquo;une augmentation correspondante de l&rsquo;utilisation des donn\u00e9es et du temps de chargement. Pour acc\u00e9l\u00e9rer les choses, vous pouvez utiliser le chargement diff\u00e9r\u00e9 pour r\u00e9cup\u00e9rer d&rsquo;abord les modules n\u00e9cessaires et diff\u00e9rer le chargement des autres modules jusqu&rsquo;\u00e0 ce qu&rsquo;ils soient n\u00e9cessaires.<\/p>\n<h2>Avantages du chargement diff\u00e9r\u00e9 dans Angular<\/h2>\n<p>Le chargement diff\u00e9r\u00e9 offre des avantages qui rendront votre site plus convivial. Il s&rsquo;agit notamment de :<\/p>\n<ul>\n<li><strong>Temps de chargement plus rapide :<\/strong> JavaScript contient des instructions pour l&rsquo;affichage de votre page et le chargement de ses donn\u00e9es. Pour cette raison, c&rsquo;est une <em>ressource qui bloque le rendu<\/em>. Cela signifie que le navigateur doit attendre de charger tout le JavaScript avant de rendre votre page. Lors du chargement diff\u00e9r\u00e9 dans Angular, le JavaScript est divis\u00e9 en morceaux qui sont charg\u00e9s s\u00e9par\u00e9ment. Le morceau initial ne contient que la logique n\u00e9cessaire au module principal de la page. Il est charg\u00e9 avec empressement, puis les autres modules sont charg\u00e9s de mani\u00e8re diff\u00e9r\u00e9e. En r\u00e9duisant la taille du chunk initial, <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/vitesse-de-site\/\" target=\"_blank\" rel=\"noopener noreferrer\">le site se charge et s&rsquo;affiche plus rapidement<\/a>.<\/li>\n<li><strong>Moins d&rsquo;utilisation des donn\u00e9es :<\/strong> En divisant les donn\u00e9es en morceaux et en les chargeant selon les besoins, vous pourriez utiliser moins de <a href=\"https:\/\/kinsta.com\/fr\/blog\/utilisation-bande-passante-cpanel\/\" target=\"_blank\" rel=\"noopener noreferrer\">bande passante<\/a>.<\/li>\n<li><strong>Ressources du navigateur pr\u00e9serv\u00e9es :<\/strong> Puisque le navigateur ne charge que les morceaux n\u00e9cessaires, il ne gaspille pas la m\u00e9moire et le processeur en essayant d&rsquo;interpr\u00e9ter et de rendre le code qui n&rsquo;est pas n\u00e9cessaire.<\/li>\n<\/ul>\n\n<h2>Mise en \u0153uvre du chargement diff\u00e9r\u00e9 dans Angular<\/h2>\n<p>Pour suivre ce tutoriel, vous aurez besoin des \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">NodeJS<\/a> install\u00e9<\/li>\n<li>Connaissance de base d&rsquo;Angular<\/li>\n<\/ul>\n<h3>Cr\u00e9ez votre projet<\/h3>\n<p>Vous utiliserez le <a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noopener noreferrer\">CLI Angular<\/a> pour cr\u00e9er votre projet. Vous pouvez installer le CLI \u00e0 l&rsquo;aide de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a> en ex\u00e9cutant la commande :<\/p>\n<p><code class=\"language=bash\">npm install -g @angular\/cli<\/code><\/p>\n<p>Apr\u00e8s cela, cr\u00e9ez un projet nomm\u00e9 Lazy Loading Demo comme ceci :<\/p>\n<p><code class=\"language=bash\">ng new lazy-loading-demo --routing<\/code><\/p>\n<p>Cette commande cr\u00e9e un nouveau projet Angular, complet avec le routage. Vous travaillerez exclusivement dans le dossier <code>src\/app<\/code>, qui contient le code de votre application. Ce dossier contient votre fichier de routage principal, <code>app-routing.module.ts<\/code>. La structure du dossier doit ressembler \u00e0 ceci :<\/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 structure du dossier d'un projet Angular.\" width=\"1034\" height=\"530\"><figcaption class=\"wp-caption-text\">La structure du dossier d&rsquo;un projet Angular.<\/figcaption><\/figure>\n<h3>Cr\u00e9er un module de fonctionnalit\u00e9 avec des routes<\/h3>\n<p>Ensuite, vous allez cr\u00e9er un module de fonctionnalit\u00e9 qui se chargera de mani\u00e8re diff\u00e9r\u00e9e. Pour cr\u00e9er ce module, ex\u00e9cutez cette commande :<\/p>\n<p><code class=\"language=bash\">ng generate module blog --route blog --module app.module<\/code><\/p>\n<p>Cette commande cr\u00e9e un module nomm\u00e9 <code>BlogModule<\/code>, ainsi que le routage. Si vous ouvrez <code>src<\/code><code>\/app\/app-routing.module.ts<\/code> , vous verrez qu&rsquo;il ressemble maintenant \u00e0 ceci :<\/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 partie qui est importante pour le chargement diff\u00e9r\u00e9 est la troisi\u00e8me ligne :<\/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>Cette ligne d\u00e9finit les routes. La route pour le blog utilise l&rsquo;argument <code>loadChildren<\/code> au lieu de <code>component<\/code>. L&rsquo;argument <code>loadChildren<\/code> indique \u00e0 Angular de charger la route de mani\u00e8re diff\u00e9r\u00e9e &#8211; d&rsquo;importer dynamiquement le module uniquement lorsque la route est visit\u00e9e, puis de le renvoyer au routeur. Le module d\u00e9finit ses propres routes enfant, telles que <code>blog\/**<\/code>, dans son fichier <code>routing.module.ts<\/code>. Le module de blog que vous avez g\u00e9n\u00e9r\u00e9 ressemble \u00e0 ceci :<\/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>Vous remarquerez que ce fichier de routage contient une seule route, <code>''<\/code>. Celle-ci se r\u00e9sout pour <code>\/blog<\/code> et pointe vers le BlogComponent. Vous pouvez ajouter d&rsquo;autres composants et d\u00e9finir ces routes dans ce fichier.<\/p>\n<p>Par exemple, si vous souhaitez ajouter un composant qui r\u00e9cup\u00e8re les d\u00e9tails d&rsquo;un article de blog particulier, vous pouvez cr\u00e9er le composant avec cette commande :<\/p>\n<p><code class=\"language=bash\">ng generate component blog\/detail<\/code><\/p>\n<p>Cela g\u00e9n\u00e8re le composant pour le d\u00e9tail du blog et l&rsquo;ajoute au module blog. Pour lui ajouter une route, vous pouvez simplement l&rsquo;ajouter \u00e0 votre tableau de routes :<\/p>\n<pre><code class=\"typescript\">const routes: Routes = [{ path: '', component: BlogComponent },\n                        {path:\"\/:title\",component: DetailComponent}];\n<\/code><\/pre>\n<p>Ceci ajoute une route qui se r\u00e9sout pour <code>blog\/:title<\/code> (par exemple, <code>blog\/angular-tutorial<\/code>). Ce tableau de routes est charg\u00e9 de mani\u00e8re diff\u00e9r\u00e9e et n&rsquo;est pas inclus dans le paquetage initial.<\/p>\n<h2>V\u00e9rifiez le chargement diff\u00e9r\u00e9<\/h2>\n<p>Vous pouvez facilement v\u00e9rifier que le chargement diff\u00e9r\u00e9 fonctionne en ex\u00e9cutant <code>ng serve<\/code> et en observant la sortie. Au bas de votre sortie, vous devriez obtenir quelque chose comme ceci :<\/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=\"V\u00e9rification du chargement diff\u00e9r\u00e9 \u00e0 l'aide de ng serve d'Angular .\" width=\"867\" height=\"342\"><figcaption class=\"wp-caption-text\">V\u00e9rification du chargement diff\u00e9r\u00e9 \u00e0 l&rsquo;aide de <code>ng serve<\/code> d&rsquo;Angular.<\/figcaption><\/figure>\n<p>La sortie ci-dessus est divis\u00e9e en deux parties : <code>Initial Chunk Files<\/code> sont les fichiers charg\u00e9s lors du premier chargement de la page. <code>Lazy Chunk Files<\/code> sont les fichiers charg\u00e9s en diff\u00e9r\u00e9. Le module de blog est r\u00e9pertori\u00e9 dans cet exemple.<\/p>\n<h3>V\u00e9rification du chargement diff\u00e9r\u00e9 par le biais des journaux r\u00e9seau du navigateur<\/h3>\n<p>Une autre fa\u00e7on de confirmer le chargement diff\u00e9r\u00e9 est d&rsquo;utiliser l&rsquo;onglet <strong>R\u00e9seau<\/strong> dans le panneau Outils de d\u00e9veloppement de votre navigateur. (Sous Windows, il s&rsquo;agit de <strong>F12<\/strong> dans Chrome et Microsoft Edge, et de <strong>Ctrl<\/strong>\u2013<strong>Shift<\/strong>\u2013<strong>I<\/strong> dans Firefox. Sur un Mac, c&rsquo;est <strong>Command<\/strong>\u2013<strong>Option<\/strong>\u2013<strong>I<\/strong> dans Chrome, Firefox et Safari.)<\/p>\n<p>S\u00e9lectionnez le filtre <code>JS<\/code> pour afficher uniquement les fichiers JavaScript charg\u00e9s sur le r\u00e9seau. Apr\u00e8s le chargement initial de l&rsquo;application, vous devriez obtenir quelque chose comme ceci :<\/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=\"Journal initial des t\u00e9l\u00e9chargements JavaScript visualis\u00e9s dans Developer Tools.\" width=\"1040\" height=\"603\"><figcaption class=\"wp-caption-text\">Journal initial des t\u00e9l\u00e9chargements JavaScript visualis\u00e9s dans Developer Tools.<\/figcaption><\/figure>\n<p>Lorsque vous naviguez vers <code>\/blog<\/code>, vous remarquez qu&rsquo;un nouveau chunk, <code>src_app_blog_blog_module_ts.js<\/code>, est charg\u00e9. Cela signifie que votre module a \u00e9t\u00e9 demand\u00e9 uniquement lorsque vous avez navigu\u00e9 vers cette route, et qu&rsquo;il est charg\u00e9 en diff\u00e9r\u00e9. Le journal du r\u00e9seau devrait ressembler \u00e0 ceci :<\/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=\"Module charg\u00e9 en diff\u00e9r\u00e9 apparaissant dans les t\u00e9l\u00e9chargements enregistr\u00e9s par Developer Tools.\" width=\"1040\" height=\"604\"><figcaption class=\"wp-caption-text\">Module charg\u00e9 en diff\u00e9r\u00e9 apparaissant dans les t\u00e9l\u00e9chargements enregistr\u00e9s par Developer Tools.<\/figcaption><\/figure>\n\n<h2>Chargement diff\u00e9r\u00e9 vs chargement rapide<\/h2>\n<p>\u00c0 titre de comparaison, cr\u00e9ons \u00e9galement un module \u00e0 chargement rapide et voyons comment cela affecte la taille du fichier et le temps de chargement. Pour le d\u00e9montrer, vous allez cr\u00e9er un module d&rsquo;authentification. Un tel module pourrait avoir besoin d&rsquo;\u00eatre charg\u00e9 rapidement, car l&rsquo;authentification est quelque chose que vous pourriez exiger de tous les utilisateurs.<\/p>\n<p>G\u00e9n\u00e9rez un AuthModule en ex\u00e9cutant cette commande dans le CLI :<\/p>\n<p><code class=\"language=bash\">ng generate module auth --routing --module app.module<\/code><\/p>\n<p>Cela g\u00e9n\u00e8re le module et un fichier de routage. Elle ajoute \u00e9galement le module au fichier <code>app.module.ts<\/code>. Cependant, contrairement \u00e0 la commande que nous avons utilis\u00e9e pour g\u00e9n\u00e9rer un module la derni\u00e8re fois, celle-ci n&rsquo;ajoute pas de route charg\u00e9e en diff\u00e9r\u00e9. Elle utilise le param\u00e8tre <code>--routing<\/code> au lieu de <code>--route &lt;name&gt;<\/code>. Cela ajoute le module d&rsquo;authentification au tableau <code>imports<\/code> dans <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>L&rsquo;ajout de AuthModule \u00e0 votre tableau d&rsquo;importations AppModule signifie que le module d&rsquo;authentification est ajout\u00e9 aux fichiers chunk initiaux et sera inclus avec le bundle JavaScript principal. Pour v\u00e9rifier cela, vous pouvez ex\u00e9cuter \u00e0 nouveau <code>ng serve<\/code> et observer la sortie :<\/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=\"Sortie de la commande ng serve d'Angular apr\u00e8s l'ajout du module d'authentification.\" width=\"752\" height=\"332\"><figcaption class=\"wp-caption-text\">Sortie de la commande <code>ng serve<\/code> d&rsquo;Angular apr\u00e8s l&rsquo;ajout du module d&rsquo;authentification.<\/figcaption><\/figure>\n<p>Comme vous pouvez le constater, le module d&rsquo;authentification n&rsquo;est pas inclus dans les fichiers chunk diff\u00e9r\u00e9s. De plus, la taille du paquet initial a augment\u00e9. Le fichier <code>main.js<\/code> a presque doubl\u00e9 de taille, passant de 8 Ko \u00e0 15 Ko. Dans cet exemple, l&rsquo;augmentation est faible, car les composants ne contiennent pas beaucoup de code. Mais, \u00e0 mesure que vous remplissez les composants de logique, la taille de ce fichier augmentera, ce qui plaide en faveur du chargement diff\u00e9r\u00e9.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Vous avez appris \u00e0 utiliser le chargement diff\u00e9r\u00e9 dans Angular pour r\u00e9cup\u00e9rer les modules uniquement lorsqu&rsquo;ils sont n\u00e9cessaires. Le chargement diff\u00e9r\u00e9 est une excellente technique pour am\u00e9liorer les temps de chargement, r\u00e9duire l&rsquo;utilisation des donn\u00e9es et mieux utiliser les ressources de votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/backend-vs-frontend\/\">frontend et backend<\/a>.<\/p>\n<p>Le chargement diff\u00e9r\u00e9, associ\u00e9 \u00e0 des technologies telles que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/cdn-wordpress\/\">r\u00e9seaux de distribution de contenu<\/a> et la <a href=\"https:\/\/kinsta.com\/fr\/blog\/minifier-javascript\/\">r\u00e9duction de JavaScript<\/a>, am\u00e9liorera \u00e0 la fois les performances de votre site web et la satisfaction de vos utilisateurs.<\/p>\n<p>Si vous d\u00e9veloppez un site WordPress et que vous voulez vraiment augmenter la vitesse, lisez la section sur la <a href=\"https:\/\/kinsta.com\/fr\/blog\/cache-edge\/\">mise en cache Edge de Kinsta<\/a> pour voir des chiffres impressionnants.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular est un framework JavaScript frontend d\u00e9velopp\u00e9 par Google pour cr\u00e9er des applications web \u00e9volutives de niveau entreprise. Certaines de ces applications peuvent devenir assez volumineuses, &#8230;<\/p>\n","protected":false},"author":271,"featured_media":65449,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952,980],"class_list":["post-65417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular","topic-tutoriel-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>Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d&#039;\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l&#039;aide du 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\/fr\/blog\/chargement-differe-angular\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)\" \/>\n<meta property=\"og:description\" content=\"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d&#039;\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l&#039;aide du framework JavaScript Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-23T08:41:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T14:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-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=\"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d&#039;\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l&#039;aide du framework JavaScript Angular.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Nyamande\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\"},\"author\":{\"name\":\"Michael Nyamande\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\"},\"headline\":\"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)\",\"datePublished\":\"2023-01-23T08:41:23+00:00\",\"dateModified\":\"2023-08-21T14:45:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\"},\"wordCount\":1804,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\",\"name\":\"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg\",\"datePublished\":\"2023-01-23T08:41:23+00:00\",\"dateModified\":\"2023-08-21T14:45:40+00:00\",\"description\":\"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d'\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l'aide du framework JavaScript Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/angular\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c\",\"name\":\"Michael Nyamande\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/michaelnyamande\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web) - Kinsta\u00ae","description":"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d'\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l'aide du 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\/fr\/blog\/chargement-differe-angular\/","og_locale":"fr_FR","og_type":"article","og_title":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)","og_description":"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d'\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l'aide du framework JavaScript Angular.","og_url":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-01-23T08:41:23+00:00","article_modified_time":"2023-08-21T14:45:40+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","type":"image\/jpeg"}],"author":"Michael Nyamande","twitter_card":"summary_large_image","twitter_description":"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d'\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l'aide du framework JavaScript Angular.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Michael Nyamande","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/"},"author":{"name":"Michael Nyamande","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c"},"headline":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)","datePublished":"2023-01-23T08:41:23+00:00","dateModified":"2023-08-21T14:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/"},"wordCount":1804,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/","url":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/","name":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","datePublished":"2023-01-23T08:41:23+00:00","dateModified":"2023-08-21T14:45:40+00:00","description":"Le chargement diff\u00e9r\u00e9 des ressources peut r\u00e9duire les goulots d'\u00e9tranglement qui ralentissent votre site web. Voici comment acc\u00e9l\u00e9rer les choses \u00e0 l'aide du framework JavaScript Angular.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/01\/chargement-differe-angular.jpeg","width":1460,"height":730,"caption":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/chargement-differe-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Angular","item":"https:\/\/kinsta.com\/fr\/sujets\/angular\/"},{"@type":"ListItem","position":3,"name":"Chargement diff\u00e9r\u00e9 dans Angular (mettez-le en pratique sur votre site web)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/a86da4a7a12887bbed34155230eeb13c","name":"Michael Nyamande","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/michaelnyamande\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=65417"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65417\/revisions"}],"predecessor-version":[{"id":65452,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/65417\/revisions\/65452"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/65417\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/65449"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=65417"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=65417"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=65417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}