html loads before css

[michellestegem]

Describe the bug
The cara lab website (https://www.cara-ai-lab.nl/) shows the HTML before CSS when accessing the website for the first time

https://stackoverflow.com/questions/4172281/force-browsers-to-load-css-before-showing-the-page

Screenshots (if applicable)

Device information
Windows - firefox

[martvanrijthoven]

This is because cara website does not have critical css, because it is the only website that does share the css for all the other websites.

The critical css for other websites is defined here:
https://github.com/DIAGNijmegen/website-content/tree/master/radboudumc-template/templates/critical_css

This is extracted (locally) with this script:
https://github.com/DIAGNijmegen/website-content/blob/master/above-the-fold/extract-css.js

If you want to have critical css for cara website, you will need to extract it by loading cara website locally and extract the css and upload it somewhere in the repo and modify the path to critical css for cara website

Here is the commit that made sure cara website could work without critical css
804936d

[martvanrijthoven]

You probably dont want to force load the all the css for cara website as that will make loading the website slower and that gives the website a lower score and then it will be lower ranked in search engines