{"id":5147,"date":"2024-09-18T11:37:21","date_gmt":"2024-09-18T09:37:21","guid":{"rendered":"https:\/\/www.infinity-group.pl\/blog\/?p=5147"},"modified":"2026-02-27T09:53:58","modified_gmt":"2026-02-27T08:53:58","slug":"performance-optimisation-in-angular-applications","status":"publish","type":"post","link":"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/","title":{"rendered":"Performance Optimisation in Angular Applications"},"content":{"rendered":"\n<p>Angular is a popular framework for building dynamic web applications, known for creating powerful and interactive user experiences. However, as projects grow, performance issues can arise, making optimisation essential to maintain smooth functionality and guarantee the finest user experience. What are <strong>the best practices to improve the performance of Angular applications?<\/strong><\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Summary<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Prze\u0142\u0105cznik Spisu Tre\u015bci\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#lazy-loading-of-modules\" >Lazy loading of modules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#onpush-change-detection\" >OnPush Change Detection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#unsubscribing-from-observable\" >Unsubscribing from Observable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#reducing-bundle-size\" >Reducing bundle size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#server-side-rendering-ssr-with-angular-universal\" >Server-side rendering (SSR) with Angular Universal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#asynchronous-resource-loading\" >Asynchronous resource loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#minimising-components-and-change-detection\" >Minimising components and Change Detection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#optimised-production-builds-with-angular-cli\" >Optimised production builds with Angular CLI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#optimised-resource-management\" >Optimised resource management<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#performance-monitoring-and-analysis\" >Performance monitoring and analysis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#reducing-external-http-requests\" >Reducing external HTTP requests<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#limiting-external-libraries\" >Limiting external libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#summary\" >Summary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.infinity-group.dev\/blog\/2024\/09\/18\/performance-optimisation-in-angular-applications\/#contact-with-us\" >Contact with us<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"lazy-loading-of-modules\"><\/span>Lazy loading of modules<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lazy loading is a technique that loads only the modules required at a given moment, <strong>reducing the initial load time and ensuring unused resources do not overwhelm the user&#8217;s browser<\/strong>. Tools like Angular CLI, which streamline the quick and easy generation of Angular projects, support the automatic creation of modules with lazy loading, simplifying the implementation of this technique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"onpush-change-detection\"><\/span>OnPush Change Detection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>By default, Angular uses a reference-based change detection strategy that triggers checks on all components whenever the application&#8217;s state changes. Switching to the OnPush strategy optimizes this process by limiting checks to only when a component\u2019s inputs (@Input properties) are modified. This reduces unnecessary change detection cycles, making it particularly beneficial in large applications where performance gains can be substantial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"unsubscribing-from-observable\"><\/span>Unsubscribing from Observable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Improper handling of Observable subscriptions can lead to memory leaks. Always unsubscribe when necessary, using techniques like the takeUntil operator. Alternatively, using AsyncPipe in templates <strong>automatically manages subscriptions and cancels them when the component is destroyed.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"reducing-bundle-size\"><\/span>Reducing bundle size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>An excessively large bundle negatively affects load time. Fortunately, this can be mitigated with the right approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilise tree-shaking to remove unused code. While Angular CLI supports tree-shaking, it&#8217;s also worth manually reviewing dependencies to avoid unnecessary libraries.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use @angular\/material or other Angular libraries modularly by importing only the components that are required.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"server-side-rendering-ssr-with-angular-universal\"><\/span>Server-side rendering (SSR) with Angular Universal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Angular Universal enables server-side rendering (SSR), which can significantly boost both load times and SEO. With SSR, content is displayed faster, r<strong>educing the load on the user\u2019s browser and enhancing the user experience<\/strong> \u2014 especially on less powerful devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"asynchronous-resource-loading\"><\/span>Asynchronous resource loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Asynchronously loading resources, such as scripts or external libraries, speeds up page rendering. Additionally, <strong>using async or defer attributes in scripts can prevent blocking the rendering of the page.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"minimising-components-and-change-detection\"><\/span>Minimising components and Change Detection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Deep component hierarchies and redundant Change Detection operations can burden applications. Avoiding overly deep component structures and using techniques like memoization of results can be effective in performance optimisation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"optimised-production-builds-with-angular-cli\"><\/span>Optimised production builds with Angular CLI<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Angular CLI provides built-in optimisation mechanisms for production builds. Running the ng build &#8211;prod command automatically applies minification (reducing the source code by removing unnecessary characters without affecting functionality), tree-shaking, and other optimisations. <strong>Ensuring your builds are configured properly will maximise performance and reduce unnecessary overhead.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"optimised-resource-management\"><\/span>Optimised resource management<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Large static resources, such as images and fonts, can prolong application load times. To tackle this, use Webpack Bundle Analyzer to<strong> analyse your application\u2019s bundle and identify large resources that can be optimised or split into smaller parts<\/strong>. Additionally use formats like WebP for images and reduce the size of other static assets for faster load times.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"performance-monitoring-and-analysis\"><\/span>Performance monitoring and analysis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Consistently monitoring your application can help identify bottlenecks and areas that need improvement. Tools like Angular DevTools, Chrome DevTools, and Lighthouse offer<strong> advanced profiling features<\/strong>, while platforms like Sentry and New Relic provide performance monitoring in production environments.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"reducing-external-http-requests\"><\/span>Reducing external HTTP requests<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Too many HTTP requests to the server can slow down an application. To avoid this, consider techniques such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aggregating HTTP requests using techniques like debouncing, caching, or batching.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using mechanisms like HttpInterceptor to optimise HTTP requests management.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"limiting-external-libraries\"><\/span>Limiting external libraries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Each additional library introduces extra code to the application, inflating the bundle size. Only choose libraries that are essential and try to implement other functionalities using Angular\u2019s native capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Optimising an Angular application is an ongoing process that requires constant monitoring and adaptation. By focusing on reducing unnecessary computations, minimising renderings, and optimising resource management, you can achieve smoother, faster, and more efficient applications. Following these practices will ensure your Angular applications deliver an outstanding user experience.<\/p>\n\n\n\n<p>Our developers specialise in building various web applications, including Angular-based ones. Fill out the form below to find out how <strong>we can help create a modern, high-performance application tailored to your business needs.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-contact-form-7-contact-form-selector\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f5799-o1\" lang=\"pl-PL\" dir=\"ltr\" data-wpcf7-id=\"5799\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/blog\/wp-json\/wp\/v2\/posts\/5147#wpcf7-f5799-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formularz kontaktowy\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"5799\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"pl_PL\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f5799-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<h2 class=\"form-title\"><span class=\"ez-toc-section\" id=\"contact-with-us\"><\/span>Contact with us\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"form-row\">\n\t<div class=\"form-column\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Name and surname*\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"form-column\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company*\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-row\">\n\t<div class=\"form-column\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail*\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"form-column\">\n\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"phone-number\"><input size=\"40\" maxlength=\"15\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Phone number\" value=\"\" type=\"tel\" name=\"phone-number\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Message\" name=\"your-message\"><\/textarea><\/span>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Submit\" \/>\n<\/p>\n<div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<p>*Required\n<\/p>\n<p class=\"klauzula-naglowek\">Clause:\n<\/p>\n<p>The administrator of your personal data is Infinity Group Sp. z o.o., with its registered office in Bia\u0142ystok.<br \/>\nThe data provided in the form will be processed for the purpose of responding to your inquiry (Article 6(1)(f) of the GDPR \u2013 the administrator\u2019s legitimate interest consisting in conducting correspondence). Providing your data is voluntary, but necessary in order to receive a response.<br \/>\nYou have, among others, the right to object to the processing of your data and the right to lodge a complaint with the President of the Personal Data Protection Office (Poland). Detailed information, including information on data recipients, the data retention period, and possible transfers of data outside the EEA, can be found under the link \u201cInformation on the processing of your personal data\u201d.\n<\/p>\n<\/form>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Angular is a popular framework for building dynamic web applications, known for creating powerful and interactive user experiences. However, as projects grow, performance issues can arise, making optimisation essential to maintain smooth functionality and guarantee the finest user experience. What are the best practices to improve the performance of Angular applications? Lazy loading of modules&#8230;<\/p>\n","protected":false},"author":33,"featured_media":5741,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"class_list":["post-5147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-en"],"_links":{"self":[{"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/posts\/5147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/comments?post=5147"}],"version-history":[{"count":3,"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/posts\/5147\/revisions"}],"predecessor-version":[{"id":5932,"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/posts\/5147\/revisions\/5932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/media\/5741"}],"wp:attachment":[{"href":"https:\/\/www.infinity-group.dev\/blog\/wp-json\/wp\/v2\/media?parent=5147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}