Loading with async or defer

[hwhelchel]

    = javascript_include_tag 'application', async: Rails.env.production?

    css:
      #{CriticalPathCss.fetch(request.path)}
    javascript:
      loadCSS("#{stylesheet_path('application')}");
    link as="style" href="#{stylesheet_path('application')}" onload="this.rel='stylesheet'" rel="preload" /
    noscript
      link href="#{stylesheet_path('application')}" rel="stylesheet" /

If I load application.js async in production, and I require the loadCSS function in application.js, won't there be a chance it won't have loaded by the time the critical-path-css-rails is executed?

What's the most performant way to handle this use case?

[michael-misshore]

@hwhelchel Hmmmm, that's an interesting question, and I'm not sure offhand what would happen in that case. I've been meaning to get this gem tested, so I'll make this a test case once I can get this app setup for docker/testing.

[maxence33]

@michael-misshore I have exactly the same question as @hwhelchel . All my JS is defered at the moment. Chrome Lighthouse only tags the CSS as "render blocking resource". Maybe instead of adding the gem libs into application.js they should be added to a standalone js sheet and added on top of the application.html.erb head without any async or defer.

But then there will still be a render blocking resource ? (this very gem's libs ... ? )

I will play with this the next days, but if you have already some insight about it it is welcome .. :)

[michael-misshore]

@maxence33 and @hwhelchel, Sorry for the late reply. I haven't had a chance to make any progress on this. I definitely still plan to add a test case for this at a minimum. I'm just unsure when I can get to it.

@maxence33, I know it's been about 19 days. Have you had a chance to play with this?

[tbcooney]

Any discussion since?

[michael-misshore]

@tbcooney Nothing on my end, unfortunately.

[Tlazypanda]

Hey @michael-misshore I am also having the same issue 😅 Is there any workaround for this? Like what @maxence33 suggested maybe. Thanks 😄

[michael-misshore]

I started adding the test case and is still in progress. I haven't had time to get it implemented.

[Tlazypanda]

@michael-misshore Ohh thanks for the update! Really looking forward to this getting implemented!! 🚀 💯