如何简化网页优化WEB应用

web|网页|优化

在最近的项目中,我发现许多过于臃肿的网页。对于内联网中的网站而言,这一般不会造成什么问题。不过,当你通过互联网向外发布网页时,性能可能是我们关心的主要问题——毕竟,多数用户并非通过高速连接访问网站。本周,我来分析一下优化WEB应用的方法。

常见问题与可能的优化方案

加载网页的时间过长,这仅仅是WEB用户的常见投诉之一,但这也是最明显的问题。WEB开发者的主要问题在于:他们认为自己的平台满足一个目标用户群。但用户的计算机配置与互联网连接速度各不相同,所以开发者应能满足用户的最低要求。

页面大小除影响下载速度以外,它还会影响WEB服务器资源,如磁盘空间和带宽资源。有许多方法可以对网页进行简化。经验证明,仅仅保留必要的内容、并尽可能地简化图像与脚本,这些都是很好的方法。

将网页保持在30-40K范围内,这是人们常用的标准。那么,该如何简化网页呢?下面的列表提供了一个可能的选择样本:

使用CSS:CSS能够显著简化页面设计,并减少加载时间。因为使用HTML表会增加页面中的字符,所以应使用CSS,并使页面最小。
使用CSS和JavaScript外部文件:这样可促进文件在页面间的再利用,并集中维护。另外,初次请求/加载后,文件即被存入缓存。
少用过长网页:可以使用多个(更小)页面来加速响应时间,减少文件大小。
仅在必要时应用特效:加载Java程序和Flash动画往往需要很长时间,用户无法处理这类内容。
避免使用框架:这是经验之谈,因为浏览器必须要求并下载框架,首先要求下载主框架,再要求下载其它框架。
考虑图像大小:图像的常用标准大小为12K,但你应把它计算在整个页面大小之内。
避免或减少服务器冗余传输:你可以通过AJAX方案来解决这个问题。
找出问题

处理上表中列出的网站/网页问题可能有些乏味,不过有一些免费的WEB工具可帮助你找出这些问题。下面的两个网站提供了一些这样的工具:

WebSiteOptimization.com
Webpositionadvisor.com
这些工具处理网页(通过URL)并确定整个页面的大小,以及网页中所使用的对象和图像等元素。在决定如何改善网页时,这些信息非常有用处。

下面是WebSiteOptimization.com上的网页分析器(Web Page Analyzer)工具所生成报告的一部分。报告很长,所以只列出以下的的分析与建议两部分:

TOTAL_HTML——恭喜!本页面中HTML文件(包括主HTML文件)的总数为1,多数浏览器都可对它进行多线程访问。减少HTTP请求是网站优化的关键。

TOTAL_OBJECTS——警告!本页面中共有16个对象——考虑把它减少到合理的范围。组合、精简并优化外部对象。用CSS翻滚代替图形翻滚来加速显示,减少HTTP请求。

TOTAL_IMAGES——小心!本页面中图片数量适中(10幅)。考虑在网站中少使用图片,或尝试在多个页面中使用同一幅图片以充分利用缓存。

TOTAL_CSS——小心!本页面中有4个外部CSS文件。考虑将其减少到合理的范围。组合、精简并优化外部CSS文件。理想情况下,在网页中应只有一个(或在高流量网页中为一个嵌套CSS)文件。

TOTAL_SIZE——恭喜!整个页面共为20067字节。在56Kbps连接速度下,本页面只要不到8秒——或4.80秒——就能加载。但仍有改善的空间。

TOTAL_SCRIPT——恭喜!本页面的外部脚本文件总数为1。外部脚本不如CSS文件可靠,因此考虑把所有脚本组合到一个脚本中,或把它们嵌套到高流量页面中。

HTML_SIZE——恭喜!这个HTML文件共有9441字节,小于20K。如果指定图片的高和宽,这个大小允许页面在8秒内——用户愿意等待页面显示的平均时间——显示出来。

IMAGES_SIZE——恭喜!图片总大小为3732字节,小于15K。理想情况下,每幅图片应小于1160字节,以满足一个TCP-IP包的要求。

SCRIPT_SIZE——恭喜!所有外部脚本共为2374字节,小于4080字节。它满足三个TCP-IP包的要求。

CSS_SIZE——小心!外部CSS总大小为5520字节,大于4080字节但小于8K。对外部文件而言,努力使其小于1160字节,以适应一个TCP-IP包的要求。考虑优化CSS,去除一些特性,将它减小到合理的大小范围。

MULTIM_SIZE——恭喜!所有外部多媒体文件总大小为0,小于4K。

如你在样本中所见,它提供了网页总大小,以及其中各种元素大小等详细内容。所生成报告中的主要内容为评估信息(恭喜,小心或警告)。样本页面的大多数结果可以接受,页面中图片和对象使用的评语为警告和/或小心。建议减少对象/图片的数量——这将减少页面的整体大小,并缩短下载时间。

