D. Lytras
Dimitrios Lytras

Lighthouse takeaways

July 16, 2018
4 minutes read

Lighthouse is an awesome tool for Google that audits any web page for its performance, accessibility and more. You can run it out of Chrome DevTools (Audits tab) or as an NPM package.

After some tweaking that I'll go through in a bit, these were my scores.

scores

Happy, happy colours! The full report can be found here

Immediate fixes

  • No opener

    Opening new links in a new tab with target='_blank' are pretty common. The initial problem is that this new page will run on the same process as our very own site. Consequently, if the target one has some busy Javascript code to run, this will seriously affect the performance of our site.

    Most importantly though, using rel='noopener' prevents a pretty serious vulnerability. By navigating using target='_blank' the target website will have access to the window object via the window.opener attribute. In that case, if the malicious website triggers something like the following window.opener.location = newURL it will redirect our page to anything, and quite possibly something NSFW.

    You can check it in action right here

    This was an awesome find, Lighthouse. Thank you.

  • Accessibility

    Things I've changed

    • Added labels in the contact form inputs - silly oversight of mine
    • Included title attributes for SVGs - both for those which act as links and those who are purely for display
    • Adjusted font-size for certain components
    • Fixed some conflicting Ids for SVGs that get repeated. (certain SVGs needed to have path Ids so that LinearGradient would work)

    I've also not implemented one last suggestion which was to have better background/foreground contrast. This one was referring the blue section titles. I find it hard to change my theme - if I was working on a web app, this would be a no-brainer, but for now I'll stick with the current implementation.

    Here's my reference guide on why certain changes are needed.

  • Misc fixes

    Next up, I've made some modifications in my manifest in order to make the PWA tests happy.

    After that, I've noticed that I was missing the lang attribute in my HTML file 😳😳😳😳

    Thankfully no SEO changes were needed - I'm in total disbelief.

Possible extensions

  • Font-loading

    Font-loading is the bane of my existance. I use Montserrat and Nunito, and I have to fetch them everytime from the Google fonts servers. This is specifically bad for connections with bad reception.

    The obvious solution is to self-host them. That being said I'm experimenting with various solutions like installing them through NPM instead (#1 & #2). It's something that really interests me, so I've postponed it until I have the time to read more about the most efficient ways to handle font-loading.

    In anyways, for the rest of my projects, I just use system fonts which is a pretty sensible thing to do.

    edit: Now I'm self-hosting them.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}
  • Gatsby 2.0

    Gatsby v2 is just around the corner, and I can't wait to see what these guys have been up to. Unfortunately, I didn't have the time to follow through the changes but will do so once it's official. From what I've gathered from the Twitter reactions, there are some solid performance boosts. Excited and slightly worried about the migration.

    edit: What what, the website is now using v2!

Wrapping it up

Lighthouse is a really handy tool, backed from the guys you want to impress for page rankings. I love having it a tab away from my favourite debugging tool, and it gives the ability to catch those pesky, easy to miss cases.

Will be using it extensively, give it a go today!

Thanks for reading!  ❤️
Due to privacy concerns, I've decided to remove Disqus.
Until I settle for another commenting solution, you can share your thoughts with me via e-mail
Back to Posts