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.

nobody
  • 19,814
  • 17
  • 56
  • 77
Varun Sharma
  • 4,632
  • 13
  • 49
  • 103
  • I think that's it: Minified and unified all css, and minified and unified all JS. – Hanlet Escaño Feb 03 '17 at 06:25
  • minified all css and js. – Varun Sharma Feb 03 '17 at 06:26
  • You can write your code directly to HTML file. No additional requests at all. – Justinas Feb 03 '17 at 06:27
  • @Hanlet. ok. Any other way to produce request for faster load external file – Varun Sharma Feb 03 '17 at 06: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 Feb 03 '17 at 06:31
  • In my understanding, no. Even if you do it, what will be its extension. `.js` or `.css` or something else? Remember, every language has its own processing. Merging 2 different type of file will give error – Rajesh Feb 03 '17 at 06:34
  • HTTP2 supports multiplexing if you can use it: https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/ – Brad Allred Feb 03 '17 at 07:15
  • Also you can possibly benefit from ` – Brad Allred Feb 03 '17 at 07:17
  • @Brad Allred. I want to combine both css and js file into one file. Because defer or async is use full for multiple external file. – Varun Sharma Feb 03 '17 at 07:30
  • you can merge all your css files in one minyfied css (and same for js) using tools like http://gulpjs.com/ the minyfied and merged files are used only in production mode, files are not understandable and all variables and functions names will be renamed, you keep your single css&js files of course for edit/dev. – AlainIb Feb 03 '17 at 08:09
  • @Aliainlb. Thanks you . But I want to combine combine one css and one js into single file. Merge two request into one. – Varun Sharma Feb 03 '17 at 09:26

4 Answers4

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.

stdob--
  • 28,222
  • 5
  • 58
  • 73
  • 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. – Varun Sharma Feb 03 '17 at 07: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>
Savan S
  • 407
  • 4
  • 19
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>
Pavel Říha
  • 51
  • 1
  • 2
-3

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

Community
  • 1
  • 1
Goran Jorgić
  • 5
  • 1