几年前,现代网络在速度缓慢,我从威斯康星州到华盛顿的公路旅行,大多在途中住在乡村酒店。我预计互联网在农村地区过于稀疏,有电网互联网缓慢,但我仍然感到惊讶的是,大部分的网是无法进入的。一些具有轻量级造型的博客是可读的,因为自1995年以来没有在其网站上更新造型的学术界的页面。但很少有商业网站是可用的(谷歌除外)。当我测量我的连接时,我发现带宽与90s中的56k调制解调器大致相当。延迟和数据项明显差,而不是平均拨号日期:延迟在500ms和1000ms之间变化,并且Packetloss之间的不同程化量为1%和10%。这些数字与我在糟糕的一天中看到的东西相当。
尽管我的连接只有90多岁的差,但绝大多数网络都不会加载。为什么网络不应该使用拨号或类似拨号连接?如果我试图观看YouTube并阅读Pinterest,那将是一件事。很难在没有带宽的情况下服务视频和图像。但我的在线兴趣从媒体角度来看非常无聊。几乎所有我在线消耗的东西都是纯文本,即使它发生在用图像和花哨的JavaScript设计。事实上,我最近尝试了一周使用W3M(默认情况下,默认情况下,不支持CSS,JavaScript或偶数图像),它只有两个我经常访问Don'的网站T真的在W3M中工作(Twitter和Zulip,两个基于基于文本的网站,至少在我使用它们时)1。
最近,我想提醒我们在使用刷新移动连接时读取Joelonsoftware Post时,Web对人们的工作有多差。加载HTML,但是五个CSS请求之一或十三个JavaScript请求超时,让我带着一个破损的页面。我在获得标题之前看到了三个侧边栏,菜单和广告的三页,因为页面需要某种布局修改以合理地显示。通常设计页面,使它们'如果某些依赖性无法加载,则重新读取,或者不可能读取。在慢速连接上,它与至少一个缺陷的缺点相当常见。刷新页面后两次,装入页面后的页面,我能够阅读博客文章,一个相当令人信服的帖子,在消除依赖项。
抱怨人们不关心他们曾经的表现,而且我们让我们让臃肿的慢动作没有好理由是“老人大喊大叫着云”领土;我可能听起来像那个抱怨他的文字处理器,它用于服用1MB的RAM,需要1GB的RAM。当然,这可以修剪下来,但花费时间做出优化的真正成本甚至300美元的笔记本电脑配有2GB的RAM,所以为什么要打扰?但这不是相同的情况 - 这不仅仅是像我一样关心网络性能的书呆子。当微软看待实际测量的连接速度时,他们发现一半的美国人不会有宽带速度。哎呀,AOL在2015年拥有200万台拨号用户,只是AOL独自一人。在美国之外,有更多的人有缓慢的联系。我最近与Ben Kuhn聊天,他在非洲度过了相当多的时间,关于他的互联网连接:
在埃塞俄比亚吉捷国吉捷卡的夜晚,我看到Ping Latence在〜45秒和数据包损失和差距中的数据包丢失和差不多有50%。 (I' M在这里,目前我有150ms ping,没有数据包丢失,但它' s 10am)。有一天的时间〜从未得到10秒,损失约为10%。过去〜年互联网已经更好了;除了在清晨,它曾经是那么糟糕。
SpeedTest.net报告2.6 Mbps下载,0.6 Mbps上传。我意识到我可能应该在我的移动数据上运行速度测试,因为带宽真的很贵。
我们在埃塞俄比亚的服务器具有光纤上行链路,但它经常下降,我们返回到16kbps的卫星连接,尽管我认为正常的人只是在这种情况下停止使用互联网。
如果您认为56K连接浏览不好,请从埃塞俄比亚尝试16K连接!
到目前为止我们看到的一切都是轶事。让我们加载一些网站,程序员可能经常使用各种模拟连接来获取页面加载时间的数据。 WebPageTest让我们看看它需要多长时间才能从世界各地的地点加载(以及为什么需要那漫长的时间)。它甚至让我们模拟各种各样的连接以及在各种移动设备上的负载网站。下表中列出的时间是页面“视觉完全”的时间;通过WebPageTest来衡量,即在上述内容中的时间停止变化。
每行都是一个网站。对于支持普通HTTP以及HTTPS的站点,都进行了测试; URL是HTTPS,除非明确指定为HTTP。前两列显示在MB(包括标题,握手,压缩等)中传输的数据量和所做的TCP连接数。该列的其余部分显示在从光纤(FIOS)各种连接上加载页面的时间以秒为单位,以更大的连接。 “糟糕”具有拨号的带宽,但用1000ms ping和10%packetloss,这是在使用互联网在小型乡村酒店时所看到的。 “😱”模拟埃塞俄比亚吉捷卡的16kbps卫星连接。通过传输的数据量排序行。
测试的超时为6分钟;任何慢的东西都被列为失败。无法加载的页面也列为失败。从桌子上跳出的一些东西是:
在一个不好的连接上,幅材的大部分是不可用的。即使在一个好的(0%packetloss,没有ping spike)拨号连接,某些站点也不会加载。
作为商业网站,谷歌基本上与慢速连接的人一样好。在拨号上,50%-10%的页面加载时间为一分钟半。但至少是它的装载 - 当我在蒙大拿州农村的慢速,共享,卫星连接时,几乎没有商业网站完全可以加载。我可以查看仅通过Google缓存具有静态内容的网站,但实时站点没有加载的希望。
虽然这里只测试了两个真正的大网站,但有很多网站将使用10MB或20MB的数据。如果您从美国阅读这一点,也许您不在乎,但如果您从Mauritania,Madagascar或Vanuatu浏览,请加载Codinghorror一次将您花费超过每日人均GNI的10%以上。
尽管Maciej的最佳努力,页面重量并不重要的MEME继续蔓延。 AFAICT,Web页面优化的所有时间的顶部HN链接是标题为“荒谬的快速页面加载 - 全堆栈DEVS指南”的文章。在页面的底部,作者链接到他的另一个帖子,标题为“页面重量并不重要”。
通常,被指向的斗牛员是带宽:低带宽区域(3G,发展世界)的用户正在得到轴。但数学并不完全锻炼。 Akamai将全球连接速度平均为每秒3.9兆位。
由于图像超时,“灯密快速”导向器未能在拨号或慢速移动连接上显示。在Reddit上,它也在负载下失败:"具有讽刺意味的是,该页面花了很长时间才能加载我关闭窗口。""很多...... GIF,除了您的观看体验更糟糕的是&#34 ;,"我甚至没有把它交给gif;标题加载然后它只是挂了。"等等。
“重量的缺陷无关紧要,因为平均速度快速”是,如果你平均地在我的公寓大楼里的联系(这是用于1Gbps互联网的人)和56K拨号的人,你会获得平均速度500 Mbps。这并不意味着拨号人员实际上将能够加载5MB的网站。 3.9 Mbps的平均速度来自2014年Akamai报告,但它只是平均水平。如果您查看Akamai的2016年报告,您可以找到整个国家,超过90%的IP地址慢!
是的,除了页面重量之外,还有很多因素,且是的,它可以创建一个' s非常小但加载缓慢的创建页面,以及加载正常的巨大页面重量是' t阻断,但总页重量仍然与负载时间相当不相关。
自发表以来,"赤裸上快速"使用一些JavaScript更新了指南,如果您向下滚动到足够远,只能加载图像。如果你&#39看页面尺寸编号(如果webpagetest isn' t脚本滚动),则使它在webspagepest上看起来更好想要读取该页面。如果您'无论如何都要阅读整个页面,重量增加,您无法通过加载该站点来预先加载图像。相反,如果您'重新阅读,您必须在每个部分停止几分钟,以等待从该部分中加载的图像。如果你'''重新幸运和加载图像的javascript didn' t无法加载。
就像许多人都以平均连接速度发展,许多人都有一个用户是谁的固定视图。也许他们认为有很多钱有很多钱,赢得了快速的联系和赢得了越来越慢的连接。这是非常粗略地说,也许是真实的平均,但网站不平均运作,他们在特定领域运行。 Jamie Brandon写了以下关于他的Airbnb经验:
我昨晚花了三个小时试图通过超载的WiFi预订Airbnb上的房间,大概是卫星连接。 OAuth似乎特别糟糕的联系。 Facebook' S OAuth'谷歌' S圆满了'选择一个账户' - > '请重新输入您的密码' - > '选择一个帐户'循环几次。登录的尝试需要很多尝试,我在Airbnb上触发了一些2FA废话,也没有工作(来自电子邮件的确认链接导致了说&#39的页面;请登录查看此页面&#39 ;)最终我刚刚被告知要发送电子邮件到[email protected],谁哈登&#39回复。
它'它特别掌握了airbnb并测试了这些东西,因为旅行几乎是该网站的整个点,所以他们甚至可以宣称那里的人'没有钱为人民服务联系差。
我的原始计划是帖子是显示50%-10%,90%-99%-1等,尾部加载时间。但是,50%的结果是如此糟糕,我不知道是否有任何点表明其他结果。如果您要查看90%的结果,您将看到大多数页面无法加载拨号,“坏”和“😱”连接对于几乎所有网站都无望。
您可以看到,对于一个不加载许多阻塞资源的非常小的网站,HTTPS明显慢于HTTP,尤其是在慢速连接上。实际上是说,这今天没关系,因为几乎没有网站是那么小,但如果你设计一个网站,就像有慢连接的人一样重要,这是明显的。
很长的版本是,要真正了解发生了什么,考虑阅读高性能浏览器网络,这是一本关于免费的Web性能的书籍。
简短的版本是大多数网站都很优化,没有想到他们所做的事情可以在页面加载时间内获得10倍的工具,其作业是使用偶尔的图像向上服务文本的网站。当我在2013年开始这篇博客时,我使用了八章,因为Jekyll / Octopress是最广泛推荐的静态站点发电机。具有一个或两个图像的普通博客帖子需要11秒钟,以便在电缆连接上加载,因为八八页默认值包括标题中的多个无用的JavaScript文件(对于嵌入Flash视频和美味集成而言,逐个使用的东西)被阻止页面呈现。只需移动那些JavaScript到页脚减半页面加载时间,并使其他一些调整减少了另一种幅度的页面加载时间。当我制作这些变化时,我对网页优化一无所知,除了在2分钟的优化中听到的,除了互联网如何运作的40分钟,我能够获得20倍的加速度我的博客几个小时。您可能会争辩说,我现在已经走得太远了,删除了太多的CSS,但我在快速连接之前获得了20倍的加速,然后在制作影响网站的外观(并且慢连接上的加速度更大的加速)之前有一个20倍的人。
那是正常的。适用于许多不同类型的博客软件和CMS的流行主题包含反优化如此明显,即任何程序员,甚至没有前端体验的人,也可以通过在他们的网站上指向WebPageSt并查看输出来找到大的收益。
虽然它'很容易归咎于页面作者,因为有很多在页面上的很多低悬挂水果,那里就在浏览器侧的低悬挂水果。为什么我的浏览器打开6个TCP连接,试图在慢卫星连接上时立即下载六个图像?这只是保证所有六种图像都会超时!即使我在客户端调整超时,配置为防止DOS攻击的服务器仍然留下了长寿的连接,且#39; T做任何事情。我有时可以通过刷新页面几次(每次等待十分钟)来获得一些图像,但为什么' t浏览器为我处理重试?如果您考虑了几分钟,则浏览器可以为慢速连接的人员做很多优化,但由于他们不,他们的最佳电流解决方案似乎是:当您可以使用W3M ,然后在&#39工作时用ad-blocking切换到浏览器。但为什么用户必须使用两个完全不同的程序,其中一个是基于文本的界面,只有计算机书呆子会发现可易娱乐?
当我在谷歌时,有人告诉我一个关于时间的故事,“他们”完成了一个大的优化推动,只发现测量的页面加载时间增加了。当他们挖掘数据时,他们发现装载时间增加的原因是,在做优化后,他们从非洲获得了更多的流量。该团队的产品从无法使用的人才无法使用,这导致了许多具有缓慢连接的用户,以开始使用加载时间实际增加的产品。
昨晚,在WebSockets协议的演示文稿中,Gary Bernhardt将观察到设计WebSockets协议的人员使用可变长度字段进行帧长度的东西,以节省几个字节。相比之下,如果你看一下Alexa Top 100个网站,那么几乎所有的人都有大量的雪橇;对于这些100个站点使用的总带宽可能大于所有WebSockets连接组合的总带宽可能大。尽管如此,如果我们只看在此帖子中测试的三个前35个站点,而且两个在线发送未压缩的JavaScript,两个将裸露的域重定向到www子域,两个通过不按压图像发送大量无关信息因为它们可以在不牺牲质量的情况下压缩。如果您看看Twitter,其中在我们的桌子中被提到,但在上面提到,他们实际上可以做一个反优化,如果上传一个甚至特别优化的PNG,他们将重新编码它JPEG较大,具有可见的伪影!
如果您不确定在存储密码时要做什么,则“使用bcrypt”已成为Mantra。如果“使用WebPageTest”以相同的方式夹具,那么网络将是一个更好的地方。这并不总是这项工作的最佳工具,但它确实击败了当前的默认值。
通过在C4.xlarge VM上反复加载页面,在C4.xlarge VM上重复加载页面进行上述测试,在Chrome中的第一页加载上的模拟连接,没有其他标签打开,而不是在VM上运行WebPageTest软件和浏览器。这在许多方面都是不现实的。
在相对术语中,这种具有大边缘存在的缺点位点。当我在蒙大拿州农村时,我跑了一些测试,发现我明显更好地延迟了谷歌而不是基本上是任何其他网站。这在测试结果中没有反映。此外,该设置意味着几乎确定从CDN高速缓存提供的页面。这应该与谷歌和亚马逊这样的网站有任何差异,但它减少了逃离的贩运网站的页面加载时间,且#39; T"始终"从缓存中提供。例如,当我没有关于社交媒体的培训后,在CDN缓存中提供55%和75%的流量,当我有社交媒体上的东西时,它' s更像90%到99%。但测试设置意味着测试期间CDN缓存命中率可能是>我的网站和其他博客的99%,又称' t如此广泛地读到它们' d通常总是有缓存的副本。
所有测试都是假设第一页加载的运行,但对于像谷歌和亚马逊这样的网站来说,它完全合理,以假设他们的许多资产被缓存。测试首页加载时间可能是具有像我的流量概况的网站,其中大部分流量来自于从未访问过网站的人的社交媒体推荐。
一个c4.xlarge是一个相当强大的机器。今天,大多数页面加载来自移动,即使是最快的移动设备也不像C4.xlarge那么快;大多数移动设备比最快的移动设备慢得多。大多数桌面页面加载也将来自的机器比C4.xlarge慢。虽然结果未显示,但我也使用t2.micro实例运行一组测试:对于简单的网站,像我一样,差异可以忽略不计,但对于复杂的网站,像亚马逊一样,页面加载时间与2x一样多更差。正如您所希望的,对于任何特定网站,随着连接较慢的情况,差异变小。
正如Joey Hess所指出的那样,许多拨号提供商试图进行压缩或其他技巧以减少页面的有效权重,这些测试都没有考虑到这一点。
Firefox,即Edge通常具有来自铬具有基本不同的性能特征。就此而言,不同版本的Chrome可以具有不同的性能特征。我刚刚使用了Chrome,因为它是最广泛使用的桌面浏览器,并运行这组测试占用了一个单一浏览器的全天VM时间。
模拟的错误连接添加了恒定的延迟和固定(10%)PacketLOSS。实际上,差的连接具有高度变化的延迟,峰值远高于模拟延迟和高于持续时间几分钟,小时或几天的数据延迟的延迟。在桌子的最右侧放置😱可能会使它看起来像是最糟糕的连接,但是Packetloss可能会变得更加糟糕。
同样,虽然Codinghorror发生在页面的底部,但它与最慢的加载页面无处可行。例如,我最初被认为包括桌面中的斜面,但它却导致总测试运行时间显着增加,因为它在六分钟内超时了。即使在FIOS上,通过制作往返223 req需要15岁
......