I'm building a website using PHP templates.
I have a lot of outside CSS libs and stylesheets and they are linked to the main HTML document with <link rel="stylesheet"> (the way they are supposed to be).
I do the same with external scripts (<script src="...">).
Is there a benefit in concatenating all the resources above into one block of text and inserting it directly into the main document with PHP?
Example:
<html>
<head>
<style>
<?php echo $style; // Huge block of CSS (maybe 300KB) ?>
</style>
</head>
<body>
....
<script>
<?php echo $scripts; // Also pretty big maybe 500KB ?>
</script>
</body>
</html>
I'm aware that this will remove the benefits of caching those resources by the client. I think however, that it will give me a benefit with initial loading times since less connections are required to fetch the resources.
Will I be facing any performance bottlenecks from the DOM?
Any thoughts?
I know that these kind of processes can be monitored using a number of different browser attachments including the native web monitor in most browsers.
I cannot tell you off the top of my head, but I would assume that may actually increase the load time since PHP is processed prior to the HTML.
Check out: http://getfirebug.com/
Using that tool you can check the connection times and adjust accordingly.