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 🤝