Menu
Some of our scripts are included in index.html and some exists in angular.json file under scripts tag. To increase Page Speed I have added defer tag and reordered scripts for proper execution.
index.html:(under body tag)
<body>
<script type="text/javascript" src="app/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="app/assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="app/assets/js/pixel-admin.min.js"></script>
<script type="text/javascript" src="app/assets/js/jquery.slimscroll.min.js" defer></script>
<script type="text/javascript" src="app/assets/js/select2.full.min.js" defer></script>
<script type="text/javascript" src="app/assets/js/bootstrap.min.js" defer></script>
<script type="text/javascript" src="app/assets/js/bootstrap-tabdrop.min.js" defer></script>
<app-root>
<div class="page-loader" id="loader" style="display:block;">
<img alt="page-loader" src="app/assets/images/ajax-loader.gif" />
</div>
</app-root>
</body>
angular.json: (under scripts tag):
"scripts": [
"src/app/assets/js/persist-all-min.js",
"src/app/assets/js/persist-min.js",
"src/app/assets/plugins/dropzone/dropzone.js",
"src/app/assets/js/loader.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
With above index.html settings system works fine but page speed is downgraded to D(68%) according to Gtmetrix site.
Thank you.
790
asked Mar 18 '26 18:03
I understand from this existing answer that you cannot use defer with Angular.
If you think about this, makes absolutely sense as delaying the download of scripts could make the application bootstrap to fail.
The only quick solution I can think is to compress your script bundles. See this answer. This will speed up your application download and probably is completely transparent to your application as will be handled by the web server and browser.
Not really answering your question, but hope this helps.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
