本文转自:http://net.tutsplus.com/tutorials/other/speeding-up-websites-with-yslow/

We all know there are countless reasons why web page load-times skyrocket, however, pinpointing the problem may be costly in both time and money. So why waste the effort when someone else—or something else—can do all the dirty work for you?

Meet Yahoo’s YSlow, a free web page analyzer for Firefox.


Getting Started

YSlow has two requirements:

YSlow piggybacks onto Firebug, so you will need to install the add-ons in the order listed above before continuing.


The Problem

Web designers, developers and copywriters strive to have the most unique and interesting content when compared to their competitors.

You may have spent days perfecting your new blog post and nearly fallen off your chair with excitement when viewing it for the first time. But, after a torrent of visitors flood your website, you notice things are no longer running smoothly. Under pressure, your new website might respond like a Commadore 64.


The Solution: Yahoo’s YSlow for Firefox

Website analysis tools generally fall into two categories:

  1. Search engine optimization
  2. Analysis of the Document Object Model’s (DOM) performance.

YSlow fits into the latter. It uses predefined rule sets to grade the performance of a web page, and third-party tools (such as Smush.it and JS Minifiers) to help resolve any problems.

There are three views:

  1. Grade
  2. Components
  3. Statistics.

YSlow includes six helpful tools: these range from JavaScript code testing to image optimization through Smush.It (another free web application from Yahoo). The entire application is wrapped up inside Firebug’s pop-up window, which can be opened and closed by a handy icon on the task bar of the browser.

Let’s jump right in with a closer look at the ‘Grade’ view.


1. Grade View

Using Envato’s home page as an example, which is a relatively low traffic site, we see the overall performance score is rated at 74 out of 100, with a yellow “C” Grade. But what does this really mean? After all, the web page renders perfectly well in the browser. Well, we need to take a closer look at the rules on the left of the view to figure this out.

Rules are divided into categories: content, cookies, CSS, images, JavaScript and server. As YSlow inspected elements of the DOM, it graded each one on a predefined rule-set (in this case YSlow V2). The closer an element stuck to the rules, the higher it scored. After all of the scores are collected, the final grade was awarded.

In the case of Envato, all of the user interface rules scored highly, but the server rules performed less efficiently. This lowered the final grade.

Thankfully each rule explains where the problem lies and provides a detailed explanation on how to resolve the issue. This feature will provide a huge relief to anyone new to optimizing websites.


Rule-sets

To some, certain rules are more important than others. YSlow provides you with a default rule-set, but also allows you to switch to ‘classic’, ‘small site or blog’ or create your own. If you do not care about using Content Delivery Networks, then simply edit a rule-set and remove that function. It really couldn’t be easier.


Components View

The components view lists the elements from an analysis in a clean, expandable data table.

While this section provides a more in-depth analysis, data such as a file expiration date or response time, may be helpful to understand problematic areas. If you have GZIP compression enabled, you can view the file size difference here.


Statistics View

Everyone loves a graph. YSlow does too.

The statistics page is a fast and simple way of understanding the total weight of your HTTP requests. Put simply, there are two graphs: empty cache and primed cache. These graphs break your website down into HTML, JavaScript, images and so on. The file sizes of each are then displayed as pie segments. Empty Cache represents a browser’s first visit to the web page. Prime Cache indicates which components would or would not be in the browser’s cache when revisiting. Clean, clear and effective.


Tools

Finally, we have tools. Immediately, you will notice a lack of specificity toward the analyzed web page, but don’t be fooled. Each tool is a powerful time saver when it comes to shrinking, minifying and compressing your content. If you are familiar with the concept of optimization, then you may have come across similar tools before.

When reducing page load times, it is important to remove white space and comments from your documents,  and optimize your images.

Thankfully these tools perform all the hard work for you, because doing this by hand will undoubtedly take you deep into the night. No amount of energy drinks will keep you from going insane after you delete a JavaScript function by accident for the hundredth time.

There are eight tools altogether; covering all of them would take a couple of articles. So, I will concentrate on Yahoo! Smush.it as an example.

Yahoo! Smush.it is a small web application, which can be used with YSlow or straight from your browser.

Quite simply, Smush.it is a lossless image optimiser. YSlow uploads the images for you, which are ‘smushed’ and presented in a table where you can view the new image, size, and compression savings percentage.

You can even keep the files in the same directory structure and download them all as a handy zip file.

There are plenty of free applications with similar tools, but the ones packaged with YSlow are a welcomed addition.


Working on Envato’s YSlow Grade

As I mentioned earlier, Envato’s YSlow performance score is 74 with a grade of C. Let’s take some time to analyze YSlow’s results, and what could be done to improve the final score.

Here are their suggested improvements, starting from the top:

Make Fewer HTTP Requests: Grade E

This rule goes on to detail that there are six external JavaScript scripts and 17 external background images. Their suggestion is to combine the files and use CSS sprites to resolve the issue.

The first thing to do is take a look at the Components View, and in particular, the JS files.

