网站唯独在客户的电脑上加载超级慢, 集思广益下, 可能是什么原因呢?

2015-05-04 07:49:06 +08:00
 guoqiao

背景

给一个新西兰客户做了一个博客网站:

http://writehere.com/

技术组件: Python/Flask + Mongodb + Linode/Ubuntu + Nginx + uWSGI

问题

从目前的情况看, 问题似乎出在这台Macbook Air上. 客户甚至怀疑自己的电脑是不是中了病毒.

有一次白天我们一起喝咖啡的时候, 他把MBA带来了. 他通过MBA 连接iPhone 的热点访问网站, 我亲眼看到加载很慢. 而同时我们俩用手机访问都没有问题. 他访问别的网站也没有问题.
我打开 Chrome DevTools, 发现是静态资源耗时异常, 例如有一张图片加载了26秒.

请教各路大神, 这可能是什么原因呢?

5554 次点击
所在节点    程序员
42 条回复
Citrus
2015-05-04 08:08:26 +08:00
实际上你描述了半天没说到点子上。
Chrome 的 DevTool 可以详细展示每个资源每个阶段的耗时,你应该看这个然后找找是哪个阶段出现了问题。同时可以配合服务器日志查看。
lerry
2015-05-04 08:13:14 +08:00
他访问别的网站都没问题吗?我第一次打开也感觉有点慢,后来好些。

楼主可知道浏览器对于统一域名的并发请求数是有限制的?

建议把css合并成一两个文件,js也可以合并,用于样式的图片也可以用css sprite合并,页面上的图片建议放到子域名下,既然后端是Python也好控制。

可以把例如img1,img2,img3....等很多子域名解析过去,显示的时候随机选一个前缀,不管是哪一个都可以加载,我看豆瓣是这样做的。为了更好的缓存,也可以让图片和子域名的对应是固定的。

我也是个前端新手,希望这些对楼主有用。
mrhuiyu
2015-05-04 08:15:16 +08:00
我不是工程师但是我有过相同的经验。
例如在国外可以很快的访问加载完成网页(我当然没出国,是别人帮我看的)
然后我在国内就是迟迟加载不完成!那个气人啊!后来看浏览器右下角,会告诉你什么东西在加载,然后慢慢排除即可。
adami
2015-05-04 08:29:32 +08:00
客户用了代理
boai
2015-05-04 08:35:22 +08:00
google fonts?
tenione
2015-05-04 08:55:48 +08:00
我看你这个帖子的时候,顺手点了网站链接。现在回帖都写完了,网站还是一片白板。
guoqiao
2015-05-04 08:59:08 +08:00
@tenione 你是在国内吗?也许是网站引用了一些被墙的资源
T7
2015-05-04 09:04:54 +08:00
的确国内要翻才能打开
mongodb
2015-05-04 09:05:15 +08:00
jeansfish
2015-05-04 09:07:23 +08:00
现在Napier测试快速的
longquanwo
2015-05-04 09:07:47 +08:00
@mongodb 哥们这是啥软件
tvvocold
2015-05-04 09:32:01 +08:00
图片太多了,上 CDN
adspe
2015-05-04 09:35:17 +08:00
lazy load试过吗
tvvocold
2015-05-04 09:38:31 +08:00
BTW, 所有 Static Files 最好都上 CDN(最好是新西兰的 CDN)。另外,那张图片的确改删或压缩下。
tvvocold
2015-05-04 09:40:56 +08:00
cover
2015-05-04 09:45:51 +08:00
cover
2015-05-04 09:46:03 +08:00
坐标 杭州
cover
2015-05-04 09:46:30 +08:00
这个timeout了以后 就加载出来了
endrollex
2015-05-04 09:50:17 +08:00
tracert 一下,看看笔记本的线路是不是和手机一样,mac不知道怎么检测,不过tracert不走代理也不走80端口
imn1
2015-05-04 10:11:36 +08:00
这张图片是1920*1080,即使不算网速,渲染也吃紧(我对手机不熟,手机是否内置图片优化不清楚)
我这边即使页面打开后,在标签间切换时,那图片也要延时半秒显示
另外这张图片在html找不到,应该是在css中后加载,这样就几乎是最后且最大字节

这幅图片只是灰度图,没必要做这么大,用技术铺满就可以了
静态内容可以分一个域名/cdn,这样对浏览器利用 pipelining 有利,不过关键还是那图片太大

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/188243

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX