DEV Community

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

โœ–๏ธ

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

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

Top comments (15)

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

Check if your server uses gzip for serving content.

Collapse
 
iampaoloxd profile image
Paolo

gzip or brotli ?

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

Another great tip, thanks Mฤrtins

Collapse
 
haideralipunjabi profile image
Haider Ali Punjabi
Collapse
 
josee9988 profile image
Jose Gracia Berenguer

Hey, thanks for showcasing my extension in your post โ™ฅ๏ธโ™ฅ๏ธ. Great job with page btw!

Collapse
 
juboy profile image
Aderibole Oluwajuwon Feyisayo

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

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

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

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 ๐Ÿง™โ€โ™‚๏ธ

You're right Jasper.

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

Collapse
 
adamgreenough profile image
Adam Greenough

Why not 100? ๐Ÿ˜„

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

This is really cool!

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

Thanks for your kind review Koray.

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

Love the website. It's absolutely amazing : )

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

Thank you Jane โญ

Collapse
 
stardrop9 profile image
Kurt Starck

Try Nextjs for finer control of ssr/isr/csr