结论

如果用户无法接受页面加载时间,他们会立即转向其它网站,因此网页的响应时间对于充分利用应用程序极为重要。页面大小是影响网页加载时间的重要因素。有许多方法可以限制网页的大小,包括(但不限于)使用更小的图片、CSS和外部CSS/JavaScript资源。手工应用工具对网页进行彻底分析可为我们提供简化应用页面的线索。

Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识,是一个专业的应用程序开发人员。

时间: 2024-08-30 00:42:30

如何简化网页优化WEB应用的相关文章

简化网页 优化WEB应用的方法

web|网页|优化 在最近的项目中,我发现许多过于臃肿的网页.对于内联网中的网站而言,这一般不会造成什么问题.不过,当你通过互联网向外发布网页时,性能可能是我们关心的主要问题--毕竟,多数用户并非通过高速连接访问网站.本周,我来分析一下优化WEB应用的方法. 常见问题与可能的优化方案 加载网页的时间过长,这仅仅是WEB用户的常见投诉之一,但这也是最明显的问题.WEB开发者的主要问题在于:他们认为自己的平台满足一个目标用户群.但用户的计算机配置与互联网连接速度各不相同,所以开发者应能满足用户的最低

网页优化参考:搜索引擎的页面元素的权重比例

参考|搜索引擎|网页|页面|优化 网页优化过程中应该注意网页页面的元素,搜索引擎是对网页页面元素的比例有参考的! 内部链接文字: 10分 标题title: 10分 域名: 7分 H1,H2字号标题: 5分 每段首句: 5分 路径或文件名: 4分 相似度(关键词堆积): 4分 每句开头: 1.5分 加粗或斜体: 1分 文本用法(内容): 1分 title属性: 1分 (注意不是title>, 是title属性, 比如a href=- title=") alt标记: 0.5分 Meta描述(D

网页设计(Web Design)空格处理方法

文章描述:相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对"空格"不陌生."空格"属于一类细节,很容易被忽略,但又比较影响效果,更麻烦是很不好控制.此问题总结的想法,来自"知乎"上梁海的提问,以及对他提供专业答案的反思和总结. 相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对"空格"不陌生."空格"属于一类细节,很容易被忽略,但又比较影响效果,更麻烦是很不

JSTL改进JSP来简化网页的实现过程(1)

js|过程|网页 概述 Java Server Pages (JSP) 标准标记库 (JSTL)的版本的发布对于JSP/servlet开发者来说是一个重大的进展.有了一个表达语言(EL)和一组四种强大的.易于学习的标准标记库,JSTL极有可能不久后成为实现动态的.基于Java的站点的主要方法. 1996年对JSP servlet的介绍使得Java成为动态网页开发的合理的选择.随后出现的Java服务器页(JSP)是走向快速的.可维护的Java网页实现过程的合理进化的一步,紧接着就出现了JSP标记的

谈谈网页优化三部曲

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 那些刚刚学做站的新手对SEO(search engine optimization:搜索引擎优化)的定义还不是很清楚,往往还存在很多的误解.有的人会认为SEO不过是网站建设中的简单技巧,只要稍加下点功夫,就可以使搜索引擎高排名提高;另一些人,则认为SEO是一门相当复杂的技术,在某种情况下如果要达到较好的网站优化效果,还真得发时间去认真研究搜搜

供初学者阅读:什么是网页标准化(Web标准)?

web|web标准|初学|网页 说了很多网页标准化,Web标准,可能咋一问什么是Web标准,你也不知道从何说起,你可能会说是div+css,可能是xhtml+css,可能是能通过验证就是标准.下面具体的说说什么是Web标准,网页标准化. WEB标准 WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,

网页优化技巧应该注意哪几点?

有许多因素,有助于保持良好,显示在搜索引擎结果.项目的一些最重要的是自己的网站上找到,被称为"页面内的优化." 网站对一些关注的领域包括: 页面标题 网址 Meta描述 ALT属性的图像 内容 在此之前,任何与对网页优化或任何其他SEO其实你首先要选择正确的关键字在您的网站. 您可以了解我们更多的一个关键词研究上的关于. 下面我们详细来解说下: 网页标题 标题是非常重要的页面的优化.标题出现在浏览器顶部,并经常使用的搜索引擎,在搜索结果标题给你一目了然.告诉你这站的主旨是做什么的.标题

雅虎网页优化14条:YSlow工具的理论基础

网页|优化|雅虎|yslow      第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数.       80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Request请求数将是提高网页显示效率的重点.       这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解.我们只是说尽

Dreamweaver制作网页技巧之对进行网页优化

dreamweaver|技巧|网页|优化 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的.下面是Dreamweaver中的一些优化技法: 合理调用CSS 进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地减少