4

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.

11
  • I think that's it: Minified and unified all css, and minified and unified all JS. Feb 3, 2017 at 6:25
  • minified all css and js. Feb 3, 2017 at 6:26
  • You can write your code directly to HTML file. No additional requests at all.
    – Justinas
    Feb 3, 2017 at 6:27
  • @Hanlet. ok. Any other way to produce request for faster load external file 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. Feb 3, 2017 at 6:31

4 Answers 4

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.

1
  • 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. Feb 3, 2017 at 7:17
1

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>
0

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>
1
-3

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

2
  • 1
    why downote he is write! cannot merge a css and js files in one ( execpt in html but that is crappy )
    – AlainIb
    Feb 3, 2017 at 8:08
  • Why was my comment deleted
    – Andrew
    May 30, 2020 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.