[{"data":1,"prerenderedAt":1053},["ShallowReactive",2],{"content:\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks":3,"surroundings:\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks":1044},{"id":4,"title":5,"body":6,"description":1025,"extension":1026,"meta":1027,"navigation":1038,"path":1039,"seo":1040,"stem":1042,"__hash__":1043},"content\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks\u002Findex.md","Deferring Components with Angular @defer Blocks",{"type":7,"value":8,"toc":1005},"minimark",[9,13,65,73,225,230,259,263,269,275,281,287,291,296,435,439,502,506,512,516,519,598,602,605,609,612,616,645,649,668,707,781,785,788,792,795,799,825,829,835,841,850,856,860,872,889,898,907,924,936,945,954,963,967,990,995,998,1001],[10,11,5],"h1",{"id":12},"deferring-components-with-angular-defer-blocks",[14,15,16,17,22,23,27,28,32,33,36,37,40,41,44,45,44,48,44,51,44,54,44,57,60,61,64],"p",{},"This guide is part of ",[18,19,21],"a",{"href":20},"\u002Fframework-performance\u002Fangular-performance\u002F","Angular Performance",", within ",[18,24,26],{"href":25},"\u002Fframework-performance\u002F","Framework Performance",". Lazy-loading components in Angular used to require dynamic imports and manual view container management. Deferrable views make it declarative: wrap part of a template in ",[29,30,31],"code",{},"@defer",", and Angular splits the dependencies of that block into a separate chunk, loads it when a trigger fires, and renders it, showing ",[29,34,35],{},"@placeholder"," and ",[29,38,39],{},"@loading"," content in the meantime. Triggers include ",[29,42,43],{},"on viewport",", ",[29,46,47],{},"on interaction",[29,49,50],{},"on hover",[29,52,53],{},"on idle",[29,55,56],{},"on timer",[29,58,59],{},"on immediate"," and custom conditions with ",[29,62,63],{},"when",".",[14,66,67,69,70,72],{},[29,68,31],{}," is the most direct way to shrink the initial bundle of an Angular page without restructuring routes: charts, editors, maps, comment sections, recommendation carousels and modals can all move out of the main chunk. With SSR, ",[29,71,31],{}," also powers incremental hydration, keeping server-rendered blocks dehydrated until their hydration trigger fires.",[14,74,75],{},[76,77,83,84,83,91,83,95,83,98,83,107,83,113,83,119,83,126,83,130,83,135,83,138,83,142,83,146,83,149,83,151,83,155,83,157,83,160,83,163,83,166,83,168,83,171,83,173,83,176,83,179,83,182,83,184,83,187,83,189,83,192,83,195,83,198,83,200,83,203,83,205,83,208,83,211,83,215,83,217,83,220,83,222,83],"svg",{"viewBox":78,"width":79,"role":80,"ariaLabel":81,"style":82},"0 0 760 258","100%","img","Angular deferrable view triggers and the kinds of components each suits.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[85,86],"rect",{"className":87,"x":89,"y":89,"width":79,"height":79,"fill":90},[88],"svg-canvas","0","#ffffff",[92,93,94],"title",{},"@defer triggers and when to use them",[96,97,81],"desc",{},[85,99],{"x":100,"y":100,"width":101,"height":102,"rx":103,"fill":104,"stroke":105,"style":106},"1","758","256","10","none","currentColor","stroke-opacity:0.18",[108,109,94],"text",{"x":110,"y":111,"fill":105,"style":112},"28.0","34.0","font-size:16px;font-weight:700",[85,114],{"x":110,"y":115,"width":116,"height":117,"rx":89,"fill":105,"stroke":105,"style":118},"56.0","103.1","30.0","fill-opacity:0.06;stroke-opacity:0.4",[108,120,125],{"x":121,"y":122,"fill":105,"style":123,"textAnchor":124},"38.0","75.5","font-size:12.5px;font-weight:700","start","Trigger",[85,127],{"x":128,"y":115,"width":129,"height":117,"rx":89,"fill":105,"stroke":105,"style":118},"131.1","300.4",[108,131,134],{"x":132,"y":122,"fill":105,"style":123,"textAnchor":133},"281.3","middle","Loads when",[85,136],{"x":137,"y":115,"width":129,"height":117,"rx":89,"fill":105,"stroke":105,"style":118},"431.6",[108,139,141],{"x":140,"y":122,"fill":105,"style":123,"textAnchor":133},"581.8","Good for",[85,143],{"x":110,"y":144,"width":116,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},"86.0","stroke-opacity:0.35",[108,147,43],{"x":121,"y":148,"fill":105,"style":123,"textAnchor":124},"105.5",[85,150],{"x":128,"y":144,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,152,154],{"x":132,"y":148,"fill":105,"style":153,"textAnchor":133},"font-size:12px","placeholder enters view",[85,156],{"x":137,"y":144,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,158,159],{"x":140,"y":148,"fill":105,"style":153,"textAnchor":133},"below-the-fold sections",[85,161],{"x":110,"y":162,"width":116,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},"116.0",[108,164,47],{"x":121,"y":165,"fill":105,"style":123,"textAnchor":124},"135.5",[85,167],{"x":128,"y":162,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,169,170],{"x":132,"y":165,"fill":105,"style":153,"textAnchor":133},"user clicks or focuses placeholder",[85,172],{"x":137,"y":162,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,174,175],{"x":140,"y":165,"fill":105,"style":153,"textAnchor":133},"editors, chat, comments",[85,177],{"x":110,"y":178,"width":116,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},"146.0",[108,180,50],{"x":121,"y":181,"fill":105,"style":123,"textAnchor":124},"165.5",[85,183],{"x":128,"y":178,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,185,186],{"x":132,"y":181,"fill":105,"style":153,"textAnchor":133},"pointer hovers placeholder",[85,188],{"x":137,"y":178,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,190,191],{"x":140,"y":181,"fill":105,"style":153,"textAnchor":133},"menus and previews",[85,193],{"x":110,"y":194,"width":116,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},"176.0",[108,196,53],{"x":121,"y":197,"fill":105,"style":123,"textAnchor":124},"195.5",[85,199],{"x":128,"y":194,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,201,202],{"x":132,"y":197,"fill":105,"style":153,"textAnchor":133},"browser idle after load",[85,204],{"x":137,"y":194,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,206,207],{"x":140,"y":197,"fill":105,"style":153,"textAnchor":133},"soon-needed widgets",[85,209],{"x":110,"y":210,"width":116,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},"206.0",[108,212,214],{"x":121,"y":213,"fill":105,"style":123,"textAnchor":124},"225.5","on timer(Xms)",[85,216],{"x":128,"y":210,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,218,219],{"x":132,"y":213,"fill":105,"style":153,"textAnchor":133},"after a delay",[85,221],{"x":137,"y":210,"width":129,"height":117,"rx":89,"fill":104,"stroke":105,"style":145},[108,223,224],{"x":140,"y":213,"fill":105,"style":153,"textAnchor":133},"low-priority content",[226,227,229],"h2",{"id":228},"rapid-diagnosis","Rapid Diagnosis",[231,232,233,241,247,253],"ul",{},[234,235,236,240],"li",{},[237,238,239],"strong",{},"Check build stats"," for heavy components in the initial chunk.",[234,242,243,246],{},[237,244,245],{},"List components on key pages"," and mark those not needed for the first view.",[234,248,249,252],{},[237,250,251],{},"Check for heavy libraries"," (charting, rich text, maps) imported by those components.",[234,254,255,258],{},[237,256,257],{},"Check CLS"," around areas where deferred content would appear.",[226,260,262],{"id":261},"root-cause-analysis","Root Cause Analysis",[14,264,265,268],{},[237,266,267],{},"1. Everything in the initial chunk."," Components and their libraries load with the page.",[14,270,271,274],{},[237,272,273],{},"2. Below-the-fold heavy components."," Loaded eagerly but used later or never.",[14,276,277,280],{},[237,278,279],{},"3. Interaction-only features."," Editors and chat loaded for all users.",[14,282,283,286],{},[237,284,285],{},"4. Missing placeholders."," Deferred content pops in and shifts the layout.",[226,288,290],{"id":289},"step-by-step-resolution","Step-by-Step Resolution",[292,293,295],"h3",{"id":294},"_1-wrap-heavy-non-critical-components-in-defer","1. Wrap heavy, non-critical components in @defer",[297,298,303],"pre",{"className":299,"code":300,"language":301,"meta":302,"style":302},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","@defer (on viewport; prefetch on idle) {\n  \u003Capp-price-history-chart [productId]=\"id\" \u002F>\n} @placeholder (minimum 300ms) {\n  \u003Cdiv class=\"chart-skeleton\" style=\"height: 320px\" aria-hidden=\"true\">\u003C\u002Fdiv>\n} @loading (after 150ms; minimum 300ms) {\n  \u003Cdiv class=\"chart-skeleton is-loading\" style=\"height: 320px\">\u003C\u002Fdiv>\n}\n\u003C!-- trade-off: prefetch on idle downloads the chunk early so rendering on viewport\n     is instant, at the cost of bytes for users who never scroll that far. -->\n","html","",[29,304,305,314,338,344,384,390,416,422,429],{"__ignoreMap":302},[306,307,310],"span",{"class":308,"line":309},"line",1,[306,311,313],{"class":312},"saISM","@defer (on viewport; prefetch on idle) {\n",[306,315,317,320,324,328,331,335],{"class":308,"line":316},2,[306,318,319],{"class":312},"  \u003C",[306,321,323],{"class":322},"sZBmE","app-price-history-chart",[306,325,327],{"class":326},"sPXB4"," [productId]",[306,329,330],{"class":312},"=",[306,332,334],{"class":333},"sZ8jY","\"id\"",[306,336,337],{"class":312}," \u002F>\n",[306,339,341],{"class":308,"line":340},3,[306,342,343],{"class":312},"} @placeholder (minimum 300ms) {\n",[306,345,347,349,352,355,357,360,363,365,368,371,373,376,379,381],{"class":308,"line":346},4,[306,348,319],{"class":312},[306,350,351],{"class":322},"div",[306,353,354],{"class":326}," class",[306,356,330],{"class":312},[306,358,359],{"class":333},"\"chart-skeleton\"",[306,361,362],{"class":326}," style",[306,364,330],{"class":312},[306,366,367],{"class":333},"\"height: 320px\"",[306,369,370],{"class":326}," aria-hidden",[306,372,330],{"class":312},[306,374,375],{"class":333},"\"true\"",[306,377,378],{"class":312},">\u003C\u002F",[306,380,351],{"class":322},[306,382,383],{"class":312},">\n",[306,385,387],{"class":308,"line":386},5,[306,388,389],{"class":312},"} @loading (after 150ms; minimum 300ms) {\n",[306,391,393,395,397,399,401,404,406,408,410,412,414],{"class":308,"line":392},6,[306,394,319],{"class":312},[306,396,351],{"class":322},[306,398,354],{"class":326},[306,400,330],{"class":312},[306,402,403],{"class":333},"\"chart-skeleton is-loading\"",[306,405,362],{"class":326},[306,407,330],{"class":312},[306,409,367],{"class":333},[306,411,378],{"class":312},[306,413,351],{"class":322},[306,415,383],{"class":312},[306,417,419],{"class":308,"line":418},7,[306,420,421],{"class":312},"}\n",[306,423,425],{"class":308,"line":424},8,[306,426,428],{"class":427},"sjfSM","\u003C!-- trade-off: prefetch on idle downloads the chunk early so rendering on viewport\n",[306,430,432],{"class":308,"line":431},9,[306,433,434],{"class":427},"     is instant, at the cost of bytes for users who never scroll that far. -->\n",[292,436,438],{"id":437},"_2-use-interaction-triggers-for-optional-features","2. Use interaction triggers for optional features",[297,440,442],{"className":299,"code":441,"language":301,"meta":302,"style":302},"@defer (on interaction) {\n  \u003Capp-review-editor [productId]=\"id\" \u002F>\n} @placeholder {\n  \u003Cbutton type=\"button\" class=\"btn\">Write a review\u003C\u002Fbutton>\n}\n",[29,443,444,449,464,469,498],{"__ignoreMap":302},[306,445,446],{"class":308,"line":309},[306,447,448],{"class":312},"@defer (on interaction) {\n",[306,450,451,453,456,458,460,462],{"class":308,"line":316},[306,452,319],{"class":312},[306,454,455],{"class":322},"app-review-editor",[306,457,327],{"class":326},[306,459,330],{"class":312},[306,461,334],{"class":333},[306,463,337],{"class":312},[306,465,466],{"class":308,"line":340},[306,467,468],{"class":312},"} @placeholder {\n",[306,470,471,473,476,479,481,484,486,488,491,494,496],{"class":308,"line":346},[306,472,319],{"class":312},[306,474,475],{"class":322},"button",[306,477,478],{"class":326}," type",[306,480,330],{"class":312},[306,482,483],{"class":333},"\"button\"",[306,485,354],{"class":326},[306,487,330],{"class":312},[306,489,490],{"class":333},"\"btn\"",[306,492,493],{"class":312},">Write a review\u003C\u002F",[306,495,475],{"class":322},[306,497,383],{"class":312},[306,499,500],{"class":308,"line":386},[306,501,421],{"class":312},[292,503,505],{"id":504},"_3-keep-dependencies-inside-the-block","3. Keep dependencies inside the block",[14,507,508,509,511],{},"Components, directives and pipes used only inside the ",[29,510,31],{}," block must be standalone and not referenced elsewhere in the file's eager code, or they stay in the main chunk.",[292,513,515],{"id":514},"_4-size-placeholders","4. Size placeholders",[14,517,518],{},"Give placeholders the same dimensions as the final content to avoid layout shifts.",[14,520,521],{},[76,522,83,525,83,528,83,531,83,533,83,536,83,538,83,545,83,552,83,557,83,561,83,567,83,571,83,575,83,579,83,583,83,587,83,594,83],{"viewBox":523,"width":79,"role":80,"ariaLabel":524,"style":82},"0 0 760 194","Bar chart of initial JavaScript on an Angular product page before and after deferring heavy components.",[85,526],{"className":527,"x":89,"y":89,"width":79,"height":79,"fill":90},[88],[92,529,530],{},"Initial JavaScript for a product page (compressed)",[96,532,524],{},[85,534],{"x":100,"y":100,"width":101,"height":535,"rx":103,"fill":104,"stroke":105,"style":106},"192",[108,537,530],{"x":110,"y":111,"fill":105,"style":112},[108,539,544],{"x":540,"y":541,"fill":105,"style":542,"textAnchor":543},"217.4","70.0","font-size:13px","end","All components eager",[85,546],{"x":547,"y":115,"width":548,"height":549,"rx":550,"fill":104,"stroke":105,"style":551},"229.4","438.6","19","3","fill-opacity:0.7;stroke-opacity:0.35",[108,553,556],{"x":554,"y":541,"fill":105,"style":555},"674.0","font-size:12px;font-weight:600","310KB",[108,558,560],{"x":540,"y":559,"fill":105,"style":542,"textAnchor":543},"101.0","Chart deferred",[85,562],{"x":547,"y":563,"width":564,"height":549,"rx":550,"fill":565,"stroke":565,"style":566},"87.0","332.5","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[108,568,570],{"x":569,"y":559,"fill":105,"style":555},"567.9","235KB",[108,572,574],{"x":540,"y":573,"fill":105,"style":542,"textAnchor":543},"132.0","+ review editor and chat deferred",[85,576],{"x":547,"y":577,"width":578,"height":549,"rx":550,"fill":565,"stroke":565,"style":566},"118.0","237.7",[108,580,582],{"x":581,"y":573,"fill":105,"style":555},"473.1","168KB",[108,584,586],{"x":540,"y":585,"fill":105,"style":542,"textAnchor":543},"163.0","+ recommendations deferred",[85,588],{"x":547,"y":589,"width":590,"height":549,"rx":550,"fill":591,"stroke":592,"style":593},"149.0","199.5","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[108,595,597],{"x":596,"y":585,"fill":105,"style":555},"434.9","141KB",[226,599,601],{"id":600},"verification","Verification",[14,603,604],{},"Check the build output: deferred components should appear in separate lazy chunks. In the Network panel, those chunks should load only when triggers fire (or prefetch triggers). Check CLS when deferred content renders. In the field, compare LCP, INP and TBT-related metrics for the page.",[226,606,608],{"id":607},"worked-example-an-electronics-retailer","Worked Example: An Electronics Retailer",[14,610,611],{},"An electronics retailer's Angular product page loaded a price history chart (with a charting library), a Q&A section, a review editor, a 3D product viewer and recommendations eagerly. The initial bundle was 310KB compressed, and TBT on mobile was 900ms. The team deferred the chart and Q&A on viewport, the review editor on interaction, the 3D viewer on interaction (with a static image placeholder), and recommendations on viewport with idle prefetch. The initial bundle fell to 141KB, TBT to 260ms, INP p75 from 250ms to 150ms, and LCP improved by 300ms. Sized placeholders kept CLS unchanged.",[226,613,615],{"id":614},"prefetching-and-perceived-speed","Prefetching and Perceived Speed",[14,617,618,619,622,623,626,627,630,631,634,635,637,638,36,641,644],{},"Deferring code risks a delay when the trigger fires: the chunk must download before rendering. The ",[29,620,621],{},"prefetch"," clause separates loading from rendering — for example, ",[29,624,625],{},"on viewport; prefetch on idle"," downloads the chunk during idle time and renders when the block becomes visible. For interaction triggers, ",[29,628,629],{},"prefetch on hover"," or ",[29,632,633],{},"prefetch on viewport"," can hide most of the delay. The ",[29,636,39],{}," block's ",[29,639,640],{},"after",[29,642,643],{},"minimum"," parameters prevent flicker for fast loads.",[226,646,648],{"id":647},"incremental-hydration-with-defer","Incremental Hydration With @defer",[14,650,651,652,654,655,44,658,44,661,44,664,667],{},"With SSR and incremental hydration enabled, ",[29,653,31],{}," blocks are rendered on the server, so users see the content immediately, but their JavaScript and hydration are deferred until a hydration trigger (",[29,656,657],{},"hydrate on viewport",[29,659,660],{},"hydrate on interaction",[29,662,663],{},"hydrate on idle",[29,665,666],{},"hydrate never","). This combines the SEO and LCP benefits of server rendering with the bundle and TBT benefits of deferring. Event replay ensures interactions with not-yet-hydrated blocks are captured and replayed after hydration.",[297,669,671],{"className":299,"code":670,"language":301,"meta":302,"style":302},"@defer (hydrate on viewport) {\n  \u003Capp-related-products [productId]=\"id\" \u002F>\n}\n\u003C!-- Server-rendered HTML is visible immediately; its code loads and hydrates when\n     scrolled into view. trade-off: interactions before hydration are replayed later. -->\n",[29,672,673,678,693,697,702],{"__ignoreMap":302},[306,674,675],{"class":308,"line":309},[306,676,677],{"class":312},"@defer (hydrate on viewport) {\n",[306,679,680,682,685,687,689,691],{"class":308,"line":316},[306,681,319],{"class":312},[306,683,684],{"class":322},"app-related-products",[306,686,327],{"class":326},[306,688,330],{"class":312},[306,690,334],{"class":333},[306,692,337],{"class":312},[306,694,695],{"class":308,"line":340},[306,696,421],{"class":312},[306,698,699],{"class":308,"line":346},[306,700,701],{"class":427},"\u003C!-- Server-rendered HTML is visible immediately; its code loads and hydrates when\n",[306,703,704],{"class":308,"line":386},[306,705,706],{"class":427},"     scrolled into view. trade-off: interactions before hydration are replayed later. -->\n",[14,708,709],{},[76,710,83,713,83,716,83,719,83,721,83,724,83,726,83,732,83,738,83,742,83,746,83,748,83,751,83,754,83,757,83,761,83,765,83,767,83,771,83,773,83,776,83,778,83],{"viewBox":711,"width":79,"role":80,"ariaLabel":712,"style":82},"0 0 760 204","Comparison of client-side deferred rendering and server-rendered deferred hydration in Angular.",[85,714],{"className":715,"x":89,"y":89,"width":79,"height":79,"fill":90},[88],[92,717,718],{},"Client @defer vs incremental hydration",[96,720,712],{},[85,722],{"x":100,"y":100,"width":101,"height":723,"rx":103,"fill":104,"stroke":105,"style":106},"202",[108,725,718],{"x":110,"y":111,"fill":105,"style":112},[85,727],{"x":110,"y":115,"width":728,"height":729,"rx":730,"fill":591,"stroke":592,"style":731},"340.0","126.0","6","fill-opacity:0.24;stroke-opacity:0.9",[108,733,737],{"x":734,"y":735,"fill":105,"style":736},"42.0","82.0","font-size:14px;font-weight:700","@defer (on viewport)",[108,739,741],{"x":734,"y":740,"fill":105,"style":123},"108.0","•",[108,743,745],{"x":115,"y":740,"fill":105,"style":744,"textAnchor":124},"font-size:12.5px","Placeholder in server HTML",[108,747,741],{"x":734,"y":573,"fill":105,"style":123},[108,749,750],{"x":115,"y":573,"fill":105,"style":744,"textAnchor":124},"Content rendered on the client later",[108,752,741],{"x":734,"y":753,"fill":105,"style":123},"156.0",[108,755,756],{"x":115,"y":753,"fill":105,"style":744,"textAnchor":124},"Needs sized placeholder",[85,758],{"x":759,"y":115,"width":728,"height":729,"rx":730,"fill":565,"stroke":565,"style":760},"392.0","fill-opacity:0.14;stroke-opacity:0.9",[108,762,764],{"x":763,"y":735,"fill":105,"style":736},"406.0","@defer (hydrate on viewport)",[108,766,741],{"x":763,"y":740,"fill":105,"style":123},[108,768,770],{"x":769,"y":740,"fill":105,"style":744,"textAnchor":124},"420.0","Real content in server HTML",[108,772,741],{"x":763,"y":573,"fill":105,"style":123},[108,774,775],{"x":769,"y":573,"fill":105,"style":744,"textAnchor":124},"Code loads and hydrates later",[108,777,741],{"x":763,"y":753,"fill":105,"style":123},[108,779,780],{"x":769,"y":753,"fill":105,"style":744,"textAnchor":124},"Good for SEO-relevant sections",[226,782,784],{"id":783},"finding-candidates-for-defer","Finding Candidates for @defer",[14,786,787],{},"Start from the build's stats: list the largest dependencies in the initial chunk and trace which components import them. Charting, rich-text editing, maps, PDF viewers, date pickers with large locale data, and 3D or video players are common heavy hitters. Then look at the page layout: anything below the fold on a typical mobile viewport, behind a tab or accordion, or behind a button is a candidate. Defer the heaviest first and re-check the initial chunk after each change, since shared dependencies may still be pulled in by another eager component.",[226,789,791],{"id":790},"monitoring-deferred-loading-in-the-field","Monitoring Deferred Loading in the Field",[14,793,794],{},"Deferred chunks shift work later, so measure what happens when they load. Track how often each deferred block's trigger fires (a simple custom event when the block renders), how long the chunk takes to load on real devices, and whether INP for interactions inside deferred blocks is affected. If a block's trigger fires for most users soon after load, consider prefetching it on idle or loading it eagerly; if it rarely fires, the deferral is saving bytes for almost everyone.",[226,796,798],{"id":797},"common-mistakes","Common Mistakes",[231,800,801,807,813,819],{},[234,802,803,806],{},[237,804,805],{},"Deferring above-the-fold content."," Delays what users see first.",[234,808,809,812],{},[237,810,811],{},"Referencing deferred components elsewhere eagerly."," They stay in the main chunk.",[234,814,815,818],{},[237,816,817],{},"Unsized placeholders."," Layout shifts.",[234,820,821,824],{},[237,822,823],{},"No prefetch for likely interactions."," Visible delay on click.",[226,826,828],{"id":827},"edge-cases","Edge Cases",[14,830,831,834],{},[237,832,833],{},"Nested @defer blocks."," Supported; avoid cascades where each level waits for the previous.",[14,836,837,840],{},[237,838,839],{},"Testing."," Angular testing utilities can render deferred blocks in specific states for unit tests.",[14,842,843,846,847,849],{},[237,844,845],{},"SSR without incremental hydration."," On the server, ",[29,848,31],{}," renders placeholders; content renders on the client.",[14,851,852,855],{},[237,853,854],{},"Non-standalone dependencies."," Must be standalone to be deferred.",[226,857,859],{"id":858},"faq","FAQ",[861,862,865,869],"details",{"className":863},[864],"faq-item",[866,867,868],"summary",{},"What does @defer do?",[14,870,871],{},"It lazy-loads the dependencies of a template block and renders it when a trigger fires, showing placeholder and loading templates meanwhile.",[861,873,875,878],{"className":874},[864],[866,876,877],{},"Which trigger should I use?",[14,879,880,882,883,885,886,888],{},[29,881,43],{}," for below-the-fold content, ",[29,884,47],{}," for optional features, ",[29,887,53],{}," for widgets needed soon after load.",[861,890,892,895],{"className":891},[864],[866,893,894],{},"Does @defer work with SSR?",[14,896,897],{},"Yes. Without incremental hydration, placeholders render on the server; with it, the real content renders on the server and hydration is deferred.",[861,899,901,904],{"className":900},[864],[866,902,903],{},"How do I avoid layout shifts?",[14,905,906],{},"Give placeholders and loading templates the same dimensions as the final content.",[861,908,910,913],{"className":909},[864],[866,911,912],{},"Can I prefetch deferred code?",[14,914,915,916,918,919,630,922,64],{},"Yes, with the ",[29,917,621],{}," clause and its own triggers, such as ",[29,920,921],{},"prefetch on idle",[29,923,629],{},[861,925,927,930],{"className":926},[864],[866,928,929],{},"Is @defer better than lazy routes?",[14,931,932,933,935],{},"They complement each other: lazy routes split by page, ",[29,934,31],{}," splits within a page.",[861,937,939,942],{"className":938},[864],[866,940,941],{},"What is the minimum parameter?",[14,943,944],{},"It keeps a placeholder or loading template visible for a minimum time to avoid flickering when content loads quickly.",[861,946,948,951],{"className":947},[864],[866,949,950],{},"Can deferred blocks contain several components?",[14,952,953],{},"Yes. All dependencies used only inside the block are bundled into its lazy chunk.",[861,955,957,960],{"className":956},[864],[866,958,959],{},"Do deferred blocks affect SEO?",[14,961,962],{},"Client-side deferred content is not in the server HTML. For SEO-relevant sections, use incremental hydration so the content is server-rendered.",[226,964,966],{"id":965},"related","Related",[231,968,969,976,983],{},[234,970,971,975],{},[18,972,974],{"href":973},"\u002Fframework-performance\u002Fangular-performance\u002Fangular-ssr-hydration-and-event-replay\u002F","Angular SSR hydration and event replay"," — incremental hydration details.",[234,977,978,982],{},[18,979,981],{"href":980},"\u002Fframework-performance\u002Fvue-and-nuxt-performance\u002Flazy-hydration-in-nuxt\u002F","Lazy hydration in Nuxt"," — the Vue equivalent.",[234,984,985,989],{},[18,986,988],{"href":987},"\u002Fframework-performance\u002Fnextjs-performance\u002Freducing-nextjs-first-load-javascript\u002F","Reducing Next.js first load JavaScript"," — the React equivalent.",[991,992,994],"script",{"type":993},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Deferring Components with Angular @defer Blocks\",\n  \"description\": \"How Angular's deferrable views lazy-load components declaratively, how to pick triggers and prefetching, and how to avoid layout shifts and slow first interactions.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Wrap heavy, non-critical components in @defer\",\n      \"text\": \"Wrap heavy, non-critical components in @defer\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Use interaction triggers for optional features\",\n      \"text\": \"Use interaction triggers for optional features\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Keep dependencies inside the block\",\n      \"text\": \"Components, directives and pipes used only inside the @defer block must be standalone and not referenced elsewhere in the file's eager code, or they stay in the main chunk.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Size placeholders\",\n      \"text\": \"Give placeholders the same dimensions as the final content to avoid layout shifts.\"\n    }\n  ]\n}\n",[991,996,997],{"type":993},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Deferring Components with Angular @defer Blocks\",\n  \"description\": \"How Angular's deferrable views lazy-load components declaratively, how to pick triggers and prefetching, and how to avoid layout shifts and slow first interactions.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks\u002F\"\n  }\n}\n",[991,999,1000],{"type":993},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Framework Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Angular Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fangular-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Deferring Components with Angular @defer Blocks\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks\u002F\"\n    }\n  ]\n}\n",[1002,1003,1004],"style",{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":302,"searchDepth":316,"depth":316,"links":1006},[1007,1008,1009,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024],{"id":228,"depth":316,"text":229},{"id":261,"depth":316,"text":262},{"id":289,"depth":316,"text":290,"children":1010},[1011,1012,1013,1014],{"id":294,"depth":340,"text":295},{"id":437,"depth":340,"text":438},{"id":504,"depth":340,"text":505},{"id":514,"depth":340,"text":515},{"id":600,"depth":316,"text":601},{"id":607,"depth":316,"text":608},{"id":614,"depth":316,"text":615},{"id":647,"depth":316,"text":648},{"id":783,"depth":316,"text":784},{"id":790,"depth":316,"text":791},{"id":797,"depth":316,"text":798},{"id":827,"depth":316,"text":828},{"id":858,"depth":316,"text":859},{"id":965,"depth":316,"text":966},"How Angular's deferrable views lazy-load components declaratively, how to pick triggers and prefetching, and how to avoid layout shifts and slow first interactions.","md",{"slug":12,"type":1028,"breadcrumb":1029,"datePublished":1037,"dateModified":1037},"article",[1030,1033,1034,1035],{"name":1031,"url":1032},"Home","\u002F",{"name":26,"url":25},{"name":21,"url":20},{"name":5,"url":1036},"\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks\u002F","2026-10-06",true,"\u002Fframework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks",{"title":5,"description":1041},"Use @defer with on viewport, interaction, idle, hover and timer triggers to split heavy Angular components out of the initial bundle, with sized placeholders.","framework-performance\u002Fangular-performance\u002Fdeferring-components-with-angular-defer-blocks\u002Findex","sDR9JCfsBfkTJsVPRfArF3XqFyz_d35omijVIRqSM2k",[1045,1049],{"title":1046,"path":1047,"stem":1048},"Angular SSR Hydration and Event Replay","\u002Fframework-performance\u002Fangular-performance\u002Fangular-ssr-hydration-and-event-replay","framework-performance\u002Fangular-performance\u002Fangular-ssr-hydration-and-event-replay\u002Findex",{"title":1050,"path":1051,"stem":1052},"Going Zoneless in Angular","\u002Fframework-performance\u002Fangular-performance\u002Fgoing-zoneless-in-angular","framework-performance\u002Fangular-performance\u002Fgoing-zoneless-in-angular\u002Findex",1791308078933]