各位 V 友好！
今年才开始接触 Web 开发，代码小白一枚。
用 Next.js 搓了一个网站： https://textideo.com/ 。
目前功能大体上跑通了，但有一个让我很头疼的问题：
首页的响应和加载速度感觉很慢。尤其是第一次打开的时候，感觉要转好几秒。（这对一个动态视频类网站太不友好了）
我尝试了网上能找到的常规办法（比如压缩图片、问 AI 优化代码逻辑），但效果都很一般。
我现在有点摸不准方向，不知道是因为 Next.js 的 SSR 没配置好？还是服务器性能不够？亦或是前端资源阻塞了？
想请各位大佬帮忙点进去看看：
希望能指点一下迷津
非常感谢。采纳有用的建议也可以赠送积分，正好让各位大佬帮我看看还有什么优化的点和 bug 需要修复！
今年才开始接触 Web 开发，代码小白一枚。
用 Next.js 搓了一个网站： https://textideo.com/ 。
目前功能大体上跑通了，但有一个让我很头疼的问题：
首页的响应和加载速度感觉很慢。尤其是第一次打开的时候，感觉要转好几秒。（这对一个动态视频类网站太不友好了）
我尝试了网上能找到的常规办法（比如压缩图片、问 AI 优化代码逻辑），但效果都很一般。
我现在有点摸不准方向，不知道是因为 Next.js 的 SSR 没配置好？还是服务器性能不够？亦或是前端资源阻塞了？
想请各位大佬帮忙点进去看看：
希望能指点一下迷津
非常感谢。采纳有用的建议也可以赠送积分，正好让各位大佬帮我看看还有什么优化的点和 bug 需要修复！
 |
1
n18255447846 1 天前
你这是想白嫖啊，不过网站挺好的感觉老哥很有执行力。PS: 占个楼顺便推广下 remitly 白嫖 $25
等楼下大佬方案~~~ |
 |
2
potatowish 1 天前 via iPhone
把首页那个妹子视频去掉，那个妹子就非加不可吗
|
 |
3
superedlimited 1 天前 via Android  1
spam @livib
|
 |
4
xiaoyaowyz OP @n18255447846 哈哈真心求教😂 主要自己瞎折腾实在搞不定了，谢老哥鼓励！
|
|
5
xiaoyaowyz OP @potatowish 我本来是想用那个板块来延伸内页顺便展示一下产品生成的效果... 难道真是它把速度拖死的？我有空测一下。感谢大佬🙏
|
 |
6
PC9528 1 天前
打开页面几十个视频，几十张图片同时隔这加载，不慢就有鬼了... 懒加载一下图片和视频
|
 |
7
Aleks 1 天前
其实整体还好，4G 网加载黑屏时间久。8s 才出 Video 首帧图。可以自己截一个首帧图，视频加载好后去替换直接播放，这样体感会好很多。
|
 |
8
SingeeKing PRO 这么多张图…… 71MB ，这加载速度可以了
|
|
9
SingeeKing PRO 不过如果单纯想减少那个转圈的时间，那就做异步加载吧
|
 |
11
zhengfan2016 1 天前
页面确实有点卡，大概率是用的乱七八糟动画组件太多拖累了，至于怎么优化，这是前端工程师的工作
 |
 |
12
irainsoft 1 天前
问题很大，但其实挺快。禁用缓存后海外网络首屏 70.1M 的加载内容 2.6s 加载完... 楼上都给分析完了，连菜单 dropdown 里都是视频，属实没必要。简单试了下，似乎有些元素已经是做懒加载了，但比例不高。核心还是得删些视频资源。
|
 |
13
duuu 1 天前
用 chrome devtool mcp ，让 ai 给你分析
|
|
14
xiaoyaowyz OP @PC9528 好的，感谢大佬，我只想着多展示一点呢。但是我看其他站不会这么卡呢？
|
|
15
xiaoyaowyz OP @Aleks 感谢大佬建议，我思考一下怎么实现，给我提供的思路很好，但是我感觉实现起来对我这个水平来说不太容易😄
|
|
16
xiaoyaowyz OP @Aleks 我上次想到了这个功能，就是水平不够，没成功😭
|
|
17
xiaoyaowyz OP @irainsoft 哈哈感谢大佬🙏 但是去掉一些会导致我的内部链路不完整。爬虫停留少得可怜。现在这个版本是我优化后的页面了
|
|
18
PC9528 1 天前
@xiaoyaowyz 不是没让你不展示，而是等用户滑到的时候再展示，你让 AI 帮你增加这些图片/视频的懒加载，AI 会帮你做好的，还有 SEO 的话应该考虑用结构化数据来描述视频... 这样比较合理
|
|
19
xiaoyaowyz OP @PC9528 好的，谢谢大佬，我听明白了感谢🙏 我去琢磨琢磨怎么实现🫡
|
 |
20
NewYear 1 天前
|
 |
21
j030110 1 天前
打开浏览器控制台看一下是什么资源加载慢
|
|
22
j030110 1 天前
图片进行 webp 无损压缩，然后开启 http2 ，然后开启 gzip ，然后压缩 js 和 css 代码
|
Select Language