网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类. WebPageTest通过布置一些特定的场景进行测试,例如不同的网速.浏览器.位置等. 测试完成后,能获得优化等级.性能参数.请求瀑布图.网页幻灯片快照等,更多信息可以参考<WebPageTest快速入门>. 一.总览 输入网址后,首先进入视野中的就是下面这张画面. 1)原理 根据WebPageTest的<概述>了解到,WebPageTest是一个PHP网站,用户输入网址.地点.自…

这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. www:网站PHP代码 也可以参考官方的Private Instance配置,不过文档挂在google域名下,所以你懂得.我做了简单的翻译<私有实例> 官方文档写的非常拗口,但是还是有一定的参考价值. 一.PHP配置与软件安装 1)配置虚拟目录 输入虚拟地址后,出现了熟悉的页面,不过现在Locati…

在前一篇<配置>完成后,点击“START TEST”,就可以开始测试,测试需要一段时间. 有时候可能还要排队,如下图所示,测试完成后可查看到测试结果. 一.Summary 1)优化等级 优化等级分为A~F级别,评分项分别为: 阻塞时间(First Byte Time).长连接已启动(Keep-alive Enabled).传输压缩(Compress Transfer). 压缩图片(Compress Images).缓存静态内容(Cache Static Content)和使用CDN(Use o…

web开发者性能优化工具 1   数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的方式绘制出来:图形化的展示更容易发现性能的延迟问题 FireBug网络控制板,可以显示HTTP瀑布流.缺点:它的事件信息会受到网页本身的影响.Firebug是用javascript实现的,因此他和当前网页在相同的Firefox进程上执行:因此,如果javascript正在主页面上 执行时有网络事件发…

摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法 图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你不小心的话,图片大小有时高达几十兆. 因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平. 在我的网站上,我注…

Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格…

PHP性能优化工具–xhprof安装,这里我先贴出大致的步骤: 1.获取xhprof 2.编译前预处理 3.编译安装 4.配置php.ini 5.查看运行结果 那么下面我们开始安装xhprof工具吧: 1.获取xhprof 可以输入网址直接下载,或者wget   1 2 3 4   #wget http://pecl.php.net/get/xhprof-0.9.4.tgz #tar zxf xhprof-0.9.4.tgz   2.编译前预处理 在编译xhprof之前,先做一下预处理,生成co…

Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也用了angularjs开发了一个项目,那感觉真的是谁用谁知道. angularjs的好处我就不在这里废话了,有兴趣的请自行度娘.背景是这样的, 在这个使用angularjs开发的项目中,由于自己的粗心导致页面打开很慢,傻了吧唧的引用了未压缩的js文件,将近1M的js啊,我还傻乎乎的建索引,优化sql…

简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 确保静态资源是有缓存. 确保静态资源的大小最小. 确保加载的资源最少. 确保用户以最短的时间看到页面 减少人为因素的性能瓶颈. 解决方案 缓存 让资源更可能快的让用户看到. 结合代理(nginx)来实现.给http添加缓存的时长. # 需要缓存的静态资源类型 location ~ .*\.(gif…

简介 性能优化的第一准则:加缓存.几乎绝大部分优化都围绕这个来进行的.让用户最快的看到结果. 性能优化的第二准则:最小原则.绝不提供多余的信息.比如,静态资源(图片.css.js)压缩,图片的滚动加载,异步请求,http请求合并等. 性能优化的第三准则:分布.集群.当前,这个的前提是已经把基本优化都做完了,才考虑这个方面. 思路 性能优化的过程是一个链条,任何一个节点上都要优化,否则都会出问题,优化也就失败了. 每个节点上都包含这几个方面 定位.定位这个节点是否有存在性能问题. 监控.监控这个节…