Lighthouse Best Practices audit: How to optimize your score

Introduction to Lighthouse Best Practices

Welcome back to our Valido blog series on Lighthouse metrics! In our previous articles, we talked about the concept of Lighthouse scores as it relates to ecommerce, and subsequently explored how to optimize accessibility for your online store. This time, we dive into Best Practices, another essential Lighthouse metric that evaluates your website against industry-standard guidelines. We look at why performing this audit is important, as well as discuss practical strategies to monitor and optimize your Best Practices score. 

What does the Best Practices audit consist of?

Generally, the term “best practice” has been commonly used in organizations to describe commercial or professional procedures that are accepted or prescribed as being the most effective to produce a desired outcome. It could also be described as a set of guidelines or a set of working methods that is best to use for a particular area, business, or industry.

While Lighthouse metrics are generally perceived as performance indicators, the Best Practices metric in particular evaluates your website’s adherence to modern standards of web development, covering areas related to performance, security, user experience, and proper use of web technologies. 

“The best practices audit in Lighthouse checks whether your page is built on the modern standards of web development.”

Sounds vague / complex? Don’t worry, Here’s an easy to understand description of the areas checked in the Best Practices audit:

General best practices

This area checks for fundamental best practices that apply to all websites. It includes aspects such as having a valid doctype declaration, providing a suitable title for each page, and ensuring that the page is mobile-friendly with optimized images.

Make your page fast

This audit check focuses on optimizing the performance of your website, making it load quickly and respond swiftly to user interactions. The audit examines factors like minimizing server response times, leveraging browser caching, and improving scrolling performance for users.

Make your page secure

This area checks for security-related best practices to protect your website and its users. It ensures that your site is served over HTTPS, which encrypts data transmission between the browser and the server. It also verifies if your site has implemented secure practices to prevent malicious activities, such as cross-site scripting (XSS) attacks.

Create a good user experience

This audit evaluates the overall user experience of your website. It looks at aspects like having a responsive design that adapts well to different screen sizes, ensuring interactive elements (buttons, links) are easy to tap on mobile devices, avoiding intrusive interstitials (pop-ups), and providing a clear and easily understandable website structure.

Avoid deprecated technologies

This audit focuses on identifying the use of outdated or deprecated technologies in your website. It encourages using modern, widely supported web technologies and discourages the use of deprecated HTML tags, CSS properties, and JavaScript APIs. By avoiding deprecated technologies, you ensure your site is usable with the latest browsers and devices.

Diagnostic audits

This audit currently just lists all the front-end JavaScript libraries your page uses. However, this area could be expanded in the future.

In some cases, the audit looks at important standards in web development that are not necessarily perceived by the user. For example, the general best practice checks whether browser errors are logged to the console, which upon resolution could remove vulnerabilities that could possibly impact your website down the road. 

How is the Best Practices score measured and monitored?

Basically, the Lighthouse Best Practices audit performs checks to find opportunities to improve the overall code health of your ecommerce website.

Just like all the other Lighthouse metrics, your Best Practices score is graded on a scale of 0 to 100. If your score is between 90 and 100, it indicates that your ecommerce website is well optimized for page speed performance, security, and is likely to provide an excellent user experience. 

There are a number of tools online which can help to measure your website’s current score. Automated tools such as Valido Web Score not only can monitor Lighthouse scores over time, it can also continuously test your website, send alerts of performance issues, generate solutions to optimize your Best Practices score, and benchmark your scores against competitor stores.

In addition, Valido Web Score also has Google PageSpeed Insights integrated. The difference between Lighthouse and PageSpeed Insights is that Lighthouse only uses lab data to measure the performance of your pages, whereas PageSpeed insights uses both lab and field data.

Lab data reflects how hypothetical users may experience your site. In contrast, field data reflects how real users experienced your website. 

Strategies to optimize your Best Practices score

Now that we know what the web best practices are and how to monitor it, let’s look at the top strategies and actions to optimize your score. 

First and foremost, review the Lighthouse Best Practices report breakdown of your score to see what metrics you need to improve. These will be labelled in red (poor) and grey (needs improvement), while the areas that have passed the audit will be shown in green. 

Ideally, you should resolve all the areas highlighted in the report. Here are some tips that can immediately resolve the pain points affecting your score:

Secure your website with HTTPS:

Enable secure HTTPS connections on your website by acquiring and implementing SSL/TLS certificates. This protects your user data and ensures that your site is trustworthy for ecommerce transactions.

Regularly update software and plugins:

Keep your Javascript libraries, content management system (CMS), themes, and plugins up to date. Regular updates help patch security vulnerabilities and ensure your website remains secure and optimized.

Optimize website speed and performance

Interestingly, improving your Lighthouse Performance metric directly improves your Best Practices score. This consists of optmizing your website’s loading times and minimizing render-blocking resources. Other noteworthy tips include avoiding the document.write() HTML method and using passive listeners to improve scrolling performance.

Embrace mobile-friendly design

Lighthouse places plenty of emphasis on having a responsive web design, therefore it is crucial that your ecommerce site provides a seamless experience across various devices. 

Carefully analyze specific requirements of your site

To understand how specific areas of the Best Practice metric can be improved, it is important that you do not just rely on the reports alone without analyzing specific requirements of your ecommerce site. In the case of images for example, you may prefer to use pre-loaded LCP elements on your site, whereas in other instances such as product images on a PLP page, it is probably a better idea to use lazy loading.

With Valido Web Scores, you can utilize AI to generate practical solutions to resolve problems detected through Lighthouse.

Implement Content Security Policies (CSP)

Simply put, Content Security Policies define trusted sources for scripts, stylesheets, and other resources, reducing the risk of code injection attacks. 

Handle errors effectively

It is generally good practice in web development to: 

• provide clear and concise error messages through the console.
• utilize proper HTTP error codes. 
• guide users toward resolving errors. 

Effective error handling enhances the user experience (and obviously improves your score as well).

Regularly back up your website

One of the most overlooked (yet most crucial) tip that you should implement are regular website backups. Although your score is not impacted by not doing so, it mitigates data loss and ensures quick recovery in case of unforeseen incidents. Just as important as optimizing your score is maintaining a high Best Practices score.

Conclusion

We hope this article has provided you with adequate insight on what the Best Practices score is, why it is important, and how to optimize it the best way possible. 

While improving your Best Practices metric is an important step to improving the overall performance, security, and user experience of your ecommerce, it is also important to take into account other Lighthouse and Web Vitals metrics which we have covered and will cover in future blog articles. 

In addition, having a comprehensive testing and monitoring app such as Valido Web Score allows you to evaluate critical metrics across lab and real-world field data, while also gaining actionable insights and easy to understand reports on how to optimize your scores.

Start improving your Lighthouse scores today, with Valido.

Leon Lau

Digital UX, writing about the latest ecommerce trends.