Can we combine CSS and JS file into one file?

Question

Actually I want to reduce google page speed warning. So I have combine all css external files into one css file and all java script external files into one file java script file. So right now I have two external files(two request), one is css and second one is javascript. Can we combine both file into one file OR two request consider as one request. Is there any produce both file as a one request please let me know.

 <link   rel="stylesheet" href="../css/eagle/main.min.css" type="text/css">
 <script defer  src="../js/eagle/init.min.js"></script>

I have seen one link https://www.keycdn.com/support/combine-external-javascript-and-css/, But I am not clear. Any suggestion is very helpfull for me.

I think that's it: Minified and unified all css, and minified and unified all JS. — Hanlet Escaño
– Hanlet Escaño, Commented Feb 3, 2017 at 6:25
You can write your code directly to HTML file. No additional requests at all. — Justinas
– Justinas, Commented Feb 3, 2017 at 6:27
@Hanlet. ok. Any other way to produce request for faster load external file — Varun Sharma
– Varun Sharma, Commented Feb 3, 2017 at 6:28
@Rajesh. I want to combine JAVASCRIPT and CSS file into one file. Not all css file into one file and all js file into one file. — Varun Sharma
– Varun Sharma, Commented Feb 3, 2017 at 6:31

stdob-- · Accepted Answer · 2017-02-03 06:31:45Z

3

You can:

var style = document.createElement('style');
style.innerHTML = cssString;
document.body.appendChild(style);

But I do not think that the two requests is a problem. Funny savings.

answered Feb 3, 2017 at 6:31

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Varun Sharma Over a year ago

Thanks for the answer, If you are loading your external css then it will not work in all browser basically mobile browsers. I have done this thing. But my external css is not working in all browsers. Like Android Webview and many more.

Savan S · Accepted Answer · 2017-02-03 06:31:49Z

You can create one html file(suppose: combined.html) and put all html and css in it using script and style page. Load combined.html file in your application. It is depended on which technology you are using to load html into another html. In jQuery below code will help you.

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
        $("#includedContent").load("combined.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Pavel Říha · Accepted Answer · 2018-06-23 19:18:10Z

If you're running serverside, it's doable simply by some sort of includes/partials (e.g. inlcude($file) function in PHP). However, be aware that you're giving up the benefits of caching external files.

Example:

index.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <?php include("css_js.inc");?>
    </head>
    <body></body>
</html>

css_js.inc

<style>
*, ::before, ::after {
    box-sizing:border-box;
    position:relative;
    }
</style>

<script>
window.ga = function () {ga.q.push(arguments)};
ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Community · Accepted Answer · 2017-05-23 12:33:32Z

-3

No, you can't combine js and css into one file. Maybe this can help to increase the speed of the site.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 3, 2017 at 7:03

Goran Jorgić

51 bronze badge

2 Comments

AlainIb Over a year ago

why downote he is write! cannot merge a css and js files in one ( execpt in html but that is crappy )

Andrew Over a year ago

Why was my comment deleted

Collectives™ on Stack Overflow

Can we combine CSS and JS file into one file?

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Related