精华内容
下载资源
问答
  • Yslow

    2017-03-03 12:27:00
    Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速度的秘籍,...

    Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速度的秘籍,就是通过这款插件分析得出的。网络上已经有不少Yslow使用说明了,本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。

    Yslow的安装方法

    现在Yslow已经有很多版本了,本文介绍的是3.0.4最新版,打开Yslow官网就能看到有四个版本可供选择:火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。

    安装Yslow要先安装 Firebug(本地址以火狐为例),两种方法启动Yslow:1、打开Firebug窗口,选择Yslow选项。2、直接点击火狐右下角的Yslow启动按钮。

    网站性能工具Yslow的使用方法 免费资源 第1张

    (图1:Yslow的启动界面)

    点击 Run Test 运行Yslow,也可以点击 Grade, Components, 或Statistics选项开始对页面的分析,如果在 Autorun YSlow each time a web page is loaded 上打上对勾,它将自动对以后打开页面进行分。

    注意图中的红框,这里是规则集,YSlow (V2)包含了所有22个测试的规则,YSlow (V1)包含原始13规则,小网站或博客-这个规则集包含14个规则,适用于小型网站或博客,建议对号入座。

    雅虎评估网站性能的23条军规

    雅虎曾经针对网站速度提出了非常著名34条准则:《Best Practices for Speeding Up Your Web Site》。而现在将34条精简为更加直观的23条,并针对每一条给出从F~A的评分以及最终的总分。

    而现在23条网站性能优化建议在YSlow的官网首页就能看到,当然也可以不看,在使用Yslow后,在控制面板里就会给你评分提示,和改进建议。

    Grade(等级视图)—Yslow的第二个选项卡

    网站性能工具Yslow的使用方法 免费资源 第2张

    (图2:Yslow给出的网站性能评分)

    Yslow给出的网站性能评分,从F~A,A是最好的,通过测试卢松松博客来看,网站有4处得分最低,例如图2中的最低分提示:我博客的HTTP请求太多。其中应用了14个外部JS、3个CSS文件(之前我已从6个合并为3个)、14个CSS背景图片。

    Yslow的建议是让我合并这些,至于合并CSS引用图片我在“提高网站打开速度的7大秘籍”中介绍过。

    Components(组件视图)—Yslow的第三个选项卡

    网站性能工具Yslow的使用方法 免费资源 第3张

    (图3:通过Components考验查看网页各个元素占用的空间大小)

    通过Components考验查看网页各个元素占用的空间大小,例如我博客某个页面,有236个images(图片),占用了489.2K,通过详细查看,发现来自gravatar(评论头像)的引用图片非常大,在加上我博客本省评论量就打,每个头像就占用几K,几百个就占用了整个网页50%的大小,而且图片还是引用的,加载就更慢。

    所以,我得出的结论是:gravatar虽然增强了互动性和个性,但也结结实实影响了网站速度。

    Statistics(统计信息视图)—Yslow的第四个选项卡

    网站性能工具Yslow的使用方法 免费资源 第4张

    (图4:Yslow的统计信息视图)

    左侧图表显示是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出(尤其是我标的红框),这个网页263个HTTP请求,网页的大小达到773.9K,意味着打开没打开一个页面几乎需要下载1M的东西,而通过使用缓存后我们可以看到效果图片基本靠缓存,而网页的总大小压缩到43.2K。

    Statistics这个统计信息视图工具和Components(第三选项卡)一样,只是效果更直观,如果要获得性能优化建议还是要看Grade(第二选项卡)的详细建议。

    Tools(辅助工具)—Yslow的第五个选项卡

    网站性能工具Yslow的使用方法 免费资源 第5张

    (图5:Yslow提供的小工具)

    JSLint是一个强大的工具,它可以检验HTML代码以及内联的Javascript代码,通过JSLint发现了google analytics上的一个js错误。

    ALL JS:查看你这个网页上一共引用了多少JS。

    All JS Beautified:把所有JS放在打开的页面中,利用站长统一检查(我感觉作用不大)。

    All JS Minified:同上,但它显示的是压缩过的js代码,如果你要JS优化,它已经给你优化好了,来过来直接用。

    All CSS:显示你网页所有CSS文件。

    YUI CSS Compressor:显示网页压缩后的CSS文件,也是拿过来可以直接用的。

    All Smush.it™:图片在线优化网站,点击它后会自动跳到smushit网站上给你自动优化CSS图片,该网站提供了优化前与优化后的对比,点击直接下载优化后的图片,在覆盖到自己网站上就可以了,强烈推荐。

    Printable View:这个是打印用的,部门开会、前端设计师讨论、向老板汇报时估计用的上。

    转载于:https://www.cnblogs.com/alantao/p/6495997.html

    展开全文
  • YSlow

    2016-04-04 21:30:00
    YSlow 是Yahoo发布的一款基于FireFox的插件。 概述 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。 YSlow有什么用? YSlow可以对网站的页面进行分析,并告诉你为了提高网站...

    YSlow  是Yahoo发布的一款基于FireFox的插件。

    概述

    如何安装YSlow?
    安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。
    YSlow有什么用?
    YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
    YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。
     

    Yslow-23条规则

    1. 减少HTTP请求次数
    合并图片、CSS、JS,改进首次访问用户等待时间。
    2. 使用CDN
    就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
    3. 避免空的src和href
    当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。测试
    4. 为文件头指定Expires
    使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
    5. 使用gzip压缩内容
    压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。旧文章
    6. 把CSS放到顶部
    7. 把JS放到底部
    防止js加载对之后资源造成阻塞。
    8. 避免使用CSS表达式
    9. 将CSS和JS放到外部文件中
    目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
    10. 权衡DNS查找次数
    减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
    IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
    11. 精简CSS和JS
    12. 避免跳转
    同域:注意避免反斜杠 “/” 的跳转;
    跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)
    13. 删除重复的JS和CSS
    重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
    14. 配置ETags
    它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last- modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和 Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载
    15. 可缓存的AJAX
    “异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
    16. 使用GET来完成AJAX请求
    当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
    17. 减少DOM元素数量
    是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS
    18. 避免404
    有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了 用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。
    19. 减少Cookie的大小
    20. 使用无cookie的域
    比如图片 CSS 等,Yahoo! 的静态文件都在主域名以外,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。
    21. 不要使用滤镜
    png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg
    22. 不要在HTML中缩放图片
    23. 缩小favicon.ico并缓存
     
     

    转载于:https://www.cnblogs.com/thqy39/p/5352998.html

    展开全文
  • YSLOW

    2015-06-10 17:05:00
    什么是YSlowYSlow是Yahoo发布的一款基于FireFox的插件。 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。 YSlow有什么用? YSlow可以对网站的页面进行分析,并告诉你为了提高网站...

    什么是YSlow?

    YSlow是Yahoo发布的一款基于FireFox的插件。

    如何安装YSlow?

    安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。

    YSlow有什么用?

    YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

    YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。

    附汉化版下载地址:下载后直接拖到火狐浏览器窗口中即可。

    http://yunpan.cn/cwI8Imj9TmCZF  访问密码 0909

    转载于:https://www.cnblogs.com/51benpao/p/4566677.html

    展开全文
  • yslow

    2012-12-23 13:32:58
    http://yslow.org/ https://github.com/yahoo/boomerang/
    展开全文
  • YSlow

    2008-11-19 11:09:52
    YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。用于分析网页,并根据一些高性能网站的规则进行相应的评级打分,对于网页性能优化有很好的帮助作用,告诉你那些部分影响了你的网页速度,Why Slow!! 主要...
  • yslow_YSlow开发:设置

    2020-09-27 23:13:19
    yslowAs promised, let's setup for YSlow development using the easiest option - the bookmarklet version. The journey of conquering the world with your rules and extensions... starts with the first step...
  • Steve Souders, performance architect at Yahoo, announced today the public release of YSlow. 雅虎(Yahoo)的性能架构师Steve Souders 今天宣布了YSlow的公开发布。 什么是YSlow? (What's YSlow?) It's an ...
  • 安装Yslow

    2017-09-07 11:25:29
    1, 打开yslow.org网页并单击"Install YSlow"即可
  • yslow chromeIf you haven't seen it yet, YSlow for Chrome hit the streets couple of weeks ago. (And Google's own PageSpeed did too yesterday. (And there's now DynaTrace for Firefox. (And WebPageTest fo...
  • 使用以下命令在项目的[grunt.js gruntfile]旁边安装此grunt插件: npm install grunt-yslow --save-dev 然后将此行添加到项目的grunt.js gruntfile中: grunt . loadNpmTasks ( 'grunt-yslow' ) ; 还要确保...
  • YSlow for Chrome

    2018-01-11 18:14:37
    YSlow.3.1.2.crx for Chrome : yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到chrome里就可以自动安装了
  • /usr/local/lib/node_modules/yslow/bin/yslow /usr/local/lib `-- yslow.1.0 net10 # which yslow /usr/local/bin/yslow net10 # yslow --help /usr/local/lib/node_modules/yslow/node_modules/jsdom/lib/...
  • Yslow安装使用, 网站性能工具Yslow

    千次阅读 2018-06-20 10:05:22
    本文whyboy站长讲解 Yslow安装 以及 Yslow使用 ,打开Yslow官网就能看到有四个版本可供选择:火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。本文介绍的火狐版本文whyboy站长讲解Yslow...
  • yslow 应用

    2015-04-14 11:05:51
    什么是YSlowYSlow是Yahoo发布的一款基于FireFox的插件。 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。 YSlow有什么用? YSlow可以对网站的页面进行分析,并告诉...
  • yslow3.1.2.zip

    2019-06-17 10:33:42
    雅虎公司的前端性能分析工具Yslow,有助于前端同事开发和测试人员测试前端页面规范和性能。
  • No active YSlow Buttons

    2020-12-01 11:37:55
    <div><p>YSlow doesn't work on my Firefox (36.0.4). None of Yslow panel buttons are clickable! For your help I thank you beforehand.</p><p>该提问来源于开源项目:marcelduran/yslow</p></div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,640
精华内容 656
关键字:

yslow