Earlier last week I set myself out for a little challenge to get my pet project fronthat.com to pagespeed 100. It was really disappointing to see how slow the original version was. After analyzing user behaviour a complete rewrite was done to improve the user experience.
- Google’s PageSpeed tool is not an absolute metric on how “fast” your site is. It’s really just a set of guidelines on how to build your application.
Prioritize Visible Content
Server Side Rendering
Offline first support was added that all the assets are cached locally and network is used as a fallback. On the second visit the load time for browsers that support Service Workers is considerably lower. Users are now able to access the cached content instantly even when the WiFi at the airport is weak since it defaults to offline first and fetches updates from the server when/if necessary.
All the critical CSS was inlined into the HTML to make it the only blocking resource. Originally ember-paper was used for Material Design like look, but I ended up writing all the CSS from scratch to reduce the amount styles required.
Reduce Server Response Time
Deployment to AWS using fastboot-aws with a Redis cache on top solved the problem. Static assets are still being served over a CDN.
The original version was serving a huge list which required about a second of render time each time the user navigated. A virtual scroll library smoke-and-mirrors was added to prevent having to show an ugly loading spinner each time a navigation event happened. Some modifications to were required in order to make it FastBoot/NodeJS compatible. It’s not perfect and has quite a few bugs which should be ironed out when 1.0 lands. Chris Thoburn has done a fantastic job. It performs really well even on an old Samsung Galaxy S3 mini.
Ember Engines and Lazy Loading
Web App Manifest
Having the ability to bookmark a web app to the device’s home screen and display a splash screen would provide a more app-like feeling. It’s a pretty straight forward process that I haven’t got around yet.
It turns out there’s an Ember addon called ember-web-app for adding web app manifest to your project. It also adds Apple specific meta tags out of the box.
After adding the manifest the app scored 91/100 with Lighthouse.
I’m very pleased how convenient it was to make these improvements using the EmberJS addon ecosystem. Ember might not be the most popular choice out there, but it’s the right choice for many projects. The future is looking good. Hopefully Safari adds support to Service Workers soon. We’re very close to the era where user doesn’t have to download a native app for majority of the use cases.
Found this article useful? Consider sharing (tweeting) it to your followers.