My learning diary

First Lighthouse Report for

I ran my first Lighthouse report on this site. There’s a bunch of improvements to make. As of now, I managed to resolve some of them. I put up the links to the before and after Lighthouse reports at the end of this post. Please feel free to take a look at them.

A summary of the improvements I made:

  1. Include lang attribute to the html element i.e. <html lang="en">.
  2. Added rel="noopener" to external links.
  3. Increase colour contrast between dark turquoise font and white smoke background.
  4. Replace the “Read more” link to “Continue reading X” where X is the title of the post.

I may have missed out some stuff since I wrote this post after implementing the improvements. My final score is still not perfect. I will need to put more effort into styling if I want to fix “non-sequential headings”. I chose h5 after h1 because h2 is too big and p is too small.

I ran the Lighthouse report for mobile after generating the reports for desktop. I knew I had to increase the size of the social media icons to make them more fat finger-friendly. I knew this because I had problems tapping on the icon I want. I should be focusing on this problem ASAP.

Lighthouse reports:

  1. Lighthouse report for desktop (before)
  2. Lighthouse report for desktop (after)
  3. Lighthouse report for mobile (after)