How to analyze website performance with Unlighthouse?

What is Unlighthouse?

Unlighthouse is an open-source website analysis tool that uses Lighthouse (a website auditing tool developed by Google) to generate detailed reports on your website’s performance. Here are some of the tool’s key features and benefits:

Features

• Free and open-source
• Uses Lighthouse to generate detailed reports
• Analyzes loading speed, SEO optimization, accessibility and best practices
• Allows you to customize audits to suit your needs
• Can be run from the command line or using a graphical user interface

Benefits

• Easy to use
• Provides detailed, easy-to-understand reports
• Helps identify performance problems and correct them quickly
• Helps improve the user experience and SEO of your website
• Can be used to analyze any website, regardless of size or complexity

Using Unlighthouse, you can easily identify performance problems on your website and quickly correct them. This can help you improve your website’s user experience and SEO, which can lead to increased traffic and conversions.

How do I install and configure Unlighthouse?

To use Unlighthouse, you first need to install and configure it. Here’s a step-by-step guide to installing and configuring it:

1. Install Node.js: Unlighthouse is built on Node.js, so you need to install it on your computer before you can use Unlighthouse. You can download Node.js from https://nodejs.org/en/download/.
2. Install Chrome: By default, Unlighthouse will try to use the Chrome / Chromium installation on your system. If there is none, a Chromium binary will be installed on your system, but the latter option may not work in all cases. You can download Chrome from https://www.google.com/intl/fr_fr/chrome/.
3. Install Unlighthouse: Once you’ve installed Node.js, you can install Unlighthouse using npm (the Node.js package manager) and npx. Open a command prompt and type the following commands:

npm install -g npx
npx unlighthouse --site <URL>Code language: Shell Session (shell)

If the latest version doesn’t work, try an older version, the list is available on the Github repository https://github.com/harlan-zw/unlighthouse/releases, for example:

npx unlighthouse@0.11.6 --site <URL>Code language: Shell Session (shell)

Configuring Unlighthouse

By default the tool works with command-line options, but you can use a configuration file unlighthouse.config.ts located in the root directory.
You can change the name of the configuration file using the configFile option or the --config command-line option.

Unlighthouse can be configured using a configuration file. You can create a configuration file by using a text editor and saving the file in JavaScript format. Here’s an example of a configuration file:

export default {
  site: 'example.com',
  scanner: {
    exclude: ['/wp-admin/*']
  },
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttlingMethod: 'simulated'
  },
  debug: true,
}Code language: JavaScript (javascript)

In this example, we’ve configured Unlighthouse to exclude /wp-admin/-based URLs, to analyze only the “performance” and “accessibility” categories, and to use the “simulated” throttling method. You can customize these settings to suit your needs.

La liste des options disponibles est disponible sur la documentation officielle https://unlighthouse.dev/integrations/cli#configuration.

A list of available options is available in the official documentation https://unlighthouse.dev/integrations/cli#configuration.

Run Unlighthouse with a configuration file

Once you’ve configured Unlighthouse, you can run it using the following command:

npx unlighthouse --site <URL> --config-path <PATH_TO_CONFIG_FILE>Code language: Shell Session (shell)

Replace <URL> with the URL of your website and <PATH_TO_CONFIG_FILE> with the path to your configuration file.

How do I use Unlighthouse?

Unlighthouse is installed and run with the command in your terminal :

npx unlighthouse --site <URL>Code language: Shell Session (shell)

You can add the --debug option at the end to see the execution details. This command will enable Unlighthouse to analyze your website’s performance according to the following criteria:

Loading speed

Unlighthouse will measure the loading speed of your website by simulating a user accessing your site from a mobile device and a 3G network. The following metrics will be evaluated:

• First Contentful Paint (FCP): the time it takes for the first content to be displayed on the screen.
• Speed Index (SI): time taken for visible content to be displayed on screen.
• Time to Interactive (TTI): the time required for the website to become interactive and respond to user actions.

SEO optimization

Unlighthouse will evaluate your website’s SEO optimization according to the following criteria:

• Meta tags: checks whether important meta tags are present on your website, such as the title tag, description tag and viewport tag.
• Content structure: checks whether your website’s content is technically optimized for search engines.
• Links: checks whether your website’s links are functional and optimized for search engines.

Accessibility

Unlighthouse will evaluate your website’s accessibility according to the following criteria:

• Contrast: checks whether your website’s colors have sufficient contrast to be readable by all users.
• Navigation: checks whether your website is easily navigable using a keyboard and screen reader.
• Content: checks whether the content of your website is accessible to all users, including those with specific accessibility needs.

Best practices

Unlighthouse will assess whether your website follows good web development practices, such as :

• Use of HTTPS: checks whether your website uses HTTPS to secure user data.
• Image optimization: checks whether your website’s images are optimized to reduce loading times.
• Use of web fonts: checks whether your website uses web fonts to improve readability and loading speed.

The Chrome User Experience Report (CrUX)

This is a public database containing data on the actual performance of websites as experienced by Chrome users. The data is collected from a sample of Chrome users who have enabled the “Usage and Statistics” feature in their browser.

CrUX provides information on key user experience metrics, such as loading time, visual stability and website interactivity. This data can help web developers understand how users perceive their website, and identify areas for improvement to deliver a better user experience.

CrUX is used by several website analytics tools, including Unlighthouse, to provide information on actual website performance. CrUX data is also used by Google to assess the quality of a website’s user experience as part of its search ranking algorithm.

In short, CrUX is a valuable source of data for web developers looking to improve website performance and deliver a better user experience.

How to interpret Unlighthouse results?

After running the audits with Unlighthouse, you’ll get a detailed report with various metrics and scores. Here’s how to interpret the results:

1. Metrics: Unlighthouse generates metrics for each audit, such as load time, interaction time, SEO score, accessibility score and best practice score. These metrics give you an idea of your website’s performance in each area.
2. Scores: Unlighthouse also assigns scores for each audit, ranging from 0 to 100. The higher the score, the better. The scores give you an idea of the overall quality of your website in each area.
3. Opportunities for improvement: Unlighthouse also provides opportunities for improvement for each audit, such as images to be compressed, CSS and JavaScript files to be minimized, meta tags to be added, and so on. These opportunities give you concrete avenues for improving your website’s performance.

Tips for interpreting results

• Focus on the most important metrics and scores for your website.
• Use improvement opportunities to identify priority areas for improvement.
• Compare results with industry standards to determine if your website is competitive.

How can I improve my site with Unlighthouse?

Here are a few practical tips for improving your website’s performance with Unlighthouse :

1. Improve loading speed
   • Compress images and large files.
   • Minimize CSS and JavaScript files.
   • Use browser caching.
   • Reduce server response time.
2. Improve SEO optimization
   • Add relevant meta tags and header tags.
   • Create an XML sitemap.
   • Use search-engine-friendly URLs.
   • Optimize content for relevant keywords.
3. Improve accessibility
   • Add text alternatives to images.
   • Use sufficient color contrast.
   • Make sure the website is keyboard navigable.
   • Use appropriate labels and captions for forms.
4. Use best practices
   • Use HTTPS to secure the website.
   • Avoid unnecessary redirects.
   • Use optimized web fonts.
   • Make sure the website is compatible with different browsers and devices.

Conclusion

Unlighthouse is a powerful tool for measuring and improving the performance of multiple pages on a website. By using this tool to identify problems and opportunities for improvement, you can optimize your website’s user experience and SEO. We encourage you to use Unlighthouse regularly to monitor your website’s performance and make ongoing improvements.

FAQ