Page Speed

也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。 但是，如何进行 web 性能监控本身是一个很大的话题，文中只会侧重一部分进行研究，某些内容不是很全面。 前言：为什么需要监控？ web 的性能一定程度上影响了用户留存率，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。 我们希望通过监控来知道 web 应用性能的现状和趋势，找到 web 应用的瓶颈？某次发布后的性能情况怎么样？是否发布后对性能有影响？感知到业务出错的概率？业务的稳定性怎么样？ 监控什么？ 首先我们需要知道应该监控些什么呢？有哪些具体的指标？ google 开发者提出了一种 RAIL 模型来衡量应用性能，即： Response 、 Animation 、 Idle 、 Load ，分别代表着 web 应用生命周期的四个不同方面。并指出最好的性能指标是：100ms 内响应用户输入；动画或者滚动需在 10ms 内产生下一帧；最大化空闲时间；页面加载时长不超过 5 秒。 我们可转化为三个方面来看：响应速度、页面稳定性

【推荐阅读】微服务还能火多久？>>> 　　最近在阅读一本网站优化的书，名叫《 深入理解网站优化：提升网站转化率的艺术与科学 》，本书是对网站优化的4个学科（Web分析、网站易用性、在线营销和网站测试）的最佳实践。网站优化是一门新颖的艺术，结合前面这四门学科完成对网站的测试和分析，更好地吸引和转化访问者。 　　实施本书中的最佳实践和测试思路，就能以多种方式改进网站：吸引访问者，使他们经常回到网站中，改进转化率和成功的其他度量因素，最终改进在线业务的财务收入。 一、工具 1）Web分析工具 　　1、免费和便宜的分析工具： Google Analytics ， KISSmetrics ， Clicky 。 　　2、企业级Web分析工具： Adobe Analytics ， CoreMetrics ， WebTrends 。 2）转化目标 　　转化目标是一种度量网站目标的方法，度量的指标是为了这些目标而转化的访问者数量。常用的网站类型的转化目标如下所列。 网站类型 转化目标 在工具中建立的目标 电子商务 产品订单 订单完成页面 客户挖掘 生成线索 表单完成/感谢页面 社区 会员注册 新会员确认页面 　　如果你的网站类型没有基于页面的具体转化目标（例如媒体网站），也可以选择几种其它的目标度量方式，例如网站停留时间或每次访问的页面数。 　

【推荐阅读】微服务还能火多久？>>> Chrome Devtools 优点： 支持移动端H5在PC端远程调试，能够对具体的移动端设备进行测试 集成了page speed 提供network面板，展示瀑布流视图，各种资源清晰罗列，还提供缩略图，方便查看图片的大小、尺寸和冗余或缺失。 可模拟网速、设置device分辨率来测试实际的弱网环境显示效果 提供timeline面板，展示内存、CPU变化，FPS等性能数据等 缺点 录制后分析的一种静态分析方法，不同于fiddle等抓包工具提供实时的抓包、修改等功能 webpagetest 工具链接： https://www.webpagetest.org/ 优点： 提供了首屏时间、首字节时间、全界面加载时间工具，并提供对应的时间点截图 不仅提供瀑布流视图，还提供连接视图，清晰展示了并发请求的HTTP连接以及请求资源 提供优化建议checklist，详细标出各个资源是否可优化，如：压缩、缓存、发布cdn，设置Gzip等 提供测试过程中的视频演示 缺点： 并不是专门为移动端H5测试所设计的 关注H5前端页面本身的性能，没有关注浏览器引起的内存、CPU变化，FPS等 PageSpeed Insights 工具链接： http://www.googlespeed.cn 优点： 直观的测试结果展示，并提供优化建议 可以分别测试移动端和PC端的结果

一、安装相关支持库： yum -y install gcc gcc-c++ autoconf yum -y install openssl openssl-devel pcre：为了重写rewrite， zlib：为了gzip压缩 （1）pcre安装： wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/ pcre-8.38.zip unzip pcre-8.36.zip cd pcre-8.36 ./configure make && make install cd ../ ln -s /usr/local/lib/libpcre.so.1 /lib64/ （2）zlib安装： wget http://zlib.net/zlib-1.2.8.tar.gz tar -zxvf zlib-1.2.8.tar.gz cd zlib-1.2.8 ./configure make && make install cd ../ （3）openssl安装： wget http://www.openssl.org/source/openssl-1.0.1c.tar.gz tar -zxvf openssl-1.0.1c.tar.gz cd openssl-1.0.1c ./config make && make install

一 规则 如下归纳几点 可供参考。<br> 避免使用着陆页面重定向 启用压缩功能 缩短服务器相应应用时间 使用浏览器缓存机智 缩短资源大小 优化图片 优化css发送过程 优化加载可见内容 移除会阻止呈现内容的javaScript 1 避免使用着陆页面重定向<br> 重定向会触发http请求相应周期。并会拖慢网页呈现速度。在最好的情况下，每个重定向都会添加一次往返响应。最坏的情况下，除了额外的http请求响应周期以外。可能会更多次的的执行dns查找 ，tcp 握手和tls协商，因此，您可能减少重定向的使用和提示网站的性能。 以下是重定向的模式 exapmple.com 使用网页设计 无需要人任何重定向快速切很理想化。 example.com -m.exmaple.com/htom 会导致设备用户遭到多次往返。 exmaple.com => www.example.com->m.exmaple.com 移动端非常缓慢 建议 了解自适应设计基础知识。 以提供出色的多设备体验并消除不必要的重定向。 2 启用压缩功能<br> 所有现代浏览器都支持gzip 压缩 所有http 请求自动协议类似的压缩。启用gzip 压缩珂大幅度压缩索传授的响应大小 减少客户端的流量并加快网页的首次呈现速度。 建议 在您的网络服务器上启用品测试gzip 支持 html5 所包含人民的服务器 Server