Lighthouse is an automated open-source tool from Google that is integrated into the DevTools of Chrome, Opera, Arc, Edge... (non-exhaustive list). It is designed to help developers improve the quality of their web pages by providing audits related to performance, accessibility, best practices, SEO, and compatibility with Progressive Web Apps. In this article, we will explain how to use Lighthouse to analyze and optimize your PrestaShop store.

Step 1: Access Lighthouse via Chrome DevTools

To begin your analysis with Lighthouse, follow these simple steps:

• Open Google Chrome (or another browser integrating Lighthouse). If you haven't installed it yet, download it from the official Google Chrome website and install it on your computer.
• Access your PrestaShop store by entering the URL in the Chrome address bar.
• Open Chrome Developer Tools by pressingCtrl+Shift+I (orCmd+Option+I on Mac), or right-click on any page of your site and select "Inspect".

Step 2: Use Lighthouse to analyze your site

Once the DevTools are open, follow these steps to run an analysis with Lighthouse:

• Click on the "Lighthouse" tab in the top bar of the Chrome DevTools. If you do not see this tab, click on the two small arrows on the right to scroll through the available tabs.

  

• Configure your audit by selecting the categories you want to analyze (Performance, Accessibility, Best Practices, SEO, and PWA).

• You can also configure the simulation conditions, such as the type of connection (3 G, 4 G) and if you want to run the audit in mobile or desktop mode.

• Click on "Analyze page load" to start the audit. Lighthouse will analyze your page and generate a detailed report.

Step 3: Interpret the results of Lighthouse

The report generated by Lighthouse will give you a score for each category tested, as well as detailed recommendations to improve your site:

• Performance: Optimize the loading time and interactivity of your site.
• Accessibility: Make sure your site is usable by all users, including those with disabilities.
• Recommended practices: Check security and other good web development practices.
• SEO: Improve your site's visibility on search engines.
• PWA: Ensure that your website can be used as a progressive web application.

By clicking on one of the categories, you will have a detailed report for the latter:

In addition, by scrolling down a bit, you will get recommendations to optimize your site:

By clicking on one of the items, you will have explanations allowing you to understand and solve the identified problem:

Step 4: Understanding the color icons in Lighthouse reports

In the reports generated by Lighthouse, you will find colored icons that help quickly identify the type of recommendation or problem reported. These icons make it easier to prioritize the actions to be taken to improve your site. Here is what each color means:

• Red (Error): These icons indicate critical errors that require immediate attention. They often indicate problems that can have a direct and significant impact on the user experience or site performance.
• Orange (Warning): Orange icons identify warnings, which are less critical than errors but still deserve to be examined. These issues can affect the optimization of the site or cause inconsistencies in the user experience.
• Green (Passed): Green icons accompany the items that have passed the Lighthouse tests. These are strengths of your site that meet the recommended standards in terms of performance, accessibility, best practices, and SEO.
• Blue (Information): Blue icons provide additional information that is not directly related to problems but can offer insights into site configuration or suggestions for future improvements.

Each of these icons appears next to the test results in the Lighthouse report, allowing users to quickly understand the status of each analyzed element and determine priorities for optimizing their website.

Frequently asked questions

How to solve the problems reported by Lighthouse?

Each suggestion in the Lighthouse report is accompanied by documentation that explains the problem and proposes concrete solutions. Click on the "Learn more" links for detailed advice.

Can Lighthouse be used for sites other than those built with PrestaShop?

Absolutely, Lighthouse is a versatile tool that can be used to analyze any website, regardless of the underlying technology.

Is it necessary to have a score of 100 for each category?

No, by the way, very few sites get these scores. For example, the scores presented above are those of the Google Chrome download page. The ideal is to get the highest possible scores by solving the maximum of identified problems.