DEV Community

loading...
Cover image for I Got a Perfect Lighthouse Score on My First Portfolio Website!

I Got a Perfect Lighthouse Score on My First Portfolio Website!

prnvbirajdar profile image Pranav Birajdar Originally published at pranav-birajdar.vercel.app Updated on ・3 min read

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 undefined errors and just for that, I am willing to learn and improve my TS skills.

Things I like:

Alt Text

  • 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 Alt Text

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!

Discussion (66)

pic
Editor guide
Collapse
jh3y profile image
Jhey Tompkins

With regards to people bashing on the tech stack used, the design, etc. You do you!

And give yourself a pat on the back for deploying something and trying out new tools. Congrats on trying new stuff and learning along the way. Next is a great choice 👍

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you mate! Appreciate the kind words. 😊

Collapse
adarshaacharya profile image
Aadarsha Acharya 🚀

Awesome website man !
I built my portfolio using Gatsby and after trying Next.js for past few months, I'm planning to migrate to Next. Is this project open sourced? If it is, please provide github link.

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

github.com/prnvbirajdar/Personal-W...

Here you go buddy!

I'd also suggest you go through my previous post. It has a lot of resources for using Next.js to build a blog.

dev.to/prnvbirajdar/list-of-resour...

Collapse
redrogue12 profile image
Edgar X. González Cortés

Man I love this! I am building a website for my sister and was learning next.js to make a static website that pulled her wordpress blog data.

Thanks!

Collapse
adarshaacharya profile image
Aadarsha Acharya 🚀

Thanks mate ! Will check it out.

Collapse
larsejaas profile image
LarsEjaas

How would you compare the two? Of corse it's a no-brainer if you need backend, but what a out strictly SSR-stuff?

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

I think Gatsby is great for SSG since it has tons of plugins specifically catering SSG apps. However there's an added complexity of GraphQL. Someone can correct me if I'm wrong.

From what I have heard and read, Gatsby is entering the Server Side Rendering game as well.

If you look at the NPM downloads though, Next is king rn!

Thread Thread
adarshaacharya profile image
Aadarsha Acharya 🚀

Gatsby doesn't have that much complexity in GraphQL stuffs. Everything is built in you just have to query the stuffs you need in GraphQL playground. Infact found it quite easier to work with.

But the build time of Gatsby is too slow. And the caching isn't that great so you need to restart server time to time which is quite annoying.
Gatsby 3.0 has been released recently which is believed to be quite faster, but haven't migrated to that yet.

Collapse
supportic profile image
Supportic

You could improve on accessibility what lighthouse could not catch.
e.g. your menu toggle button is not toggeling aria-expanded
or you have tabindex=0 on a div around your logo link. The link itself has by default tabindex=0. Use p (block) or span (inline) tags for text elements.

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you for the feedback. I totally forgot about the menu toggle accessibility. Nice catch!

Collapse
pankajpatel profile image
Pankaj Patel

This is some good looking website.

For Blog page, I would recommend to make the Post card bit bigger with more excerpt. and publish date below title (as it is not the important info here)

For Projects, I would recommend to align the project image to right side (alternate end of the text content)

For domains, checkout Bigrock (.com for INR 399 via affiliate bigrock-in.sjv.io/c/1658967/101690...) guessing that you can buy domain in India

Otherwise google, namechap, netlify, cloudflre offer good price on domain names.

Let me know if you need some help setting up.

Collapse
selion05 profile image
Selion05

Just some things I noticed.

  • /about: The footer isn't at the bottom.
  • colors: Hard to read, kind of painful. I don't like black for a dark theme, use dark grays!
  • light theme: Think about readability, people will want to read on you page in the sun or shiny rooms as well and then light theme >> dark theme.

besides that, 👍!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

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.

Collapse
selion05 profile image
Selion05

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...

Thread Thread
prnvbirajdar profile image
Pranav Birajdar Author

Thanks! I got what you're saying. I'll get on it!

Collapse
maureento8888 profile image
Maureen T'o

Great portfolio and awesome on the 100% LH score! Your site is one of the best portfolio I’ve seen in terms of usability, responsive design, and overall layout. Love the process you went by in debugging and learning different tech/languages and figuring out what works best for you! 🙌🏼

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

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!

Collapse
quantuumsnot profile image
quantuumsnot

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

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

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.

Collapse
mazentouati profile image
Mazen Touati

Congratulations Paranav!
Nicely done, I digged the minimalistic approach and the attention to subtle details.

Despite what other mentioned here's what I think.

First, you shouldn't aim to have a perfect score. It does not always reflect a usuable website. I didn't do my homework yet but I bet that none of the most used and visited websites have a perfect score. Yet they are usable and performant.

My second point is related to first one which is having a dark mode only. You mentioned it as a powerful feature. It may be unpopular but dark mode it does not always improve the readability. Personally, it worsen dramatically my reading experience. I start to see all texts doubled. I was having this issue lately for months. I've discovered by chance that I can read better in white background. After, changing all my IDEs and OS hence the visited website to light mode I started to feel much better. So that could be considered an issue in term of accessibility and usability.

Lastly, in recent projects boxes the hover does not behave the same as in the previous section. I've tried with phone vut when I hold tap in the box the blue background does not fill the entire box.

Also consider using theme-color meta tag it would make it neater for phone users.

