Recently I heard about Chrome’s Lighthouse extension for auditing websites and web apps. Lighthouse analyses websites for a few key metrics and suggesting ways they can be improved if needed. These include:
- Progressive Web app improvements
- Performance
- Accessibility
- Best Practises
While I don’t currently build web applications, I think it’s still a good test to use to find where improvements could be made, even so, I’ll learn something for the future.
acarrick.com
Of course, since I’m not developing a progressive web app, I get a lowish score. But there are things I can improve.
Progressive Web App
There’s not too much I can do improve the PWA score since its complaints include:
- Does not register a Service Worker
- Does not respond with a 200 when offline
- User will not be prompted to Install the Web App
- Is not configured for a custom splash screen
- Address bar does not match brand colors
- Page load is not fast enough on 3G
I can add some chrome branding which is pretty easy, just a meta tag. The page load I can try to improve but may be limited by my hosting.
Performance
The major performance improvements it suggested included:
- Reduce render-blocking scripts
- Reduce render-blocking stylesheets
- Offscreen images
- Enable text compression
I’ll try to rearrange my scripts and CSS to reduce the render blockages…
Accessibility
The only complaint it raised regarding accessibility was: “<html> element does not have a [lang] attribute.” I guess this is for screen readers. It will be easy to fix.
Best Practices
There were 3 issues that Lighthouse raised regarding general best practices:
- Uses document.write()
- Does not open external anchors using rel=”noopener”
- Manifest’s short_name will be truncated when displayed on homescreen
document.write() I use to generate the email address for spam prevention and Statcounter uses it. I’ll look into it for my own knowledge. Opening external links with rel=”noopener” is something to do with tab process isolation. I don’t have a manifest to have a short_name, but anyway.
Improvements
I added a <meta name="theme-color" content="#551A8B"> to the <head>.
Next, I simply moved the scripts down the bottom of the <body> element and marked the JQuery import as async as directed.
According to the guide, the render blocking CSS seems difficult to fix at this time and maybe it’s not ideal due to the imagery used.
The language fix was super easy – just update the head element to:<html lang="en">.
For the second Best Practice suggestion I just added a “rel=”noopener” ” to each external link.
According to the documentation, this warning is also triggered if the page title is > 12 characters. My name is 15 characters with space so I’m not changing this.
Result
Ta Da!
Turns out though that I even though I added the branding meta tag, Lighthouse looks for a manifest too. So even though I now have purple branding on mobile browser address bars, I don’t get the points yet!
