Using Google Lighthouse to optimise your mobile site. 

What is Google Lighthouse and how to access it?

Lighthouse is an open source tool provided by Google, designed to help with improving the quality of web pages. To achieve this, it provides audits for performance, accessibility, SEO and progressive web apps. For the purpose of this post, we will focus on Performance and SEO as these are the two most important reports for PrestaShop stores.

Anyone can use it to see how their websites compare to Google's high standards. While there are several speed testing tools available online which provide hard numbers and rankings, Lighthouse uses a different approach: it simulates a website being accessed from an older device, over a 3G connection with packet losses. While most other tests are done under ideal, controlled conditions, Lighthouse will reveal how a website works in real-world conditions.

As this is a tool provided by Google, you will need to use their own browser, Chrome, in order to run it. One option is to open the DevTools (F12) and choose the Audits option. This works in the more recent versions of the browser, so make sure it is up to date. Otherwise, another option is to install the Lighthouse extension which can be downloaded for free from the Chrome Web Store. Once you click on the "Generate Report" or "Perform an audit" option, the auditing process will start and you should have the results shortly.

Understanding the metrics and results.

As mentioned above, the point of Lighthouse is to simulate the conditions in which the average user accesses your website. From their point of view, the content should load immediately and they should be able to interact with your website just as fast.

The performance report provides several useful metrics along with opportunities to improve them:

• First meaningful paint: This represents the time it takes for the first meaningful content to appear on the website. The lower the value, the better. Users interpret seeing the content as a response to their request so having it displayed as quickly as possible, is vital to keep their attention.
• First Interactive represents the amount of time until the website is minimally interactive. Again, this value needs to be low so that users can interact immediately with the website. Having the content visible is important but the pages have to be responsive as well. They expect to be able to scroll immediately and also to use UI elements like menus right away. Everyone hates a page that seems "stuck" and cannot be interacted with for several seconds.
• Consistently Interactive is the amount of time after which the page is completely interactive, all the UI elements and functions are active and working.
• Perceptual Speed Index shows how quickly the contents of a page are visibly populated
• Estimated Input Latency represents the time it takes a page to respond to user input. Users expect this to be unnoticeable (for example touching an "Expand" or "Like" button or icon should instantly work). If the latency is larger than 50 ms (0.05 seconds) then the page is perceived as laggy or sluggish.

These primary metrics are followed by a list of Opportunities and Diagnostics accompanied by detailed information which will help developers increase the Performance Score.

The next vital report is the one concerning SEO.

Here, Lighthouse checks if the website is optimised for search engines. If any of the audits in this section have failed, solving them will have a beneficial effect on search rankings.

• Font size legibility: Font sizes lower than 16px are hard to read and may require additional interaction from the viewer ("pinch to zoom" or double tap).
• Has a <meta name="viewport"> tag with width or initial-scale: Without a viewport meta tag, pages are rendered at desktop widths on all devices and then scaled to fit the mobile screens.
• Document has a <title> element: An overview of the contents on a page.
• Document has a meta description: A summary of the page content which may be included in the search results page
• Page has successful HTTP status code: These are the 2XX or 3XX HTTP status codes. Search engines may not properly index pages with 4XX or 5XX status codes.
• Links have descriptive text: Descriptive link text helps search engines understand your content.
• Page isn’t blocked from indexing: The robots.txt file can block certain crawlers from indexing pages.
• Document has a valid hreflang: hreflang allows crawlers to discover alternate translations of the page content.
• Document has a valid rel=canonical: Canonical links suggest which URL to show in search results if a single page can be accessed from multiple URLs
• Document avoids plugins: Most mobile devices do not support plugins, and many desktop browsers restrict them so it is important for the page to look and function properly by itself and not rely on plugins.