`

Yslow前台页面优化

阅读更多

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

分享到:
评论

相关推荐

    yslow前端性能测试工具

    2. **优化建议**:yslow不仅评分,还会提供详细的优化建议,指导如何改进页面性能。 3. **组件分析**:yslow能够列出页面所有组件,包括其大小、类型和加载时间,方便开发者针对性优化。 4. **缓存策略检查**:...

    用YSlow分析和优化页面的方法第1/2页

    YSlow是一款由雅虎美国开发的页面评分工具,它被广泛应用于对网页性能的分析与优化。YSlow能够对网页进行评分,并给出具体的改进建议。通过使用YSlow,开发者可以找出网页性能瓶颈,并掌握如何改进和优化网页以达到...

    Selenium IDE + YSlow +Showslow 实现页面性能评估自动化

    在本案例中,用户采用了一种自动化测试解决方案,结合了Selenium IDE、YSlow和Showslow三个工具,实现了对导购搜索页面的性能自动化评估。 Selenium IDE是一款基于Firefox的测试录制工具,能够记录用户的浏览器操作...

    yslow-3.1.8-fx最新版.rar

    3. **优化建议**:YSLOW会提供一系列具体的优化建议,如合并CSS和JavaScript文件、压缩图片、设置缓存策略等,以提高页面加载速度。 4. **报告导出**:可以将分析结果导出为HTML、CSV或XML格式,便于团队协作和跟踪...

    页面性能测试Showslow+Yslow

    本文档主要介绍了Showslow和Yslow的部署、使用方法,为需要进行页面性能测试的同僚提供入门帮助,希望能对各位有所帮助。

    YSlow使用指南最新2

    - 点击“Run Test”运行YSlow,或选择“Grade”、“Components”、“Statistics”等选项开始对当前页面进行分析。 - 可以勾选“Autorun YSlow each time a web page is loaded”,让YSlow在每次加载网页时自动运行。...

    yslow-3.1.0-fx

    《yslow-3.1.0-fx:优化网页性能的专业工具》 yslow是Web性能优化领域的一款著名工具,其3.1.0-fx版本是专为Firefox浏览器定制的扩展。这款插件由Yahoo!开发,旨在帮助开发者评估网页加载速度,提供改善网页性能的...

    使用YSlow工具提高网页的效率

    这对于识别哪些组件是性能瓶颈非常有帮助,从而可以优化这些组件以提升页面加载速度。 【Tools】菜单包含四个工具,包括生成JSLine报表分析JavaScript错误和建议,生成所有JavaScript和CSS代码的可阅读和打印报表,...

    yslow3_1_2

    **yslow3_1_2** 是一个针对Web前端性能优化的浏览器插件,它为开发者和测试人员提供了一个方便的工具,以便于评估和改进网页加载速度。这个插件基于YSlow规则,由Yahoo!开发,旨在帮助用户遵循最佳实践来提升网页的...

    页面渲染原理及页面优化

    为了优化页面加载速度,可以使用一些工具,如 Google PageSpeed 和 Yahoo YSlow 等。这些工具可以对页面加载过程进行分析,并提供优化建议。例如,Google PageSpeed 可以对页面加载过程进行分析,并提供以下建议: ...

    firebug+YSlow

    2. **前端优化**:Firebug帮助修复代码错误,YSlow指导如何优化页面加载,两者结合,能有效提升网页的用户体验。 **现代替代品** 虽然Firebug在2018年已被Firefox的内置开发者工具取代,但其功能已被后者继承和...

    FireBug1.9.1+yslow3.1.0

    FireBug和YSlow是Web开发和优化领域中的两个重要工具,尤其对于前端开发者而言,它们是不可或缺的利器。本文将详细介绍这两个工具的功能、用途以及如何使用它们来提升网页性能。 **FireBug** FireBug是一款集成在...

    YSlow 2.0.0b6

    《YSlow 2.0.0b6:Firefox浏览器优化利器》 YSlow是Yahoo!开发的一款网页性能优化工具,它以其强大的分析功能和实用的优化建议,成为了前端开发者的重要助手。YSlow 2.0.0b6是针对Firefox浏览器的一个扩展插件,...

    selenium ide + yslow +showslow实现页面性能评估自动化

    最近使用yslow+showslow做导购搜索页面性能评估测试,yslow是firefox一个插件,在firefox浏览网页时,会对网面性能进行评估(根据yahoo的14条规则,进行打分)。Showslow是收集yslow评测结果的web程序

    yslow-3.1.8-fx.xpi

    YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本

    firefox基于firebug的插件yslow-3.1.0

    YSlow是Yahoo发布的一款基于FireFox的插件。 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对... YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见

    firefox-firebug-yslow.zip

    YSlow可以分析页面的各个组成部分,包括图片、脚本、样式表等,根据预设的规则给出评分,帮助开发者识别性能瓶颈,优化页面加载时间,提升用户体验。 结合Firebug和YSlow,开发者可以在Firefox 35.0.1环境下进行全...

    yslow for firefox

    yslow for firefox v18

    yslow-3.1.8-fx汉化最新版

    YSlow 是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

Global site tag (gtag.js) - Google Analytics