Page Speed Online 教学帖，实例

[iugo]

借助 V2EX 这个平台，提供给入门用户一个学习帖。

Page Speed Online 是英文的，不太方便英语不好的站长使用。（话说，咱也该好好学习英语了，这样能大大开阔视野呀）

页面载入速度问题分为三个等级，高优先级（High priority），中优先级（Medium priority），低优先级（Low priority）。没有问题的，即为 Rules without suggestions 。

这里，对问题的分类，以在我的页面中看到的高低优先级为例。实际应用中，可能所有问题，当其严重到一定程度，都是高优先级。

【Combine images into CSS sprites】
利用 CSS sprites 技术整合一些零散的小图片到一张大图片中。

每加载一张图片都要提交一次网络请求，把多张小图整合到一张大图中，虽然没有减少图片总体积，但是减少了这种请求提交的次数，从而加快整个页面加载。然后利用 CSS 读取这张大图的某一小块，达到看到小图的目的，有人称之为 CSS图像拼合技术。

参考: http://baike.baidu.com/view/2173476.htm
http://blog.bingo929.com/css-sprites-css-techniques-tools-tutorials.html

[iugo]

【Serve scaled images】
制作缩略图。

你的页面中使用 html 或者 css 缩小图片。这样页面还是会载入原来那个尺寸的大图，这样很占用带宽。建议你按照实际使用的尺寸缩小图片，然后在页面中载入缩小后的图片。

[xowenx]

mark.很需要这样的东西~

[chone]

我觉得Page Speed没有Yslow来得好用

[ong]

@iugo B2C站点的产品有大图和缩略图，那是用一张图片好呢，还是俩张图片好呢？

[ehaagwlke]

用 CSS Sprite的时候，一张合并起来的图，多大比较合适——这里的大小指的是File Size？ 应该有个比较合适的尺寸的，但是没在什么地方见到过相应的介绍。

[chone]

@ehaagwlke CSS Sprites的时候图片大小除了在iphone以外基本上也不需要限制吧，一组UI用到的图片也不会太大

[buxianyu]

这个是实例之一吗？待续？

[iugo]

@ong 我曾听过有系统图和内容图之分. B2C站产品的原图和缩略图, 均属于内容图, 个人认为不使用 CSS sprites 为好.

[iugo]

【Leverage browser caching】
设置站点内容的浏览器缓存。一般应用在 html, css, js, 图片。

例如，标出一张图片的过期时间；在浏览器将其第一次载入后，便不再从网络上的原始地址读取该图，而是从浏览器缓存中读取，当过了这一时间，则再次从网络上读取。适当使用，可以减少了网络请求，增快浏览速度，也能替服务器省下一笔开支。
参考: http://www.v2ex.com/t/11030

[iugo]

看到有这样的页面 http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html

zh-CH, 但是显示的页面还是只有英语. 或许是中文版本还未制作好, 或许真的放弃了中国(毕竟中国大陆连 pagespeed.googlelabs.com 都屏蔽了).