0

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?

Improve this question
2

3 Answers 3

Reset to default
3

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

This JS will create your css-link elements dynamically.

<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>

& for graceful degradation, we also include the following inside of the head element

<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);
Improve this answer
2
  • This seems like a great solution I think. It keeps the CSS in the head so it's valid, but keeps it from blocking rendering since it's injected by JS, and the fallback is great too.
    – Johan Dahl
    Commented Jan 25, 2019 at 10:40
  • Thanks, my first instinct was to link you to the same resource as the other two answers. Manipulating the DOM after JS is loaded can also be used to do things like hide the action attribute on forms from some bots/scrapers to avoid spam.
    – admcfajn
    Commented Jan 25, 2019 at 16:10
2

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.com/a/186066/121955

Improve this answer
0

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.

Improve this answer
1
  • 1
    I already have one combined, minified and gzipped CSS-file for the sites own CSS. However, in this case it's a third party CSS file hosted on another domain, which is not used right away but is a part of a chat functionality which is loaded after a while. Lighthouse and other testing tools suggest loading this in the footer instead since it's blocking rendering and it's not even used right away, so that makes sense. I know that strictly speaking, styles belong in the header, but if Google recommends otherwise, I reckon it must be okay.
    – Johan Dahl
    Commented Jan 25, 2019 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.