Keep the good work and never stop improving yourself. Good luck!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Really good suggestions. Thank you for all the feedback. I'll definitely look into adding a light theme, since many folks mentioned that.

I'll also look into the mobile experience of the website. Thanks again!

Collapse
trueneu profile image
Pavel Gurkov

Hm, modesty and humbleness!
"I am a software developer building beautiful interfaces and accessible applications."

The dark mode alone is painful to my eyes.

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Yeah, I'm thinking of adding a toggle button to switch the theme.

Collapse
aalphaindia profile image
Pawan Pawar

Good one!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you Pawan!

Collapse
serhiicss profile image
serhii.css

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!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you! Yeah, I'm probably gonna change the background color and add a light theme.

Collapse
andrewbaisden profile image
Andrew Baisden

Great job getting all of those green 💯

Collapse
nuculabs_dev profile image
Nucu Labs

This looks good, congrats!

Collapse
karthik371 profile image
Karthik371

Website is really cool .. BTW can you please tell me which all font did you use

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Font is Inter. I use this extension to check the font for any website!

chrome.google.com/webstore/detail/...

Collapse
karthik371 profile image
Karthik371

Thanks ☺️..... I was using mobile btw

Collapse
youpiwaza profile image
max

Pretty damn cool, I'd try that.

Collapse
condinoaljoseph profile image
elpmid

aljoseph.co/
Argggggghh so close...

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Hahahaha, I feel your pain. Your website looks super clean and elegant though! Big props.

Collapse
bobbyiliev profile image
Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Good for you Bobby! Love it when you see some Green eh!!

Collapse
ra1nbow1 profile image
Matvey Romanov

Amazing!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you! 😊

Collapse
alonxx profile image
Alonso Diaz

I love it is simple, but beautiful, very good!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you! 😊

Collapse
braydoncoyer profile image
Braydon Coyer

I like the color scheme you have going on. Looks like Lee's website may have been an inspiration. Nicely done all-around!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thanks mate! And yes, I loved his website. It's very minimalistic and clean.

Collapse
pris_stratton profile image
pris stratton

It looks very nice. Loads quick. What more can you ask for!

Would you consider a light mode too?

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

I was kinda lazy but seeing that people are asking for an option, I might do that this weekend. 😅

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited

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.

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

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!

Collapse
jcubic profile image
Jakub T. Jankiewicz

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...

Thread Thread
prnvbirajdar profile image
Pranav Birajdar Author

Yeah, that's true. I'll make sure to improve those numbers! Thanks.

Collapse
rfso profile image
Rafael S.

Clean and straight to the point, congratulations!

Collapse
grenmath profile image
Mathieu Grenier

Nice!! How you deployed in your web host ?

Collapse
hirensakhiya profile image
Hiren Sakhiya

Good Start!

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Thank you! 🙏

Collapse
jonrandy profile image
Jon Randy

I would say you've used way too much tooling for such a simple website

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Absolutely! Totally agree with you on that. This could be a plain HTML, CSS, JS website.

However, my goal was to learn some new technologies, and I wasn't going to build another glorified todo app .

This project gave me a taste for Typescript, Next.js's static props and paths, rendering markdown files, and using a linter. I'm sure these tools could potentially be useful for me in the future.

Collapse
pris_stratton profile image
pris stratton

You reminded me of this;

motherfuckingwebsite.com/

Collapse
spaceofmiah profile image
Osazuwa Agbonze

I laughed reading this... real stuff 💯

Fact is humans appreciate fanciful and beautiful things. More so if we just sticked to the default of everything without pushing to make it more appealing ... advancement wouldn’t be a thing...

Collapse
kwiat1990 profile image
Mateusz Kwiatkowski

Thanks a lot for this recommendation. It's gold :D

Collapse
prnvbirajdar profile image
Pranav Birajdar Author

Hahaha, facts though! 😂

Collapse
mx profile image
Maxime Moreau

Same point of view, but I think the idea was to use/learn technologies/tooling? I already did this for some personal websites so If the tech/tool is not good it's no big deal :)

Collapse
alonxx profile image
Alonso Diaz

For recruiters, that's good

Collapse
jonrandy profile image
Jon Randy

TBH it's not. If I was looking at the site after receiving an application, I would be less likely to proceed further. Using the right tool for the right job is important

Thread Thread
prnvbirajdar profile image
Pranav Birajdar Author

Jon, though I agree that I do have tons of tooling, I feel like every tool has a specific purpose. For example, I used Next.js because I wanted a Static Site Generator, Tailwind because it's a CSS Framework that allowed me to build the site within a week, and TypeScript for type checking. I used a Markdown parser to parse my blog markdowns.

Besides Tailwind, I think most of the tooling was necessary. I'd love to know your thoughts.

Thread Thread
natescode profile image
Nate

Agreed. It’s fine. The job of your website is to show your skills with tooling that you’d use for complex sites. Recruiters mostly care about buzzwords.

If I was interviewing you and saw that site, I’d be impressed. You used different tooling that each had a purpose. You working to get a 100% lighthouse score shows initiative and that you’re willing to learn to improve. Heck, I’ve never made a site that got 100%.

If someone passed you up because it’s “too complex” then they aren’t worth working for. Interviews go both ways.

Keep it up!

Thread Thread
prnvbirajdar profile image
Pranav Birajdar Author

Thank you for the kind words and the detailed response Nate. Really appreciate it!! 🙏