web访问速度优化分析

请求从发出到接收完成一共经历了DNS Lookup、Connecting、Blocking、Sending、Waiting和Receiving六个阶段,时间共计38ms。请求完成以后是DOM加载和页面加载。下面简单解释下这六个阶段:前端

  1) DNS Lookup,DNS解析时间。若是页面存在多个请求主机,频繁DNS解析将消耗更多的时间。数据库

  2) Connecting,创建一个TCP链接所须要的时间,不一样的浏览器使用不一样的端口下载资源,所以更多的端口等于更多的并行性,而且更多的TCP链接时间开销。浏览器

  3) Blocking,网页请求被阻塞,花费在浏览器中的等待网络链接的时间;缓存

  4) Sending,向服务器发送请求所须要的时间;服务器

  5) Waiting,等待服务器响应的时间(直到第一个字节是从服务器收到的),优化服务或链接;网络

  6) Receiving,接收服务器响应对象须要的时间;前端优化

  2、网站速度建议工具

  了解了影响网站速度的影响因素,咱们能够从服务器端、传输端和页面端分别进行网站速度优化。优化

  1. 服务器优化网站

  服务器优化就是从动态语言执行、数据库查询、数据存储等方面进行优化,这些工做复杂并且关系到网站全局整站运行,所以须要谨慎,固然服务器端优化具体难度和效率取决于网站管理员的水平。因为没有操做过公司服务器,所以就不作详细介绍,仅以我本身的博客服务器端优化为例说明:

  1) 用HTML语言代替PHP语言直接输出信息,好比语言、名称、固定URL地址等;

  2) 按期进行数据库修复和优化;

  3) 利用Expires为网页静态元素设置过时时间;

  4) 设置服务器和页面缓存;

  5) 启用Gzip压缩;

  6) 其余有效但未实施的方法:利用CDN技术为网站提速;缩小Cookie,针对WEB组件使用与域名无关的Cookie;

  2. 传输优化

  传输优化是为了提升数据传输速度,减小传输过程当中的等待。

  1) 字节优化。将页面加载过程当中传输的全部数据压缩,HTML代码压缩、JS压缩、CSS压缩、图片压缩等。

  2) 缓存优化。设置有效的服务器和页面缓存时间。

  3) HTTP优化。A.合并CSS和JS,减小站内CSS和JS的HTTP请求;B.利用CSS Sprites减小图片HTTP请求;C.减小站外主机DNS查询;D.避免没必要要的HTTP和JS跳转;E.减小404错误。

  3. 页面优化

  页面优化主要围绕网站页面元素进行,常见的页面元素有图片、CSS代码、JS代码、HTML代码等。

  1) 图片优化。选择合适的图片类型并压缩,图片颜色丰富采用JEG格式;颜色数少或有透明通道适合用PNG格式;LOGO图片用PNG-8格式或GIF比较适合。

  2) CSS代码优化。去除不使用的CSS代码;使用简写精简CSS代码;将CSS代码经过外部文件加载;CSS连接位置在页面顶部优先加载。

  3) JS代码优化。将JS代码经过外部文件加载;优化JS顺序,优先加载重要JS;将JS放置在页面底部。

  4) HTML代码优化。减小注释信息;去除无用代码;减小页面空行。

  5) DOM优化:减小DOM个数,下降浏览器解析压力;设置合理的DOM顺序,把重要的DOM放前面。

  作网站前端优化的朋友通常都知道两个工具:谷歌的Page Speed和雅虎的Yslow,你们能够参考这两个工具的优化建议,在GTmetrix的Breakdown标签中有具体信息,通过优化以后的网站速度都会有不一样程度提升,如下是我博客的在谷歌Page Speed和雅虎Yslow的得分,评分是次要的,主要的目的是为用户提供良好的用户体验。

相关文章
相关标签/搜索