CODEWITHSUNDEEP
javascriptcsshttprequest
Varun Sharma
Varun Sharma

Reputation: 4842

Can we combine CSS and JS file into one file?

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.

Upvotes: 4

Views: 5539

Answers (4)

Pavel Ř&#237;ha
Pavel Ř&#237;ha

Reputation: 51

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>

Upvotes: 0

Goran Jorgić
Goran Jorgić

Reputation: 5

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

Upvotes: -3

Savan S
Savan S

Reputation: 417

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>

Upvotes: 1

stdob--
stdob--

Reputation: 29172

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.

Upvotes: 3

Related Questions