DEV Community

Cover image for Refreshing My Personal Website

Refreshing My Personal Website

Robert Cooper on January 01, 2019

Originally posted on my blog. I've decided to redo my website, yet again. This is the 3rd or 4th iteration of my website. Here were the motivat...
Collapse
 
quii profile image
Chris James

I was going to have to have multiple pages on the website and thus I wanted to use React to get the performance associated with a single page application.

Is an SPA really necessary for a blog?

SPAs are definitely not always faster than just a traditional server-side solution. Especially given the amount of JavaScript that has to be downloaded and executed (no caching does not stop this cost).

For some perspective your website took a full 3 minutes to load on my laptop.

Slow times

This isn't intended as a flame; but web performance and accessibility is very important to me so I feel the need to highlight that throwing technologies like react and SPAs around definitely do not give you enough to make a fast and accessible website.

Collapse
 
peternycander profile image
Peter Nycander

I don't think the load time is a result of the choice of tech stack. Gatsby is a static site generator, which can hydrate to a SPA once loaded. I think it is a great choice for a blog! As you can see it is the intial html page which is the worst offender, not some huge javascript blob.

Collapse
 
rhymes profile image
rhymes • Edited

I tried robertcooper.me/refreshing-my-pers... and I get similar numbers:

There are many assets to download, the service workers is pulling down gifs of several megabytes and lots of different JS files. Probably by fixing those huge assets the UX will improve a lot :-)

Thread Thread
 
garfbradaz profile image
Gareth Bradley

Seeing the same on mobile as well (slow loading speeds) running through my home WiFi. Once loaded though the site looks lovely.

Collapse
 
faraixyz profile image
Farai Gandiya

Is an SPA really necessary for a blog?

I mean, the essence of a personal website is a place to play around with since it's...personal.

Then again, you have a good point considering accessibility and performance. The personal website could lead to a rabbit hole of ruthless optimization to make it as good as possible.

Collapse
 
quii profile image
Chris James

It's a fair point, one of the joys of a personal website is that you can do whatever you want; and feel free to do so.

The only risk is if your priority is about communicating text based information and you're making it hard for people by making a slow website.

Collapse
 
robertcoopercode profile image
Robert Cooper

Oh my. I need to look into optimizing those assets! Thanks for pointing this out.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

If you're having trouble removing the background of your headshot, check out

Thanks to @chriscoyier for this great find.

Collapse
 
edetscript profile image
Abednego Edet • Edited

Good job, Robert.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

May I recommend Remove.bg for removing bg from your headshot? YOU'LL THANK ME LATER.

Collapse
 
robertcoopercode profile image
Robert Cooper

Haha, I did try using it, and it does an AMAZING job at removing the background. However, I found that it reduced the image quality to much :(.

However, your post motivated me to open up a photo editor and remove the lingering background pixel-by-pixel.

Collapse
 
shinyuy profile image
Shinyuy Marcel

It looks great, Robert.

Collapse
 
codejoywins profile image
Max Jann

nice job