Need help with HTML/CSS optimization

Your site is fairly lightweight, which is good. Chrome Dev Tools estimates 200 KB as the total download for your homepage.

You’re loading nine font files for some reason, spanning six different typefaces (you have separate bold or italic files for some). Some are woff files, while others are woff2. You should only be sending woff2 to a visitor using a recent version of Chrome – just put the standard font syntax and the browser will request woff2.

Strangely, you’ve gzipped your woff files (there are three of them, all for Linux Biolinium). Was that intentional? woffs are already compressed, using DEFLATE, the same codec as gzip. gzipping woffs doesn’t usually pay off, and it adds more work for the browser to decode them twice before getting to the actual font file decode (the glyf tables). You can optimize your woffs with zopfli like compression tools, and they remain woffs. There’s no need to wrap them in gzip or anything else.

Your CSS is small at 7 KB. Still, much of it might be unused. I’d analyze it with uncss or purify-css (both in Node/npm), remove the unused code, and put the remaining CSS in the head of your HTML files. Having separate CSS and JS files is a terrible antipattern that took hold early in this era of web development and has resulted in a massive waste of bandwidth, electricity, and users’ time. It is almost never the case that the benefits of the possible caching of those separate files outweigh the benefits of treeshaking the CSS and JS (especially the CSS), and inserting it into the head of the HTML file. This is why the Google AMP project requires that all CSS be in the head and doesn’t allow separate CSS files. (And still you’ll see tons of unused CSS on AMP pages – early 21st-century web developers are terrible at web development.)