As the URLs show, only one JavaScript file is hosted on the same server as the analyzed page, this contains customized JavaScript for WordPress. Two are required for JQuery, and Google Analytics, and the final three are from formspring.com.

If the JavaScript files were my own, I might consider combining the custom applications.js and formspring JS files into one and hosting them locally. However, only the application.js file appears to be customized. So, I really don’t want to be playing around with someone else’s work. Especially as some of those files are lacking license/copyright information.

Using Google’s hosting for jQuery is also considered to be good practice, however, they should update to the most recent version of jQuery: 1.4.2.

So in this case, it’s probably best to ignore this rule as any modification to the current methods could result in some problems further down the line. My only real concern is the response time for two of the FormStack files, at this time, they each talk over 360 ms to respond. If this continues, it may be worth finding a method to host them locally.

Images

Next we review the images; all are hosted locally, respond within 40 ms and are quite small in size. This tells us that individually, these files are already optimized for this page. YSlow suggests that we combine these images and use CSS sprites to improve our grade.

If you’re unfamiliar with CSS sprites, you can click on the “Read more” link, which will take you to Yahoo!’s Best Practices for Speeding up Your Website page.

In this case, by using one optimized image we should see an improvement in image response time. CSS sprites work by combining your background images to one and then using CSS to align that image with background-image and background-position. There is nothing special about the CSS used, so it should be compatible with all major browsers.

Use a Content Delivery Network (CDN): Grade F

Many websites will have an F grade for this rule, due to the fact that it takes a bit of work to setup; however, the benefits are more than worth the time cost. Additionally, services like Amazon offer surprisingly cheap hosting. While Envato absolutely uses CDNs for its high traffic sites, like Nettuts+, they may have decided that it’s not necessary for a lower traffic site.

Add Expires Headers: Grade F

Again, we are confronted by a rule which is concerned with HTTP requests. Expires headers are common, because they allow components to become cacheable. Cached components (images, JavaScript, etc) save time and bandwidth for repeated visits to a web page. So it is worth implementing expiration dates for your content.

YSlow found 55 components “without a far-future expiration date” after analyzing Envato.com. Most of the components are background images. We know from the first suggestion, “Make fewer HTTP requests,” that we can use CSS sprites to reduce the number of background images, automatically improving this grade.

Setting up “Expires” headers is generally a simple process, and typically only requires a quick addition to your .htaccess file. Once applied, all of your components should now have appropriate expires headers without any further file manipulation or modification. In order to gain full insight into working with your .htaccess file and headers requires an article unto itself. Rather than go into detail here, I have included a set of helpful links for further reading:

Put CSS at Top: Grade B

YSlow found one stylesheet outside of the Head element for Envato. Thankfully, this is the simplest rule to rectify. By keeping style sheets at the top of your web page, you automatically increase the speed at which your web page will load. Once moved, YSlow should report a grade A for this rule.

Minify JavaScript and CSS: Grade D

Removing unused white space in your documents reduces the size of the document, and thus increases the speed at which the file is downloaded. As I mentioned earlier, YSlow provides us with a minification tool, so all the hard work can be done for us.

Head over to the Tools view and select YUI CSS Compressor. In the blink of an eye, your CSS files are minified and available for download. Quick, clean, and simple.

Configure Entity Tags (ETags): Grade C

ETags provide a way to validate a specific version of a web page component (images, JavaScript, etc). They work with the web server to match a browser’s cached content against the content on the web server. Unfortunately, YSlow has picked up on two missing ETags for files hosted on formspring.com. Due to this, it might be best to follow YSlow’s suggestion and remove ETags altogether. This can be done by adding “FileETag none” to your Apache configuration file. You should now see an improvement in this rules grade.


Alternatives

There are many alternatives when it comes to website analysis, and I wouldn’t be surprised if you had your favorites. Along with YSlow, I use another four free analyzers. As you might expect, each one offers unique features, and, for this reason alone, I think it is important to remember that no one tool can provide an absolute bullet-proof report.

To provide you with an idea of how different each of these generates a final outcome, I have included a brief description and the score given to Envato’s website.

Web Page Test

Provided by  AOL, this application adds a variety of settings to your analysis.  You can simulate browser version, connection speed, and perform visual comparisons to other URLs. It’s a great feature if you wish to start A/B Testing.

Score: N/A. Provides an optimization checklist and load timings.

PageSpeed

PageSpeed is another add-on for Firefox and Firebug. This even shows up in the same menu as YSlow and provides a similar analysis. Like YSlow, it uses rules and reports back on how well each component performs. It will even optimize and minify your content.

Score: 76/100

WooRank

Still in beta, this free web application will check your content, Alexa ranking, traffic, search engine optimization, geo metadata and more. Again, helpful hints are added with each analysis. You can even add a widget to your website, showing off your ‘woorank score’.

Score: 65.8/100

Website Grader

Grader is another free web application, also available for the iPhone. This tool is quite similar to WooRank, with a clean and detailed interface. There is even a dedicated tool for analyzing blogs: a unique feature out of the five listed in this article.

