0

I am generating critical CSS for every page and category. At the moment I am inserting the stylesheet through functions.php like this simply using echo.

function criticalCSS_wp_head() {
  if (is_front_page() ){
    echo '<style>';
    include get_stylesheet_directory() . '/css/critical/ccss-index.min.css';
    echo '</style>';    
  }
  elseif (is_category('orange') ){
    echo '<style>';
    include get_stylesheet_directory() . '/css/critical/ccss-orange.min.css';
    echo '</style>';    
  }
  elseif (is_page('hello-world') ){
    echo '<style>';
    include get_stylesheet_directory() . '/css/critical/ccss-hello-world.min.css';
    echo '</style>';    
  }
  elseif (is_single() ){
    echo '<style>';
    include get_stylesheet_directory() . '/css/critical/ccss-single.min.css';
    echo '</style>';    
  }
}
add_action( 'wp_head', 'criticalCSS_wp_head' );
  1. What would be the best way to include these stylesheets with regards to best practise coding style and pure relentless speed, meaning to avoid PHP calls, database calls and so on.
  2. Is it better to directly hard-code the critical CSS in the page template perhaps like written in this post (#10) linked from the official WordPress Optimization documentation?

edit Since this question was answered I forgot to mention that critical CSS needs to be inline in the DOM and not being linked to as a file to avoid render blocking. So I am still looking for a way to use the critical CSS with wp_enqueue_scripts. Perhaps store the file content in a variable and output that when wp_enqueue_scripts asks for it?

2 Answers 2

0

You can do it like this, put it in your functions.php :

This is the correct way of doing it "the WordPress way".

<?php
    // Check if function exisits
    if (!function_exists('rg_templateScriptSetup')) {
         // if not, create one
         function rg_templateScriptSetup() {
             // Register styles in WordPress
             wp_register_style('prefix-basic-css', get_template_directory_uri(). '/css/basic-style.css');

             // Register styles in WordPress
             wp_register_style('first-css', get_template_directory_uri(). '/css/first-style.css');

             // Register styles in WordPress
             wp_register_style('second-css', get_template_directory_uri(). '/css/second-style.css');

        if (is_page('your_page_name') {
            // enqueue your first style
            wp_enqueue_style('first-css');
        } else if(is_page('your_other_page_name')) {
            // enqueue your second style
            wp_enqueue_style('second-css');
        } etc...


    } // End of Stylesheet logic / setup

    add_action('wp_enqueue_scripts', 'rg_templateScriptSetup');

?>

Why?

Because WordPress gives you all the tools, necessary to achieve that goal.

What is exactly happening here:

  1. first, we check if the function already exists
  2. if it doesn't, we create our function
  3. then we "register our styles", basically telling WordPress: here,grab these CSS', so.. WordPress has our stylesheets in it's pocket, but it doesn't use them yet
  4. then we use the native WordPress function is_page in combination with an if statement (if (is_page('your-page-name'))
  5. in case that if statement returns bool 'true' we activate the css according to our condition (in your case, the page name).

I hope that helps.

In case that answer has helped you, please mark it as correct, and not just grab the code, thanks.

Personal question: what do you mean by critical? Lots of !important?

4
  • Regardless of your answer, please rest assured I have so far almost always marked answers as accepted. Regarding critical CSS have a look here and here or here.
    – lowtechsun
    Commented Apr 11, 2017 at 14:51
  • Well, then - we are all fine. In my opinion - that "critical CSS topic" is BS - the google speed page test fails it's own test.. try it.. and pop in it's own URL - it will fail - gave me a good laugh a year ago.. Commented Apr 11, 2017 at 14:52
  • Thank you for your answer and detailed explanation why this is the correct way, in particular to first register and then enqueue the stylesheets.
    – lowtechsun
    Commented Apr 13, 2017 at 8:56
  • Follow up. Critical CSS needs to be placed inline into the head to work. Besides using echo is there a way to store the CSS in a string and still enqueue it using wp_enqueue_style? Looking for a better method than done here iamsteve.me/blog/entry/add-critical-css-with-wp-enqueue-scripts Thank you for any help or insights.
    – lowtechsun
    Commented Sep 25, 2017 at 11:12
1

The best-practice and generally accepted right way to add CSS or JS is to enqueue them. That way, if you have say a theme + 2 plugins that all want to enqueue jQuery, you only end up with 1 copy loaded - not 3.

In functions.php:

add_action('wp_enqueue_scripts', 'my_enqueues');
function my_enqueues() {
    if(is_front_page()) {
        wp_enqueue_style('front-page', get_stylesheet_directory() . '/css/critical/ccss-index.min.css', array(), '', 'screen');
    } elseif(is_category('orange')) {
        wp_enqueue_style('orange', get_stylesheet_directory() . '/css/critical/ccss-orange.min.css', array(), '', 'screen');
    }
}

If your per-page styles are short, you can actually enqueue inline styles instead so that the web browser isn't requesting a separate resource.

add_action('wp_enqueue_scripts', 'my_inline_enqueues');
function my_inline_enqueues() {
    wp_add_inline_style('front-page',
        '.myfrontpageclass { font-size:6em; }'
    );
}

Final suggestion - I don't know the content of your stylesheets, but I'd suggest that it may be both simpler and faster to load these pages if you just include all of the CSS in the theme's style.css file together. Use body_class to target whatever you need to and keep it all in one minified file.

3
  • Thank you for your detailed reply, explanation and suggestions, most appreciated. I decided to go with this reply because it also mentions registering the stylesheets before enqueuing them. The content of these stylesheets is this. Thank you.
    – lowtechsun
    Commented Apr 13, 2017 at 8:54
  • I should have mentioned that critical CSS needs to be inline in the HTML to not block rendering while it is being downloaded. Because of this I am now looking for a way to still use wp_enqueue_scripts but also have the content of the stylesheet shown inline in the HTML instead of a link to it. You think this is somehow doable without the use of echo? Perhaps storing the stylesheet contents in a variable and output that somehow? Any ideas welcome.
    – lowtechsun
    Commented Sep 30, 2017 at 15:00
  • 1
    You can use wp_add_inline_style() - codex.wordpress.org/Function_Reference/wp_add_inline_style
    – WebElaine
    Commented Oct 2, 2017 at 14:11

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.