New website with Next.js and Zeit.co

As my old website www.chenjingcheng.com is aging quite fast, thanks to the bursting new technical stacks, every time I open my website, I find it noticeably slow and heavy.

The time I heard about Google's PageSpeed Test, I ran it on my old website and got the following results:

result for mobile
result for mobile
result for desktop
result for desktop

Unsurprisingly, the website scored only 44 for mobile and 66 for desktop, which is far from acceptable.

Talking about the old website: It is hosted on a sharing hosting (non-VPS) at Bluehost using the back then very popular WordPress framework. It was fine at the beginning, but then my website gets slower to access (more than 5 seconds to have my home page rendered), even their official website is slow to reach. Besides, the server is often not even reachable.

You should expect this from time to time.
You should expect this from time to time.

Still, I pay around 270 Euros for a 3-year contract, which is really not worth it considering there are so many free web hosting platforms nowadays.

it silently extended my contract for three years...
it silently extended my contract for three years...

Therefore I've been planning to change my website structures and also deployment strategies. I was considering that those aspects should be required:

  • Going away from dynamic pages to static pages (faster is better)
  • Good SEO
  • Easy to maintain
  • Free to host

Needless to say, that static pages are just faster and support really good SEO. As I am a fan of React, the first thing to look for was React-based static site generators.

There are some options like GatsbyJS, Cuttlebelle, etc. But I choose Next.js just because I tried it and really like the simplicity it delivers.

Besides, it is owned by Zeit, a really amazingly simple static site hosting platform. And it starts for free and basically forever free if my website does not go big.

I converted my website with the new tech-stack just in more or less a week. 80% of them are just content transferring. With zero configuration, I tested the new website again in the Google PageSpeed Insights. To play fair, I compared the portfolio page where both websites show the waterfall of images.

result for mobile
result for mobile
result for desktop
result for desktop

Voila! It scored 97 for mobile and 100 for desktop! My website is young and beautiful again!