[Support request] Critical CSS, above the fold, Hummingbird and minification

[fabien]

Hi guys,

I’ve been using Autoptimise which I see you recommend on a regular basis. I am quite happy with it but I like Hummingbird’s ability to selectively inline and/or combine and/or minify and/or move assets to the footer and/or simply not load at all! All to get that first paint render as quick as possible, particularly on 3G mobile connections (30% of our traffic).

Are you able to provide some guidance on what can be tweaked on Generate Press re: Hummingbird? What I’m looking for is to find out what css/js is render blocking (critical) and what can be safely moved to the footer or inlined or combined.

CSS
dashicons.min.css
admin-bar.min.css
la-icon-maneger-style
0.0KB — style.min.css
wp-block-library
29.3KB — style.min.css
fl-builder-layout-5008
28.4KB — 5008-layout.css
generate-style
36.1KB — all.min.css
generate-child
0.3KB — style.css
generate-blog
5.2KB — style-min.css
generate-secondary-nav
7.0KB — style.min.css
generate-secondary-nav-mobile
1.8KB — mobile.min.css
generate-sticky
1.8KB — sticky.min.css
generate-offside
6.4KB — offside.min.css
gp-premium-icons
0.3KB — icons.min.css
generate-navigation-branding
3.1KB — navigation-branding.min.css
buttons
6.2KB — buttons.min.css

JavaScript
admin-bar
7.2KB — admin-bar.min.js
jquery-core
96.9KB — jquery.js
jquery-migrate
10.1KB — jquery-migrate.min.js
generate-sticky
8.4KB — sticky.min.js
generate-offside
5.7KB — offside.min.js
la-icon-manager-md5
6.1KB — md5.js
la-icon-manager-util
1.0KB — util.js
fl-builder-layout-5008
18.4KB — 5008-layout.js
underscore
16.2KB — underscore.min.js
wphb-global
9.1KB — wphb-global.min.js
generate-classlist
2.4KB — classList.min.js
generate-menu
4.1KB — menu.min.js
generate-a11y
2.2KB — a11y.min.js
generate-dropdown-click
2.5KB — dropdown-click.min.js
generate-navigation-search
2.1KB — navigation-search.min.js
generate-back-to-top
0.7KB — back-to-top.min.js
wp-embed
1.4KB — wp-embed.min.js
chartjs
156.7KB — Chart.min.js
chartjs-plugin-datalabels
12.6KB — chartjs-plugin-datalabels.min.js
jquery-ui-core
4.0KB — core.min.js
jquery-ui-datepicker
36.5KB — datepicker.min.js
infinitescroll
25.3KB — infinite-scroll.pkgd.min.js
generate-blog
1.4KB — scripts.min.js

Generate fonts

[Tom]

Hi there,

We don’t have any specific instructions on this at the moment. In most cases, almost everything can be pushed down.

I would start by combining everything, and then looking at your website. That will tell you which elements need their CSS to be higher up in your source. I’d be happy to take a look once you’ve combined everything 🙂

[fabien]

Alright… after extensive testing, I get much better GT Metrix results out of the box with Autoptimize compared to Hummingbird. So I will stick to that.

– Any advice on manually moving certain useless scripts to the footer? (or just not load at all)?

– Also on the URL I indicated (any page except the home), my top bar appears very tall for a second before resuming to normal size. I would be grateful if you could let me know the CSS or JS I need to exclude from Autoptimize in order to fix that.

– Last but not least, GoogleSpeed insight tell me jquery contributes for 50% of the render block on mobile, what is that? (compared to desktop).

[Tom]

Which scripts? All of the GP scripts should be in the footer by default. jQuery is usually in the head to prevent errors if plugins add javascript to the head as well.

Not sure what’s causing the top bar to do that. Perhaps it’s the icons loading before their CSS? If you remove the icons temporarily, does the issue go away?

That’s likely because jQuery is loading in the head as opposed to the footer. You could try moving it to the footer, but it may break: https://wordpress.org/plugins/scripts-to-footerphp/

[Author]

Posts