Support » Plugin: Fast Velocity Minify » defer css

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Raul P.

    (@alignak)

    You need a developer for that and it’s a manual process.

    You can try to choose the option to inline all css as well.
    If your CSS is not too big, it will probably work.

    I have enabled the Inline CSS both in the header and footer [ If selected, any FVM generated CSS files (header + footer) will be inlined ] option. As just footer breaks some plugins for example the slider.
    Though I wouldn’t need a developer to defer CSS there are plugins that do what FVM does and also defer CSS.
    As I am using FVM and I am loyal to the plugins I use I wanted to know if it can do it on it’s own in any way.

    • This reply was modified 1 year, 5 months ago by johndos.
    Plugin Author Raul P.

    (@alignak)

    Deferring css is not as simple as using a plugin, or I mean, you can do it but it won’t look nice.

    There is an option on FVM to load the google fonts and font awesome CSS async, because we know that those can load separately.

    When you async css, stuff will load out of order in an inconsistent manner.
    Sometimes they load properly in order, refresh and it’s out of order.
    When css loads out of order, styles that should come later and overwrite older code (very common on child themes for example) will not work as intended.

    If you load css async, you have to make sure that you only have 1 css file generated, or that you have files which can load in any order.

    Furthermore, while CSS is not yet loaded, you will experience a FOUC effect, especially on slow connections. It’s not pretty, unless you also have a critical path code inlined in the header, which can also be different for every page.

    A couple plugins like autoptimize, can integrate with https://criticalcss.com/ for generating the critical path, however I have extensively tested this and it doesn’t produce good enough results for the majority of sites I worked with (I work on a few thousand sites so I have a large pool to test stuff).

    I thought of integrating it, but it’s just not stable enough and neither does it create the perfect results that I expect, meaning it’s not good enough to be included on FVM.

    If you hire a good developer, he will be able to async FVM CSS and generate propper critical path for your site manually… (emphasis on good developer).

    However, nowadays the critical path is hardly ever needed for pagespeed insights, like in previous api versions.

    When they say defer unused css, they mean to delete unused css, which should not be done on wordpress, because you never know which code may be needed in the future.

    The speed tool is for all types of sites, but wordpress in its nature, has some restriction on what you should do, and what you should ignore.

    I have no problem reaching a score of at least 90+ without going into critical path css, although I do usually move the css to the footer and hide the content until it finishes loading the css file… but note that this is only doable, when the time to first byte is slow.

    FVM has options to Async CSS on the dev tab (look for it) in the options, but it’s there as a tool for developers only. If you want to use it, go ahead… but I would advise against it, if you are not a developer or at least, an advanced user (in which case, you would probably not be asking).

    FVM is geared towards advanced users and developers, because it has more options than most other plugins… but each site, may require different settings and sometimes, auxiliary code or plugins to unlock its full potential.

    I wish there was only a button to push and work for everyone, but unfortunately it’s impossible with the almost unlimited universe of themes and plugins combination for wordpress… so for advanced stuff, I recommend a developer to take over.

    I hear you, and I have actually never thought of what would happen if I loaded async CSS and you are 100% correct.

    I have thought of moving css to the footer but there is this thing with the revslider that it doesn’t load unless the CSS is in the header, thus the Inline CSS both in the header and footer.

    I am scoring on pagespeed a 96% and yslow a score of 83%. The thing that get’s my nerves and am trying to improve is the mobile speed in pagespeed insights that still gives me 35-45%. And I really wouldn’t like to change over to AMP as it’s not nice enough at least yet.

    That is today’s score https://gtmetrix.com/reports/medicalfa.gr/bN9gvPGz
    On thinkwithgoogle I am getting a 2.2sec for 4G and 4.2 on 3G that is a fair speed
    But the PageSpeed Insights is giving me only a 39% on mobile.
    I have been cracking my head on how to fix this but nothing. So I though ok if google says it’s the CSS let’s try deferring the unused css. I do agree that none no ever should delete CSS from wordpress cause you never know.

    And yeah if only there was a button it would be easier for everyone, I am not a developer, I am just able to edit code in order to change it to what I want after a bit of trial and error, and a bit of help from you guys (devs).

    Plugin Author Raul P.

    (@alignak)

    For pagespeed insights, you will want to disable the rocket loader on cloudflare and it will probably improve. Those settings on cloudflare, do not improve speed… it’s a scam, most of the time. You should only use brotli and Polish (lossy) with webp, and disable all else.

    Disable the email protection thing as well, under the apps tab.

    Enable the defer for PSI option on FVM for another improvement as well.

    Disable the stats module on jetpack, since you already have google analytics (I think).

    Disable the jetpack cdn as well, proton… in fact, you should remove jetpack if possible, and add other plugins for only the functionality you need.

    There is still more you could do, but that would be my job as a developer already.
    I would be able to guarantee 90+ on pagespeed for your site, so if that’s something you “must have”, contact me via fastvelocity.com and I’ll send you a quote.

    Thank you for the advice Raul.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘defer css’ is closed to new replies.