[Investigate] Reduce HTML size to reduce page load time

[lokijuhy]

The size of RenkuLab.io webpage's HTML is 106.78 Kb, and is greater than the average size of 33 Kb. This can lead to slower loading times and lost users. Good steps to reduce HTML size include: using HTML compression, CSS layouts, external style sheets, and moving javascript to external files.
Currently, RenkuLab.io doesn't use any HTML compression. We should compress HTML to reduce the page size and page loading times. Using HTML compression we can reduce the HTML size by 83% - from 106.78 Kb to 18.64 Kb.

Acceptance Criteria

• enable HTML compression
• < to groom with UI team >

Open Questions

• Should this issue scope cover only the landing page, or all of Renku? -> everything! Turning on compression is global

[lorenzo-cavazzi]

The result of https://seositecheckup.com is interesting, but the part on the HTML size is a bit confusing. From chrome, it seems that most of the time is spent downloading JavaScript files (see screenshot at the end). In the full report from seositecheckup, this seems to be confirmed (JS --> 7.61Mb, 88.4% of the total files), but then the HTML is down to <4kb 🤔

Sadly, the articles to clarify the HTML part and how it should affect users don't seem to be available at the moment (I get "Page not found" for both https://www.seositecheckup.com/articles/85 and https://www.seositecheckup.com/articles/106) -- those would be very interesting.

For sure we can improve the load time by compressing the JS files and enabling server side caching -- that seems something reasonable to do at this point.
I would consider if taking other actions would really give us benefits since it's probably hard for the users to notice a speedup if the first load already takes only a couple of seconds.

[ciyer]

Implementation

• Webpack compression
• Nginx configuration to turn on compression + caching

[lorenzo-cavazzi]

Some resources:

• Give a look to compression-webpack-plugin
• nginx settings for caching location ~* \.(pdf|css|html|js|swf)$ { expires 1d; }
• useful references: https://rajaraodv.medium.com/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a

[lorenzo-cavazzi]

After giving a (quick) look to alternative tools to measure the load time, I think the one suggested by the Google Developer resource center shows results that align more closely with the load times showed in the browser (see screenshot in the previous post) and the criticalities we expected.
I suggested using that as a reference to verify the progress.

Here is the link https://pagespeed.web.dev/report?url=https%3A%2F%2Frenkulab.io%2F&form_factor=desktop

The current score is not great:

In the analysis, the main pain points (and possible solutions) align with what we mentioned earlier: JS compression, efficient caching policy, dynamically load libraries.