Hummingbird CSS causes renderblocking – Google Page Speed

Hi @mwarbinek,

Those files are minified versions of your assets. Please keep in mind that if the original file is marked as render blocking, the optimized version can still be marked as render blocking. To fix this warning you should try moving the CSS files to the footer. Best way to do this – move all critical CSS to one file, and load all the other CSS files in the footer. Also, small CSS files can be inlined.

Best regards,
Anton

Combine CSS
I don’t understand how this part works.

There is a combine button for CSS, but combine with what, other CSS files? –

I am not sure how that is done with these buttons since each CSS asset has its own combine button. Each having its own button throws me off because I expected a selection box and a single button to combine several items together.

Above the Fold CSS
I wanted to ask this as well.

Under “Asset Optimization > Tools > CSS above the fold”, it provides a field box to enter the crucial CSS for above the fold, which gets inserted into the head area.

If I do that, and it does not work out, to return the site to the state before doing this, do I just empty that field box making it blank?

Thanks

• This reply was modified 6 years, 6 months ago by mwarbinek. Reason: Fixed content
• This reply was modified 6 years, 6 months ago by mwarbinek. Reason: appreciation thanks

Combine CSS – you select what files should be combined in general. Depending on the page and the assets that are available on that page, Hummingbird will try to combine the selected files. Asset Optimization lists ALL the assets that are available.

Above the Fold CSS will create a new file that will be placed on top of all others. This is useful when you want to place critical CSS on the top of the page and move everything else to footer. Placing CSS here does not remove any other files.

Best regards,
Anton

Still not clear on the combine thing, on how to do things with this plugin as to what to click.

Question 1
To the right of each CSS file is the combine button, this appears the combine button only applies to the CSS file it is listed with. That is the first impression on the layout of buttons per Asset list. There is no indication anywhere to indicate these buttons apply or work in a different manner.

That said, how does this work then to combine?

Do we check the boxes beside each CSS file we want to combine then click the combine button at the CSS file that we want the others to merge with?

Or are the steps we do different to combine?

Question 2
Once CSS files are combined, we can then choose the same CSS files listed in Assets and move them to the footer?

I am supposing this is not all done at one time, that I have to first combine, click publish then move CSS files and publish again? ( I read the documentation, there is no sufficient instruction there)

Sorry for being particular on this.

Thanks

@mwarbinek,

Combine will try to group multiple files into a single bundle. Yes, you are right – the Combine button applies to the file it is listed with.

Example:
a.css – Combine
b.css
c.css – Combine
d.css – Combine, Move to Footer

Result:
a+c.css
b.css
d.css (in footer) – cannot be combined with ‘a’ and ‘c’, because of location.

Hope that makes sense.

Best regards,
Anton

Yes, then combining actions (matching actions as “a, c”) via buttons do work.

Thanks.