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

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

背景

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

http://writehere.com/

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

问题

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

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

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

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

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

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

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

我也是个前端新手,希望这些对楼主有用。
mrhuiyu
mrhuiyu
2015-05-04 08:15:16 +08:00
我不是工程师但是我有过相同的经验。
例如在国外可以很快的访问加载完成网页(我当然没出国,是别人帮我看的)
然后我在国内就是迟迟加载不完成!那个气人啊!后来看浏览器右下角,会告诉你什么东西在加载,然后慢慢排除即可。
adami
adami
2015-05-04 08:29:32 +08:00
客户用了代理
boai
boai
2015-05-04 08:35:22 +08:00
google fonts?
tenione
tenione
2015-05-04 08:55:48 +08:00
我看你这个帖子的时候,顺手点了网站链接。现在回帖都写完了,网站还是一片白板。
guoqiao
guoqiao
2015-05-04 08:59:08 +08:00
@tenione 你是在国内吗?也许是网站引用了一些被墙的资源
T7
T7
2015-05-04 09:04:54 +08:00
的确国内要翻才能打开
mongodb
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