Should I store critical css in the database or in my theme's filesystem?

Question

Should I store critical css in the database or in my theme's filesystem?

James Hamann

2019年2月9日 10:13

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?

Topic filesystem server-load cache css database Wordpress

Category Web

phatskat · Accepted Answer · 2019年2月9日 07:58

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

Should I store critical css in the database or in my theme's filesystem?

Preface

So, what to do?

Setting and Invalidating Cached Data

About