To reduce http requests, is it okay to inline css and js using php ? Eg:
<style>
<?php echo require_once("css/style.css"); ?>
</style>
<script>
<?php echo require_once("js/myjs.js"); ?>
</script>
4 Answers
I'm going to answer the second half of your question first, and then apply the first half.
"is it okay to inline css and js using php" - yes. There are certain cases where it's a good idea to add your CSS and JS into an internal stylesheet inside your document.
Your method however could do with a lot of improvement. A quick way to do this would be to use file_get_contents like this:
echo '<style type="text/css">'.file_get_contents('/path-to-your/style.css').'</style>';
The only cases where I would suggest grabbing file contents and adding them into the document directly are cases that involve writing plugins for CMS systems such as Wordpress or Joomla etc.
Sometimes, your plugin may only need to utilise 5 - 10 lines of CSS and/or JS, and it would be bad form to force your user to add another stylesheet to their http requests for so little code. In these cases, I would suggest loading internal stylesheets/scripts.
BUT it's not a good idea to do this to "To reduce http requests" as your first half of the question has asked. If you truly want to reduce your http requests then you should seriously consider merging your stylesheets and script files. It's better to have a few large files than a lot of tiny ones.
4 Comments
Srijay
Thank you, had not thought of that.That was very helpful.
Tomasz
The best way would be to set a cookie to a first-time visitor and load file_get_contents of your CSS file for him; otherwise, load the regular link to stylesheet. That way you cache CSS for non-first-time visitors and avoid a HTTP request for first-time visitors.
Frits
@Tom surely that would defeat the purpose? If I inserted all of my CSS/JS into either one file, or as inline the first time, and the load them separately on the next visit, the browser would pick up the second iteration of files as new files, and therefore load them again from scratch? Or am I misunderstanding what you are explaining?
Tomasz
See my answer below.
This looks like a really bad practice to me. Plus, I don't see how you will have any performance gain here, more like the contrary.
You should more focus on WHEN do you really need to load your js and css. Minifying it should help too.
Comments
Printing resources like JS or CSS into file to load them faster is definitely bad practice to me. Modern browsers eventually cache them while user hit your first page.
According to me you can try to minify your resources files to load them faster and improve caching if you want but there is no need of it because all modern browsers handle caching pretty good now.
2 Comments
InanisAtheos
Google disagrees with this wholeheartedly. Look up critical CSS path for instance. Critical CSS should be inlined, whilst deferring all of the other styles.
Parth Kheni
I don't think the topic is about inline CSS here. Anybody should always use inline CSS if it is critical for that component. But the main question was whether to include the CSS and JS file using PHP or not. Which is wrong according to me. I would prefer minified and cached resource file than printing them via PHP.
Here is what I do to load CSS as fast as possible and take advantage of browser cache at the same time:
I check or set a cookie for first-time visitors; if if it's a first-time visitor I load CSS inline + prefetch the actual link (note that I use prefetch as it is widely supported by modern browsers as opposed to preload). That way this visitor will get the prefetched CSS from cache on the next visit or the next page/s.
if(isset($_COOKIE['v'])) $CSS='<link href="default.css" rel="stylesheet">';
else {
$CSS='<style>'.file_get_contents('default.css').'</style><link rel="prefetch" href="default.css">';setcookie('v','1',time()+31556926,'/','example.com',1,1);
}
echothough) ... but that's not going to be especially beneficial in the long run. The browser would cache the.cssor.jsfile on the first page the visitor hits then use that for every subsequent page - what you're doing here would mean that all your JS/CSS would be need to be loaded on every page; i.e. 1 fewer http request (per resource) for your entire site at the cost of increasing the file size on every page.