External Versus Embedded Scripts/css

[clonetrooper9494]

I have FireBug, an extension for FireFox, and it has a tab that lets you see any requests that the page makes. I watched it load my site a few times, and I noticed how it took time to load the entire page, and then it has to load the CSS, then the JavaScript, and finally all the images. Wouldn't it just be faster to embed the JavaScript and CSS, maybe even the images too? If some people complain it makes it hard to organize the styles and scripts, you could easily have PHP fetch the contents of the file for you. For images, you can base64 encode the image like this "data:image/png;base64,j581/+uvv/7hhx/8tmzZA[...]" and put it in the img tag.Are there any problems with embedding scripts and css?(I guess I can't really see images, but scripts and css...)

[justsomeguy]

It's only going to be faster on the first request. If you refresh your site several times and watch Firebug, you should see several resources with a 304 response from the server. That means the browser is loading that from its cache and isn't loading from the server at all. If your CSS and Javascript files aren't being cached then that's a problem you might want to fix. You can also enable output compression on the server. For the application I'm working on now, logging into the admin side on my development version requires a total of about 2.2MB of resources, mostly Javascript. On the live server, with the Javascript minified first, and then Apache doing output compression, logging into the admin side only requires 347KB, down from 2.2MB of uncompressed code. So, that's a savings of about 85%, due mostly to minifying and then compressing the Javascript.