在PHP中存储所有JS / CSS？

Question

Background: I'm working on a single page web app that loads everything through AJAX and so started learning php a few days ago. I immediately thought of putting everything (html, css, javascript) in php files so that there is only one html file and one sprite request. For instance, external javascript could be stored in:

main.js.php (adding the .js for organizational purposes only) which would look like:

<script>
 ...
</script>

or

<style>
 ...
</style>

Question: Would storing everything in php be a bad idea? I have OCD and like to have related functions in separate files (and actually, folders too), so let's just say my project uses 100+ includes. These only get loaded exactly once, when the user visits (AJAX site). I want to reduce the number of Http Requests to just 1 html and 1 sprite (my app uses a custom font for images actually). My app will also be ran on mobile devices (using a different design, using far fewer includes but a similar method).

Research: Here's what I know:

• You can have Apache handle js/css as php, but is not something I'm interested in (dangerous) - link
• This site gave me the idea, although I don't quite understand it - 3 Ways to Compress CSS
• Caching with something like APC (not sure how it works, but out of the scope of this question) would improve php speeds (?)

Answer 1

some points to consider:

1. code - text ratio:

your content pages are read by google. when google is ranking you pages, one of the parameter is the ratio of code versus the textual content. if you put your css/js code together with the content, you lower the ratio. (btw, one of the arguments for using divs instead of tables is that tables normally will take more html code and lower the ratio).

EDIT: this is a theory and not really known fact. it's important that the html code will be syntactically correct, so it will be easier to parse by search engine parsers. some say that google ignores the content that comes after the first 100kb, so it's also something to consider.

2. nginX

i have nginx installed with apache as a reversed proxy to handle php.

nginx is an http server, that knows how to handle static pages. apache's design is thread per client, while nginx uses the reactor pattern, meaning - nginx can handle much more traffic than apache as a web server (about 50 times the number of requests).

the drawback is that nginx doesn't handle the php requests, and for that the apache is installed too - nginx will send all the php calls to the apache, so it will handle them and return the response back to nginx, and back to the client.

if in that setup (which is quite common) you will put css/js files under javascript, you will lose the advantage of the nginx, which instead of handling the static js/css files on its own, it will send them to the apache as it'll address them as php pages.

3. cache

caching files is one of the most common mechanisms to improve your website performance, while reducing traffic. if you mix static content with dynamic content, you will lose the advantage you get from caching static files.

when working in web environment, it's best (as a habbit) to keep as much static content as you can separated from dynamic content. this will give you the best results when caching static data.

of course, there are no rules for what should and what shouldn't. i have many dynamic js contents, but the main functions are normally extracted to static files.

4. CSS sprites

css sprites (as @Muu mentioned) are a great improvement to performance and should definitely be adopted.

another recommendation more specific to your case - if you want your content indexed properly - since you mentioned that most data will be loaded using ajax, i'd recommend to have it present also without ajax. for example: www.domain.com/ will have a link to #contact, that will show the form (loaded using ajax). you should also have www.domain.com/contact for indexing. also make sure that if a user enters www.domain.com/#contact - he will be redirected to the contact page (or content will be loaded dynamically).

use browsers' web dev tools to see what requests are being made and see where you can lower the number of requests, and also pay attention to file sizes, see which files are cached and which are requested by the server. define cache attributes in you server config and htaccess.

hope that helps ;)

PS: another tip - if you get water spilled all over your keyboard - don't try to dry it with a hair dryer - it could melt down your keys...