用 Next.js 写了个站，首页加载太慢了！始终找不到原因

[xiaoyaowyz]

各位 V 友好！

今年才开始接触 Web 开发，代码小白一枚。
用 Next.js 搓了一个网站： https://textideo.com/ 。

目前功能大体上跑通了，但有一个让我很头疼的问题：

首页的响应和加载速度感觉很慢。尤其是第一次打开的时候，感觉要转好几秒。（这对一个动态视频类网站太不友好了）

我尝试了网上能找到的常规办法（比如压缩图片、问 AI 优化代码逻辑），但效果都很一般。

我现在有点摸不准方向，不知道是因为 Next.js 的 SSR 没配置好？还是服务器性能不够？亦或是前端资源阻塞了？

想请各位大佬帮忙点进去看看：

希望能指点一下迷津

非常感谢。采纳有用的建议也可以赠送积分，正好让各位大佬帮我看看还有什么优化的点和 bug 需要修复！

[n18255447846]

你这是想白嫖啊，不过网站挺好的感觉老哥很有执行力。PS: 占个楼顺便推广下 remitly 白嫖 $25

等楼下大佬方案~~~

[potatowish]

把首页那个妹子视频去掉，那个妹子就非加不可吗

[superedlimited]

spam @livib

[xiaoyaowyz]

@n18255447846 哈哈真心求教😂 主要自己瞎折腾实在搞不定了，谢老哥鼓励！

[xiaoyaowyz]

@potatowish 我本来是想用那个板块来延伸内页顺便展示一下产品生成的效果... 难道真是它把速度拖死的？我有空测一下。感谢大佬🙏

[PC9528]

打开页面几十个视频，几十张图片同时隔这加载，不慢就有鬼了... 懒加载一下图片和视频

[Aleks]

其实整体还好，4G 网加载黑屏时间久。8s 才出 Video 首帧图。可以自己截一个首帧图，视频加载好后去替换直接播放，这样体感会好很多。

[SingeeKing]

这么多张图…… 71MB ，这加载速度可以了

[SingeeKing]

不过如果单纯想减少那个转圈的时间，那就做异步加载吧

[Aleks]

@Aleks 此外就是加载优先级没区分。简单做就是等首屏组件加载完成后，才去加载非首屏的组件。当前看是没有区分优先级的。弱网环境下可以很明显看出差异

[zhengfan2016]

页面确实有点卡，大概率是用的乱七八糟动画组件太多拖累了，至于怎么优化，这是前端工程师的工作

[irainsoft]

问题很大，但其实挺快。禁用缓存后海外网络首屏 70.1M 的加载内容 2.6s 加载完... 楼上都给分析完了，连菜单 dropdown 里都是视频，属实没必要。简单试了下，似乎有些元素已经是做懒加载了，但比例不高。核心还是得删些视频资源。

[duuu]

用 chrome devtool mcp ，让 ai 给你分析

[xiaoyaowyz]

@PC9528 好的，感谢大佬，我只想着多展示一点呢。但是我看其他站不会这么卡呢？

[xiaoyaowyz]

@Aleks 感谢大佬建议，我思考一下怎么实现，给我提供的思路很好，但是我感觉实现起来对我这个水平来说不太容易😄

[xiaoyaowyz]

@Aleks 我上次想到了这个功能，就是水平不够，没成功😭

[xiaoyaowyz]

@irainsoft 哈哈感谢大佬🙏 但是去掉一些会导致我的内部链路不完整。爬虫停留少得可怜。现在这个版本是我优化后的页面了

[PC9528]

@xiaoyaowyz 不是没让你不展示，而是等用户滑到的时候再展示，你让 AI 帮你增加这些图片/视频的懒加载，AI 会帮你做好的，还有 SEO 的话应该考虑用结构化数据来描述视频... 这样比较合理

[xiaoyaowyz]

@PC9528 好的，谢谢大佬，我听明白了感谢🙏 我去琢磨琢磨怎么实现🫡

[NewYear]

这种帖子不应该出现在分享创造节点吧，明显属于问答节点。

什么帖子都往这个节点放，只会变成垃圾节点。

挪一下吧

@Tink @drymonfidelia