DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Testing, Tools, and Frameworks
  4. Measuring Page Speed With Lighthouse

Measuring Page Speed With Lighthouse

How can we ensure that our pages are loading at top speed? The answer is to measure them regularly with Lighthouse and CI/CD.

Tomas Fernandez user avatar by
Tomas Fernandez
·
Feb. 01, 23 · Tutorial
Like (1)
Save
Tweet
Share
1.41K Views

Join the DZone community and get the full member experience.

Join For Free

Page speed matters more than you think. According to research by Google, the probability of users staying on your site plummets as the loading speed slows down. A site that loads in ten seconds increases the bounce rate by a whopping 123%. In other words, speed equals revenue.

Graph showing bounce rates for page load times. The values shown are 1 to 3 seconds = 32% bounce rate, 1 to 5 seconds = 90%, 1 to 6 seconds 106%, and 1 to 10 seconds 123%.

How can we ensure that our pages are loading at top speed? The answer is to measure them regularly with Lighthouse and CI/CD.

Measuring Page Speed With Lighthouse

Lighthouse is a page speed benchmark tool created by Google. It runs a battery of tests against your website and produces a report with detailed advice to improve performance.

The Lighthouse HTML report. Includes scores for Performance, Accessibility, PWA, and Best practices. It also shows a sequence of how the webpage is rendered over time.

Lighthouse is running inside Google Chrome.

You might be surprised at the low scores Lighthouse presents. This is because the tool simulates mid-tier mobile devices on a 4G connection.

While Lighthouse's primary focus is performance, it can assess other things like:

  • Accessibility: Suggest opportunities to make the content more accessible. This covers ensuring that the page is optimized for screen readers, all elements have labels, or the site is browsable with the keyboard.
  • Best Practices: Checks for various sane practices that improve speed and security.
  • SEO: Performs various checks to ensure that the page is SEO-optimized.
  • PWA: Ensures the page passes progressive web application tests, which improves user experience on mobile devices.

4 Ways of Running Lighthouse

Lighthouse is an open-source project that you can run in different ways:

  1. Since it is included in Google Chrome, you can run it directly from the browser. Click on More tools > Developer Tools and open the Lighthouse tab.
  2. If you have Node installed, you can run npm install -g lighthouse and run the tool in the command line like this: lighthouse https://semaphoreci.com
  3. You can include it in your code as a Node package.
  4. And finally, Lighthouse has a CI version you can run in your continuous integration. We'll use this method to schedule periodical benchmarks.

Setting up Lighthouse CI

To run Lighthouse CI, you're going to need the following:

  • Google Chrome
  • A GitHub or Bitbucket account
  • The LTS version of Node.

Let's get started by installing Lighthouse CI with npm install -g @lhci/cli

Next, create a config file called lighthouserc.js. The URL parameter is an array of websites to benchmark. We can adjust the numberOfRuns, as more runs yield more statistically-relevant results.

 
// lighthouserc.js

module.exports = {
  ci: {
    collect: {
        url: ['https://semaphoreci.com'],
        numberOfRuns: 1
    },
    upload: {
      target: 'filesystem',
      outputDir: 'reports'
    }
  }
};


Bear in mind that while Lighthouse is not particularly heavy on resources, setting the number of runs to a high value can make the job take too long to complete. Never forget that you want your CI pipeline to run in five to ten minutes, not more than that.

Now we can run Lighthouse with: lhci autorun. When finished, we'll find a few files in the reports folder:

  • manifest.json: contains a list of the reports generated.
  • $url-$timestamp-report.html is the main report you can open with any browser.
  • $url-$timestamp-report.json: the same report in the JSON version.

Using Lighthouse for Non-Functional Testing

Lighthouse lets us configure limits for each category. When one of these values falls below a predefined value, the tool stops the CI pipeline.

For example, let's say we don't want the ratings of our site to fall below 80% in all categories. To achieve that, we need to add assertions to the config file:

 
// lighthouserc.js

module.exports = {
  ci: {
    collect: {
        url: ['https://semaphoreci.com', 'https://semaphoreci.com/blog'],
        numberOfRuns: 5
    },
    upload: {
      target: 'filesystem',
      outputDir: 'reports'
    },
    // enforce limits
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.8}],
        'categories:accessibility': ['error', {minScore: 0.8}],
        'categories:seo': ['error', {minScore: 0.8}],
        'categories:best-practices': ['error', {minScore: 0.8}]
        }
    }
  }
};


Measuring Page Speed With CI/CD

If you want to automate benchmarking with CI/CD, check out this step-by-step tutorial.

Setting Up a Dashboard

The Lighthouse CI project includes an optional dashboard that lets you browse historical data and find trends.

The Lighthouse Server Dashboard. It shows a graph of the page score over time and entries for the last 5 runs.

Lighthouse CI dashboard.
Installing the dashboard requires a separate server and database. In addition, you’ll need a dedicated machine and persistent storage to save historical data.

The downside of this approach is obvious — you need to manage yet another server. But it may be worth doing if you have a lot of sites to analyze.

Running Lighthouse in Web Development

We've only focused on testing an existing and running website. But a setup like this can perform non-functional tests during web development. You can, for instance, fail commits that make the site perform worse or break accessibility rules.

Time Is Money

Users are drawn to fast and responsive websites. The problem is that measuring page speed reliably is challenging since you cannot assume that everyone is on a fast connection and uses a top-tier device. With Lighthouse in your CI/CD pipeline, you can get results closer to real-life conditions and insights to help you continually improve.

Thanks for reading!

Command-line interface Contextual design Data structure Functional testing Google Chrome Non-functional testing Picasa Web Albums Web application Web development Google (verb)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Building Microservice in Golang
  • What Are the Benefits of Java Module With Example
  • Tracking Software Architecture Decisions
  • Introduction to Spring Cloud Kubernetes

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: