I cringed while watching my sister-in-law use Buckets on her iPhone. It was so painfully slow. I knew it was slow, but I didn’t know how bad it was. So I decided to make it faster—here’s how:
If you have previously put no effort into the speed of a webapp, then almost any effort will buy you huge gains :) It’s easy to make something 10x faster than molasses. Just try something.
1. Make something terrible
The first step to making something fast is to make something. It can be terrible. Mine was.
The next step is to get some data. I pulled up Chrome DevTools and watched the landing page load:
Ouch! Twenty seconds just to load the first page. No real user would wait that long.
Turns out I was asking the browser to download 180 KB of images. I reduced the quality and size of each of the three images (yes, 180 KB for three images) to about 27 KB of images. I used gifsicle and ImageMagick for that. Here’s a part of my
I might get
webpack to do this in the future.
And saved 1.1 MB.
I heard about webpack a while ago and thought it might be neat, but also thought, “Ugh… why another module bundler?” After watching my sister-in-law suffer through my app, though, I watched the following talk by Pete Hunt, which convinced me to give webpack a real try.
Webpack is confusing at first, but later it’s still confusing (okay, it gets a little better with practice). Eventually, you can get it to do what you want. And for Buckets it has been worth the effort. I see real speed benefits now, but I also foresee great modularity/reuseability benefits on the horizon.
Using webpack is a good choice.
6. Don’t embed YouTube videos
I had an embedded YouTube video on the landing page. It ate up ~500 KB over several sequential requests. Now, I have a fake “embedded” video link to YouTube. I might later make the embedded video load after the user clicks the fake “embedded” video link.
Here are some measurements of three distinct pages of the app before and after doing the above. All measurements were taken by accessing a local dev server with Chrome’s DevTools simulating a Normal 3G connection (750 Kbps, 100ms RTT).
I’m rather pleased that the landing page loads visually in about 1 second and completely in 2. The other pages are slightly faster and smaller. I will continue to optimize them.
Feel free to give Buckets a try.