{"id":93696,"date":"2022-10-10T01:18:53","date_gmt":"2022-10-09T23:18:53","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/"},"modified":"2020-11-10T02:25:24","modified_gmt":"2020-11-10T05:25:24","slug":"mejores-practicas-para-medir-web-vitals-en-el-campo","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/","title":{"rendered":"Best Practices for Measuring Web Vitals in the Field"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Utilice-metricas-o-eventos-personalizados\" >Use custom metrics or events<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Asegurese-de-poder-informar-una-distribucion\" >Make sure you can report a distribution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Envie-sus-datos-en-el-momento-adecuado\" >Submit your details at the right time<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Supervisar-el-rendimiento-a-lo-largo-del-tiempo\" >Monitor performance over time<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Version-de-sus-cambios\" >Version of your changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Ejecutar-experimentos\" >Run experiments<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Asegurese-de-que-la-medicion-no-afecte-el-rendimiento\" >Make sure measurement does not affect performance<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Aplazar-sus-analisis\" >Postpone your analyzes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#No-crees-tareas-largas\" >Don&#039;t create long tasks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#Utilice-API-sin-bloqueo\" >Use non-blocking API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/mejores-practicas-para-medir-web-vitals-en-el-campo\/#No-rastree-mas-de-lo-que-necesita\" >Don&#039;t track more than you need<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          How to measure Web Vitals with your current analysis tool.\n        <\/p>\n<p>\n          <time>May 27, 2020<\/time><br \/>\n            Updated <time>July 21, 2020<\/time>\n        <\/p>\n<\/header>\n<p>Having the ability to measure and report on the actual performance of your pages is critical to diagnosing and improving performance over time. Without field data, it is impossible to know for sure if the changes you are making to your site are actually achieving the desired results.<\/p>\n<p>Many popular <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Real_user_monitoring\">Real user monitoring (RUM)<\/a> Analytics providers already support Core Web Vitals metrics in their tools (as well as many other Web Vitals). If you are currently using one of these RUM analytics tools, you are in great shape to assess how well your site pages meet Core Web Vitals recommended thresholds and avoid regressions in the future.<\/p>\n<p>While we recommend using an analysis tool that supports Core Web Vitals metrics, if the analysis tool you are currently using does not support them, you do not need to change. Almost all analysis tools offer a way to define and measure <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/analytics\/answer\/2709828\">custom metrics<\/a> or<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/analytics\/answer\/1033068\">events<\/a>, which means you can probably use your current analytics provider to measure Core Web Vitals metrics and add them to your existing analytics reports and dashboards.<\/p>\n<p>This guide discusses best practices for measuring Core Web Vitals metrics (or any custom metrics) with an internal or third-party analytics tool. It can also serve as a guide for analytics providers who want to add Core Web Vitals support to their service.<\/p>\n<h2 id=\"use-custom-metrics-or-events\"><span class=\"ez-toc-section\" id=\"Utilice-metricas-o-eventos-personalizados\"><\/span>Use custom metrics or events <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As mentioned above, most analytics tools allow you to measure custom data. If your analytics tool supports it, you should be able to measure each of the Core Web Vitals metrics using this mechanism.<\/p>\n<p>Measuring custom metrics or events in an analytics tool is generally a three-step process:<\/p>\n<ol>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/analytics\/answer\/2709829?hl=en&amp;ref_topic=2709827\">Define or register<\/a><br \/>\nthe custom metric in your tool manager (if necessary). <em>(Note: not all analytics providers require custom metrics to be defined in advance.)<\/em><\/li>\n<li>Calculate the value of the metric in your frontend JavaScript code.<\/li>\n<li>Send the metric value to your analytics backend, making sure the name or ID matches what was defined in step 1 <em>(again, if necessary)<\/em>.<\/li>\n<\/ol>\n<p>For steps 1 and 3, you can refer to the documentation for your scan tool for instructions. For step 2, you can use the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web-vitals<\/a> JavaScript library to calculate the value of each of the Core Web Vitals metrics.<\/p>\n<p>The following code example shows how easy it can be to track these metrics in code and send them to an analytics service.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>getCLS<span class=\"token punctuation\">,<\/span> getFID<span class=\"token punctuation\">,<\/span> getLCP<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'web-vitals'<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">function<\/span> <span class=\"token function\">sendToAnalytics<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>yam<span class=\"token punctuation\">,<\/span> value<span class=\"token punctuation\">,<\/span> go<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> body <span class=\"token operator\">=<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>yam<span class=\"token punctuation\">,<\/span> value<span class=\"token punctuation\">,<\/span> go<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">(<\/span>navigator<span class=\"token punctuation\">.<\/span>sendBeacon <span class=\"token operator\">&amp;&amp;<\/span> navigator<span class=\"token punctuation\">.<\/span><span class=\"token function\">sendBeacon<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/analytics'<\/span><span class=\"token punctuation\">,<\/span> body<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span><br><span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/analytics'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>body<span class=\"token punctuation\">,<\/span> method<span class=\"token operator\">:<\/span> <span class=\"token string\">'POST'<\/span><span class=\"token punctuation\">,<\/span> keepalive<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><span class=\"token function\">getCLS<\/span><span class=\"token punctuation\">(<\/span>sendToAnalytics<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">getFID<\/span><span class=\"token punctuation\">(<\/span>sendToAnalytics<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">getLCP<\/span><span class=\"token punctuation\">(<\/span>sendToAnalytics<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"ensure-you-can-report-a-distribution\"><span class=\"ez-toc-section\" id=\"Asegurese-de-poder-informar-una-distribucion\"><\/span>Make sure you can report a distribution <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once you have calculated the values for each of the Core Web Vitals metrics and submitted them to your analytics service using a custom event or metric, the next step is to create a report or dashboard that shows the values that have been collected.<\/p>\n<p>To ensure that you meet the Core Web Vitals recommended thresholds, you will need your report to show the value of each metric at the 75th percentile.<\/p>\n<p>If your analytics tool doesn&#039;t offer quantile reporting as a built-in function, you can probably still get this data manually by generating a report that lists all the metric values sorted in ascending order. Once this report is generated, the result that is the 75% of the way through the complete and ordered list of all the values in that report will be the 75th percentile for that metric, and this will be the case no matter how you segment your data. (by device type, connection type, country, etc.).<\/p>\n<p>If your analytics tool doesn&#039;t give you metric-level reporting granularity by default, you can probably achieve the same result if your analytics tool supports <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/analytics\/answer\/2709828\">custom dimensions<\/a>. By setting a unique custom dimension value for each individual metric instance that you track, you should be able to generate a report, broken down by individual metric instances, if you include the custom dimension in your report settings. Since each instance will have a unique dimension value, no grouping will occur.<\/p>\n<p>For example, the following histogram was generated from Google Analytics using the technique described above (since Google Analytics does not support quantile reports in any of its standard reports). The data were consulted using the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/analytics\/devguides\/reporting\/core\/v4\">Analytics reporting API<\/a> and is displayed by a JavaScript data visualization library:<\/p>\n<p><img alt='lcp-histogram-3164921' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png'><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Tip: the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\"><code>web-vitals<\/code><\/a>  The library provides an ID for each reported metric instance, making it easy to create distributions in most analysis tools. Watch the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/web-vitals#metric\"><code>Metric<\/code><\/a>  interface documentation for more details.<\/p>\n<\/div>\n<h2 id=\"send-your-data-at-the-right-time\"><span class=\"ez-toc-section\" id=\"Envie-sus-datos-en-el-momento-adecuado\"><\/span>Submit your details at the right time <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Some performance metrics can be calculated after the page has finished loading, while others (like CLS) consider the full life of the page and are only final after the page has started to download.<\/p>\n<p>However, this can be problematic, as both the <code>beforeunload<\/code> and <code>unload<\/code><br \/>\nEvents are unreliable (especially on mobile devices) and their use is <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/page-lifecycle-api#legacy-lifecycle-apis-to-avoid\">not recommended<\/a><br \/>\n(as they can prevent a page from being eligible for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/page-lifecycle-api#page-navigation-cache\">Cache back<\/a>).<\/p>\n<p>For metrics that track the entire lifetime of a page, it is best to send the current value of the metric during the <code>visibilitychange<\/code> event, whenever the visibility state of the page changes to <code>hidden<\/code>. This is because once the page&#039;s visibility status changes to <code>hidden<\/code>: There is no guarantee that any script on that page will be able to run again. This is especially true on mobile operating systems where the browser application itself can be closed without any page callbacks being triggered.<\/p>\n<p>Note that mobile operating systems generally enable <code>visibilitychange<\/code><br \/>\nevent when switching tabs, switching applications or closing the browser application. They also shoot the <code>visibilitychange<\/code> event when closing a tab or navigating to a new page. This makes the <code>visibilitychange<\/code> much more reliable event than the<br \/>\n<code>unload<\/code> or <code>beforeunload<\/code> events.<\/p>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Gotchas!<\/strong> <\/p>\n<p>Because <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/page-visibility\/issues\/59#issue-554880545\">some browser errors<\/a>, there are some cases where <code>visibilitychange<\/code> the event does not fire. If you are creating your own analysis library, it is important to be aware of these errors. Note that the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web-vitals<\/a><br \/>\nThe JavaScript library takes all of these errors into account.<\/p>\n<\/div>\n<h2 id=\"monitor-performance-over-time\"><span class=\"ez-toc-section\" id=\"Supervisar-el-rendimiento-a-lo-largo-del-tiempo\"><\/span>Monitor performance over time <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once you&#039;ve updated your analytics implementation to track and report on Core Web Vitals metrics, the next step is to track how changes to your site affect performance over time.<\/p>\n<h3 id=\"version-your-changes\"><span class=\"ez-toc-section\" id=\"Version-de-sus-cambios\"><\/span>Version of your changes <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A naive (and ultimately unreliable) approach to tracking changes is to implement changes in production and then assume that all metrics received after the implementation date correspond to the new site and all metrics received before the implementation date correspond to the previous site. However, any number of factors (including caching at the HTTP layer, service worker, or CDN) can prevent this from working.<\/p>\n<p>A much better approach is to create a unique version for each change implemented and then track that version in your analysis tool. Most analysis tools support setting a version. If yours doesn&#039;t, you can create a custom dimension and set that dimension in your deployed version.<\/p>\n<h3 id=\"run-experiments\"><span class=\"ez-toc-section\" id=\"Ejecutar-experimentos\"><\/span>Run experiments <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can take version control one step further by tracking multiple versions (or experiments) at the same time.<\/p>\n<p>If your analysis tool allows you to define groups of experiments, use that function. Otherwise, you can use custom dimensions to ensure that each of your metric values can be associated with a particular experiment group in your reports.<\/p>\n<p>With experimentation in place of analysis, you can implement an experimental change on a subset of your users and compare the performance of that change with the performance of users in the control group. Once you are confident that a change actually improves performance, you can implement it for all users.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Run groups should always be set up on the server. Avoid using any A \/ B testing or experimentation tool that runs on the client. These tools will typically block rendering until a user&#039;s run group is determined, which can be detrimental to their LCP times.<\/p>\n<\/div>\n<h2 id=\"ensure-measurement-doesn't-affect-performance\"><span class=\"ez-toc-section\" id=\"Asegurese-de-que-la-medicion-no-afecte-el-rendimiento\"><\/span>Make sure measurement does not affect performance <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When measuring performance on real users, it is absolutely critical that any performance measurement code you are running does not negatively affect the performance of your page. If so, any conclusions you try to draw about how your performance affects your business will not be reliable, as you will never know if the presence of the analytical code itself is having the biggest negative impact.<\/p>\n<p>Always follow these principles when implementing RUM analysis code on your production site:<\/p>\n<h3 id=\"defer-your-analytics\"><span class=\"ez-toc-section\" id=\"Aplazar-sus-analisis\"><\/span>Postpone your analyzes <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Analysis code should always be loaded asynchronously and without blocking and should generally be loaded last. Blocking your scan code can negatively impact LCP.<\/p>\n<p>All APIs used to measure Core Web Vitals metrics were specifically designed to support lazy and asynchronous script loading (via the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromestatus.com\/feature\/5118272741572608\"><code>buffered<\/code><\/a>  flag), so there is no need to rush to load your scripts ahead of time.<\/p>\n<p>In the event that you are measuring a metric that cannot be calculated later in the page load timeline, you need to include <em>only<\/em> the code that should be run early in the <code><\/code> of your document (so it&#039;s not a processing lock request) and postpone the rest. Don&#039;t load all your analyzes ahead of time just because a single metric requires it.<\/p>\n<h3 id=\"do-not-create-long-tasks\"><span class=\"ez-toc-section\" id=\"No-crees-tareas-largas\"><\/span>Don&#039;t create long tasks <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Parsing code often runs in response to user input, but if your parsing code is performing a lot of DOM measurements or using other processor intensive APIs, the parsing code itself can cause poor input response. Also, if the JavaScript file that contains your parsing code is large, running that file can crash the main thread and negatively affect FID.<\/p>\n<h3 id=\"use-non-blocking-apis\"><span class=\"ez-toc-section\" id=\"Utilice-API-sin-bloqueo\"><\/span>Use non-blocking API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>API like<br \/>\n<code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Navigator\/sendBeacon\">sendBeacon ()<\/a><\/code><br \/>\nand<br \/>\n<code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/requestIdleCallback\">requestIdleCallback()<\/a><\/code><br \/>\nThey are specifically designed to perform non-critical tasks in a way that does not block critical tasks for the user.<\/p>\n<p>These APIs are great tools to use in a RUM analysis library.<\/p>\n<p>In general, all analytical beacons should be sent using the <code>sendBeacon ()<\/code> API (if available) and all passive analytics measurement code must be run during periods of inactivity.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>For guidance on how to maximize the use of downtime, while still ensuring code can be run urgently when needed (such as when a user is downloading the page), see the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/philipwalton.com\/articles\/idle-until-urgent\/\">inactive-until-urgent<\/a><br \/>\nPattern.<\/p>\n<\/div>\n<h3 id=\"don't-track-more-than-what-you-need\"><span class=\"ez-toc-section\" id=\"No-rastree-mas-de-lo-que-necesita\"><\/span>Don&#039;t track more than you need <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The browser exposes a large amount of performance data, but the fact that the data is available does not necessarily mean that it should record it and send it to its analytics servers.<\/p>\n<p>For example, him <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/resource-timing\/\">Resource time API<\/a><br \/>\nprovides detailed time data for each resource uploaded to your page. However, it is unlikely that all of that data is necessary or useful to improve resource load performance.<\/p>\n<p>In short, don&#039;t just track the data because it&#039;s there, make sure the data will be used before consuming resources to track it.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo medir Web Vitals con su herramienta de an\u00e1lisis actual. 27 de mayo de 2020 Actualizado 21 de julio de 2020 Tener la capacidad de medir e informar sobre el&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-93696","post","type-post","status-publish","format-standard","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mejores pr\u00e1cticas para medir Web Vitals en el campo - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"C\u00f3mo medir Web Vitals con su herramienta de an\u00e1lisis actual. 27 de mayo de 2020 Actualizado 21 de julio de 2020 Tener la capacidad de medir e informar\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mejores pr\u00e1cticas para medir Web Vitals en el campo\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo medir Web Vitals con su herramienta de an\u00e1lisis actual. 27 de mayo de 2020 Actualizado 21 de julio de 2020 Tener la capacidad de medir e informar\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-09T23:18:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Mejores pr\u00e1cticas para medir Web Vitals en el campo\",\"datePublished\":\"2022-10-09T23:18:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/\"},\"wordCount\":2220,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/lcp-histogram-3164921.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/\",\"name\":\"Mejores pr\u00e1cticas para medir Web Vitals en el campo - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/lcp-histogram-3164921.png\",\"datePublished\":\"2022-10-09T23:18:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"C\u00f3mo medir Web Vitals con su herramienta de an\u00e1lisis actual. 27 de mayo de 2020 Actualizado 21 de julio de 2020 Tener la capacidad de medir e informar\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/lcp-histogram-3164921.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/lcp-histogram-3164921.png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices for Measuring Web Vitals in the Field - R Marketing Digital","description":"How to measure Web Vitals with your current analysis tool. May 27, 2020 Updated July 21, 2020 Have the ability to measure and report","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/","og_locale":"en_US","og_type":"article","og_title":"Mejores pr\u00e1cticas para medir Web Vitals en el campo","og_description":"C\u00f3mo medir Web Vitals con su herramienta de an\u00e1lisis actual. 27 de mayo de 2020 Actualizado 21 de julio de 2020 Tener la capacidad de medir e informar","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-09T23:18:53+00:00","og_image":[{"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png","type":"","width":"","height":""}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Mejores pr\u00e1cticas para medir Web Vitals en el campo","datePublished":"2022-10-09T23:18:53+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/"},"wordCount":2220,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/","name":"Best Practices for Measuring Web Vitals in the Field - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png","datePublished":"2022-10-09T23:18:53+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"How to measure Web Vitals with your current analysis tool. May 27, 2020 Updated July 21, 2020 Have the ability to measure and report","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/meilleures-pratiques-pour-mesurer-des-vitales-web-sur-le-terrain\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/lcp-histogram-3164921.png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=93696"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93696\/revisions"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=93696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=93696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=93696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}