Plots2: Load only critical css for intial page load and rest asynchronously

[Tlazypanda]

Currently the application.css file is blocking the rendering of the website. But most of the css present in it is unused for the initial page load or not critical. So it makes sense to defer this unused css and only load the critical css for the initial page load.

Please describe the desired behavior.
The loadcss-rails gem and the critical-path-css-rails gem can be used for the same.

loadcss-rails gem helps to load all the css asynchronously by installing and making changes in the layouts where we are calling the application.css file such as application.html.erb layout.

critical-path-css-rails gem can help to only load the critical css for the inital page load. This is done by installing and configuring in the same layout. We can see it in action by precompiling our assets.

Additional context (optional)
Coverage tab showing us how much of application.css is unused.

Page SpeedInsight showing us this as the suggestion-

[Tlazypanda]

Hey @jywarren @emilyashley :wave: I have tested this out and seems to work pretty good just wanted to know if I should go ahead with this? :sweat_smile:

[Tlazypanda]

Hey @jywarren @cesswairimu @emilyashley Looking forward to your input on this :sweat_smile:

[cesswairimu]

@Tlazypanda its possible styling changed and some code in application.css was not removed...but what normally happens if some styling is redefined o the specific folder css it overrides what we have at application.css i.e say we are rendering /notes if a method on application.css is redifined at notes.css the notes.css takes precedence...I would prefer we redefine what we want on the css specific file just incase another page are still using the application.css...Not sure if this makes sense or helps?

[Tlazypanda]

Hey @cesswairimu! Thanks a lot for your input :tada: I am not sure if I am completely able to understand what you mean(kinda slow :p) I think the gem would load the css asynchronously and for the initial page load the critical css only that it will determine from the coverage tabs...so with all the css files there might be some problem but maybe we can push to the unstable branch and test it out first? :sweat_smile: Thanks again!!

[cesswairimu]

Yeah sure sounds good we can def test it on unstable. Thanks @Tlazypanda :+1:

[cesswairimu]

I will be sure to check-out the gem within the week. Thanks again

[emilyashley]

Awesome thanks!

I see you might have had a few questions for review on vetting which external libraries to bring in? Not sure if this is the best place, but wanted to share what I generally look for when adding new dependencies while it is on my mind. I can check these out for you, esp if you post a list of all the ones you may be considering :) There's no need to write all of our software from scratch, but we also want to balance convenience with the control we'll have over the maintainability of our software when we add external components

Things I look for:

• The Docs does it have readable documentation? feel free to link to the docs of new dependencies in the pull request adding them, others can scope it out and see if they have questions and if they would easily know how to use this
• Their Release Process does the repository have clear release and patch communication? Does it seem brittle or upredictable? ie will the dependency change underneath us without warning? Do you see a lot of "rollbacks?" If so, make sure to use appropriate syntax to pin it to a specific version dependency management file to minimize that risk.
• Contributor Community Health does the repo have a good # of contributors? are open issues getting comments and resolutions? There's no right number, just check it out for red flags (i.e. 2 contributors that haven't responded in over a year might not be a reliable choice)
• The License make sure there's clear permission to use the software in the way we intend.

Bonus:

• Do they seem performant? are they bundled and loaded (or can they be bundled and loaded) in a way that doesn't significantly slow our system? If there's only one or two functions or features we need, see if they've provided a way to custom load just those. (this differs a lot across languages and libraries and may not be possible)

A thing I've done on teams before is created a pull request of the bare minimum code to add the dependency to a project and briefly listed the features I found useful from the library and how I might be using them. That way our asynchronous team had a place for discussion and group "vetting" of a library - each with different concerns (devops, performance, complexity etc). Dunno if that works here, but sharing what I know :)

[emilyashley]

Actually, I'll make a discussion issue out of my comment incase other people have thoughts on this unrelated to this issue :) Didn't realize I had so much to type 😄😁😄 (#8019)