如何提高网站页面速度?

我的网站打开比较慢,请问要怎么做才能优化页面速度,要用什么软件呢?

  网页的加在一半就是代码的加载,各种文件,以及一些因素,那么就从这些因素去考虑就可以:
  1、合并Js文件和CSS
  将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度。
  2、Sprites图片技术
  Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用CSSSprites能很好地减少网页的http请求,从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵,很早就有了,在很多大型网站都有用到,特别是一些所有页面都存在的图标用得比较多,很好的提升加载速度。
  3、压缩文本和图片
  压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都可以在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。
  4、延迟显示可见区域外的内容
  为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。
  5、确保功能图片优先加载
  网站主要考虑可用性的重要性,一个功能按钮要提前加载出来,用户进入下载页,一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片,谁能忍受?
  6、重新布置Call-to-Action按钮
  其实这个和上面一条是差不多的,都是从用户体验速度着手,跳过了网页的整体加载速度。速度没变,只是让一些行为按钮提前,Call-to-Action按钮一般习惯设计在页面底部,这样的习惯对于用户来说并不总是好的,购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。
  7、图片格式优化
  不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式。可以节省大量带宽,减少处理时间时间,大大加快页面加载速度,这是一种很常见的做法。
  8、使用 Progressive JPEGs
  ProgressiveJPEGs图片是JPEG格式的一个特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的,快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户,这无疑有很好的体验。
  9、精简代码
  这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。
  10、延迟加载和执行非必要脚本

  网页中有很多脚本是在页面完全加载完前都不需要执行的,可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,避免对网页上重要内容的呈现造成影响。这些脚本可能是自己网页的甲苯,往往更多的是一些第三方脚本,这样的有很多,比如评论、广告、智能推荐、百度云图、分享等等,这些完全可以等主体内容加载完后再执行。
  11、使用AJAX
  AJAX即“Asynchronous Javascript +XML“,是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。
  12、自动化的页面性能优化
  自动化的页面性能优化也就是借助工具了,网站提速工具有很多,这里Radware推荐了自家的RadwareFastView,也算Radware给自家做了一个广告,这里不多说了。
