search

DIAGNijmegen / website-content

This repository stores all the content for the diag websites.
MIT License
5 stars 74 forks source link

html loads before css #560

Open michellestegem opened 2 months ago

michellestegem commented 2 months ago

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) image

Device information Windows - firefox

martvanrijthoven commented 2 months ago

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 https://github.com/DIAGNijmegen/website-content/commit/804936d2acf8a77b99c261825dc62a8ea7fd1581

martvanrijthoven commented 2 months ago

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