This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Max
As web developers, we know that the performance of our websites and apps is crucial for providing a great user experience. Core Web Vitals, a set of metrics that measure the performance and user experience of a website or app, are an important factor in this. To evaluate and improve performance, we have a range of tools and techniques at our disposal, including PageSpeed and Real User Monitoring (RUM). In this article, we'll break down the differences between PageSpeed and RUM and how you can use them together to get the best performance from your website or app.
What is PageSpeed?
PageSpeed is a tool created by Google to help web developers make their websites run faster. PageSpeed Insights analyzes the performance of your website and gives you suggestions on how to improve it.
What is Real User Monitoring?
Real User Monitoring (RUM) is a technique that involves tracking and measuring the performance of a website or app from the perspective of the user. RUM involves collecting data from users as they interact with a website or app, and using this data to understand how the site is performing in the real world.
How are PageSpeed and Real User Monitoring Different?
There are several key differences between PageSpeed and Real User Monitoring. The main difference is that PageSpeed is a synthetic tool, while RUM is a real-world monitoring tool. This means that PageSpeed analyzes the performance of a website or app in a controlled environment, while RUM tracks the performance of a website or app as it is used by real users.
Another key difference is that PageSpeed is focused on optimizing the performance of a website or app, while RUM is focused on measuring and tracking performance. This means that PageSpeed provides recommendations for improvement, while RUM provides data on how a website or app is performing in the real world.
How to Adopt Real User Monitoring
Real User Monitoring (RUM) is an invaluable tool for front-end web developers, providing insights into how their website or app is performing in the real world. Adopting RUM can be done in a few different ways, depending on the needs of the web developer.
Google Analytics
The first approach is to use a RUM tool that is built into a website or app, such as Google Analytics. Using the web-vitals npm package, it is possible to send raw performance data to Google Analytics. The onCLS, onFID, and onLCP functions allow web developers to track the Cumulative Layout Shift, First Input Delay, and Largest Contentful Paint metrics, respectively. By using this data in conjunction with Google Analytics, web developers can get a more complete picture of the performance of their website or app.
import {onCLS, onFID, onLCP} from 'web-vitals';
function sendToGoogleAnalytics({name, delta, value, id}) {
gtag('event', name, {
value: delta,
metric_id: id,
metric_value: value,
metric_delta: delta,
});
}
onCLS(sendToGoogleAnalytics);
onFID(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);
However, there are a few downsides to this approach. One of these downsides is the limited dashboard and poor user experience. Using the dashboard can be difficult to navigate and understand, making it harder to interpret the data. Additionally, the metrics that are available for tracking are limited to the Core Web Vitals metrics. If more detailed analysis is needed, a different approach may be necessary.
Third-party SaaS
The second approach is to use a third-party RUM tool, such as New Relic or Loado. These tools are more powerful than Google Analytics and allow the web developer to track performance in more detail.
Loado is a powerful Real User Monitoring (RUM) tool that offers a range of features for front-end web developers. It has a free plan for those who are just starting out, allowing web developers to track performance without any upfront cost. It also includes built-in alerts that can help web developers to quickly identify and fix any performance issues. The dashboards and reports provided by Loado make it easy to interpret the data and track the performance of a website or app over time.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Your awesome website</title>
<script async src="https://cdn.loado.dev/sdk.js" />
</head>
<body>
</body>
</html>
Furthermore, Loado supports custom metrics via the User Timings API. This allows web developers to track performance in more detail and get a better understanding of how their website or app is performing in the real world. By using Loado, web developers can track and improve the performance of their website or app more efficiently.
Own custom service
The third approach is to build a custom RUM solution. This requires a more detailed understanding of RUM, and can be time-consuming to set up. However, it can be the most cost-effective way to track performance, and allows the web developer to collect data in a way that is tailored to their specific needs.
No matter which approach is taken, RUM can be a powerful tool for tracking the performance of a website or app. By using RUM, front-end web developers can get a better understanding of how their website or app is performing, and make informed decisions about how to improve it.
How Can PageSpeed and Real User Monitoring be Used Together?
Although PageSpeed and Real User Monitoring are different tools with different goals, they can be used together to maximize the performance of a website or app. Here are some tips for using these tools together:
- Use PageSpeed Insights to identify areas for improvement: PageSpeed Insights is a great tool for identifying areas where a website or app can be optimized. By using this tool, you can identify specific issues that are impacting performance and get recommendations on how to fix them.
- Use RUM to track the impact of changes: Once you have implemented the recommendations from PageSpeed Insights, you can use RUM to track the impact of these changes on the performance of your website or app. This will help you to understand whether the changes are having the desired effect and identify any further improvements that may be needed.
- Monitor both lab and field data: It is important to monitor both lab data (collected using PageSpeed) and field data (collected using RUM) to get a complete picture of the performance of your website or app. By combining these two types of data, you can identify both technical issues and user experience issues that may be impacting performance.
In conclusion, PageSpeed and Real User Monitoring are both valuable tools for improving the performance of a website or app. By using them together, front-end web developers can identify and fix performance issues, track the impact of changes, and monitor the performance of their website or app in real-time. By optimizing for core web vitals and using these tools, you can provide a better user experience for your visitors.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Max
Max | Sciencx (2022-12-24T14:29:49+00:00) PageSpeed vs. Real User Monitoring: What’s the Difference?. Retrieved from https://www.scien.cx/2022/12/24/pagespeed-vs-real-user-monitoring-whats-the-difference/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.