How can I combining many external Javascript scripts into one?

Question

I check my website using gtmetrix and my website is recommended for fewer HTTP requests and reduce DNS lookups. So I must to combining combining many external Javascript scripts into one

In my layout default like this

For css :

<link rel="shortcut icon" href="/content/assets/img/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/content/libs/materialize/css/materialize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="/content/assets/style/style.min.css?v=@currentVersion">
<link rel="stylesheet" href="/content/assets/style/style-responsive.min.css?v=@currentVersion">
<link rel="stylesheet" href="/content/assets/style/custom-form-materialize.css">
<link href="/Content/dist/social-share/sharetastic.css" rel="stylesheet" />
<link rel="stylesheet" href="/content/assets/style/happy.min.css?v=@currentVersion">

For js :

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script src="/Content/dist/social-share/sharetastic.min.js"></script>
    <script src="/Content/assets/script/jquery.twbsPagination.min.js"></script>
    <script src="/Content/libs/materialize/js/materialize.min.js?v=@currentVersion"></script>
    <script src="/Content/assets/script/select2.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>

    <script src="/Content/assets/script/rendercomponent.js"></script>
    <script type="text/javascript" src="/Content/assets/script/script.min.js?v=@currentVersion"></script>
    <script src="/Content/assets/script/share-content.js?v=@currentVersion"></script>
    <script src="/Content/assets/script/jcanvas.min.js" type="text/javascript"></script>
    <script src="/Content/assets/script/happy.min.js?v=@currentVersion" type="text/javascript"></script>

How can I combining many external Javascript scripts into one?

If combining them into one won't impact the website? JS and CSS websites are not problematic?

Answer 1

You create a single file with all the CSS. You create a single file containing the contents of all the JavaScript. You remove the links to all the css and JS from your pages and replace it with:

<script src="/js/combined.js"></script>
<link rel="stylesheet" href="/css/combined.css">

You should run your combined js and css through a minifier such as YUI Compressor, CSSNano, csso, UglifyJS, or Closure Compiler.

The process of concenating the files is usually as simple as opening all of them in your text editor and copying and pasting their contents into a single file one after the other.

Doing this will not normally change how your site works. There is not much difference between having separate files for everything vs one file from a functional point of view, but it can make a big difference for performance. There are some things that can complicate matters:

1. If the CSS or JavaScript are dynamic. That is they change for different users or are updated frequently. Copying a version of the JS into a static file would break that dynamic functionality.
2. You use different JS and CSS on different pages on your site. In that case you might create different combination files. You might also create a core set of CSS and JS that is used everywhere and supplement it with a second CSS and JS on some pages.
3. Your CSS and JS are for 3rd party functionality on your site. You may not have the legal rights to copy the JS and CSS of 3rd party code. If you do copy the code, it may stop working if their services change. I would not, for example, copy the JS that powers ads or analytics.
4. You use external hosting for common libraries such as jQuery. Because so many other sites use the same external hosting, those resources are likely to be cached by browsers. It could actually be slower to host them yourself.
5. Your CMS or its plugins add the CSS and JS automatically and give you no control over them.

When making changes like this, make sure you test them and are able to revert them. There is a chance something could go wrong or that the technique would not work on your site. If you don't have one already, I recommend creating a copy of your site on a development server and making the changes there first.

Another way to approach this problem is to install plugins on your server that handle this automatically for you. I'm not sure what is available for asp.net, but there is likely something. For Apache and Nginx, Google's pagespeed module automatically handles combining JS and CSS.