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

[guoqiao]

背景

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

http://writehere.com/

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

问题

• 客户用自己的Macbook Air每天晚间(上网高峰期, 20:00-00:00)访问网站时, 总是超级慢, 除了顶部的导航, 其它内容需要数分钟才能加载, 甚至一直加载不出来.
• 白天大部分时候正常, 仅仅有时候要加载很久, 而晚上问题变得很严重.
• 新西兰是小国, 高峰期时此站访问人数也不过几十人而已.
• 其它网站都正常, 仅此站出现问题.
• 问题仅仅出现在客户自己的Macbook Air上, 他自己的iPhone(同一个 WIFI 网络下)没问题. 同时, 当他说加载慢时, 我在自己家用我的Macbook Pro访问, 也没有问题.
• 在 Chrome 中"Empty Cache and Hard Reload"也没用.
• Chrome和Safari加载都很慢.
• DNS 修改为8.8.8.8或8.8.4.4, 不起作用.

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

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

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

[Citrus]

实际上你描述了半天没说到点子上。
Chrome 的 DevTool 可以详细展示每个资源每个阶段的耗时，你应该看这个然后找找是哪个阶段出现了问题。同时可以配合服务器日志查看。

[lerry]

他访问别的网站都没问题吗？我第一次打开也感觉有点慢，后来好些。

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

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

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

我也是个前端新手，希望这些对楼主有用。

[mrhuiyu]

我不是工程师但是我有过相同的经验。
例如在国外可以很快的访问加载完成网页（我当然没出国，是别人帮我看的）
然后我在国内就是迟迟加载不完成！那个气人啊！后来看浏览器右下角，会告诉你什么东西在加载，然后慢慢排除即可。

[adami]

客户用了代理

[boai]

google fonts?

[tenione]

我看你这个帖子的时候，顺手点了网站链接。现在回帖都写完了，网站还是一片白板。

[guoqiao]

@tenione 你是在国内吗？也许是网站引用了一些被墙的资源

[T7]

的确国内要翻才能打开

[mongodb]

[jeansfish]

现在Napier测试快速的

[longquanwo]

@mongodb 哥们这是啥软件

[tvvocold]

图片太多了，上 CDN

[adspe]

lazy load试过吗

[tvvocold]

BTW, 所有 Static Files 最好都上 CDN（最好是新西兰的 CDN）。另外，那张图片的确改删或压缩下。

[tvvocold]

http://c.blog.sina.com.cn/profile.php?blogid=a466bf9189000rsw

[cover]

GET http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit net::ERR_CONNECTION_TIMED_OUT

[cover]

坐标 杭州

[cover]

这个timeout了以后 就加载出来了

[endrollex]

tracert 一下，看看笔记本的线路是不是和手机一样，mac不知道怎么检测，不过tracert不走代理也不走80端口

[imn1]

这张图片是1920*1080，即使不算网速，渲染也吃紧(我对手机不熟，手机是否内置图片优化不清楚)
我这边即使页面打开后，在标签间切换时，那图片也要延时半秒显示
另外这张图片在html找不到，应该是在css中后加载，这样就几乎是最后且最大字节

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

[pirex]

safari国内访问
7s

[pirex]

Chrome也测试了下，没问题。
检查下客户机器上的网络环境，代理啊什么的

[b821025551b]

@longquanwo 我感觉很像浏览器自带的开发人员工具耶

[ericls]

北美 很快

话说 我也是一直 flask mongodb uwsgi nginx 哈哈 真有缘

[jyz19880823]

有的 mac 确实有访问某些资源很慢的情况,之前遇到过,是卡在其中一步上,可以仔细看下

[tenione]

@guoqiao 了解。是在国内。

[gamexg]

楼主的css、js 文件是不是太多了，30个文件...
合并或者分域名处理下吧。

向 @lerry 说的“楼主可知道浏览器对于统一域名的并发请求数是有限制的？”

[cfan8]

@gamexg 应该没什么关系，看16-18楼的reply应该是有blocking resources，楼主改成非block加载试试看？

[Chrisplus]

Black-White-Man-bg-v5.jpg　加载时间忒长

[archbishop]

在我这里是这个
http://writehere.com/index/json/simple?skip=0&last_page=false&sort=latest&writers=everybody
中间卡住很久
网页我不懂，仅供参考

[chinawrj]

支持LZ维护用户的合法权益！

[phy25]

@longquanwo FireFox 自带的 F12 开发工具。

[guoqiao]

抱歉各位, 大家没有登录时看到的是欢迎页, 所以有一张大图.
请大家先放过大图的问题, 我说的无法加载是登陆后这个页面(或者在欢迎页点"have a look"也能看到):



@gamexg @lerry
浏览器的并发请求限制我是知道的, 这个地方的问题是早期采用了Flask的assets方式来加载静态资源, 经常出现一些问题. 后来为了调试, 全部改成了直接引用的方式, 所以资源数目很多. 当时测试了下, 发现问题也不是很大, 就暂时放下了.

大家如果要在网站上挑毛病, 自然是可以挑出一堆的, 那些细节我可以稍后优化.
我主要的困扰是:
为什么只有客户的这台电脑上出现无法加载的问题, 可能有哪些原因?

[yahoo21cn]

内存不够了？

[kozora]

我这边秒开啊 不管是不是加了SS还是直连都是秒开

[guoqiao]

@yahoo21cn 那不至于

[tczzjin]

在客户电脑上直接打开单个静态文件看看timing的数据,比如直接地址栏打开那张加载了26s的图片,看看具体的timing是啥,截个图

[seki]

我看到几十K 的图片群中钻出来一张 596K 的图片

我觉得你可以试试把静态文件先放 CDN 上看看有没有改善，服务器这边能试的都试完了，那就只能是你客户电脑的问题了——听描述也挺像

[daniel51]

我用mac也是一直打不开。。。。。

[pandorla1984]

基本可以认为是客户端的问题吧，但要确认问题现在的信息不够，推荐在那台出问题的air上装多个浏览器 例如FF,CHROME加上原生的safari，看看是不是都慢。如果都慢，那就是网络设置的问题，可能air的wifi不太稳定，接网线试试看，或者ping -t看是否会偶尔超时。如果只是某个浏览器慢，那就是浏览器的问题，卸载重装或者研究一下具体卡在哪里，哪个版本的浏览器，然后有针对性地解决。

如果怀疑是网站代码问题，也很简单，在浏览器端禁用CSS和JS，再看打开速度。如果正常，说明网站服务器没问题，客户端代码有点问题，再有针对性的调试前端代码。

[ywisax]

我看了下，好像很多资源请求都是pending。之前在刷feed时候看过有人遇过过跟你类似的问题。
直接给传送门吧。http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/
希望对你有帮助。

[YAFEIML]

因为客户不想要了