网站优化

加载速度网页优化方法总结 作者:骐翔网站建设来源:http://www.datacats.cn2019-02-19 17:03 使用浏览器缓存和本地缓存
加载速度网页优化方法总结

1、减少请求

      最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。

2、整合资源

      对开发者来说,将Javascript代码和CSS样式放到公共的文件中供多个页面共享是一种标准的优化方法,这个方法能很简单的维护代码,并且提高客户端缓存的使用效率。


      在Javascript文件中,要确保在一个页面中相同的脚本不会被加载多次,当大团队或者多个团队合作开发的时候,这种冗余的脚本就很容易出现,你可能会对它的发生频率并不低感到非常吃惊。

      Sprites是css中处理图片的一项技术,Sprites就是将多张图片整合到一个线性的网状的大图片中,页面就可以将这个大图片一次性获取回来并且做为css的背景图,然后使用css的背景定位属性展示页面需要的图片部分,这种技术将多个请求整合成一个,能显著地改善性能。

3、使用浏览器缓存和本地缓存


      现在所有的浏览器都会使用本地资源去缓存住那些被Cache一Control或者Expires头标记的资源,这些头能标记资源需要缓存的时间,另外,ETag(实体标签)和Last一Modified头来标识当资源过期后是否需要重新请求,浏览器为了减少不必要的服务器请求,尽可能地从本地缓存中获取资源,并且将那些已经过期的、或者当缓存空间减小的时候将那些很久不用的资源进行清理,浏览器缓存通常包括图片,CSS,Javascript代码,这些缓存能合理地提高网站的性能(比如为了支持后退和前进的按钮,使用一个单独的缓存来保存整个渲染的页面)。


4、首次使用的时候在HTML中嵌入资源


      HTML的标准是使用链接来加载外部资源,这使得更容易在服务器上(或者在CDN上)操作更新这些资源,而不是在每个页面上修改更新这些资源,根据上文讨论的,这种模式也使得浏览器能从本地缓存而不是服务器上获取资源。


5、使用HTML5服务端发送事件

      Web应用已经使用了各种从服务器上轮询资源的方法来持续地更新页面,HTML5的EventSource对象和Server一Sent事件能通过浏览器端的JavaScript代码打开一个服务端连接客户端的单向通道,服务端可以使用这个写通道来发送数据,这样能节省了HTTP创建多个轮询请求的消耗。


      这种方式比HTML的WebSocket更高效,WebSocket的使用场景是,当有许多客户端和服务端的交互的时候(比如消息或者游戏),在全双工连接上建立一个双向通道。这个技术是基于具体的技术实现的,如果你的网站当前是使用其他的Ajax或者Comet技术来轮询的,转变成Server一Sent事件需要重构网站的Javascript代码。

6、消除重定向


      当用户在一个移动设备上访问桌面PC网站的时候,Web网站应用通常读取HTTP的user一agent头来判断这个用户是否是来自移动设备的,然后应用会发送带有空HTTP body和重定向HTTP地址头的HTTP 301(或者302)请求,把用户重定向到网站的移动版本上去,但是这个额外的客户端和服务端的交互通常在移动网络上会消耗几百毫秒,因此,在原先的请求上传递移动的web页会比传递一个重定向的信息并让客户端再请求移动页面更快。

7、减少资源负载


      关于移动端页面的大小问题,渲染小页面更快,获取小资源也更快,减小每个请求的大小通常不如减少页面请求个数那么显著地提高性能。但是有些技术在性能方面,特别是在需要对带宽和处理器性能精打细算的移动设备环境下,仍然是能带来很大利益的。

8、压缩文本和图像


      诸如gzip这样的压缩技术,依靠增加服务端压缩和浏览器解压的步骤,来减少资源的负载,但是,一般来说,这些操作都是被高度优化过了,而且测试表明,压缩对网站还是起到优化性能的作用的,那些基于文本的响应,包括HTML,XML,JSON(Javascript Object Notation),Javascript,和CSS可以减少大约70%的大小。

9、代码简化

      简化带来的好处并不局限于减少带宽和延迟,对于那些移动设备上缓存无法保存的过大资源来说,也是很有改善的,Gzip在这个方面并没有任何帮助,因为资源是在被解压后才被缓存起来的。


网页优化方法

10、调整图片大小

      图片通常是占用了Web页面加载的大部分网络资源,也占用了页面缓存的主要空间,小屏幕的移动设备提供了通过调整图片大小来加速传输和渲染图片资源的机会,如果用户只是在小的移动浏览器窗口中看图片的话,高分辨率的图片就会浪费带宽、处理时间和缓存空间。

11、使用HTML5和CSS 3.0来简化页面


