Shifting Header - Load GP Scripts First?

Hi there,

that sounds more of an a Critical CSS issue then a JS issue.

GP loads one main.css file:

http://testsite.local/wp-content/themes/generatepress/assets/css/main.min.css

And depending on your customizer options it will load additional styles:

Dynamaic CSS ( if styles are set to External File in Customizer > General ) - this is the majority of the Customizer styles.

http://testsite.local/wp-content/uploads/generatepress/style.min.css

For Blog options:
http://testsite.local/wp-content/plugins/gp-premium-release-2.0.0/blog/functions/css/style.min.css

But there are also some additional styles that are loaded inline - not sure if the plugin can exclude inline CSS.

Personally - unless you're loading a lot of in content styles ( such as from a Page Builder ) then you may find the Critical CSS adds little value.

If you do need to exlude JS files the main one is:

http://testsite.local/wp-content/themes/generatepress/assets/js/main.min.js

Note all URLS are testsite.local - so unless the plugin uses relative paths ( and TLD is not required ) then you need to change that to your web address.

That was very helpful David. Serious thank you.

It's odd, GPSI keeps complaining that style.min.css?ver=5.7.1 is unused and should be uploaded. If I unload this one, header breaks.

May I ask if these 2 are Menu Plus?
navigation-branding-flex.min.css
offside.min.js

I see these also but I am pretty sure most pages and posts would need these:

back-to-top.min.js
classList.min.js
main.min.js
main.min.css
style.css
style-7.css?ver=1618553143
style.min.css?ver=1619257155

After working on dozens of sites and seeing combinations of tech and setup gives the best chance to pass CWV and Page Experience, I was trying to only load CriticalCSS. I think the unwritten rule is, if you can load below 20kB, you will never be flagged for Render Blocking.

I tested FlyingPress, WP Rocket and even Autoptimize with CriticalCSS.com but these did not perform as well as I had hoped. Now, instead of only loading what is needed, I may investigate trying to remove what is not used. There is still one paid service I have had tested yet.

Again, as always, thank you for all your advice and help!

Thats correct these are for the navigation:

navigation-branding-flex.min.css - part of the Menu Plus module used for features like Mobile Header and Navigation As Header Options.
offside.min.js - specifically for the Off Canvas Panel - it can be deferred but may affect to the time to interactive.

Some of those style sheets are dynamic - such as the style-7.css - thats the kinda thing that GenerateBlocks will generate - and that will vary from page to page.

Minimising the size and number of requests for initial load times will 'reduce' render blocking. But server response and network speeds may still cause render blocking flags to be raised. Ultimately deferring styles is just increasing 'perceived performance' improvements - the files still have to be loaded at some point.