How I Make a Dashboard for Our Game Studio Faster than a Portfolio Website

Yes. This is real. I compare our users' dashboard with a portfolio website and our website is 40% faster. Here's a small lighthouse test that I perform:

Small note: Both tests are run in localhost.

So, let me share how we do this.

1. Using fewer resources.

Of course, we all know this. To load faster, you need to use fewer resources. But, this is not easy as said, especially if you using some library or framework that embeds you a lot of unused CSS or Javascript.

To make this UI, I'm using modified Pasta CSS*, Bootstrap-like lightweight library.

I also use customized icons from fontello.com. So, I can pick what icons I would use, without embedding a whole of them.

Don't forget about Javascript. We using a minified version of JQuery. JQuery makes my code slimmer. It's also helped me code faster, since it has the build-in function for some tasks, like toggling something, finding the nearest element, etc.

2. Using pre-rendered content.

Rather than render the page content after loading the page, I'm using this pre-rendered content.

At first, I render the main Html file. Then, I render the pre-rendered content. I'm also using Swup.js for swapping pages smoothly. Swup also helps us render fewer things.

3. Using Koa.

Koa.js is one of the most popular Node.js server libraries. Koa was developed by developers who develop Express. Koa is faster than Express, since it developed to be more modular rather than embedding.

4. Using fewer images and using lazy load.

These are the final tips. Images are hard and slow to load, especially the larger ones. Using lazy load can help the web render faster, because the lazy load pending the load process of images, and load it after the whole page is successfully loaded.

That's it. Hopefully, this can help you with speeding up your website too .

Disclaimer:

• Pasta CSS was made by me.