Frontend Mayhem

Websites & Dev tools : Initial load time is important

August 14, 2017

It’s common knowledge that the time it takes for a website to load up the first time has a huge impact on customer experience. Companies like Google & Amazon can lose hundreds of dollars (probably more) over milliseconds.

Imagine you head over to Amazon to make an impulse buy. The rational person in your head is trying hard to combat the impulse decision & save you some hard earned cash. The faster Amazon works, the higher the chance of them capturing that impulse buy. It’s a battle of milliseconds.

Surprisingly when we talk about developer tools & technologies we don’t tend to focus enough on “initial load time”. No, I am not talking about how long it takes for VS Code to start up.

I am talking about how long it takes to get up and running on your super cool side project which you’re super excited about. You have this great idea! It’s the best idea. You know it! I know it! Everybody knows it!

You fire up your text editor & start wireframing the project.

You decide to go with React (Fiber is ready 🔥 http://isfiberreadyyet.com/). Hot module replacement, code splitting, server-side rendering, cool new ES 2017 features, prettier, ESLint all sound tasty. So you start putting together your config which will let you experience the thrill of all of these amazing tools. Sounds heavenly?

Hours later, you’re still setting things up, the excitement is starting to phase out. The frustration of trying to get everything to cooperate with each other starts to set in. But the idea you have is the best one remember? You keep powering on.

Fast forward a few more hours, you’re sitting at your desk debugging an obscure Webpack error. You’ve invested most part of your weekend and still don’t have anything “real” to show for it (other than some hard earned debugging skills). But your idea is the best one remember? May be not. Doubt settles is as you question if all of this is worth it.

This might sound like a gross exaggeration (because it is). However, I know many developers who have abandoned side projects during the “boot up” stage because it was just too much effort. And it’s not just us “noobs” falling into this pitfall. Many experienced developers that I follow religiously have shared similar stories.

Use starter packages

Luckily, we live in a time when the developer community is in strong force & people are willing to put in countless hours to solve such problems for everyone.

When I start a new side project these days, I look at the following three solutions:

These tools allow me to get going on whatever idea I have in mind without any setup whatsoever. They also come with a bag of useful features out of the box. In Meteor’s case, you get user authentication, automatic data sync & a whole lot more.

I’ve also heard that Next.js offers the same experience as well but I haven’t explored it yet.

I think this quick boot up time is extremely critical, especially if you don’t have a lot of free time to dedicate to your side projects.

Don’t chicken out on learning

I am not recommending that you always just go to these magic box solutions. These solutions take care of a lot of complex stuff under the hood which is worth learning.

What you should do is first learn how to do things the hard way. Once you understand how things come together, then switch to using these starter packages. Not only will this help you expand your skill set, it will also be useful if things fall apart at some point.

Also if the purpose of your side project is to explore new technologies then this approach perhaps isn’t the best either. But if you just want to just whip up a usable product soon, then definitely no point in taking the long road of exhaustion & frustration.


Watandeep Sekhon

Written by Watandeep Sekhon.
Website / Twitter / LinkedIn / Instagram