How I Made My Personal Website 10x Faster ⚡

I'd recently recreated my personal website, and the page load time reduced to < 1.6s 😮.
You don't believe it? Check it out here to clear your doubts.

Note: While my personal website is built with Nuxtjs (Vue.js), all of the tips I'll be sharing could be easily implemented in whatsoever technology/framework you use.

Light house Report 🚀

Without much Ado, let's dive into the tips.

1. Lazy load image:

Lazy loading image in it's simplest term means waiting for your website contents to appear before displaying images asynchronously. Although you should show a placeholder - like a gray box - notifying the user that an image will be loaded here.

Why lazy load images?

Images could weigh alot most time, and this can have a negative impact on the time visitors have to wait before they can access your website content.

How to lazy load image

Most front-end frameworks (bootstrap, materialize, chakra ui) these days provide a component to easily lazy load images on your website, kindly consult their documentation for more info; And if you're using just traditional HTML, CSS and JavaScript - this article might be helpful

---

Below is an example of lazy loading with BootstrapVue

<template>
  <div> 
     <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1">
     </b-img-lazy>
  </div>
</template>
  <script>
  export default {
   data() {
    return { 
    mainProps: { 
    center: true, fluidGrow: true, blank: true, blankColor: '#bbb', width: 600, height: 400, class: 'my-5' 
   } 
  }
 },
 methods: {
 getImageUrl(imageId) {
   const { width, height } = this.mainProps
   return `https://picsum.photos/${width}/${height}/?image=${imageId}`
    }
  }
}
 </script>

2. Avoid unused component

In the first version of my website, I was using vue-ionicons and I'd imported a whole icon set globally 🤦‍♂️.
You could image how long a user will have to wait before hundreds of icon components (that I'm not really using in the website) are loaded. That wasn't funny really 😬

If using an icon component for example, avoid declaring the whole icon set as a global component.

---

Import only the icons you'll be using - unless your website will be using 90% of the icons, which is very unlikely.

✔️

import IconName from 'vue-ionicons/dist/js/icon-name'
Vue.component('my-icon', IconName)

✖️

import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
Vue.use(AllIosIcon)

3. Delete useless code block

90% Developers are guilty of this - We all have that useless code block (although its commented), but we wouldn't want to delete them thinking they might be an answer to our questions later on 😅
One thing I do is create a temp file where I keep such code. So as not to make my main files bulky

Extra: Minify your CSS and JS files

If your website is built the traditional way, with no front-end library. Minifying your assets could also help in making your web pages load really faster.
There's this awesome VSCode extension I use - minifyAll - it helps you minify your files in one click. It's blazing fast and.... it's the best out there.

Conclusion

This tips are in my own opinion (IMO), if you have a conflicting view, a better approach or tips like this generally. Kindly drop them in the comment box, I really enjoy learning.

And..., my portfolio source code is hosted publicly here on GitHub. I'll appreciate your ⭐.

You can always reach out to me on twitter, if there is anything I can help you with.

Thanks for reading 🤝

Comments

[Mārtiņš Briedis]

Check if your server uses gzip for serving content.

[Paolo]

gzip or brotli ?

[Asaolu Elijah 🧙‍♂️]

Another great tip, thanks Mārtins

[Haider Ali Punjabi]

I also redesigned my portfolio a couple of weeks ago, and optimized it a lot. Here's my post about it

Redesigning My Website - Automation, Custom SSG & Optimisations

Haider Ali Punjabi ・ Aug 2 ・ 8 min read

#python #css #javascript #webdev

[Jose Gracia Berenguer]

Hey, thanks for showcasing my extension in your post ♥️♥️. Great job with page btw!

[Aderibole Oluwajuwon Feyisayo]

Nice article 👌👌.
Lazy loading components and code splitting also helps.

[Asaolu Elijah 🧙‍♂️]

True ✔️
Thanks for the tip chief 🙇

[Jasper Stephenson]

Nuxt minifies all built code by default! No need to do it manually.
nuxtjs.org/api/configuration-build...

[Asaolu Elijah 🧙‍♂️]

You're right Jasper.

That was an extra tip for whoever is using traditional HTML, CSS and JavaScript.

[Adam Greenough]

Why not 100? 😄

[Jeff Chavez]

This is really cool!

[Asaolu Elijah 🧙‍♂️]

Thanks for your kind review Koray.

[Jane Tracy 👩🏽‍💻]

Love the website. It's absolutely amazing : )

[Asaolu Elijah 🧙‍♂️]

Thank you Jane ⭐

[Kurt Starck]

Try Nextjs for finer control of ssr/isr/csr