WEB前端優化

找到一篇非常不錯的關於WEB前端優化的文章：

http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/

 

 

效能對於網站而言是非常重要的。

Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation.

 

Google準備把網站的速度作為搜尋排名的因素：

At PubCon, Matt Cutts from Google said there is strong lobbying in Google to introduce a new ranking factor into the algorithm. The new ranking factor has to do with how fast a site or page loads. Matt described this as one of his ‘what to expect in 2010′ bullet points in his presentation yesterday evening in Las Vegas.

參考：

http://searchengineland.com/site-speed-googles-next-ranking-factor-29793

http://www.downloadsquad.com/2009/11/14/google-to-use-page-load-speed-as-a-search-result-ranking-factor/

 

 

效能可以從各方面進行度量，一種是從技術的角度：檢查頁面載入的速度以及位元組傳輸了多少；另外一種是從使用者感知的角度，即使用者體驗測試的角度。

Performance can be measured in various ways. One way is technical: seeing how fast a page loads and how many bytes are transferred. Another is perceived performance, which ties into usability testing. This can only be measured by testing with users and seeing how satisfied they are with the speed of your interface (e.g. do they start clicking on your JavaScript carousel before it is ready?).

 

80%到90%的效能問題出現在Web前端，為了取得高效能的效果，我們不僅需要優化後臺應用程式，還需要優化JavaScript、圖片、CSS、HTML。

The good news (and hard truth) about performance is that 80 to 90% of poor performance happens in the front end. Once the browser gets the HTML, the server is done and the back-end developer can do nothing more. The browser then starts doing things to our HTML, and we are at its mercy. This means that to achieve peak performance, we have to optimize our JavaScript, images, CSS and HTML, as well as the back end.

 

影響頁面載入速度的包括圖片、指令碼、樣式表單。

 

瀏覽器對於指令碼的處理過程：

1. Whenever the browser encounters a <script> block in the document, it calls up the JavaScript engine, sits back and has a coffee.
2. The script engine then looks at the content in the script block (which may have been delivered earlier), sighs, complains about the poor code, scratches its head and then does what the script tells it to do.
3. Once the script engine is done, it reports back to the browser, which puts down its coffee, says good-bye to the script engine and looks at the rest of the document (which might have been changed, because the script may have altered the HTML).

The moral of the story is to use as few script blocks as possible and to put them as far down the document as possible. You could also use clever and lazy JavaScript, but more on that later.

 

絕對有必要對圖片進行優化：

Optimizing your images is absolutely necessary because most of the time they are the biggest files on page. I’ve seen people jump through hoops to cut their JavaScript down from 50 KB to 12 KB and then happily use a 300 KB logo or “hero shot” in the same document. Performance needs you!

 

可利用的一些工具包括：

1、Yahoo’s Yslow

YSlow is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues.

 

2、Google’s Page Speed

Like YSlow, Page Speed by Google is also an add-on for Firebug. Its main difference is that it does a lot of the optimization for you and provides the modified code and images immediately.

 

3、AOL’s WebPageTest

Rather late to the game, AOL’s WebPageTest is an application with some very neat features. (It is also available as a desktop application, in case you want to check Intranets or websites that require authentication.)

 

4、Google的Sprite Me

Sprite Me was produced by Google (under the supervision of Steve Souders) and allows you to create Sprites automatically from any website, even via a bookmarklet. It analyzes the images on a page and offers you various options before generating the Sprite and CSS for you.

 

使用圖片整合技術

Image Sprites were first discussed in an article published by Dave Shea and based on the work of Petr Stanicek.

 

CSS Sprites它是為了提高網頁讀取速度而誕生的一種技術，或者可以說是一種技巧。

 

在傳統做法中，我們希望把網頁上的圖片切割的越講究（指降低圖片大小）越好，但這起到的效果是微乎其微的，甚至都感覺不到。CSS Sprites 從減少伺服器傳送請求出發，告訴我們要把許多圖片整合為一張，這樣會更有效率。同時造成延遲的可能性也就越小。

 

 

5、Yahoo’s Smush It

You can use Smush.it directly in the browser or automatically from YSlow. The website tells you how many bytes you can save by optimizing your images.

 

 

使用Network Distributed Hosting技術

If you use a library or CSS provided by a library, make sure to use the hosted versions of the files. In the case of YUI, this is done for you if you use the configurator. And you can pick from Yahoo or Google’s network.

 

For other libraries, there is a Google code repository of AJAX libraries. This is useful for a few reasons:

    * Visitors to your website will get the JavaScript and CSS from the server that is as geographically close to them as possible and won’t have to wait for your server to send the information from around the globe.

    * There is a high probability that these servers are faster than yours.

    * Visitors who have visited other websites that use the same includes will already have them on their computers and won’t need to load them again.

    * You save on bandwidth and can easily upgrade the library by changing the version number of the include.