DEV Community

Cover image for I Make a Dashboard for Our Game Studio Load Faster than a Portfolio Website
manushifva for Sandbottle

Posted on

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

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

Portfolio website by Melinda Golden

Our users dashboard

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.

Pre-rendered area

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.

Discussion (2)

Collapse
jonrandy profile image
Jon Randy

Given the amount of over-engineering on most portfolio sites these days, this doesn't seem all that impressive 😜

Collapse
manushifva profile image
manushifva Author

Thanks for commenting! I think yes, since we compare our application with 3 years old unmaintained code. The portfolio also using many images with large size image, and we use none. But, we hope our post can help someone speeding up their web ⚡.