How I Made My Personal Website 10x Faster ⚡
Tags: webdev, vue, javascript, tutorial
Published: 2020-08-28 15:12:15

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](https://asaolu.netlify.app) 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 🚀

![Light house Report](https://raw.githubusercontent.com/AsaoluElijah/portfolio/master/light-house-report.png)

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](https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/) might be helpful
____
**Below is an example of lazy loading with BootstrapVue**
```html
<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](https://github.com/mazipan/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.

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

#### ✖️
```js
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](https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall) - it helps you minify your files in one click. It's blazing fast and.... it's the best out there.
![minifyAll VSCode extension](https://i.imgur.com/bbAhxJj.gif)

### 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](https://github.com/AsaoluElijah/portfolio) on GitHub. I'll appreciate your ⭐.

You can always reach out to me on [twitter](https://twitter.com/asaolu_elijah), if there is anything I can help you with.

Thanks for reading 🤝