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 ๐ค
Top comments (15)
Check if your server uses gzip for serving content.
gzip or brotli ?
Another great tip, thanks Mฤrtins
I also redesigned my portfolio a couple of weeks ago, and optimized it a lot. Here's my post about it
Redesigning My Website - Automation, Custom SSG & Optimisations
Haider Ali Punjabi ใป Aug 2 ใป 8 min read
Hey, thanks for showcasing my extension in your post โฅ๏ธโฅ๏ธ. Great job with page btw!
Nice article ๐๐.
Lazy loading components and code splitting also helps.
True โ๏ธ
Thanks for the tip chief ๐
Nuxt minifies all built code by default! No need to do it manually.
nuxtjs.org/api/configuration-build...
You're right Jasper.
That was an extra tip for whoever is using traditional HTML, CSS and JavaScript.
Why not 100? ๐
This is really cool!
Thanks for your kind review Koray.
Love the website. It's absolutely amazing : )
Thank you Jane โญ
Try Nextjs for finer control of ssr/isr/csr