I recently finished building and hosting my personal website. My goal was to keep the website static, clean, and fast. In order to make sure that I was following the best practices, I was also trying to achieve that perfect Lighthouse score.
Here are a few details about the technologies I used:
Next.js
- I knew that selecting the right tools to build a website can be a key to optimizing SEO performance. Since I was building a personal website, I knew I had to use a static site generator. I also wanted to add a blog section that used the DEV.to as a CMS to retrieve my blog-posts. So I knew there was a dynamic aspect to my website as well.
- Using Next.js was a no-brainer since it was the perfect solution for my problem and an added bonus was that I was already comfortable with it.
Tailwind
- As much as I hated using Tailwind on my first project and thought that I'd never continue using this utility framework for any of my further projects, I'm pleasantly surprised to say that this is my third project with Tailwind, and I cannot imagine doing any design work without it.
- I have already made a post about my favorite component libraries using Tailwind and used some of the components from Kutty for this project as well.
Typescript
- This was a pain to learn. For someone who's self-taught and has only worked with JavaScript, I could not see why anyone would spend so much time defining types for every single element or component. However, as soon as I started importing data from DEV.to APIs, I got it. I did not face a single
cannot read property of undefinederrors and just for that, I am willing to learn and improve my TS skills.
Things I like:
- Having a good Lighthouse Score was of prime importance to me, given that this website is an online representation of me as a developer and will potentially be seen by recruiters and fellow developers alike. I am planning to make a separate post about how I achieved the score, but it's fair to say that I am pretty happy with the result.
- I also like the minimalist and clean design. I was planning to add some animations using Framer-Motion but then decided against it, since I wanted to deploy rather than spend another week learning a new technology that I didn't plan on implementing in the first place.
- Google Analytics helps me monitor the web traffic
- Dark Mode only!π
Things I wish to improve upon:
- Add a custom domain name
- I need to add my resume
- Fix some minor bugs in my projects
- Add a copy e-mail functionality to my 'Say Hello' button instead of opening a new blank window
- Add Canonical URLs to my blog page
- Add a comment section at the bottom of every blog page that redirects the user to the specific article on DEV.to.
- Syntax highlight the markdown blogs
Feel free to visit the website. I'd love to hear your thoughts on how I can improve it and I'm very much open to constructive criticism!
Latest comments (67)
Well, I'd say it's short in performance a bit π
lighthouse-dot-webdotdevsite.appsp...
Did you change something in the website?
Thank you so much! Yes, it took me a while to figure out all the kinks but I'm satisfied with the result and glad that so many devs from the community loved it!
Nice, but now go and check Mobile statistics instead of Desktop. It's not that impressive to have perfect score in Lighthouse in desktop mode.
It's still between 90-100 everywhere, so I'm not complaining tbh. π
I'm making changes as we speak, so I will make sure to test the mobile version too. Thanks for the reminder though!
Yes it have very good stats. But also you checked only home page, and I think that most of the people that came to your website do this from Google and land on article page, that don't have that good statistics. Example your most liked article:
pranav-birajdar.vercel.app/blog/re...
Yeah, that's true. I'll make sure to improve those numbers! Thanks.
Very nice website. Good design overall. I agree with others not to use black background. Maybe near black or other dark colors instead.
Keep up the good work!
Thank you! Yeah, I'm probably gonna change the background color and add a light theme.
Great job getting all of those green π―
Just some things I noticed.
besides that, π!
Sorry, I did not understand the first remark.
Dark grays, got it!
Yeah, I am in process of adding a light theme. Many folks suggested that.
On pranav-birajdar.vercel.app/about
I have still black space below your footer because the content is not long enough.
Have a look at e.g. css-tricks.com/couple-takes-sticky...
Thanks! I got what you're saying. I'll get on it!
This looks good, congrats!
I highly doubt 100% Performance is real. I'm on 16c/32t cpu with 12 SSDs RAID 10 and my LOCALHOST tests always float around 95-97%, usually the "Largest Contentful Paint" is the culprit. This happens even when everything is loaded from RAM drive
Anyway the 100% at first 4 Lighthouse circles of hell is somewhat easily achievable without 3rd party libraries - vanilla HTML+CSS+JS. Last year me and a couple of coworkers did a small competition where the goal was to do that below 2 hours ... All of us hit it at around 1:10-15h with average site size 4-5 times smaller and logic error-free excluding some typos in the code. Our conclusion was that the coder will definitely waste more time in setting up the machine for the tests (installing and configuring OS + web-server + database) than coding a site with 100% Lighthouse score from the scratch
I know these scores don't mean much. But I've been told that recruiters sometimes check, and it kinda looks good to have a decent score.
Most of my other projects hover in the 90s and I'm okay with that. It's decent enough.
Nice!! How you deployed in your web host ?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.