Html 网页应保持在最大尺寸之下吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6430374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:12:55  来源:igfitidea点击:

Is there a maximum size that web pages should be kept under?

htmlperformance

提问by Abe Miessler

When I say size I'm talking about bytes not pixels.

当我说大小时,我指的是字节而不是像素。

I'm curious if there is any consensus on what the maximum size should be for various categories. Specifically:

我很好奇是否就各种类别的最大大小达成了共识。具体来说:

  1. Broadband connections
  2. Dialup connections
  3. Mobile connections
  1. 宽带连接
  2. 拨号连接
  3. 移动连接

采纳答案by Sander Marechal

Size isn't everything. What matters is performance. Better even: perceived performance. There are many ways to make a website feel faster than it really is. Some of these techniques can even increase your absolute page size in bytes (e.g. adding more javascript logic to it).

大小不是一切。重要的是性能。甚至更好:感知性能。有很多方法可以让网站感觉比实际速度更快。其中一些技术甚至可以增加以字节为单位的绝对页面大小(例如,向其中添加更多 javascript 逻辑)。

Test your websites with a tool like Yahoo! YSlowand stop focussing on page size. That's just one factor of website performance and not even the most important one.

使用Yahoo! 等工具测试您的网站。YSlow并停止关注页面大小。这只是网站性能的一个因素,甚至不是最重要的因素。

回答by rqmedes

Depending on the connection you want the page loading in as less time as possible. Less than 4 seconds is optimal.

根据您希望在尽可能短的时间内加载页面的连接。最好少于 4 秒。

"A study conducted by leading web traffic controller Akamai Technologies revealed that a poorly designed website loses a full 30 percent of its customers within a few seconds. The same study also found that if a site takes longer than four seconds to load, 75 percent of viewers won't bother to return to it." http://www.ianbrodie.com/get-clients-online/lose-website-visitors-in-5-minutes/

“领先的网络流量控制器 Akamai Technologies 进行的一项研究表明,一个设计糟糕的网站会在几秒钟内失去 30% 的客户。 同一项研究还发现,如果一个网站的加载时间超过 4 秒,则 75% 的客户观众不会费心回到它。” http://www.ianbrodie.com/get-clients-online/lose-website-visitors-in-5-minutes/

More important than size is following some simple rules and best practices.
Best Practices for Up Your Web Site
http://developer.yahoo.com/performance/rules.html

比大小更重要的是遵循一些简单的规则和最佳实践。
建立您的网站的最佳实践
http://developer.yahoo.com/performance/rules.html

So a rough estimate would be

所以粗略的估计是

Broadband connections   ~200K
Dialup connections      ~50k
Mobile connections      ~100K

回答by Fatih Hayrio?lu

limit 10 TCP packets (~14 kb)

限制 10 个 TCP 数据包 (~14 kb)

Due to how TCP estimates the capacity of a connection (i.e. TCP Slow Start), a new TCP connection cannot immediately use the full available bandwidth between the client and the server. Because of this, the server can send up to 10 TCP packets on a new connection (~14KB) in first roundtrip, and then it must wait for client to acknowledge this data before it can grow its congestion window and proceed to deliver more data.

Due to this TCP behavior, it is important to optimize your content to minimize the number of roundtrips required to deliver the necessary data to perform the first render of the page. Ideally, the ATF content should fit under 14KB - this allows the browser to paint the page after just one roundtrip. Also, it is important to note that the 10 packet (IW10) limit is a recent update to the TCP standard: you should ensure that your server is upgraded to latest version to take advantage of this change. Otherwise, the limit will likely be 3-4 packets!

由于 TCP 估计连接容量的方式(即 TCP 慢启动),新的 TCP 连接不能立即使用客户端和服务器之间的全部可用带宽。因此,服务器可以在第一次往返中在新连接(~14KB)上发送最多 10 个 TCP 数据包,然后它必须等待客户端确认此数据,然后才能增大其拥塞窗口并继续传送更多数据。

