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 🤝