I’ve been thinking about a way to reduce the number of HTTP requests done whn loading a page by reducing the number of downloaded files, but still keeping separate files of the server.
The idea is to do :
<!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 server side :
CSS/ foler :
- 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 way of importing files improve the page download time ? Would it take long for the server to require the files ? Is the gain in download time (if any) greater than the loss of time cause by the extra calculations done by the server ? Any reasons why i should or should not do things that way ?
Thanks in advance 🙂
Any gains you might get by reducing HTTP requests get easily cancelled out by the fact that PHP scripts do not send cache-friendly headers (last modified etc.) by default, so the user will end up downloading these files for every page they view on your site. You could modify the PHP scripts to handle the headers as well but there are really better ways to do this.
I’d instead look at having a one-off job that merges the files on deployment. Also look at gzipping the files (if you are not already), and sending expires headers for the static files which completely removes the HTTP requests on subsequent page requests.