DEV Community

loading...

Discussion on: HTML Rendering: An Important Lesson

Collapse
davidszabo97 profile image
Dávid Szabó

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">
Collapse
dotnetcoreblog profile image
Jamie Author

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.

Collapse
davidszabo97 profile image
Dávid Szabó

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

Thread Thread
dotnetcoreblog profile image
Jamie Author

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

Thread Thread
davidszabo97 profile image
Dávid Szabó

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

Thread Thread
dotnetcoreblog profile image
Jamie Author

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.

Thread Thread
dotnetcoreblog profile image
Jamie Author

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.