让我们来试试，我们打算使用YouTube图片来制作一个实例。
在以下示例中，我们使YouTube标志显示在屏幕上。使用相同的使用相同的sprite类与相同的图标，制作一个简单的翻转图标。
| <style> .sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; } </style> <div id="logo"> </div> |
现在我们所作的是通过单一的HTTP请求满足所有的静态网站需求。这样可以大大降低网页加载时间。
当你使用sprites制作悬停翻转效果时，图片更替看起来间隔时间非常短。不同于翻转状态时加载文件，留下大量的空白直到该文件完全被加载。
<style>
.sprite {
background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}
#logo {
width:100px;
height:45px;
background-position:0 0;
}
#button {
background-position:0 -355px;
padding:5px 8px;
}
#button:hover{
background-position:-25px -355px;
}
</style>
<div id="logo"> </div>
<a href="#" id="button"></a>
|
3. 先加载CSS最后加载JavaScript
某些站点，你根本无法避开所有的扰乱了你功能的HTTP请求。
在这方面，以下几个建议：
<head>标签里加载CSS </body>标签闭合前加载JavaScript . 会发生什事情呢？网页在用户的机器上加载显示，因此他们的眼睛就开始扫描所提供的内容，这个时候JavaScript正好迎头赶上在后台进行加载。
提示：如果您不想移动JavaScript标记，你认为它会搞糟网站的方式工作，我建议使用defer 属性。
4. 使用子域名并发下载
并行下载，当你增加文件下载。如果你有打开网页在页脚的状态栏，你会发现加载其他网站的时候，会同时对static.domain.com和 c1.domain.com进行请求。
这是一个非常棒的优化负载性能的方法。虽然只是简单的使用子域名，内容在同一个服务器上，但是浏览器是当作独立的服务器进行对待。
进行这样的设定：
1、在服务器上创建3个子域名
2、把图片放在在每个子域名的一个文件夹内
3、在新建的子域名中替换网站图片的位置路径
现在使用JavaScript文件，不会超过两个并发。
5. Adding an Expires Header
一些网站非常丰富，即使使用上述的技术后，性能似乎还可以增加更多。
一个用户访问你的网站，产生一些必要的页面，图片，脚本等HTT请求。
当你使用了Expires Header，你可以在用户的本地机器对这些元素进行缓存，不仅提高了他们的访问速度，也节省了你的带宽。 Expires header可以在所有的图片，脚本与css上使用。
只需要在你的网站根目录.htaccess文件中加入一行代码就可以轻松做到。（假如你没有，可以用文本编辑器创建一个，存为.htaccess， 然后上传到根目录中。）
下面的.htaccess.为ico，.pfd，.flv （Flash类型文件），.jpg，.png等设置了2010到期的遥远的期限。
| <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch> |