From de0207b6cc4fadd2357855e5b1a969fdc5d9df02 Mon Sep 17 00:00:00 2001 From: Cannonbark Date: Fri, 17 Jan 2025 15:29:39 +0100 Subject: [PATCH 1/4] docs(performance): INP replacement of FIP We can see a warning on https://web.dev/articles/fid telling that FIP as reach EOL in favor of INP. I have added an info box because the change could be subtle without it but tell me if you see a better way of showing the change. --- src/guide/best-practices/performance.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index c8ea5d9144..3af30eff12 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -10,7 +10,7 @@ Vue is designed to be performant for most common use cases without much need for First, let's discuss the two major aspects of web performance: -- **Page Load Performance**: how fast the application shows content and becomes interactive on the initial visit. This is usually measured using web vital metrics like [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and [First Input Delay (FID)](https://web.dev/fid/). +- **Page Load Performance**: how fast the application shows content and becomes interactive on the initial visit. This is usually measured using web vital metrics like [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and [Interaction to Next Paint](https://web.dev/articles/inp). - **Update Performance**: how fast the application updates in response to user input. For example, how fast a list updates when the user types in a search box, or how fast the page switches when the user clicks a navigation link in a Single-Page Application (SPA). @@ -19,6 +19,11 @@ While it would be ideal to maximize both, different frontend architectures tend - Consult [Ways of Using Vue](/guide/extras/ways-of-using-vue) to see how you can leverage Vue in different ways. - Jason Miller discusses the types of web applications and their respective ideal implementation / delivery in [Application Holotypes](https://jasonformat.com/application-holotypes/). + +:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) as been replaced by Interaction to Next Paint](https://web.dev/articles/inp). + +Learn more about [How is INP different from First Input Delay (FID)?](https://web.dev/articles/inp#inp-vs-fid) + ::: ## Profiling Options {#profiling-options} From f6c986592e71b3a9cc732388193c0b028ef71847 Mon Sep 17 00:00:00 2001 From: Cannonbark Date: Fri, 17 Jan 2025 15:37:23 +0100 Subject: [PATCH 2/4] fix: missing square bracket --- src/guide/best-practices/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 3af30eff12..0a40c9ac15 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -20,7 +20,7 @@ While it would be ideal to maximize both, different frontend architectures tend - Jason Miller discusses the types of web applications and their respective ideal implementation / delivery in [Application Holotypes](https://jasonformat.com/application-holotypes/). -:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) as been replaced by Interaction to Next Paint](https://web.dev/articles/inp). +:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) as been replaced by [Interaction to Next Paint](https://web.dev/articles/inp). Learn more about [How is INP different from First Input Delay (FID)?](https://web.dev/articles/inp#inp-vs-fid) ::: From fb762442ad51df7da9fec77bb08bd6d78c67e655 Mon Sep 17 00:00:00 2001 From: Cannonbark Date: Mon, 20 Jan 2025 10:02:32 +0100 Subject: [PATCH 3/4] fix: typo --- src/guide/best-practices/performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 0a40c9ac15..3cec7dd54d 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -20,7 +20,7 @@ While it would be ideal to maximize both, different frontend architectures tend - Jason Miller discusses the types of web applications and their respective ideal implementation / delivery in [Application Holotypes](https://jasonformat.com/application-holotypes/). -:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) as been replaced by [Interaction to Next Paint](https://web.dev/articles/inp). +:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) has been replaced by [Interaction to Next Paint](https://web.dev/articles/inp). Learn more about [How is INP different from First Input Delay (FID)?](https://web.dev/articles/inp#inp-vs-fid) ::: From 1c2f8b7c8a265cfc0f02ad42cb1e67ec8c365db0 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 21 Jan 2025 10:03:37 +0100 Subject: [PATCH 4/4] Update src/guide/best-practices/performance.md --- src/guide/best-practices/performance.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index 3cec7dd54d..eafa30cf29 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -19,11 +19,6 @@ While it would be ideal to maximize both, different frontend architectures tend - Consult [Ways of Using Vue](/guide/extras/ways-of-using-vue) to see how you can leverage Vue in different ways. - Jason Miller discusses the types of web applications and their respective ideal implementation / delivery in [Application Holotypes](https://jasonformat.com/application-holotypes/). - -:::info [Fist Input Delay (FID)](https://web.dev/articles/fid) has been replaced by [Interaction to Next Paint](https://web.dev/articles/inp). - -Learn more about [How is INP different from First Input Delay (FID)?](https://web.dev/articles/inp#inp-vs-fid) - ::: ## Profiling Options {#profiling-options}