Hey everyone,
Recently, I have been obsessed with the minimalist, Vercel like aesthetic but I was always disappointed with the performance of most templates out there.
So I set myself a challenge: building a landing page template from scratch that could actually hit the high 90s on PageSpeed out of the box, just using clean HTML, Tailwind CSS and a little JavaScript.
It was a brutal process and I learnt a lot, so I am here to share what I learned with other developers:
Mainly what was killing performance was loading the entire font file (for example from Google Fonts), so I started by only including the font weights that I was actually using in the font link.
The JavaScript file itself can be render blocking, so you should defer it by adding a defer attribute to your script tag. This makes sure the browser, downloads the file in the background, rather than blocking rendering of the page and then downloading it. In my case, I was using Vite (a build tool) which automatically defers the JavaScript File.
Lazy loading images is extremely important. Lazy loading allows the browser to only download the images in, once the user is actually about to scroll to them. It can be added by using the loading = "lazy" attribute, I also used decoding = "async" so that it will happen in the background.
After a lot of tweaking, the final result was a starter kit that scores 99/100 on dekstop and a strong 93/100 on mobile. You can check it here:
https://harsh-saas-template.vercel.app/
This started as a personal project to prove i could do it however, since this can be useful for developers so I decided to package it up for Gumroad.
You can check it out here:
https://harshmalhotra.gumroad.com/l/apexui
I'd love any feedback on the page, design, performance etc.
Top comments (0)