12、延迟渲染”BELOW一THE一FOLD”内容


      一些好的Javascript库可以用来处理这些below一the一fold 延迟加载的图像。

13、延迟读取和执行的脚本


      在一些移动设备上,解析Javascript代码的速度能达到100毫秒每千字节,许多脚本的库直到页面被渲染以后都是不需要的加载的,下载和解析这些脚本可以很安全地被推迟到onload事件之后来做。

14、使用Ajax来增强进程


      Ajax(Asynchronous JavaScript and XML)是一项使用XHR(XMLHttpRequest)对象来从Web服务器上获取数据的技术,它并不需要更新正在运行的页面,Ajax能更新页面上的某个部分而不需要重新构建整个页面,它通常用来提交用户的交互相应,但是也可以用来先加载页面的框架部分,然后当用户准备好浏览网页的时候再填充详细的内容。

15、根据网络状况进行适配处理

      由于使用更多带宽会使用更多移动网络的费用,所以只有能检测网络的类型才能使用针对特定网络的优化技术。

16、对多线程来说尽量使用HTML5的WEB WORKER特性


      对提高移动站点的性能来说,Web Worker中的代码很适合用来预处理用户完成进一步操作所需要的资源的,特别是在用户的带宽资源不紧缺的情况下,在低处理器性能的移动设备上,过多的预加载可能会干扰当前页面的UI响应,使用多线程代码,让Web Worker对象(并且尽可能使用localStorage来缓存数据)在另外一个线程中操作预加载资源,这样就能不影响当前的UI表现了。

17、将CLICK事件替换成TOUCH事件

      确保不会产生用户不期望的行为,应该要使用touchstart和touchmove事件

18、支持SPDY协议


      SPDY自动使用gzip压缩所有内容,和HTTP不同的是,它连header的数据也使用gzip压缩,SPDY使用多线程技术让多个请求流或者响应流能共用一个TCP连接,另外SPDY允许请求设置优先级,比如,页面中心的视频会比边框的广告拥有更高的优先级。

网站建设 > 网站优化 >

网站建设

排行榜

淄博网站建设,网站设计,网站优化

  • 双十一来啦!骐翔网络为企业加油 双十一来啦!骐翔网络为企业加油
  • 淄博网站建设行业是夕阳产业吗?为什么我们一 淄博网站建设行业是夕阳产业吗?为什么我们一 淄博网站建设行业是夕阳产业吗?为什么我们一直坚持在做呢? 网站建设行内人都知道,网站是PC时代的产物,在移动互联网没有出现之前,网站是几乎每个企业在互联网展示和推广品
  • 什么叫靠谱,你需要做到这三点 什么叫靠谱,你需要做到这三点 如果你问一个老板,最理想的员工是什么样的,答案里一定有一条是靠谱;如果你问一个年轻人,最理想的另一半是什么样的,答案里也肯定有靠谱。 靠谱,是对一个人的最高评价之一
  • 淄博网站建设,小数据的价值是否有用? 淄博网站建设,小数据的价值是否有用? 淄博网站建设,小数据的价值是否有用? 无论是针对哪个个别要素品牌的剖析,一个显见的事实是这些品牌常常并不只是与一个单一的产品联络起来,一个品牌常常能随同着多种各具特
  • 淄博网站制作经费的明细 淄博网站制作经费的明细 网站制作经费的明细 网站制作经费的明细 ,网站制作建设费用没有固定的价格,影响网站建设费用的因素有哪些呢? 一、影响网站建设费用的建站模式,建站模式可分为:定制开发、
  • 新时代下,如何做好网站的建设与管理? 新时代下,如何做好网站的建设与管理? 新时代下,如何做好淄博网站的建设与管理? 近几年,网站建设十分火爆,很多企业纷纷从线下搬到线上,都在赶时髦,建立一个属于自己企业的网站。网站的建设和管理就成一个网络

关于骐翔网站建设

骐翔网站建设提供淄博网站建设,淄博网站制作,淄博做网站的一站式流程化服务,纯手工原创切图制作,满足追求高品质原创网站用户的品牌宣传需要,上云就上牛逼云。
骐翔网站建设团队有六年从业经验,整合一站式互联网智能运营服务和行业解决方案,满足企业个性化、多样化的互联网转型需求。随时、随需提供智能经营与管理服务,帮助企业全面提升经营效率,实现企业数字化智能运营,打造智慧企业,持续为客户创造商业价值。
骐翔网站建设已为1.2万家企业提供互联网运营服务和行业互联网运营解决方案,业务内容包括网站建设、搜索引擎优化、多平台竞价开户、竞价托管等。
用户遍布制造、专业服务、IT服务、建筑与房地产、流通与物流、零售等百余个行业。业务内容包括网站建设、搜索引擎优化、多平台竞价开户、竞价托管等。