This JavaScript script is designed to monitor and capture key web performance metrics directly in the user's browser. Once collected, these metrics are sent to a server for further analysis, enabling developers to optimize the user experience on their websites.
Web.Performance.Monitoring.Demo.mov
The script gathers the following performance metrics:
- Load Time (load): The time it takes for the document load event to complete.
- DOM Content Loaded (dcl): The time when the document has been fully loaded and parsed, excluding stylesheets, images, and subframes.
- First Contentful Paint (fcp): The time when the browser renders the first piece of DOM content.
- Largest Contentful Paint (lcp): The time when the largest visible element in the viewport is rendered.
- Cumulative Layout Shift (cls): The sum of all unexpected layout shifts that occur during the page's lifetime.
- Longtask (lts): The duration of any task that blocks the main thread for a prolonged period (50 ms or more).
- PerformanceObserver: Uses
PerformanceObserverto monitor specific performance events such as "paint", "largest-contentful-paint", "layout-shift", "first-input", and "longtask". - Performance Timing API: Utilizes the Performance Timing API to gather information about navigation and page load performance.
- Navigator.sendBeacon: The captured data is sent to the server when the page's visibility state changes (e.g., when the user closes the tab or navigates away). This ensures the data is sent without interrupting the user experience, even if the page is being closed.
Incorporate the script into a JavaScript file and link it in your HTML:
<script defer src="path/to/script.js"></script>Ensure you modify the URL in navigator.sendBeacon("/api/", data); to point to your specific server or endpoint where the data will be collected.
The data received on your server can be analyzed to identify performance bottlenecks and to better understand how users experience your website.
Ensure that the script does not collect sensitive or personally identifiable information without the explicit consent of the user. It is crucial to comply with privacy regulations like GDPR or CCPA.
Some metrics, such as CLS or LCP, may vary depending on the device, browser, and network conditions. It's important to consider these factors when analyzing the data.
The use of performance observers and the Performance API is designed to be lightweight and should not significantly impact page performance. However, it is always advisable to test the impact in different scenarios before deploying to production.
navigator.sendBeacon is used in this script for several reasons:
- Non-blocking:
sendBeaconsends data to the server asynchronously, without blocking the main thread. This is crucial when sending data right before the user leaves the page. - Reliability: Unlike
XMLHttpRequestorfetch,sendBeaconis more reliable for sending data when the page is being closed or the user navigates away, as it is specifically designed for this purpose. - Minimizes Impact on User Experience: By not interrupting the page's execution,
sendBeaconensures that data transmission does not negatively affect the user experience, even on devices with limited resources.