0

I have a method for detecting a post's critical css when the page is requested and in-lining it to optimize page speed. I would like to cache this css to avoid having to compile it for every page request. I am using file_get_contents on multiple css files to concatenate the css and I've been told this means a lot of read operations in the file system per request and it isn't optimal for server load.

I am trying to decide whether to cache this critical css in the file system or in the database, maybe even as it's own post type. I know I am going to use a hash of the css filenames used to generate the cache file as the name of the cache file. On page request I would use this hash to check if their is a cached file and either inline or en-queue that cached file.

I am in-lining this cached file when the browser would have an old version of it or not have it already cached, and this is where I need to decide whether to file_get_contents the puppy or get it from the database. Like I said before, I was told to minimize the amount of read operations done on the server and I can reduce this by storing the css to inline in the database instead.

Would getting a post and its content from the database be better than calling file_get_contents()? If the CSS is rather large, maybe it would be, and I know that MySQL has its own caching built in which is probably better than any caching system I could write. However reading one file on disk doesn't seem SO bad and it wouldn't happen on every request for every page, just a few times per user session probably.

This is kind of a long winded post. Has anyone else come up with a solution to critical CSS like this besides using a plugin?

1

Preface

It would be best to see what kind of caching options are available through your host. If you can use an object cache, CDN, or anything like that, you could decrease the load on your server.

If your database and webserver are the same host, then storing this in the database won't necessarily mean there are fewer reads to the disk. A database is just a way to map data from the filesystem to something reasonable to query, and to some degree requires reading/writing to the filesystem (although it does do some amount of caching as well).

So, what to do?

I would suggest some means of Object Cache. Install something like Redis - Redis provides several means of persistence, so don't let the "in-memory data structure" part fool you.

Once you have an object cache of some kind set up with WordPress (there are plugins for many popular options, including Redis), you can interface with the cache using WordPress's own internal methods.

Setting and Invalidating Cached Data

function get_cached_css( $post_id ) {
    $css_hash = generate_your_hash();
    $css      = wp_cache_get( $css_hash, 'css' );

    if ( ! $css ) {
        $css = generate_css();

        // Purge any previous CSS.
        $old_css = get_post_meta( $post_id, 'custom-css-key', true );

        if ( $old_css ) {
            wp_cache_delete( $old_css, 'css' );
        }

        wp_cache_set( $css_hash, $css, 'css' );
        update_post_meta( $post_id, 'custom-css-key', $css_hash );
    }

    return $css;
}

Fill in the methods to fit what you have for generating the CSS's hash and file.

Then, in your template:

$css = get_cached_css( get_the_ID() );
// etc...
  • Thanks for the response! My server uses caching built in that I can access with Transient API so I am going to do that. Thanks for the tip! – James Hamann Feb 10 at 7:25
  • 1
    Hope it helps! And if you get the itch, trying other caching methods may prove more beneficial than others. – phatskat Feb 10 at 8:36

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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