为什么我的页面TTI指标一直卡在8秒以上？优化后没明显改善

长孙晓曼提问于 2026-01-29 21:27:28 阅读 49

工具

最近在优化一个电商详情页，Lighthouse评分里的TTI指标总是在8秒左右，用户反馈页面加载卡顿。页面用了Vue组件，图片都加了懒加载，还把CSS抽离成单独文件了，但测试结果还是差。折腾了半天，发现可能是某个组件的初始化代码拖慢了？

比如这个商品轮播图组件，代码逻辑看起来不复杂，但每次加载时控制台都会显示长时间任务：


<template>
  <div ref="carousel" class="carousel">
    <img 
      v-for="(src, index) in images" 
      :key="index" 
      :data-src="src" 
      @load="handleImageLoad" 
      class="lazy-img">
  </div>
</template>

<script>
export default {
  mounted() {
    // 手动实现Intersection Observer懒加载
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    }, { rootMargin: '0px 0px 200px 0px' });

    this.$refs.carousel.querySelectorAll('.lazy-img').forEach(img => {
      observer.observe(img);
    });
  }
}
</script>

已经尝试过把图片尺寸压缩到200kb以内，合并JS打包，甚至把第三方统计脚本移到底部，但TTI还是没降到5秒以下。是不是懒加载实现有问题？或者有其他隐藏的性能瓶颈没发现？

TTI指标

我来解答赞 5 收藏

反馈

1 条解答

东方春萍 Lv1

你这懒加载没问题，但Vue的mounted钩子里干了太多事，Intersection Observer虽然高效，但每次初始化都会消耗时间。我一般直接用原生图片懒加载，浏览器自带的就挺好：

<img 

  v-for="(src, index) in images" 

  :key="index" 

  :src="src" 

  loading="lazy" 

  class="lazy-img">

这样省掉一大坨JS开销，TTI能降不少。另外检查下Vuex或生命周期里有没有阻塞主线程的任务，console.time()帮你定位耗时代码。

2026-01-30 16:01