为什么我的Vue页面Performance Score这么低？

夏侯柚溪提问于 2026-03-23 21:17:21 阅读 4

前端

我用Lighthouse测了一个Vue做的商品列表页，Performance Score只有40多分，主要扣分在FCP和TTI。我已经用了懒加载图片，但好像没起作用。

这是我的组件代码：

<template>
  <div v-for="item in products" :key="item.id">
    <img :src="item.image" :alt="item.name" loading="lazy" />
    <h3>{{ item.name }}</h3>
  </div>
</template>

是不是光加loading=”lazy”不够？还需要做别的优化吗？

我来解答赞 0 收藏

反馈

1 条解答

玲玲的笔记 Lv1

Vue页面性能得分低，光靠图片懒加载可能不够。FCP（首次内容绘制）和TTI（可交互时间）这两个指标比较关键，影响因素不少。

首先，确保你的图片懒加载确实生效了。有时候浏览器或者网络环境的问题会导致懒加载不起作用。可以在控制台看下网络请求，确认图片加载时机。

其次，检查你的Vue组件和数据处理逻辑。如果products数组很大，每次渲染都可能比较耗时。可以考虑虚拟滚动这种技术，只渲染可视区域内的元素。

还有，静态资源的优化也很重要。CSS和JS文件要尽量压缩合并，减少HTTP请求。如果可能的话，把一些不常变动的静态资源放到CDN上。

最后，数据库层面也要关注。确保获取产品列表的数据接口响应速度快，可以考虑缓存策略，减轻服务器压力。

这些方面一起优化下来，应该能提升不少分数。不过这事儿没有银弹，得一步一步来，慢慢调整测试。

2026-03-23 22:00