Lighthouse is an automated open-source tool from Google, 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 relating to performance, accessibility, best practices, SEO, and compatibility with Progressive Web Apps. In this article, we'll 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 Lighthouse-enabled browser). If you haven't already installed it, download it from the official Google Chrome website and install it on your computer.
• Access your PrestaShop store by entering the URL in Chrome's address bar.
• Open Chrome's development 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 you have opened DevTools, proceed as follows to launch an analysis with Lighthouse:

• Click on the "Lighthouse" tab in the Chrome DevTools top bar. If you don't 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 wish to analyze (Performance, Accessibility, Recommended Practices, SEO, and PWA).

• You can also configure simulation conditions, such as the type of connection (3 G, 4 G) and whether 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: Interpreting Lighthouse results

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

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

By clicking on one of the categories, you will get a detailed report for that category:

And if you scroll down a little, you'll get recommendations for optimizing your site:

By clicking on one of the items, you'll get explanations that will help you understand and solve the problem you've identified:

 

Step 4: Understanding color icons in Lighthouse reports

In the reports generated by Lighthouse, you'll find colored icons that help you quickly identify the type of recommendation or problem being reported. These icons help you prioritize the actions you need to take to improve your site. Here's what each color means:

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

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

 

Frequently asked questions

How can I solve the problems reported by Lighthouse?

Each suggestion in the Lighthouse report is accompanied by documentation explaining the problem and proposing 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 a score of 100 required for each category?

No, in fact, very few sites achieve these scores. For example, the scores shown above are for the Google Chrome download page. The ideal is to obtain the highest possible scores by solving the maximum number of identified problems.