3

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.

  1. If I put defer on jquery or pixel-admin js files then system isn't behaving well. But page speed increased to B(53%).
  2. What is the best practice or place to keep these scripts in Angular?
  3. Can I include defer tag in the angular.json scripts?
  4. Is it possible to include defer tag in all the scripts which are used in any angular project? If possible then how I may achieve it?

Thank you.

Ashish Kumar Jaryal
  • 772
  • 7
  • 20
  • Possible duplicate of [Why won't AngularJS work with multiple defer scripts?](https://stackoverflow.com/questions/35135052/why-wont-angularjs-work-with-multiple-defer-scripts) – agascon Mar 13 '19 at 08:01
  • please note that angular 6 is not angular js – Jeremias Nater Dec 21 '21 at 00:09

1 Answers1

2

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.

agascon
  • 718
  • 1
  • 6
  • 25
  • 1
    it uses defer now - I'm not sure when it started but my generated file definitely now contains ` – Simon_Weaver Feb 11 '20 at 08:00