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
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

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
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

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Showing Long Animation Frames in Your DevTools
  • The Cutting Edge of Web Application Development: What To Expect in 2024
  • Queuing Theory for Non-Functional Testing
  • NFT Wallets Unleashed: A Data Structures and Application Design Journey

Trending

  • Evolution of Cloud Services for MCP/A2A Protocols in AI Agents
  • AI, ML, and Data Science: Shaping the Future of Automation
  • Measuring the Impact of AI on Software Engineering Productivity
  • Java's Quiet Revolution: Thriving in the Serverless Kubernetes Era
  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.

By 
Tomas Fernandez user avatar
Tomas Fernandez
·
Feb. 01, 23 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
2.2K 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.

Related

  • Showing Long Animation Frames in Your DevTools
  • The Cutting Edge of Web Application Development: What To Expect in 2024
  • Queuing Theory for Non-Functional Testing
  • NFT Wallets Unleashed: A Data Structures and Application Design Journey

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

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

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!