Web 前端优化最佳实践之图象篇

2014/09/21 | 星期日 分类:建站优化 | 没有评论 标签: | 作者: | 951 views

Web 前端优化最佳实践之 图象篇

Web 前端优化其中第一条就是减少HTTP请求,若网站某一页面很多很多小图片,整个页面就会增加N多的HTTP请求,从这方面入手谈谈图片对前端页面的优化:

1. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功能,更小的尺寸(与 GIF 相比)。

对于 PNG 图片,考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:

pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite http://www.pobox.com/~jason1/pngrewrite/
OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
PNGOut http://advsys.net/ken/utils.htm
另请参见: Five Tips For the Effective Use of PNG Images

对 JPEG 图片的优化工具:

jpegtran (http://jpegclub.org/)
必需要强调的是,图片设计的同学啊,请考虑设计面向 Web 的图片,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。

2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

简单的说就是”利用 CSS background 相关元素进行背景图绝对定位”,把多次 HTTP 调用变为一次调用,更多参考:CSS Sprites: Image Slicing’s Kiss of Death

补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记住这个大图片不能太”重”,我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。

更新:使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存。

3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML)

更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic 命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面!

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)
地址栏显示的小图标:favicon.ico

更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico 。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。

参考:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_image.html

减少HTTP请求-前端优化一

2014/09/10 | 星期三 分类:建站优化 | 没有评论 标签: , | 作者: | 1,023 views

关于前端性能优化的问题,分几篇讲解,对于难理解将另写Blog,后续不断加链接更新

前端优化军规,罗列如下:
1.减少HTTP请求
2.正确理解重绘Repaint 和 重排Reflow
3.减少对DOM的操作
4.使用JSON格式来进行数据交换
5.高效使用HTML标签和CSS样式 
6.使用CDN加速(算是前端一种).
7.将CSS和JS放到外部文件中引用,CSS放头,JS放尾;
8.精简CSS和JS文件(文件压缩)
9.图片优化,压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染
11.使得 Ajax 可缓存 (Make Ajax Cacheable)
12.延迟载入组件 (Post-load Components)
13.预载入组件 (Preload Components)
14.避免重定向 (Avoid Redirects)
15.杜绝 http 404 错误
16.最小化 iframe 的数量 (Minimize the Number of iframes)

标注:
11.响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。
12.13 这两条属于异步这个思想灵活运用。
14.不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.seedpaddy.com/blog 与 http://www.dbanotes.net/blog/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。
15.对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。
16.熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,请一分为二看此问题。.

前端优化之一 减少HTTP请求:

在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。
阅读全文