这是一个创建于 5308 天前的主题，其中的信息可能已经有所发展或是发生改变。
借助 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
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
 | 1 iugo OP 【Serve scaled images】 制作缩略图。 你的页面中使用 html 或者 css 缩小图片。这样页面还是会载入原来那个尺寸的大图，这样很占用带宽。建议你按照实际使用的尺寸缩小图片，然后在页面中载入缩小后的图片。 |
 | 2 xowenx 2011-04-06 17:39:28 +08:00 mark.很需要这样的东西~ |
 | 3 chone 2011-04-06 17:56:51 +08:00 我觉得Page Speed没有Yslow来得好用 |
| img src="https://cdn.v2ex.com/avatar/289d/ff07/234_normal.png?m=1387778458" class="avatar" border="0" align="default" alt="ong" data-uid="234" /> | 4 ong 2011-04-06 18:02:19 +08:00 @iugo B2C站点的产品有大图和缩略图，那是用一张图片好呢，还是俩张图片好呢？ |
 | 5 ehaagwlke 2011-04-06 18:02:37 +08:00 用 CSS Sprite的时候，一张合并起来的图，多大比较合适这里的大小指的是File Size？ 应该有个比较合适的尺寸的，但是没在什么地方见到过相应的介绍。 |
| 6 chone 2011-04-06 18:14:50 +08:00 @ehaagwlke CSS Sprites的时候图片大小除了在iphone以外基本上也不需要限制吧，一组UI用到的图片也不会太大 |
 | 7 buxianyu 2011-04-06 18:51:45 +08:00 这个是实例之一吗？待续？ |
| 8 iugo OP @ong 我曾听过有系统图和内容图之分. B2C站产品的原图和缩略图, 均属于内容图, 个人认为不使用 CSS sprites 为好. |
| 9 iugo OP 【Leverage browser caching】 设置站点内容的浏览器缓存。一般应用在 html, css, js, 图片。 例如，标出一张图片的过期时间；在浏览器将其第一次载入后，便不再从网络上的原始地址读取该图，而是从浏览器缓存中读取，当过了这一时间，则再次从网络上读取。适当使用，可以减少了网络请求，增快浏览速度，也能替服务器省下一笔开支。 参考: http://www.v2ex.com/t/11030 |
| 10 iugo OP 看到有这样的页面 http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html zh-CH, 但是显示的页面还是只有英语. 或许是中文版本还未制作好, 或许真的放弃了中国(毕竟中国大陆连 pagespeed.googlelabs.com 都屏蔽了). |
Select Language