大家好,这里是大家的林语冰。
在 Web 开发中,快速加载的网站分秒必争。LCP(最大内容绘制)和FCP(首次内容绘制)这两个关键性能指标对于出色的 UX(用户体验)和优化搜索引擎跑分至关重要。本文聚焦于 Vue(一个人气爆棚的 JS 框架),以及如何使用 Vue 诉诸并行请求组件文件和图像来优化 LCP 和 FCP。
我们将探讨这些指标的战略意义,了解 Vue 的异步组件,并解决传统加载方法的挑战。读完本文后,您将拥有实现并行请求、优化 Vue App 的 LCP 和 FCP,以及提供更快、更具吸引力的 UX 的工具。
免责声明
本文属于是语冰的直男翻译了属于是,略有删改,仅供粉丝参考,英文原味版请临幸 Vue.js Parallel Fetching improves LCP and FCP。
并行请求获得最佳速度
FCP 缓慢的主要原因之一是组件 JS 文件和数据的顺序加载。通过利用 Vue 和 beforeEnter
钩子,我们可以并行化请求过程。让我们按部就班:
- 异步组件加载
在此栗子中,我们使用 beforeEnter
钩子异步请求产品数据,如下所示:
js
beforeEnter: async (to, from, next) => {
// 并行请求数据和组件
fetchProductDataParallel(to)
// 无需等待即可继续路由导航(它会开始请求组件文件)
next()
}
这里,fetchProductDataParallel
是一个优化并行请求的函数。它允许组件 JS 文件和数据请求并行实现,减少网页的加载时间。
js
// fetchProductDataParallel 的实现如下
async function fetchProductDataParallel(to) {
const response = await fetch(`https://dummyjson.com/products/${to.params.id}`)
const product = await response.json()
// 等待根 App 被创建
await store.state.rootAppCreatedPromise
// 尽早开始加载图像
const image = new Image()
image.src = product.images[0]
// 把产品设置导 Vuex/Pinia
store.commit('SET_PRODUCT_DATA', product)
}
这允许组件 JS 文件和数据请求并行发生,减少网页的加载时间。
- 数据驱动图像加载
基于用户交互或屏幕位置加载图像,优化 UX 和性能。从数据中请求图像 URL 并尽早开始加载,如下所示:
js
const image = new Image()
image.src = product.images[0]
通过与其他资源并行加载图像,可以防止它们成为加载过程中的性能瓶颈。
对 Web 性能的影响
下面是按顺序请求数据和资源的传统组件的屏幕截图。(您可以在此处测量指标 mkiselyow.github.io/performance...
这是一个优化组件的屏幕截图,该组件利用并行请求数据和资源,显着优化了 Web 性能。(mkiselyow.github.io/performance...
通过践行这些策略,您将见证网站 LCP 和 FCP 指标的显着优化。数据、组件和图像加载过程同时发生,带来更快、响应更灵敏的 UX。
完结撒花
优化 LCP 和 FCP 对于确保良好的 UX 和提高网站 SEO 跑分至关重要。诉诸 Vue 异步路由组件以及请求组件文件、数据和图像的并行化,您可以实现迅雷不及掩耳的 Web 性能。践行这些技术,使用性能测试工具衡量您的结果,并观察用户满意度的飙升。
通过遵循这些最佳实践,您可以维护一个高性能的 Web App,让您的用户保持参与并反馈更多内容。
您现在收看的是《前端翻译计划》,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~