[Support request] Lots of resources loading?

[wekhter]

I was looking through the source code of my test site and I realized something… there are a lot of CSS files loaded for GeneratePress and the GP Premium plugin!

In the header we have:

<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-grid-css'  href='/wp-content/themes/generatepress/css/unsemantic-grid.min.css?ver=1.3.39' type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-css'  href='/wp-content/themes/generatepress/style.css?ver=1.3.39' type='text/css' media='all' />
<style id='generate-style-inline-css' type='text/css'>/* Customizer styles */</style>
<link rel='stylesheet' id='generate-mobile-style-css'  href='/wp-content/themes/generatepress/css/mobile.min.css?ver=1.3.39' type='text/css' media='all' />
<link rel='stylesheet' id='generate-child-css'  href='/wp-content/themes/generate-child/style.css?ver=1472085192' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css'  href='/wp-content/themes/generatepress/css/font-awesome.min.css?ver=4.6.3' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='generate-ie-css'  href='/wp-content/themes/generatepress/css/ie.min.css?ver=1.3.39' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='blog-styles-css'  href='/wp-content/plugins/gp-premium/blog/functions/css/style-min.css?ver=1.2.89' type='text/css' media='all' />
<link rel='stylesheet' id='generate-secondary-nav-css'  href='/wp-content/plugins/gp-premium/secondary-nav/functions/css/style.min.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='generate-secondary-nav-mobile-css'  href='/wp-content/plugins/gp-premium/secondary-nav/functions/css/mobile.min.css?ver=1.2.89' type='text/css' media='all' />
<link rel='stylesheet' id='generate-mobile-header-css'  href='/wp-content/plugins/gp-premium/menu-plus/functions/css/mobile-header.min.css?ver=1.2.89' type='text/css' media='all' />

I mean, I know why the Google fonts, FontAwesome and IE stylesheet are separate, but why is the mobile CSS in a separate file from the main CSS? (same point applies to the secondary nav mobile file)

Also, I can understand why would be different stylesheets for each separate GP plugin if I had had them installed individually… but since I have GP premium, shouldn’t the stylesheets for active modules just be combined into a single stylesheet?

[Tom]

Hi there,

Combining them is an option, but they’re only loaded if certain options are set like the Mobile Header for example.

If they were all combined and you didn’t have the mobile header activated, the CSS for it would still load.

The best solution here is to use a plugin like this: https://en-ca.wordpress.org/plugins/autoptimize/

It’s very cool, and will do more for you than just combine files.

You can read more up on it here: https://generatepress.com/fastest-wordpress-theme

Let me know if you need more info 🙂

[Ramesh Srinivasan]

Autoptimize is what you need, as Tom says. I’ve been using it for over 4 months – it’s awesome, and its author is very responsive as well.

If your Website is using HTTP/2, number of requests is no longer an issue as individual CSS files load much quicker than in HTTP/1.1.

Interesting notes here:

How HTTP/2 is Changing Web Performance Best Practices

HTTP/2: the Pros, the Cons, and What You Need to Know

[Tom]

Very interesting, thanks Ramesh! 🙂

[Ramesh Srinivasan]

Thanks! Tom.

[wekhter]

Combining them is an option, but they’re only loaded if certain options are set like the Mobile Header for example.

You’re misunderstanding me; when I said “shouldn’t the stylesheets for active modules just be combined into a single stylesheet?” I meant exactly that–active modules. I’m talking about combining the CSS for activated modules in GP Premium when you change settings on the GeneratePress admin page (maybe via scssphp?)

Also, I still don’t understand why there are separate mobile stylesheets.

[Tom]

Combing CSS dynamically like that when options change is an option, but would most likely be server resource intensive/require writing to the server. I’ll have to look into that more.

Which separate mobile stylesheets? If they’re in separate add-ons they need to be separate.

Plugins like Autoptimize are awesome as they take care of all of this on the fly.

[Author]

Posts