• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Startup Hero

The Official Blog Of Name Hero

Learn To Fly Above The Competition Get Started
  • HomeWelcome
  • CoursesVideo Training Center
  • About UsWhat is StartupHero?
  • BlogGet the latest
  • Start HereStartup 101
  • SpeakingPodcast & Media
  • ResourcesTools to help You
    • Reselling WordPress Hosting
    • Resell Hero
    • How To Start A Blog
  • NameHeroCloud Web Hosting

Why You Should Avoid Adding CSS In The Theme Customizer In WordPress

By Bhagwad Park on November 28, 2018 2

Why You Should Avoid Adding CSS In The Theme Customizer In WordPress

In October 2016, the guys working at WordPress decided to include a CSS customer in the theme customization options. Previously this functionality was available only to Jetpack users, and it was one of the reasons why I used to recommend Jetpack to everyone.

Before this, users needed to find a 3rd party plugin for their custom CSS code, or make changes directly to the “style.css” file of their theme. It seemed like an elegant solution. Or so I thought at the time. As I started getting interested in optimizing for page speed, I saw something peculiar. Something that the creators of this feature seemed to overlook, and which I will explain below in greater detail.

Adding CSS via the Theme Customizer

As of now, anyone can insert additional CSS via the theme customizer like this:

Additional CSS in Theme Settings

Once you click that, there’s a separate box into which we can add CSS. It comes with all kinds of useful features like:

  1. Syntax checking
  2. Live preview
  3. Explanation of errors
  4. Indentation
  5. Autocomplete

Custom CSS

This makes it trivial for anyone to add their own CSS. Great right? The democratization of technology! Unfortunately, the way it’s implemented in the backend is less than ideal.

Referencing the New CSS in HTML

Once you add the CSS, it’s referenced in the final code via a peculiar GET request like this:

Get Request with Custom CSS

 

Something like:

/?custom-css=xxxxxxx

In other words, it’s not stored as a regular CSS file. There’s no extension, and it’s not a static resource on our server. Rather, it’s stored in the database and is requested with each page load.

Adding a CDN to Speed Things Up

Like any good web owner, I’ve tried using a CDN for my static files like CSS and Javascript. That includes style.css, and (I assumed) any new CSS added with the theme customizer. For the example below, I’m using KeyCDN. I simply enter the pull zone into my CDN plugin like this:

Using a CDN

And when I’ve configured it correctly, all my static file URLs are rewritten to come from the CDN instead. Like this:

CDN Rewrites Static URLs

This seems great! Except that when I checked out the waterfall view of my WordPress site, I see that the GET request for the additional CSS is not rewritten. It’s still this:

Get Parameters Can't be Cached

This is a huge problem. Not only is it an additional database request, but it’s also not affected by whatever CDN you choose to use! Moreover, this request can’t be cached except perhaps deep in the backend database via Memcache or something. In any case, it’ll always be slower.

Since this feature doesn’t adhere to the basic rules of CSS loading, I recommend that everyone switch off using it.

So What’s the Alternative?

My experiments with page speed have led me to the conclusion that server response times are crucial. So while you can use a 3rd party plugin to store your additional CSS, I suggest that you just bite the bullet and append it directly to your style.css page. Yes, it’s more work. But you only have to do it once. And your CPU won’t have to spend extra cycles processing a plugin to generate the CSS file.

Then simply pass it through a minifier or whatever and have your CDN cache the entire site’s CSS in one fell swoop. This is probably the most efficient solution for custom CSS. In a way, I’ve been moving backward – from extra convenience via the 3rd party plugins, to a more “bare bones” kind of set up. And I’m finding the improvements in page speed really worth it!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Comments

  1. BW says

    June 19, 2019 at 4:42 pm

    Thanks for this article. It’s too bad because customizer is so convenient and I love the live preview and syntax checker. Maybe WP will figure it out sometime.

    Reply
  2. Vittorio Zamparella says

    August 10, 2020 at 2:32 am

    Having the css or any other file combined, minified and saved onto the filesystem is actually the job of a cache system; basically what you are had doing has been condensed and automated by a class of softwares of its own.
    Many valid and free css caches and optimization plugins in the public repository.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Connect With Us!

Superhero Resources

Fix Common Issues

  • How To Setup Free And Automatic SSL Certificates
  • How To Setup Cloudflare With Railgun
  • How To Fix Memory Exhausted Errors In WordPress
  • How To Edit PHP Version/Upload Limit/Add Extensions
  • How To Move/Migrate Your Business To Name Hero

Free Guides

  • How To Setup NameHero Hosting
  • How To Create A Web Hosting Business With WordPress
  • How To Start A WordPress Blog
  • How To Migrate WordPress To A VPS
  • How To Speed Test And Optimize Your WordPress Website
  • Magento 2.X Installation Guide
  • How To Clean Up A WordPress Hack

Training

Recent Posts

  • What Can You Do To Improve Mobile Load Times?
  • The Challenges Of Rate Limiting For Websites
  • When Hosting Location Doesn’t Matter (And When it Does)
  • Why There’s No Free Domain With All NameHero Plans
  • How To Block wp-login.php With Cloudflare
  • What NameHero’s “Unlimited” Storage Means
Subscribe in a reader
  • Web Hosting
  • WordPress Hosting
  • Reseller Hosting
  • VPS Hosting
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube
  • FTC Disclosure
  • Earnings Disclosure
  • Privacy Policy

Copyright © 2021 · Smart Passive Income Pro on Genesis Framework · WordPress · Log in