[Support request] GP Customizer, GP Elements or Simple CSS: Best option for better performance?

[Sascha]

Hello,

sometimes I only need CSS for specific pages and in the past I have always used “Simple CSS” plugin for that.

Not I have realized, that using “Simple CSS” sometimes creates additional load assets.

After moving the CSS to the Customizer (“Generating your dynamic CSS in an external file” is enabled), I noticed a faster load and better PageSpeed Scores.

But most of the custom CSS is not required to load on all pages, I wonder if loading CSS via Hook-Element would have the same effect as using Simple CSS? Or should I even use a child-theme as the best option?

For the best performance & scores, I’d like to learn about the best practice for applying custom CSS to single or multiple, but not all pages:

Simple CSS?
Customizer CSS?
Element-Hook?
Child Theme?

Can you please guide me to the right direction?

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

the big question here is how much CSS do you have that is only required for those specific pages?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sascha]

Hi David, thank you for your reply.

You mean, the decision for using any of the options depends on the amount of CSS-code?

I would assume it’s never more than 10-50 lines of code.

Thanks
Sascha

[David]

Thats correct.
If you’re worried about loading an additional 10 – 50 lines on pages that don’t require it, then don’t be. It really won’t make a difference.

I would only be concerned if there were 100’s of lines of CSS. And then i would opt for a Child Theme stylesheet so the browser can cache it.

If there is 100’s of lines of CSS for just a single page or a few pages, then i would use a child theme with a separate stylesheet that was enqueued just on those pages. Which would require a little PHP.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sascha]

Thanks.

So, I still wonder about the best options for this small amount of 10-50 lines of CSS:

Simple CSS?
Customizer CSS?
Element-Hook?

Child Theme seems overkill …

Thank you in advance and kind regards,
Sascha

[Leo]

I would say the Additional CSS field in the customizer (WP core feature) would suffice for 10-50 lines of CSS.

If you want to dig deeper, simply add the CSS using each method then run the site through some speed tests for comparison 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts