I'm loading some third party CSS with the help of wp_enqueue_style. I would like this CSS to be loaded in the footer, so it does not block rendering of the page. This would be fine, since this CSS is related to some chat functionality which is loaded on the page right away anyway. For JS, there is an option for adding right before the end of the body tag, instead of at the top of the page, but no such thing seem to exist for CSS. So, I'm wondering if there is some smart solution for this?
-- Edit
I know that strictly speaking, style and link tags are not allowed anywhere but in the head, but I think it's a debatable question. Browsers do not complain about this and why would Google recommend this practice if it was so bad?
I'm loading some third party CSS with the help of wp_enqueue_style. I would like this CSS to be loaded in the footer, so it does not block rendering of the page. This would be fine, since this CSS is related to some chat functionality which is loaded on the page right away anyway. For JS, there is an option for adding right before the end of the body tag, instead of at the top of the page, but no such thing seem to exist for CSS. So, I'm wondering if there is some smart solution for this?
-- Edit
I know that strictly speaking, style and link tags are not allowed anywhere but in the head, but I think it's a debatable question. Browsers do not complain about this and why would Google recommend this practice if it was so bad?
Yes, technically you can. But you shouldn't load css in the footer, css links outside of the <head> are considered invalid.
A better technique would be to add the css-links to the dom with javaScript. You may even want to split out the css so that critical portions are loaded inline (so you avoid a FOUC)
Here's a technique as suggested by GiftOfSpeed
<script type="text/javascript">
/* First CSS File */
var wpse326013 = document.createElement('link');
wpse326013.rel = 'stylesheet';
wpse326013.href = '../css/yourcssfile.css';
wpse326013.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(wpse326013, godefer);
/* Second CSS File */
var wpse326013_2 = document.createElement('link');
wpse326013_2.rel = 'stylesheet';
wpse326013_2.href = '../css/yourcssfile2.css';
wpse326013_2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(wpse326013_2, godefer2);
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" />
<link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" />
</noscript>
You could also wrap the execution of the javaScript in a timeout, the following example would delay execution by 2 seconds.
setTimeout(function(){
var wpse326013 = document.createElement('link');
wpse326013.rel = 'stylesheet';
wpse326013.href = '../css/yourcssfile.css';
wpse326013.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(wpse326013, godefer);
}, 2000);
Try:
function 326013_add_footer_styles() {
wp_enqueue_style( 'your-style-id', get_template_directory_uri() . '/stylesheets/somestyle.css' );
};
add_action( 'get_footer', '326013_add_footer_styles' );
From this answer: https://wordpress.stackexchange/a/186066/121955
Modern web browsers don't seem to have a problem with that. You could do it that way and use inline CSS for any critical sections of the webpage.
However, that does not mean that you should put the CSS in the body of the document. It was designed to be included only in the header. That is correct Html syntax. I hate to watch websites elements rearrange themselves because the css was inserted in the footer.
I suggest that you instead run your CSS through a minimizer and/or add it to a CDN. You can also add some gzip compression via the .htaccess file, if applicable. Lastly, you can combine all of the site's css into one big file to speed up load time.