简明现代魔法 -> web设计理念 -> Web前端优化技巧

Web前端优化技巧

2010-01-31

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.

性能对于网站而言是非常重要的。

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.

Google准备把网站的速度作为搜索排名的因素:

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?).

性能可以从各方面进行度量,一种是从技术的角度:检查页面加载的速度以及字节传输了多少;另外一种是从用户感知的角度,即用户体验测试的角度。

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.

80%到90%的性能问题出现在Web前端,为了取得高性能的效果,我们不仅需要优化后台应用程序,还需要优化JavaScript、图片、CSS、HTML。

影响页面加载速度的包括图片、脚本、样式表单。

浏览器对于脚本的处理过程:

  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
  2. YSlow is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues.

  3. Google’s Page Speed
  4. 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.

  5. AOL’s WebPageTest
  6. 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.)

  7. Google的Sprite Me
  8. 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 从减少服务器发送请求出发,告诉我们要把许多图片整合为一张,这样会更有效率。同时造成延迟的可能性也就越小。

使用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:

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们