loading...
Cover image for How I Made My Personal Website 10x Faster โšก

How I Made My Personal Website 10x Faster โšก

asaoluelijah profile image Asaolu Elijah ๐Ÿง™โ€โ™‚๏ธ ใƒป3 min read

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 ๐Ÿš€

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.
minifyAll VSCode extension

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 ๐Ÿค

Discussion

pic
Editor guide
Collapse
briedis profile image
Mฤrtiล†ลก Briedis

Check if your server uses gzip for serving content.

Collapse
asaoluelijah profile image
Asaolu Elijah ๐Ÿง™โ€โ™‚๏ธ Author

Another great tip, thanks Mฤrtins

Collapse
iampaoloxd profile image
Paolo

gzip or brotli ?

Collapse
haideralipunjabi profile image
Collapse
adamgreenough profile image
Adam Greenough

Why not 100? ๐Ÿ˜„

Collapse
juboy profile image
Aderibole Oluwajuwon Feyisayo

Nice article ๐Ÿ‘Œ๐Ÿ‘Œ.
Lazy loading components and code splitting also helps.

Collapse
asaoluelijah profile image
Asaolu Elijah ๐Ÿง™โ€โ™‚๏ธ Author

True โœ”๏ธ
Thanks for the tip chief ๐Ÿ™‡

Collapse
jctechdev profile image
Jeff Chavez

This is really cool!

Collapse
midblue profile image
Jasper Stephenson

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

Collapse
asaoluelijah profile image
Asaolu Elijah ๐Ÿง™โ€โ™‚๏ธ Author

You're right Jasper.

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

Collapse
tracycss profile image
Jane Tracy ๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป

Love the website. It's absolutely amazing : )

Collapse
asaoluelijah profile image
Collapse
koraylinux profile image
Koray Biรงer

I love your website. It's very simple, pure and informative. Definitely deserve that warp speed.

Collapse
asaoluelijah profile image
Asaolu Elijah ๐Ÿง™โ€โ™‚๏ธ Author

Thanks for your kind review Koray.