Website frontpage firstload sizes in practice

There's a new kind of minimalist movement sprouting, trying to make websites as small as possible. Well - "new" - taking into account, that their approach is basically to make websites like we used to make them in 2001 .. this can hardly be considered "new". But anyways, I was trying to see how large a couple of mainstream websites are on their first pageload and how that translates into a rough estimate in terms of transferred assets and loading time.

I simply loaded the frontpage of a couple of websites and used the network analyssis tab in firefox to see the total amount of bytes transferred and the filters to see roughly how the assets are distributed into graphic, HTML, CSS and JS assets. While the distribution varies based on the used technology stack, total sizes are roughly the same for everything.

I'm not sure if it's worth following a purist approach in this regard. Really. In terms of loading times, it doesn't really make a difference wether you're browsing a WordPress based website that loads a bunch of jquery plugins and dozens of unoptimized graphic assets or a NextJS app with CSS-in-JS. Both load equally fast, assuming you're at least on 20-30mbit downstream, there's really no difference that is noticeable.

Which stack you want to use doesn't really make a difference from that perspective. It comes down to what the page is supposed to do and how proficient you are with either approach. Just aim to be within sane specs for load time and first-render time. That's basically all that matters. At least from my point of view.

Here's a couple of examples in a spreadsheet. Granted, it's a small and probably a bit of a biased list. But it doesn't need much of data to see a trend develop. And that trend is .. it doesn't really matter what tech you use for a website, you can fuck it up in many ways other than building an SPA. I also need to add, that since I'm behind a pihole DNS filter, all sorts of tracking scripts and analytics scripts aren't accounted for. This should make the comparison more viable though, since I'm primarily interested in comparing technologies, not the thirst for user data..

Those are all real world examples of pages that use many different stacks and while some outliers are clearly visible, it all makes sense regarding the amount of content shown on screen and the available functionality in the user interface.

Photo by Austin Guhl on Unsplash

Published: 05/19/2020

© 2020 genox.ch – emaillegal