转 网站前端性能分析

一 速度与功能,哪个更重要
二 网站性能与收入
三 网站速度与用户流失
四 Web性能优化法则
五 国内性能分析工具—基调系统介绍
六 国际站的优化实践
七 改进建议
八 评分规则及优化


一  速度与功能,哪个更重要

1.网站最基本的东西是什么?

内容再丰富的网站,如果慢到无法访问也是毫无意义的;

• SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭;

• UE设计的再人性化的网站,如果用户连看都看不到也是空谈

2.网站速度与收入

• n500ms20%(google)

• n400ms5%~9%(yahoo!)

• n100ms1%(amazon)

• 500 ms slower = 20% drop intraffic (Google)

•100 ms slower = 1% drop in sales(Amazon)

二 网站性能与收入

1.Amazon:every 100 ms increase in load time of Amazon.com decreased sales by 1% .

2.Google:achange in a 10-result page loading in 0.4 seconds to a 30-result page loadingin 0.9 seconds decreased traffic and ad revenues by 20%

三 网站速度与用户流失

四 Web性能优化法则

性能黄金法则

  只有10%–20%的最终用户时间花在了下载HTML文档上,其余的80%~90%的时间花在了下载页面中的所有组件上
(80%-90%用户的等待时间是来自于前端的页面加载)

五 国内性能分析工具—基调系统介绍

1.什么时基调:

1) 基调网络成立于2007年,是国内最大的互联网用户体验监测服务商。

2)基调网络拥有最大的遍及全国各地的监测网络,覆盖了全国100多个城市的数据中心及数万个人终端用户

2.基调能做什么?

1)通过基调监测网络可以监测出目标网站在不同时间、不同区域、不同运营商的网民访问的速度、可用性等用户体验数据

2)能实时生成个性化的报表,以供决策者和运维管理者及时掌握网站的性能、可用性等各项表现,进而为优化调整提供准确的决策依据。

登陆:rpc.networkbench.com

3. 基调如何使用:由故障开始

登陆后界面

知名互联网网站当前现状

竞争对手—B2B,B2C网站

B2B对手:慧聪网,环球资源网,中国制造

B2C对手:淘宝,京东,当当,新蛋

六 国际站的优化实践

七 改进建议

1 . 页面性能评估工具

Yahoo!--Yslow

–雅虎的页面优化34法则,Yslow选取了能量化的23条

2. Google--Page Speed

–功能同Yslow

1. 针对中文站首页

–首页大小 建议500KB以内

–页面元素 建议70个以内

–首页域名数量 建议控制在5个以内

–图片,CSS,JS的过期时间问题。

–CSS、JS的数量问题,尽可能的整合,减少请求次数。

2.Offer detail

–CSS,JS的数量众多,建议css,js的数量控制在5个以内

页面元素众多。仅仅一个detail页面,其元素个数都赶上首页了,建议严格控制页面元素

参考 优化对比

八 评分规则及优化

-Make Fewer HTTP Requests

-Use a Content Delivery Network

-Add an Expires Header

-Gzip Components

-Put CSS at the Top

-Move Scripts to the Bottom

-Avoid CSS Expressions

-Make JavaScript and CSS External

-Reduce DNS Lookups

-Minify JavaScript

-Avoid Redirects

-Remove Duplicate Scripts

-ConfigureETags

-Make Ajax Cacheable
---------------------------------------------------


---------------------------------------------------

---------------------------------------------------

---------------------------------------------------

---------------------------------------------------

---------------------------------------------------

-----------------------------------------------------
A.尽量减少HTTP请求次数
  1.合并JS
  2.合并CSS文件
  3.CSS Sprites
  4.Image 图片
  5.将图片编码成Base64数据嵌入网页

B.减少阻塞次数、减少阻塞时间
  1.将CSS放在顶部 
  2.将JS放在底部
  3.删除重复的脚本
  4.延迟加载渲染页面不需要的脚本
  5.按需异步下载脚本

时间: 2024-11-08 21:18:53

转 网站前端性能分析的相关文章

前端性能分析

前端性能分析 最近在读一本经典书<高性能网站建设进阶指南>. 虽然书籍很多年前就出版了,但里面的内容还是耐人寻味,这次就好好的实践了一下. 纸上得来终觉浅,绝知此事要躬行,实践中将会发现一些问题. 有个官方网址<Even Faster Web Sites>,点击“Run the Examples”按钮,就能进入在线demo. 在Github上面有个叫awesome-wpo的项目,里面记录了各个方面关于性能的资源,有书籍.文章.工具等. 下面所有的实验都是在Chrome 49浏览器中

转 web前端性能分析--分析篇

通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同时还支持yslow,pagespeed,webpagetest等测试工具传上去的数据,因此在具体的分析之前要从纵向.横向来收集数据,这样统计分析出来的结果才能有实际的参考价值.当然如果你还发现其它工具也可以提供一些性能数据,也可以收集起来,比如:httpanalyzer,httpwatcher都支持

转 WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. http://hovertree.com/menu/webfront/ 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用

WEB前端性能分析--工具篇【转】

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

转:网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用内容分发如CDN加速,使用户从离自己最近的服务器下载文件.但一般要求减少

Web前端性能分析

Web前端性能通常上代表着一个完全意义上的用户响应时间,包含从开始解析HTML文件到最后渲染完成开始的整个过程,但不包括在输入url之后与服务器的交互阶段.下面是整个过程的各个步骤: 开始解析html文件,从head到body按顺序从上到下. 当解析到head部分的css外部链接时,同步去下载,如果遇到外部js链接也是下载 接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载 等到css文件下载完毕,那么就同步去用已经生成的DOM节点+css去生成渲染树 渲染树生成结构模

转 web前端性能分析--实践篇

当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff浏览器,还具备js函数级别的优化分析,它的分析数据也是最全面的,分析数据可以导出,最后和yslow,pagespeed一样支持向showslow上面传送结果信息这样就节省了很多的事情了.所以实施方案具体确定为dynatrace用来捕获web前端页面访问的性能数据,然后上传至showslow来浏览测试

转 web前端性能分析--原理篇

转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求2.递归寻找DNS服