本文转自: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. 第二百九十六天 how can I 坚持

    今天果真好冷,至今遇到的最冷的一天,出去一趟,脸都快要冻瘫了. 感觉自己事真的多,找个对象还这事那事的,活该单身. 好愁人啊. 今天,魏中贺来北京,本来说的要明天聚聚,可是,都不给力啊,都不知道在忙啥 ...

  2. codeforces 629A Far Relative’s Birthday Cake

    A. Far Relative’s Birthday Cake time limit per test 1 second memory limit per test 256 megabytes inp ...

  3. JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件, ...

  4. ucGUI 12864 从打点起

      ucGUI是纯C写的的,移植需要定义点阵数,颜色数,和画点函数 以下是ucGUI 12864下的移植 基于ST7920控制的12864液晶用于字符显示很方便的,但网友说用它显示图形并不合适,原因就 ...

  5. js写的替换字符串(相当于js操作字符串的一个练习)

    1.达到的效果 1./main_1.do,/left_1.do -> main:1,left:1 2./tbl_type/v_list_{id}.do -> tbl_type:list:{ ...

  6. poj 1191 棋盘分割 动态规划

    棋盘分割 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11457   Accepted: 4032 Description ...

  7. 一个 C# 获取高精度时间类(调用API QueryP*)

    如果你觉得用 DotNet 自带的 DateTime 获取的时间精度不够,解决的方法是通过调用 QueryPerformanceFrequency 和 QueryPerformanceCounter这 ...

  8. PROCESS_YIELD()宏和C语言的switch语句< contiki学习笔记之七>

    写在前面:  按照main()函数的代码一行一行的分析,该是看到了 etimer_process 这个位置.但是etimer_process实现里的一个宏 PROCESS_YIELD()引出了很多故事 ...

  9. 创建动态组-以OU为单位

    选择“Windows 计算机”为对象,因为监视对象是以计算机为单位 ==================== 以下方式则无组成员返回: 此时要求返回的对象为AD用户或组,猜测SCOM没有监视到该用户或 ...

  10. event级别设置Resumable Space Allocation

    每日一贴,今天的内容关键字为event级别                           设置Resumable Space Allocation 设置Resumable Space Alloc ...