R Shiny Eliminate render-blocking resources

shiny
#1

According to Chrome Lighthouse, the major slow down of our Shiny app comes from intially loading resources (JS, CSS) into the DOM:

Screenshot 2022-06-23 at 16.04.24
Screenshot 2022-06-23 at 16.04.24956×1092 90.4 KB

Then, I -- sadly unsuccessfully --browsed the web for a solution or some hints on how to r eliminate these render-blocking resources in R Shiny (i.e., load them later). Besides these two abandoned quesions on StackOverflow and here on RStudio Community, I was unable to find any Shiny-related sources.

As the JS and CSS are loaded while loading the libraries, I assume it might be tricky to disentangle them. Still, I wonder if there is a common approach on how to overcome this and speed up the intial loading of the app.

Looking forward for some tips & ideas!

#2

I dont think there is such a thing as javascript free shiny. shiny is a system that connects an R process to a javascript one in the browser. It doesnt make sense to me to delay loading javascript till 'later', given that's the case, but I admit I am not an expert and I may be missing something obvious. Still, I think enquiring into what might be streamlineable makes more sense than talk of total elimination given my perception of how things work. That aside, it does seem that your transfer time is 2seconds for 50kb on the shiny.min.js ... which seems a lot slower than I'd expect. Do you have access to any other system to try on to compare ?

#3

Maybe I made myself not clear enough: the aim is to

  1. load certain scripts after the main components of the app has been built (as far as I know, loading some of them in the footer rather than in the header helps here)
  2. load only necessary scripts (if this is somehow possible to choose from R libraries...)

This seems to be standard procedures in improving speed of websites, though, I'm unable to find anything Shiny-related.

I haven't tried any other measurement tools so far--do you have suggestions on which?

#4

Apparently you can use an app with html template, and suppress dependencies i.e. take responsibility for loading just the ones you want. However, I can see this causing you issues if you don't include things that you would rely on. but I suppose its something you can try if you are very motivated.

https://shiny.rstudio.com/articles/templates.html

To avoid having two copies of a library, use suppressDependencies() . This will ensure that Shiny components won’t automatically pull in their own versions of web dependencies, and only the one that you manually added to the template will be use

1 Like