Score: 99/100


Pros of YSlow

  • Includes the option to automatically analyze web pages.
  • Costs nothing and is free from advertising.
  • Rule sets are customizable. For example, if you’re not concerned with content delivery networks, you can simply turn this option off.
  • Automatically uploads all the images from web pages when working with Yahoo! Smush.it. This alone is a huge timesaver.
  • All rules are backed with extensive documentation and offer explanations for improvement.

Cons of YSlow

  • YSlow only works with remotely hosted webpages. Trying to analyze an HTML document on your desktop will often result in false feedback.
  • Errors in JavaScript or HTML may cause YSlow to hang. This is rare, but a simple close and reopen works just fine.
  • YSlow lacks the ability to add your own rules for testing. I would like to add some personalized rule sets, such as Alexa Ranking or Google Page Rank.
  • Only available for Firefox and requires Firebug to work. If you don’t like Firefox or Firebug, this might be a problem.

Summary

Applications like YSlow offer a quick and effective analysis of web pages. They can generate detailed reports from the information they gather, provide suggestions or tools to resolve issues, and they may end up teaching you something along the way. But YSlow and its alternatives will always have competition: a dedicated, seasoned and qualified web developer or SEO analyst.

Nothing beats knowledge and practice; as we saw, several analysis tools will always come up with several different reports.

There is no one true solution when it comes to search engine optimization or increasing web page load times. However, a helping hand like YSlow may ease your workload and save you or your client a lot of time and, more importantly, money, in the long run.

[转]Speeding Up Websites With YSlow的更多相关文章

  1. 网站性能工具Yslow的使用方法

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

  2. Yslow使用方法

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

  3. [资源分享]yslow 与firebug 修复版本Firefox35【绿色版本下载】

    自从火狐也开始做版本帝后,相关查的插件越来越不好使了, 而且火狐集成自己的调试工具,也不是很好使用,Yslow 也坏掉了 找公司写c++修复了下 把yslow和Firebug 打包到一起,而且关闭自动 ...

  4. Websites for more Android development information

    There is a vibrant, helpful Android developer community on the Web. Here are a numberof useful websi ...

  5. Building Websites in ASP.NET

    ASP.NET offers three frameworks for creating web applications: Web Forms, ASP.NET MVC, and ASP.NET W ...

  6. 【转】加快网站访问速度——Yslow极限优化

    Yslow是一套雅虎的网页评分系统,详细的列出了各项影响网页载入速度的参数,这里不做多说. 我之前就一直参考Yslow做博客优化,经过长时间的学习也算是有所收获,小博的YslowV2分数达到了94分( ...

  7. Yslow网站性能优化工具

    Yslow是一款网站性能优化的插件:

  8. YSLOW

    什么是YSlow? YSlow是Yahoo发布的一款基于FireFox的插件. 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装. YSlow有什么用 ...

  9. yslow性能优化的35条黄金守则

    参考Best Practices for Speeding Up Your Web Site Exceptional Performance 团队总结了一系列优化网站性能的方法,分成了7个大类35条, ...

随机推荐

  1. Android问题-DelphiXE8安装后编译Android提示SDK无法更新问题(XE10也可以解决)

    资料来原:http://www.chenruixuan.com/archives/479.html (DelphiXE8 更新SDK)http://www.dfwlt.com/forum.php?mo ...

  2. ds18b20里的 温度值正负判断 为什么要判断大于6348 ,为什么取这个值?

    http://zhidao.baidu.com/question/576118682.html?quesup2&oldq=1

  3. Java封装 properties文件操作

    /** * Prop. Prop can load properties file from CLASSPATH or File object. */ public class Prop { priv ...

  4. opencv 矩阵的相似性对比 (图片之间比较)

    测试图片:     code: #include <opencv\cv.h> #include <opencv\highgui.h> #include <opencv\c ...

  5. react-native 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。

    Q: A:

  6. 用C#调用蓝牙编程

    2013-04-22 09:41:06 什么是蓝牙? 现在只能手机这么发达,蓝牙对我们来说肯定不陌生.我来介绍一下官方概念: 蓝牙,是一种支持设备短距离通信(一般10m内)的无线电技术.能在包括移动电 ...

  7. mysql CASE WHEN的基础和多种用法

    CASE计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以确定结果. CASE 搜索函数计算一组布尔表达式以确定结果. 两 ...

  8. SQL SERVER 2008/2012/2012R2/2014 设置开启远程连接(sa配置)

    本文方案适用于Microsoft Sql Server 2008/2012/2012 r2/2014版本,以下简称MSSQLSERVER. MSSQL默认是不允许远程连接,并且禁用sa账户的.如果想要 ...

  9. PostgreSQL中,如何查表属于哪个数据库

    db1=# \x Expanded display is on. db1=# SELECT * FROM information_schema.tables WHERE table_name='tab ...

  10. delphi 08 HTML组件

    ///HTML组件///后面的字符串为这个控件的ID号///直线          Line         (WebBrowser1.Document as IHTMLDocument2).exec ...