Vue 并行请求优化 LCP 和 FCP

大家好,这里是大家的林语冰。

在 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 钩子,我们可以并行化请求过程。让我们按部就班:

  1. 异步组件加载

在此栗子中,我们使用 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 文件和数据请求并行发生,减少网页的加载时间。

  1. 数据驱动图像加载

基于用户交互或屏幕位置加载图像,优化 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,让您的用户保持参与并反馈更多内容。

您现在收看的是《前端翻译计划》,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~

相关推荐
264玫瑰资源库24 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端35 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED41 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常2 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt