如果这意味着页面大小下降,那么拥有更多HTTP请求会更好?例如,如果我有一个20KB的图像,在使用两个图像更有意义之前我需要减少多少尺寸?
答案 0 :(得分:19)
实际答案是从不,尤其是当您谈论相对少量的数据时,例如千字节或两千字节。
网页性能的真正敌人不是传输的字节数;相反,它是网络延迟。让我们以你的例子为例,考虑一个5 Mb / s的连接(美国的平均连接速度略高于此),服务器的ping时间为80ms:
1x 20 kB files: 80ms latency + 31ms transfer time = 111ms
2x 4 kB files: 160ms latency + 13ms transfer time = 173ms
这个“优化”只花费至少 62ms,其他所有变量都相同。在现实世界中,我敢打赌,由于额外的服务器负载等因素,性能会更差。
另外考虑到你现在正在使用浏览器将有限数量的并行请求中的额外一个(在2到8之间取决于浏览器)一半的图像,而不是像脚本,CSS那样更有价值的东西,或其他非spritable图像。这会减慢页面的整体加载时间。
此外,我怀疑你的整个前提是有缺陷的。通常,将图像拆分为两个文件不能真正产生较小的整体文件大小,因为每个图像容器格式都有标题数据;例如,PNG文件在任何实际图像数据之前具有至少57字节的开销。另外,额外的HTTP请求意味着通过线路额外增加了±800-900字节的开销。
我怀疑你会发现一个properly compressed PNG不会超过构成同一张图像的两张PNG的总大小。
http://josh3736.net/images/is1.png(1027字节)
http://josh3736.net/images/is2a.png http://josh3736.net/images/is2b.png(730 + 809 = 1539字节)
即使第一个单个PNG具有150x100像素的“死”透明空间,它也比表示相同图像的两个PNG <强>小33%。 (无视我无法正确对齐<img>
标签,以使两个示例看起来相同。)
答案 1 :(得分:0)
乔什回答的结论并没有真正改变。考虑到"Mobile Network Experience Report Jan. 2020",延迟降低了约30%(从80ms减少到约55ms),但对于最低评级的运营商,平均下载速率(移动设备)已提高到23 MB / s。
因此,我们得出了2019年评级最低的美国移动运营商的理论数字:
1x 20 kB files: 55ms latency + 7ms transfer time = 62ms
2x 4 kB files: 110ms latency + 2 ms transfer time = 112ms