Time:
2022-06-23 11:02:03
Author:
素马
每个进行网站设计的人总是提出与网站速度有关的问题。快速加载的网站浏览起来更有趣,它们为普通访问者提供了更好的整体体验。
本文素马设计将介绍网站设计的标准措施,以帮助您的网站更快地加载而不是爬网速度,以及如何改进它的技巧。
1) 发出小的 HTTP 请求
减少页面上的组件数量会减少创建或翻页所需的 HTTP 请求数量,从而加快页面加载速度。减少组件数量的一些有效方法包括:
合并文件,
将多个脚本合并为一个脚本,
将多个 CSS 文件合并到一个样式表中,以及
使用 CSS Sprites 和图像映射。
2) 尽早根除缓冲区
通常,当服务器完成对 HTML 输出的处理时,您会获得 HTTP 请求的结果。因此,延迟会根据服务器准备请求的 HTML 页面的时间而有所不同。有一种按需方法可以获取当时准备好的内容,即flush。在 PHP 中,您有一个 color() 函数,它发送浏览器的部分就绪 HTML 输出。
思考冲洗的好地方就在 HEAD 之后。
3) 将 CSS 调用放在页面顶部
将样式表移动到文档 HEAD 元素支持更快地输出页面,因为这使页面可以轻松工作。
4)将JS放在页面底部
JavaScript 脚本可以很好地阻止网页设计中的并行下载;下载脚本时,浏览器不会开始任何其他下载。为了帮助更快地加载页面,如果可以延迟,请将手移到页面底部。
5)避免空的Href或Src
遇到空的图片 src 时,您可能会发现浏览器什么也不做。但是,在大多数浏览器中,这是不可能的。IE 生成对页面目录的请求;Chrome、Firefox 3、Safari 等。这种行为可能会破坏用户数据,浪费服务器计算周期,并创建一个永远不会被查看的页面。在最令人困惑的情况下,通过提供大量意外流量来削弱您的服务器。
6) 添加过期标题
网页越来越复杂,包含更多的脚本、样式表、图像和 Flash。首次访问页面可能需要多个 HTTP 请求来加载所有组件。使用 Expires 标头,这些组件变得可缓存,避免在后续页面视图中使用过多的 HTTP 请求。过期标头最常与图像相关联。不过,它们可以而且应该用于所有页面组件,包括脚本、样式表和 Flash。
7) 避免 CSS 表达式
CSS 表达式是一种在网页设计中动态设置 CSS 属性的强大方法。这些表达式经常被考虑:
当页面调整大小时,
当页面被下拉时,
当用户在页面上滚动鼠标时。
这些频繁的评估降低了用户体验。
8) CSS 和 JS 元素不应该包含在 HTML 页面中,并且应该有单独的页面
通常,通过使用外部 JavaScript 和 CSS 文件,您可以轻松地生成更快的页面,因为文件被浏览器缓存。每次请求 HTML 文档时,都会下载嵌入在 HTML 文档中的 JavaScript 和 CSS。这会减少 HTTP 请求的数量,但会增加 HTML 文档的大小。
另一方面,如果 JavaScript 和 CSS 位于浏览器缓存的外部文件中,则 HTML 文档大小会减小,而不会增加 HTTP 请求的数量。
9) 减少 DNS 查找
域名系统 (DNS) 将网站名称放入 IP 地址以访问这些网站。就像邮政局长如何使用您提供的地址来识别您的房子一样。浏览器联系一个 DNS 解析器,该解析器返回服务器的 IP 地址。DNS通常有价格;查找 IP 地址需要 20 到 120 毫秒。
10) 尽可能使用内部域/IP
程序员在编写代码时总是使用站点名称来为邮件或其他任何东西设置新的出站连接。情况不应该如此。您应该在可访问时使用 IP 或内部域。
例如,如果您想通过 SMTP 发送电子邮件,请将 \"localhost\" 写为 SMTP 主机;邮件服务器存在于 Web 服务器所在的同一物理服务器上。假设邮件服务器托管在内部网络中的远程机器上。在这种情况下,您需要提及指向邮件服务器的内部(私有)IP 的域名,而不是指向公共 IP 的域名。
11) 删除旧的或不需要的页面
如果程序员对文件进行大量更改,他们通常更喜欢将旧页面的副本保留为“page.old”。确保在网站在线发布之前删除这些旧文件。尽管网络服务器上有旧的或不受欢迎的页面可能不会直接影响网站的性能,但它们可能会间接影响它。可能会忘记更新某些文件中的页面更改。这些文件仍然会调用旧页面,从而导致各种问题,而不仅仅是与性能相关的问题。
12)从所有页面中删除重复条目
有时,程序员会无意中将相同的代码放在文件的不同位置。在发布网站之前,检查代码并找出是否有任何代码重复出现并在发现时将其删除是很重要的。
13) 确保没有额外的不存在页面导致 404 错误
发出 HTTP 请求并收到 404(未找到)错误的成本更高,并且会降低用户体验。
14) 不要在 HTML 中缩放图像
Web 设计人员有时通过使用 HTML 图像元素的宽度和高度特性来设置图像大小。避免这样做,因为它可能会导致比需要更多值得注意的图像。例如,假设您的页面需要尺寸为 240X720 的图像,但使用宽度和高度属性以尺寸 120X360 显示它。在这种情况下,浏览器将下载比所需范围更广的图像。
15) 有一个自定义的 404 页面
设置一个自定义的 404 页面来帮助用户找到“未找到”页面,最好是一个搜索按钮。
素马设计是深圳最好的公司之一深圳的网页设计. 获取最有效的网页设计服务,以制作更快、更用户友好的网站。