Hello! Here we are again with another blog and this time it is about an easy way to check a website's performance.
Being a code newbie, I am still trying to sharpen my skills in building and I must admit that the closest thing to performance that I have encountered is from algorithms, Big-O, time complexity and things. I never really thought to check how the small projects I built would perform.
You guessed it right! We'll use Lighthouse! Why did I not know about it sooner?
First, What is Lighthouse?
According to developers.google:
Lighthouse is an open-source, automated tool for improving the quality of web pages. ... You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did.
I actually stumbled upon this from a post by Emmanuel Jose on LinkedIn and mentioned how he was able to optimize his portfolio's general performance using Lighthouse.
So for this blog, we'll try it on my portfolio!
Where do we access Lighthouse and what are we expecting to see?
You can open your console/inspect and look for 'Lighthouse' on your Chrome devTools.
Once there, you can filter out what you want to see from the report, but for demonstration purposes, I went with all under a mobile device.
When you click 'Generate report', let is do its thing and should take a minute or 2. Watching it is my fave part! Seeing the mobile be ran and inspected looks cool!
DUN DUN DUN DUN!
Results
WOAH. I was expecting it to be worst. But this looks good to start off! What do you think?
So you might ask, what do we do with the results? This is the best part! You can scroll down and you'll see breakdowns of what things you can do to optimize a certain concern based off of the results.
Example from mine are:
- This is listing down the things I have an opportunity to work on or cleanup to get better results. There are links at the bottom of of each to learn more in detail what to look for.
- This part of the results amazes me the most and it even shows specific elements where the area of concern is. This helps a lot in revising your code & learn more about manipulating the elements in the DOM.
- Notice that it also provides the type of element, its className or id plus a rendered image where it's exact location.
There is a lot of work needed to be done here as you can tell from the list. I take this as a learning experience to not be scared and tinker with your code, so test, get results and optimize!
If you get up to this part, Thank you! I am currently working on optimizing my portfolio based off of my Lighthouse results. Next blog might be an update to my optimization journey! Who knows ^_^ _
Top comments (0)