Require css/js files into PHP to reduce HTTP requests number

Question

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 :)

Yes, it will reduce request count to server. But this wont affect bandwidth size or server's load. You should go this way if your server get many (like millions) hit. Otherwise this is not SO necessary. — Samet DEDE
– Samet DEDE, Commented Jul 29, 2012 at 9:56

Tim Fountain · Accepted Answer · 2012-07-29 09:57:42Z

2

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.

answered Jul 29, 2012 at 9:57

Tim Fountain

33.2k5 gold badges44 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabrício Matté Over a year ago

I'd just suggest uglifying all CSS files into one .css file along with all the non-CDN JS in a single .js. But good explanation on PHP and headers. I wouldn't say that it "completely removes" the HTTP requests as the client still has to send the request and receive the 302 response.

Virus721 Over a year ago

Thanks for your quick answers. I will have a look to this.

jwchang · Accepted Answer · 2012-07-29 09:58:53Z

0

Making fewer HTTP requests helps a lot.

Some browsers even limit amount of HTTP request can make simultaneously.

Also you can optimize more by compressing css and js files.

CSS: CSS Compressor

JS: Closure Compiler YUI Compressor

answered Jul 29, 2012 at 9:58

jwchang

10.9k15 gold badges62 silver badges89 bronze badges

Collectives™ on Stack Overflow

Require css/js files into PHP to reduce HTTP requests number

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related