Optimizing CSS // bypassing the theme customizer

Travelify
1

  1. After adding a custom background image in the child theme’s style.css (I did this because I want the background to be consistent among the different pages of the site), I noticed that it is one of the last things that get loaded, making the site appear to be loading slowly, even on fast connections, so I was wondering if there might be a way to change the load “priorities”, so that the customizations I made in the CSS are among the first to load?

  2. Another thing to do with CSS customizations, is it possible to bypass the theme customizer (WP Admin > Appearance > Customise), copy the CSS code with the changes done through it and append them to the child theme (this one’s optional as I could always redo everything with my own code)? I feel that the customiser makes the site loading times longer.

2
  1. You can add your custom background CSS code to Appearance >> Theme Options >> Other >> Custom CSS.
    Inline styles are loaded quicker than ones in the stylesheets. However, it won’t help you much because your entire website is 577KB in size but background image is 345.7KB in size which means that it is 60% of your entire website size.

One thing that you can do is to at least implement browser and object cache using W3 Total Cache or other plugin. That way your image will be at least cached for returning visitors and not reloaded each time.

Personally, I would try to find a pattern style image and use it with infinite repeats. That way image will be 8-100 times smaller depending on pattern you will be using.

  1. WordPress Theme Customizer (Live Preview) itself is slow because there is a huge JavaScript loading behind the scene but once the styles are loaded for visitors there are no load on server itself. For even better results you can again use W3 Total Cache but it won’t speed up Customizer itself but it will cache its output, so there will be even less load on your end users.
3
You can add your custom background CSS code to Appearance >> Theme Options >> Other >> Custom CSS.

Will that be saved if I ever update the theme? I was thinking rather of keeping the modifications in the child theme and just make the theme load the child theme’s CSS earlier.

Personally, I would try to find a pattern style image and use it with infinite repeats.

Unfortunately that background image needs to stay in order to get the site to look how I wanted. I tried as much to compress the image further in jpg, without degrading the quality too much.

One thing that you can do is to at least implement browser and object cache using W3 Total Cache or other plugin

Thanks, will try out the plugin you suggested :slight_smile:

WordPress Theme Customizer (Live Preview) itself is slow because there is a huge JavaScript loading behind the scene

I wasn’t talking about the live preview, but okay, I get the picture now.

4

  1. This Custom CSS field is not affected with updates, so it will be still there after update.

  2. I man live preview in WordPress Theme Customizer where you can make color adjustments. It is painfully slow and it might seem that it affects overall website performance but it doesn’t.