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

Home Forums Support Critical CSS, above the fold, Hummingbird and minification

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #993445
    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

    #993924
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #994211
    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).

    #994706
    Tom
    Lead Developer
    Lead Developer

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.