如何在NextJs中首先加载组件

时间:2020-09-24 12:30:33

标签: reactjs performance next.js responsive lighthouse

我正在尝试优化手机得分低于30的网站的灯塔得分。问题在于该站点有点沉重,但它还为首次访问者提供了全屏模式,这会更加不利于加载时间。这是我首先加载该模式并让灯塔认为该站点已变为交互式的一种方法(当前TTI约为7s)

总结一下:

<div>Some content</div>
{ifFirstTimeUser ? (<FullScreenModal/>):null}
<div>Many other divs after this</div>

我希望FullScreenModal首先呈现,这意味着首次进行用户检查首先发生

我尝试过的事情

用于动态加载组件的next / dynamic:导致捆绑包大小略有增加,导致我的加载时间变得更糟

使用过的Redux代码拆分:这是我的上级推荐给我的,尽管当我分析捆绑包时,它似乎已经被拆分了,并且在已经完成的项目上确实令人困惑

使用了其他优化方法,例如为webp服务,使用svgs,压缩,延迟加载图像等:我能够将得分从8(ish)提高到23s

我们将不胜感激

0 个答案:

没有答案