Lighthouse Scores Checklist

Lighthouse Scores are not a ranking system for which is the prettiest lighthouse to be built, but if it was, Konabos.com would still score well. 

Lighthouse scores are a measure of the performance and quality of your webpages; and this is primarily important for two reasons: 

1. Google search will use your lighthouse score when deciding your page rank and page rank determines which sites appear on the important first page of Google.  The data is a little old, but a 2014 study suggested 71% [1] of Google traffic went to results on the first page with only 4% going to the second page.  
    
   Therefore, you need to appear on the first page. 
2. It also improves the user experience by making you focus on image size, page speed - particularly on mobile, and accessibility.  
    

It turns out, as humans, we are very impatient and for every second delay, in loading time, there is a corresponding drop-in conversation rate of 4.42% [2]. Shockingly, Google Researchers identified that in 2018 the average web page took over 15 seconds to load [3]. 

Today, Google is rewarding websites with a better page ranking because it assumes you are giving the user a better experience if your Lighthouse Scores in the optimal range.  

The Key Areas 

When determining your Lighthouse Score Google focuses on the following key areas: 

• Performance 
• Accessibility 
• Best Practice 
• SEO 
• PWA (Progress Web App) 
• not given a score, it’s either there or it’s not 
• We won’t discuss this today 

I will look at each area in turn and provide a list of questions about how you can improve each of these areas. Of course, this list of questions is not exhaustive, but I hope they start you thinking.  

If you need help or support to answer any of these questions, please feel free to reach out to us at Konabos and we will be more than happy to help you. 

Performance 

Performance is all about speed, how quickly does your webpage render on the screen and become usable. I have highlighted “usable” because it isn’t just about how quickly does something get displayed to the user, the user needs to be able to interact with it. Otherwise, it is like having a shop with a locked door. 

What questions should you be asking when looking to improve website performance? 

1. Are you using a Digital Asset Management tool and does it support dynamic sizing and formatting of images? 
2. What third-party JavaScript libraries are you including? Are they needed and can you load them last? 
3. How is your own JavaScript structured? Can it be broken down into smaller units? Can you delay loading it until a later time during the page load? 
4. What data can you cache to avoid expensive backend requests to other systems? 
5. What content can be pre-generated and or stored statically? 
6. Are you using a Content Delivery Network (CDN)? Can you use a CDN? 
7. Do images have defined heights and widths to avoid layout shifting? 
8. Are we compressing and minifying JavaScript, CSS and HTML? 
9. Can we load data via an API after the pages have loaded vs doing it on the server when the page is created? 

Accessibility 

Accessibility can be a bit of an afterthought in web development, which is a mistake, a more accessible site makes a better user experience for everyone, not just users with a disability. Accessibility covers a wide range of things, including making sure images have descriptions, text and background colours are optimally contrasted, links have clear labels, and more. 
 
Let’s look at some questions to ask about accessibility? 

1. Do you have a description for each image on the page? This not only helps visually impaired users but also boosts your SEO ranking and improves the experience for those who may have images turned off! 
2. Do you have links that have labels like “Read More”, “Discover Now”? If you do, have you given them a more descriptive title as well? 
3. Where you have text on a background colour, have you checked to see if there is enough contrast? Use a tool like Web Aim’s contrast checker. 
4. Have you run your site through any free online WCAG checkers? 
5. What language does your website use? Is it written with the target audience in mind? 
6. Do all your form fields have labels that describe the data that needs to be entered? 
7. How easy is it to navigate your website using just a keyboard? 

Best Practices 

Best Practices refers to those elements on a website that should be the basics of delivering a high-quality product. Best Practices tend to be technical in nature, and often need to be tackled by your development team. 

Questions to ask your dev team around website best practices: 

1. Does your website use HTTPs? This means that traffic to your website comes through a secure route and a visitor’s data won’t be exposed through any input forms you have.  
2. What third-party libraries have been included in your project? Do they have any security vulnerabilities?  Use a database like https://security.snyk.io/ to check them out. 
3. Do you get JavaScript or other errors in the browser console? Can you fix these? 
4. Have you indicated the document type and language of the page? 
5. Are you requesting permissions for access to notifications and geolocation at the appropriate time or just on every page load? 
6. Do you collect data responsibly with clear policies for privacy, cookies, and terms of use? 

SEO 

Finally, we have Search Engine Optimization (SEO). It is not surprising that Google includes this as a category in Lighthouse scoring. Although this score has been defined by Google, it will help your site rank better in other search engines as well. 

1. Does your page have basic metadata, such as title, description, and keywords tags? 
2. Are links descriptive or generic, i.e. “Learn More” vs “Discover more about dogs”? Where you want to use a generic phrase, have you set a title? 
3. Do you have a canonical URL to avoid pages being indexed twice? 
4. When pages have errors or can’t be found, do they return the correct HTTP status codes? This is important to ensure pages are delisted correctly. 
5. Do you expose structured metadata (Schema) and if so, is it valid? Structured metadata might be used by blogs to detail who the author is, or events so that they can be easily added to a calendar. 
6. Have you correctly indicated which pages should not be indexed? 
7. Do you have a robots.txt file? 

Mobile vs Desktop 

When testing your Lighthouse scores, you need to ensure that you test both the mobile and desktop versions of your website. Google will test both versions and makes different assumptions about the size of the screen the user will have, as well as their connection speed. 

Why does it do this? 

On a mobile device the layout of a page is very different to a desktop. To support the smaller screen size, websites will often hide elements, or render different images that are smaller or of lower quality to increase speed. 

Google wants to test the differences to ensure that a mobile user’s experience closely matches a desktop users experience.  

Mobile internet users now outweigh desktop users, so you should be testing mobile first because they are likely to be your largest audience. 

In Summary 

Getting a good Lighthouse score is not just about SEO but also a great indicator of a good quality website. It won’t just boost your Google ranking but will improve your user experience as well.  

The questions listed above are just the tip of the iceberg and if you need help answering any of these questions or need help improving your Lighthouse score, please reach out to us at Konabos. 

 

Citations: 

[1] https://reputation911.com/do-people-click-past-the-first-page-of-google/ 

[2] https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5)   

[3] https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-shopping-ecosystem-page-load-speed/