I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server.
The thought process is as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">@import url("../CSS/main.css.php") screen;</style>
<script type="text/javascript" src="../JS/main.js.php"></script>
</head>
<body>
</body>
</html>
And on the side of the server :
CSS/ folder :
- main.css.php
- main.css
- some_css1.css
- some_css2.css
JS/ folder :
- main.js.php
- main.js
- some_js1.js
- some_js2.js
main.css.php :
<?php
require('main.css');
require('some_css1.css');
require('some_css2.css');
?>
main.js.php :
<?php
require('main.js');
require('some_js1.js');
require('some_js2.js');
?>
Would this approach towards file importing enhance the page download time ? Will it be time-consuming for the server to request the files ? Is the improvement in download speed (if any) outweighed by the additional processing required by the server ? Are there any compelling reasons for or against implementing the method in this manner?
Appreciate any insights. :)