How to Measure Performance in Next.js?
Blazity
Performance
Effective and accurate measurement is essential to ensure smooth, user-friendly web experiences. In this section, we will discuss how developers can use various tools and metrics to assess and enhance performance in Next.js apps.
The Expert Guide to Next.js Performance Optimization
This article is part of The Expert Guide to Next.js Performance Optimization, a comprehensive Ebook you can download for free here.
The guide covers every aspect of building fast, scalable web apps with Next.js, including:
- Streaming, Suspense & Hydration
- Infrastructure
- Real-life Examples
- How to Measure Web Performance
- Bundle Analysis.
Tools and Services
Lighthouse
Lighthouse is a widely used tool developed by Google to analyze the quality of web pages. It audits various aspects, including performance, accessibility, and search engine optimization (SEO).
Benefits:
- Comprehensive Audits: Lighthouse examines various factors, from how quickly a page becomes interactive to how it handles user input, offering actionable insights and scores.
- Developer-Friendly: It integrates directly into Chrome DevTools, making it easily accessible to developers during development.
Integration with Next.js:
- Developers can run Lighthouse audits on their local development environment or deployed sites to obtain performance metrics.
- Lighthouse's feedback can guide optimizations in Next.js, such as improving image handling with the Image component or optimizing dynamic imports.
Limitations:
- In-Browser Variability: Running Lighthouse in the browser can lead to inconsistent results due to varying hardware, network conditions, or background processes. For more consistent results, we recommend using the CLI version of Lighthouse or integrating it into continuous integration (CI) pipelines.
- Snapshot Nature: Lighthouse provides a snapshot of performance at a single point in time, which might not capture variability under different user conditions or over time.
Note on In-Browser Testing:
In-browser testing with Lighthouse may not accurately mirror the broader user experience due to various environmental and technical variables.
WebPageTest
WebPageTest complements Lighthouse by offering different insights and enhanced consistency across testing environments.
Advantages over Lighthouse:
- Controlled Test Environment: Unlike Lighthouse’s in-browser setup, WebPageTest runs tests from multiple locations worldwide using dedicated test agents. This approach reduces variability caused by different network conditions and hardware configurations.
- Advanced Configuration: WebPageTest allows for detailed configuration of test parameters such as connection speed, browser type, and more. It also supports scripting to automate multi-step transactions, closely mimicking a real user’s journey on a site.
- Visual Comparison: WebPageTest compares load performance, including video captures and filmstrip views, presenting the result more graphically. This illustrative view is particularly useful for understanding visual progress during page loads.
- Historical Performance Data: It retains test results for longer periods, enabling historical performance analysis. This data can be crucial for tracking performance trends over time or before and after specific updates.
When Lighthouse might be a better fit:
- Quick Local Testing: Lighthouse is better suited for rapid development cycles where immediate feedback is needed, as it can run directly in Chrome DevTools without external services.
- Accessibility and SEO: While WebPageTest focuses primarily on performance metrics, Lighthouse provides comprehensive audits for accessibility, SEO, and best practices, making it more suitable for holistic webpage analysis.
- CI/CD Integration: Lighthouse's CLI version is easier to integrate into continuous integration pipelines, providing automated performance checks with each build
PageSpeed Insights
PageSpeed Insights combines both lab and field data to provide a comprehensive view of website performance. It integrates Lighthouse's synthetic testing capabilities with real-world performance data from the Chrome UX Report.
Comparison with Other Tools:
vs. Lighthouse:
- Adds field data from real users via CrUX, while Lighthouse only provides lab data.
- Runs tests from Google's servers, eliminating local environment variables that can affect Lighthouse results.
- Provides optimization suggestions that consider both lab and field data patterns.
- Less suitable for testing local development environments or internal applications.
vs. WebPageTest:
- Offers a simpler, more streamlined interface focused on core metrics.
- Provides fewer configuration options compared to WebPageTest's detailed testing parameters.
- Better for quick assessments and general optimization guidance.
- Less detailed in terms of waterfall analysis and advanced performance debugging.
Field Data in PageSpeed Insights:
PageSpeed Insights uses the Chrome UX Report (CrUX) to provide real-world performance data. This offers several benefits:
- Real User Metrics: Data collected from actual Chrome users provides insights into real-world experiences across different devices and network conditions.
- Large-Scale Analysis: Aggregates performance data from millions of users to show general trends.
- Comparative Analysis: Enables comparison of your site's performance against competitors in your industry
Limitations of Field Data
- Monthly Updates: Recent changes don't reflect immediately as CrUX data refreshes monthly.
- Data Sampling: CrUX dataset includes only sites with sufficient traffic.
- Privacy Considerations: Data is anonymized and aggregated, limiting granular analysis of specific user sessions.
- Geographic Coverage: Data availability varies by region and may not represent all user locations equally.
When to Use PageSpeed Insights:
- During production monitoring to combine both synthetic and real-user data.
- When seeking Google-specific optimization recommendations for SEO.
- For comparing performance against other sites in the same industry.
- When needing a balance between detailed metrics and actionable insights.
Vercel Speed Insights
For Next.js applications deployed on Vercel, Speed Insights provides built-in real-user monitoring capabilities that offer immediate visibility into real-world application performance.
Key Features
Detailed Performance Metrics:
Speed Insights collects various performance data points crucial for understanding how a website performs under real-user conditions. Metrics such as Real Experience Score (RES), First Contentful Paint (FCP), and Largest Contentful Paint (LCP) provide a detailed look at the site's loading performance and visual stability.
Dashboard Integration:
Once enabled, Speed Insights tracks data across all deployed environments, including preview and production. The data is accessible through a user-friendly dashboard within the Vercel project view, eliminating the need for additional scripts or code modifications.
Granular Data Views:
- Device Type and Environment Filtering: Users can toggle views between mobile and desktop devices and filter data by preview or production environments.
- Time Range Selection: Depending on the user's account type, developers can examine the insights over various periods, from the previous day up to the last 12 months.
- Performance Metric Customization: The dashboard allows users to view the 75th percentile (P75) of performance data by default, with options to include the 90th, 95th, and 99th percentiles in the time-based line graph.
Visual Representations:
- Kanban Board: This view helps identify which routes or paths may need performance improvements, highlighting URLs based on traffic significance.
- Geographic Maps: These maps show performance metrics by country, using color intensity to indicate the data collected per region. They provide a visual representation of where users might be experiencing issues.
How RUM with Speed Insights Enhances Next.js Applications
Integrating RUM through Vercel’s Speed Insights allows developers to make data-driven decisions based on how real users interact with their applications. This direct feedback loop enables the following:
- Immediate Identification of Issues: Real-time data helps pinpoint performance bottlenecks or errors as they occur, often before they impact many users.
- Targeted Optimizations: By understanding which areas of a site are underperforming – specific pages, assets, or third-party scripts – developers can prioritize efforts where they are most needed.
- Impact Analysis: After deploying optimizations, developers can immediately see the impact of changes across different user demographics and device types.
Other Real User Monitoring Solutions
While Vercel Speed Insights is deeply integrated with Next.js deployments on Vercel, there are other RUM solutions available for different hosting environments or specific monitoring needs:
Commercial Services:
- Analytics platforms like Google Analytics 4 include performance monitoring features.
- Specialized RUM services such as New Relic, Datadog, or Sentry offer comprehensive application monitoring.
- CDN providers like Cloudflare and Akamai provide built-in RUM capabilities.
When to Consider Other RUM Solutions:
- Need for custom metric collection beyond core web vitals.
- Multi-platform monitoring requirements.
- Specific privacy or compliance requirements.
- Integration with existing monitoring infrastructure.
Collecting your real-world metrics
You can use the useReportWebVitals hook from next/web-vitals to collect real-world performance metrics and send them to any service. Because it is deeply integrated with Next, this might prove more accurate than generic web vitals collection built into your analytics or data platform SDK.
Example: Sending Web Vitals to Google Analytics 4
Code
1import { useReportWebVitals } from 'next/web-vitals'
2/ [...]
3useReportWebVitals(metric => {
4 window.gtag('event', metric.name, {
5 value: Math.round(metric.name === 'CLS' ? metric.value * 1000 :
6metric.value), / values must be integers
7 event_label: metric.id, / id unique to current page load
8 non_interaction: true, / avoids affecting bounce rate.
9 });
10}Keypoints
- Use Lighthouse for performance, SEO, and accessibility analysis.
- Use WebPageTest for detailed multi-region and user flow testing.
- Use PageSpeed Insights for a mix of lab and real-world data.
- Combine synthetic testing with real-user monitoring for accuracy.
- Implement continuous monitoring in development and production.
- Use Vercel Speed Insights for real-user monitoring.
- Supplement with additional RUM tools if needed.
Get a quote
“We are very happy with the outcomes and look forward to continuing to work with them on larger initiatives.”
Brian Grafola
CTO at Vibes
