{"id":3511,"date":"2020-11-11T17:03:38","date_gmt":"2020-11-11T17:03:38","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3511"},"modified":"2020-11-28T15:23:40","modified_gmt":"2020-11-28T15:23:40","slug":"5-tips-to-improve-ionic-angular-app-performance","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance","title":{"rendered":"5 Tips to Improve Ionic Angular App Performance"},"content":{"rendered":"

Everyone knows that building performant web apps is critical for retaining happy users. However, with the constant influx of bugs to fix and new features to build, this is easier said than done.<\/p>\n

Fortunately, there are several steps you can take to improve your Angular app\u2019s performance substantially. Recently, Stephen Fluin from the Angular team delivered a web.dev<\/a> conference talk titled \u201cHow to stay fast and fresh with Angular<\/a>,\u201d with tips on improving Angular app startup performance and bundle size. His suggestions were excellent and included several I had never tried before, so I decided to put them to the test in a real Angular app.<\/p>\n

The following post reviews Stephen\u2019s Angular performance tips applied through the lens of an Ionic app, Ionifits<\/a>, a Zenefits-inspired human resources demo app. It showcases various Ionic App Platform technologies, including Ionic Framework<\/a>, Capacitor<\/a>, and Ionic Native Enterprise solutions<\/a>. Try it out on the web<\/a>, iOS<\/a>, or Android<\/a>.<\/p>\n

<\/p>\n

By applying these tips, I was able to improve Ionifits\u2019 Lighthouse performance score by ~20 points. Let\u2019s dig in.<\/p>\n

Reduce app bundle size with source-map-explorer<\/h2>\n

Modern web apps, including Angular apps, are transformed in various ways before running in a web browser: JavaScript files are combined then minified or occasionally machine-generated. To debug an app or review its bundle size, the source is inspected using source maps that map the transformed source to the original source. Examining source maps is a great way to understand what\u2019s happening between the code you write and the code shipped to the end-user.<\/p>\n

The Angular team recommends the source-map-explorer tool<\/a> to visualize your app\u2019s code distribution. First, install it:<\/p>\n

$ npm i -g source-map-explorer\n<\/code><\/pre>\n
Next, open angular.json<\/code> within your project. Find the \u201cconfigurations\u201d node then set the \u201csourceMap\u201d and \u201cnamedChunks\u201d options to \u201ctrue\u201d:<\/p>\n
\/\/ angular.json\n"configurations": {\n  "sourceMap": true,\n  "namedChunks": true,\n}\n<\/code><\/pre>\n
Next, create a production build of your app:<\/p>\n
$ ionic build --prod\n<\/code><\/pre>\n
Finally, run the source-map-explorer<\/code> tool, specifying the JavaScript file to analyze. In Ionic apps, that\u2019s a file that begins with \u201cmain\u201d (along with a constantly changing hash like main-es2015.5e93717f1.js<\/code>) found under the \u201cwww\u201d folder. Run the following to inspect both the es2015 (modern browsers) and es5 (legacy browsers) bundles:<\/p>\n
$ source-map-explorer www\/main*.js\n<\/code><\/pre>\n
Running this command opens up a visualization of your app\u2019s code distribution, including the code you\u2019ve written and the libraries you\u2019re using, such as Angular, Ionic Framework, RxJS, and Capacitor.<\/p>\n
Begin by inspecting the frameworks\/libraries you\u2019ve included for unused code. It can creep in over time, such as when a team member accidentally checks in a prototype. In Ionifits, I removed @angular\/animations<\/code> (specifically, app.module.ts<\/code> referenced NoopAnimationsModule<\/code>), which removed 53.81 KB (4.8% total) from the app.<\/p>\n
Next, review your application code, represented here as the src<\/code> section. A common issue is unnecessary imports. In Ionifits, one file, in particular, stood out – data\/employeeData.js<\/code> accounted for over half of the app\u2019s size – 571.57 KB, or 54.2% of the app. The file includes thousands of fake \u201cemployees\u201d referenced on an employee directory listing page, so I expected the large file size. However, it\u2019s only referenced on that directory page, which is not the first page a user interacts with, so clearly, something was off.<\/p>\n
Looking in src\/app\/app.module.ts<\/code>, I noticed that EmployeeService<\/code>, which loads data from employeeData.js<\/code>, was imported as a provider:<\/p>\n
import { EmployeeService } from '.\/services\/employee.service';\n\nproviders: [\n    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },\n    EmployeeService\n  ],\n<\/code><\/pre>\n
I removed that unnecessary import then reran the source map explorer analysis. Wow! The total bundle size dropped from 1.03 MB to 481.77 KB, and the src<\/code> folder (my written app code) became so tiny that it was no longer displayed in the source-map-explorer<\/code> visualization.<\/p>\n
\n  Don’t see a source folder (src<\/code>)? That’s good – it means your app code is tiny compared to the other code in your project. Focus on the libraries\/frameworks you can remove instead.\n<\/p><\/blockquote>\n
Finally, audit package.json<\/code>, looking for any unused libraries. I noticed @angular\/material<\/code> had been added at some point but given we use Ionic Framework\u2019s UI components in Ionifits, I removed it. Fortunately, no Material UI components were in use, so the app\u2019s bundle size didn\u2019t change at all. However, it\u2019s good practice to clean up unused references, lest they find their way into your bundle!<\/p>\n
By implementing the above changes, Ionifits\u2019 Lighthouse performance score increased from 61 to 80:<\/p>\n
\"ionifits-lighthouse-score\"
Configure size budgets<\/h2>\n
In addition to using the source-map-explorer<\/code> tool to analyze bundle sizes, you can also configure size budgets<\/a>. Reducing your app\u2019s size is challenging once it\u2019s been in production, so setting budget thresholds ensures your application stays within the size boundaries you define.<\/p>\n
Set size budgets within angular.json<\/code>\u2019s budgets section:<\/p>\n
\/\/ angular.json\n{\n  ...\n\n  "configurations": {\n    "production": {\n      ...\n      budgets: [\n        "type": "initial",\n        "maximumWarning": "500KB",\n        "maximumError": \u201c800KB"\n      ]\n    }\n  }\n}\n<\/code><\/pre>\n
The recommended budgets<\/a> to set vary, as each application is different. In the above example, if the application\u2019s initial size exceeds 500KB, the Angular CLI will show a console warning when you build the app. If it gets larger than 800KB, the build will fail.<\/p>\n
Split your app into modules for native Angular lazy loading<\/h2>\n
Lazy loaded modules load on-demand when a user navigates to their route the first time. This strategy is excellent for app performance and reducing the initial bundle size. Use the ng generate<\/code> command to create a lazily loaded module:<\/p>\n
$ ng generate module --module app-module --route about about\n<\/code><\/pre>\n
Ionic Angular apps embrace lazy loading out of the box, so no changes to Ionifits were necessary. New Ionic apps (created using the ionic start<\/code> command) are pre-configured with lazy loading, and subsequent app pages created using the Ionic CLI\u2019s generate<\/code> command are automatically configured as lazy loaded modules, too.<\/p>\n
$ ionic generate page about\/about\n<\/code><\/pre>\n
Keep Angular up-to-date regularly with “ng update”<\/h2>\n
Let\u2019s face it – no one likes updating their dependencies. The risk of something breaking always seems high, which of course, distracts from actually building more features for your app. Fortunately, the Angular team does a superb job with the Angular CLI\u2019s update process, which updates the Angular packages and applies code transformations as needed for you.<\/p>\n
The Angular team recommends updating the CLI and Core first:<\/p>\n
$ ng update @angular\/cli @angular\/core\n<\/code><\/pre>\n
Afterward, update the rest of the Angular packages if there are no errors.<\/p>\n
Another resource to check out is the Angular update guide: https:\/\/update.angular.io<\/a>. Select the version your app is currently on, then the version you\u2019re updating to. The guide will show you what to do before, during, and after the update. In my experience, updating is painless since there\u2019s very little manual work to do. The CLI takes care of most changes for you!<\/p>\n
Updating the Ionic dependencies of your app is also a single command away:<\/p>\n
# Ionic Angular\n$ npm update @ionic\/angular@latest\n\n# Capacitor\n$ npm update @capacitor\/core@latest @capacitor\/ios@latest @capacitor\/android@latest\n<\/code><\/pre>\n
If you\u2019re concerned about ensuring that all dependencies will work together, periodically reference the package.json<\/code> files in the Ionic starter template apps (here\u2019s Angular\u2019s<\/a>). These are updated with the latest compatible versions over time by the Ionic Framework and DevRel teams.<\/p>\n
Reduce app build times by adding a Browserslist file<\/h2>\n
A Browserslist<\/code> file specifies the browsers that an app supports. Developer tools can use that information in various ways, such as applying build process optimizations to reduce app build times.<\/p>\n
This is the case with new Angular 10+ projects<\/a> – including a browserlists<\/code> file with the default configuration means that ES5 builds become disabled.<\/p>\n
If your Angular app is like Ionifits, created in January 2019 as an Angular 7 app, you might not have a browserslist<\/code> file. However, consider adding one, as the benefit of removing ES5 builds is that app build times are reduced, most noticeably in production builds (ionic build --prod<\/code>). When I first implemented this, I saw the build reduce from 98 seconds down to 35 seconds. In subsequent builds, I commonly saw another 20 to 40 seconds shaved off.<\/p>\n
To get the latest\/greatest browserslist configuration, run ng new<\/code> outside of your app project to create a temporary new Angular project, then copy the browserslist file into your existing project. Or, borrow Ionifits\u2019 file, which looks like:<\/p>\n
> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\nnot IE 9-11 # For IE 9-11 support, remove 'not'.\n<\/code><\/pre>\n
To view a list of the supported browsers designated by the rules defined in the browserslist<\/code> file, run npx browserslist<\/code> in the root project directory. For reference, here\u2019s what the above generates:<\/p>\n
and_chr 84  \nand_ff 68   \nand_qq 10.4 \nand_uc 12.12\nandroid 81  \nbaidu 7.12  \nchrome 85   \nchrome 84   \nchrome 83\nedge 84\nedge 83\nedge 18\nfirefox 80\nfirefox 79\nfirefox 78\nfirefox 77\nfirefox 68\nios_saf 13.4-13.5\nios_saf 13.3\nios_saf 12.2-12.4\nkaios 2.5\nop_mini all\nop_mob 46\nopera 69\nopera 68\nsafari 13.1\nsafari 13\nsamsung 12.0\nsamsung 11.1-11.2\n<\/code><\/pre>\n
To learn more about browserslist<\/code> and all available configurations, check out the project\u2019s documentation<\/a>.<\/p>\n
Start Building More Performant Angular Apps<\/h2>\n
Improving the performance of an Angular app can seem complicated and daunting. Fortunately, leveraging Angular\u2019s out-of-the-box tooling, including configuring size budgets, implementing lazy loading, and adding a browserslist file, goes a long way by doing much of the hard work for you. Keeping the app updated regularly and occasionally using source-map-explorer<\/code> to identify further optimizations is useful for keeping performance in check over time.<\/p>\n
These are just a few examples of Ionic Angular performance optimizations you can make. If you have any additional tips, please share them below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Everyone knows that building performant web apps is critical for retaining happy users. However, with the constant influx of bugs to fix and new features to build, this is easier said than done. Fortunately, there are several steps you can take to improve your Angular app\u2019s performance substantially. Recently, Stephen Fluin from the Angular team […]<\/p>\n","protected":false},"author":62,"featured_media":3512,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"30","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"488422","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/5-tips-to-improve-ionic-angular-app-performance\/199475","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[60,23,79],"class_list":["post-3511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-angular","tag-framework","tag-performance"],"acf":[],"yoast_head":"\n5 Tips to Improve Ionic Angular App Performance - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Tips to Improve Ionic Angular App Performance\" \/>\n<meta property=\"og:description\" content=\"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-11T17:03:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-28T15:23:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1353\" \/>\n\t<meta property=\"og:image:height\" content=\"899\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"5 Tips to Improve Ionic Angular App Performance\",\"datePublished\":\"2020-11-11T17:03:38+00:00\",\"dateModified\":\"2020-11-28T15:23:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\"},\"wordCount\":1391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg\",\"keywords\":[\"Angular\",\"Framework\",\"performance\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\",\"url\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\",\"name\":\"5 Tips to Improve Ionic Angular App Performance - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg\",\"datePublished\":\"2020-11-11T17:03:38+00:00\",\"dateModified\":\"2020-11-28T15:23:40+00:00\",\"description\":\"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg\",\"width\":1353,\"height\":899,\"caption\":\"angular-performance-tips\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Tips to Improve Ionic Angular App Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Tips to Improve Ionic Angular App Performance - Ionic Blog","description":"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.","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:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance","og_locale":"en_US","og_type":"article","og_title":"5 Tips to Improve Ionic Angular App Performance","og_description":"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.","og_url":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance","og_site_name":"Ionic Blog","article_published_time":"2020-11-11T17:03:38+00:00","article_modified_time":"2020-11-28T15:23:40+00:00","og_image":[{"width":1353,"height":899,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","type":"image\/jpeg"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"5 Tips to Improve Ionic Angular App Performance","datePublished":"2020-11-11T17:03:38+00:00","dateModified":"2020-11-28T15:23:40+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance"},"wordCount":1391,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","keywords":["Angular","Framework","performance"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance","url":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance","name":"5 Tips to Improve Ionic Angular App Performance - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","datePublished":"2020-11-11T17:03:38+00:00","dateModified":"2020-11-28T15:23:40+00:00","description":"Improve the performance of an Angular app by leveraging size budgets, implementing lazy loading, and adding a browserslist file.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","width":1353,"height":899,"caption":"angular-performance-tips"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/5-tips-to-improve-ionic-angular-app-performance#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"5 Tips to Improve Ionic Angular App Performance"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/11\/oGLumRxPRmemKujIVuEG_LongExposure_i84.jpeg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3511"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3512"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}