由于这种 TCP 行为,优化您的内容以最大限度地减少传送必要数据以执行页面的首次呈现所需的往返次数非常重要。理想情况下,ATF 内容应小于 14KB - 这允许浏览器在一次往返后绘制页面。此外,请务必注意 10 个数据包 (IW10) 限制是 TCP 标准的最新更新:您应该确保您的服务器升级到最新版本以利用此更改。否则,限制可能是 3-4 个数据包!

https://developers.google.com/speed/docs/insights/mobile

https://developers.google.com/speed/docs/insights/mobile

回答by Rodolfo

Depends on the page really. If your page is an informative one, you'll have lots of HTML (text) content. But if your page is more graphical (like a store department page showing images of products), you'll have lots of images.
Images are much heavier than text (a single image could be 50K, which is like 10 pages of text).
You also need to consider the size of CSS files, javascripts, etc. But they're cached so they only matter for the initial 'load'.
Having said that, you could set a target of 100-200k (mixed text/images) max per page. More than that and slower connections will take a while to load.
Most probably you don't know who's going to visit your page (mobile, broadband or dialup), so you should try to reach a common ground (or design different pages for different targets, but this is a pain to maintain in the long run as your site expands). I think 100-200k is ok for most cases.
If you have pages that are necessarily big, you can still achieve this, there are several tricks you can use, like image compression (using 90% quality JPGs), javascript/ajax to load content on demand, minifying the files (CSS, javascript), using site compression (gzip), etc.

真的取决于页面。如果您的页面是信息丰富的页面,那么您将拥有大量 HTML(文本)内容。但是,如果您的页面更加图形化(例如显示产品图像的商店部门页面),您将拥有大量图像。
图像比文本重得多(单个图像可能是 50K,相当于 10 页文本)。
您还需要考虑 CSS 文件、javascripts 等的大小。但它们被缓存,因此它们只对初始“加载”有影响。
话虽如此,您可以将每页最多设置为 100-200k(混合文本/图像)的目标。不仅如此,较慢的连接将需要一段时间才能加载。
很可能你不知道谁会访问你的页面(移动、宽带或拨号),所以你应该尝试达成一个共同点(或为不同的目标设计不同的页面,但从长远来看,这是一种痛苦的维护随着您的网站扩展)。我认为在大多数情况下 100-200k 是可以的。
如果您的页面一定很大,您仍然可以实现这一点,您可以使用多种技巧,例如图像压缩(使用 90% 质量的 JPG)、javascript/ajax 按需加载内容、缩小文件(CSS、javascript )、使用站点压缩 (gzip) 等。

回答by djlumley

Your 'maximum' size really depends on a lot.

你的“最大”尺寸真的取决于很多。

Your audience:

您的听众:

  • What type of connection do they have
  • What load time are they expecting
  • What content are they expecting
  • 他们有什么类型的连接
  • 他们期望什么加载时间
  • 他们期待什么内容

Your content

您的内容

  • What content are you trying to present
  • 你想呈现什么内容

The functionality

功能

  • How does your site load the content
  • Do users need to move through the site and fetch multiple pages regularly or are there large pauses before they move
  • 您的网站如何加载内容
  • 用户是否需要在网站中移动并定期获取多个页面,或者在移动之前是否有很大的停顿

For any site though, keep your page as small as possible. Good design is about taking things away until you're left with what you need. The base HTML should be a few kb, the CSS a few kb, and if you're loading scripts and images load them last.

但是,对于任何网站,请使您的页面尽可能小。好的设计就是把东西拿走,直到剩下你需要的东西。基本 HTML 应该是几 kb,CSS 应该是几 kb,如果您正在加载脚本和图像,则最后加载它们。

With a smaller page, your site loads faster, which means your users feel more engaged and your page gets indexed better.

页面越小,您的网站加载速度越快,这意味着您的用户会感觉更投入,并且您的页面被更好地索引。

Response times for users: http://www.useit.com/alertbox/response-times.html

用户响应时间:http: //www.useit.com/alertbox/response-times.html

Response times for google: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

谷歌的响应时间:http: //googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

回答by iliaden

Generally, simply go with common sense.

通常,只需按照常识即可。

For example, you might want to embed some information so that the client isn't overburdened.

例如,您可能希望嵌入一些信息,以免客户端负担过重。