温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-07-10
YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。
  仔细研究了下YSlow跌评分规则主要有12条:
  1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢?
  发现原来这些请求都是可以避免的。
  15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿。),这样合并以后,一般情况下页面上只会出现一个JS和一个CSS(对JS的封装得有一定的要求)。
  但是47个CSS background images请求改怎么解决呢?为什么页面上的纯IMG请求时合理的,而CSS background images请求过多就是不利因素了呢。这个我想了很久,总算明白,原来是这样的:
  一般页面上的ICON,栏目背景啊,图片按钮啊,我们都会用图片CSS背景来实现,而一般这个图片CSS背景用到的图片都是比较小的,所以完全可以把这些图片合并成一个相对比较大的图片,这样页面上只会出现一个CSS background images请求,最多也就2-3个。后来仔细看了下雅虎美国的页面,他们的确也是这样做的,虽然这样做需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。
  2. Use a CDN这项我们的评分是F级,最低。说实在的,我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。
  看来上述的解释后,基本上明白了CDN是怎么回事,后来咨询了下中文站点SA,得知我们网站目前的确还没有做CDN的优化,但是据说我们有更加先进的技术来解决类似的问题(具体什么技术那就保密了),但是毕竟CDN也是个相当不错的技术,所以在我们先进技术的基础上在做CDN优化,肯定比现在更好,嘿嘿。据说SA明年会做几个点的CND。
  3. Add an Expires header设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
  其实我们网站也做了这个优化,至少图片在这个上做过优化,但是没有做完全。我们的CSS和JS都还没有做过优化,倒是外部引入的一个广告JS做了,呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上。不过据说这个SA也是没有做的,但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问题,对我们以后查找问题的所在和增加难度,不过我想两者中是可以权衡和并存的。
  4. Gzip components 对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩后显示页面。
  5. Put CSS at the top 把CSS外部链接放到页面的顶部。
  其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就是个错误。还好,我们的页面基本上都做到了,可是有些页面比如LIST页面,还是出现了和逻辑挂钩的CSS链接,原因是为了解决一些本来就不合理的产品逻辑。所以,我们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度,不能为了实现而实现。
  6. Put JS at the bottom 把Javascript脚本尽量放到页面底部加载。
  一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做呢?呵呵,其实很简单,为了实现最大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页面渲染,JS脚本运行。这个方面我们还需要努力,很多页面我们在加载过程中运行了一部分脚本,或许是为了实现一些功能,没有办法,不过或许有更好的办法来替代呢。。。
  7. Avoid CSS expressions 避免CSS表达式
  其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。这个点,我们的页面基本上都做到了。不过说实话,CSS表达式,嘿嘿,我以前还不知道有这么回事。惭愧。哈哈。
  9. Reduce DNS lookups 尽可能少的DNS查找。
  这项我们做的不是很好。D级,有9个域名,一般不要超过4个。不过这个主要是服务器架构上的问题,我们也无能为力,现在单单首页的广告域名就有好几个,好耶的广告域名,雅虎的广告域名,淘宝店广告域名,打点的域名。如果去掉这些,我们其实还是够用的,一个主域名,一个图片的,一个STYLE的,最多加上IFREAM的刚好4个。
  10. Minify JS 对Javascript代码进行压缩。
  这点我很早以前就对此关注了,也找到了一个不错的压缩工具,yuicompressor,雅虎美国开发的JAVA压缩包yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混淆脚本的作用。现在我们仅仅做到了JS合并,并没有对齐进行压缩,如果我用yuicompressor手工的去压缩,虽然实现了JS压缩,但是给我们自己的维护量增加了一倍,因为我们需要维护2套JS脚本,一套是压缩前的(调试用的),一套是压缩后(发布到网上的),而且要保证2套代码一致。所以最完美的做法是在发布的时候实现JS脚本合并,并对其用yuicompressor进行压缩,然后发布到晚上,把关键点移到发布的时候,这样我们只需要关心一套JS脚本(发布前的版本)。而且我觉得这个方案完全是行动通的。
  11. Avoid redirects 避免重定向(跳转)
  怎么理解这点呢?
  一般我们页面的链接都写成: http://www.xahl.net.cn 或者 http://www.xahl.net.cn/ ,有人会问,有区别吗?我明确的告诉大家,有!服务器如果接收到的URL是没有带“/”的URL,它会自动重新定向到带有“/”,虽然最后都打开了阿里巴巴中文站的首页,但是前者比后者多走了一步,重定向,显然多多少少浪费了一定的时间。所以以后我们加URL链接的时候,别忘了把最后的“/”给加上去。
  12. Remove duplicate scripts 去除重复的脚本
  这个其实没有什么好说的,大家都应该毫无条件的去遵守,但是越是明显,越是简单的事,我们往往会做不好,当然,很多理由的,项目时间太紧张了等等,导致代码很乱,很多重复的地方。其实谁都知道重负不好,不过还好,我们的页面重复的脚本代码不多(至少一个页面里面,呵呵)。不过,我到是希望,我们不仅要做到一个页面脚本不重复,而且要做到N个页面,脚本要重用。
  13. Configure ETags 这个好像是服务器端配置的问题,我不太懂,也就不乱说了,怕把大家给误导了。
  总共13个,但是看了YAHOO的官方说明,好像还有一个AJAX CACHE(AJAX 缓存)。我倒是觉得这个很重要,随着我们AJAX应用的广泛,AJAX 缓存这个概念一定要时刻在我们脑子中,AJAX是个好东西,但是重复的数据,无休止的向后台申请,绝对是个错误(不仅是速度上还是对服务器压力上来说),所以我们就要对我们已经申请到的数据进行缓存,当第2次用到的时候,就直接从缓存中取,不要在去访问我们宝贵的服务器资源了。其实这个思想不仅仅适合AJAX,在所有有数据复用的应用中都应该考虑到。
  YSLOW就分析到这里完毕了,或许有些地方分析的不是很正确,或许有人分析的比我更早,更好,但是这些的确是我从工作中去积累,发现的,并很多都实际应用到工作中去了,顺便说下,嘿嘿,LIST页面进行优化后,在0.92版本的YSLOW评分将达到76分,甚至80分,相当于0.8版本的90分以上。不过评分毕竟是评分,关键还是速度。本回答被网友采纳
第2个回答  2013-07-10
你建的网站?网站访问速度关系到服务器的网络,还有就是网站页面的大小。
相似回答