re: HTML Rendering: An Important Lesson VIEW POST

FULL DISCUSSION
 

You are not using bootstrap from a CDN so you shouldn't split your CSS into multiple files. Concat bootstrap.css and custom.css so you only have 1 css to download. Also, remove unused CSS via purge.css or other tools.

Give this a try with your original URL based CSS solution.

<link rel="prefetch" href="img/header.jpg">
 

I really like the idea of using rel="prefetch", I hadn't even thought of that.

As for the CDN part, I'm currently trying to get this to be as fast as possible by hosting my own version of Bootstrap. I'm going to be looking into cutting out the stuff that I'm not using, so your tip about purge.css is greatly appreciated, too.

 

If your site is simple enough, ditch bootstrap. Nowadays it's not a huge help anyway.

Definitely.

If I was more well supported (i.e in Microsoft based browsers), I'd use flex grid because I've had a lot of success using it on my .NET Core Podcast website

95% for flex box :) More than enough.
88% for grid which is not that bad.

You can do most of the layouts via flex. But yeah, I can't wait to use grid for everything :)

Also, when you ditch bootstrap you can ditch jQuery, double win :D

Also, when you ditch bootstrap you can ditch jQuery, double win :D

Exactly this. I'm not a huge fan of jQuery and it's massive, so ditching that will reduce page load times by sooo much.

As an update to this: I spent a few hours re-writing the web app to use flex box with a few other optimisation suggestions here in the comments, and the application now renders (without a cache) in around 400-500 ms.

Just need to shave a little overhead off by utilising a better font. Maybe I should use Variable Fonts or something similar.

code of conduct - report abuse