最小化CSS和JavaScript,优化博客或网站上PNG的重要性(和便捷性)

原文发表地址: The Importance (and Ease) of Minifying your CSS and JavaScript and Optimizing PNGs for your Blog or Website

原文发表时间: 2011-09-01 22:06

亲爱的读者,你们可以在文后随意评论这篇博文,比如说“嗯,真无趣!”。有趣的是,人们往往懒得去管自己的网页了就像那句老掉牙的笑话那样,“自己做不到的,最会动动嘴巴教别人去做。”我经常告诉别人怎么去优化他们的网站,却不动手优化自己的网页。 有一点是非常重要(而且有用)的,就是尽可能少向线下发送CSS,JS和HTML标记。这不仅和大小有关,也和获取位数的请求数量有关。这可比文件大小问题更恼人。 首先,在页面上运行YSlow。 Yslow是一个很棒的工具,它会让你觉得自己太差劲了,自己的页面那么糟糕。不过你可以改善的。首先,我的图片很大。我还有184k的JS,21k的CSS和30k的标记。注意,我的图标很小。以前这可大多了,几年前还影响了几G的宽带。

Yslow还告诉我我让大家做了太多HTTP请求: 此页有33个外部JavaScript脚本。试试把它们融成一个。此页有5个外部样式表。试试把它们合并为一。 看来,要提速不仅是把东西缩小这么简单,还要删掉不需要的东西,满足更多的需求。我想少做点大负载的请求,然后最小化负载,再用Gzip进行压缩。 优化、最小化、压缩打包css和JavaScript CSS可以显示为如下样式:

    1: body {
    2:     line-height: 1;
    3: }
    4: ol, ul {
    5:     list-style: none;
    6: }
    7: blockquote, q {
    8:     quotes: none;
    9: }

或者是这样的,同样有效。

    1: body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

有很多“最小化”CSS和JavaScript的方法,不过很幸运你不用考虑那么多。就像90年代早期关于CSS/JS最小化Gzip文件的纷争。有很多种选择,互相都占有一定的百分比,每个人都觉得自己的方法是最好的。

还有JavaScript特定压缩器,你可以在生成页面之前在这些压缩器中运行代码。

· Packer

· JSMin

· Closure compiler

· YUICompressor (也适用于CSS)

· AjaxMin (也适用于 CSS)

还有CSS压缩器:

· CSSTidy

· Minify

· YUICompressor (也适用于JS)

· AjaxMin (也适用于JS)

· CSSCompressor

有些可以很好地融合到你的开发工作流程中。可以把他们放在版本文件中,或者在运行时最小化。

· YUICompressor - .NET 端口,能在运行或生成时压缩。也能在NuGet上运行。

· AjaxMin  - 有MSBuild任务并且可以融入你的项目版本。

· SquishIt – 在ASP.NET应用视图运行时使用,效果令人惊叹。

· 更新: Chirpy – “分解,最小化,验证javaScript,样式表和dotless文件。”

· 更新: Combres – “.NET库支持最小化,压缩,连接,ASP.NET和ASP.NET MVC网络应用中的JavaScript和CSS缓存”

· 更新: Andrew Davey的Cassette – 全面完成,编译CoffeeScript,脚本衔接,智能调试及发布时间

不同的选择间有很多比较。最终当压缩比例不是那么重要时,你应该注重2件事:

· 兼容性—它会破坏你的CSS?它永远不应破坏

· 工作流程—它会融入你的生活和工作吗?

对我来说,我的博文中有模板语言,我要在部署新模板时压缩CSS和JS。批处理文件和命令行运行的很不错所以我使用AjaxMin(没错,这是微软的产品的,能够满足我的需求。)

我创建了一个简单的批处理文件,从我博客顶部底部获取JS,创建了.header.js和.footer.js。我还压缩了所有的CSS,包括需要CSS的插件,并把它们放到同一个文件夹中,保证文件顺序。

为了更方便阅读,我把这些行分割如下。

 set PATH=%~dp0;"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\"
  
 ajaxmin -clobber 
   scripts\openid.css 
   scripts\syntaxhighlighter_3.0.83\styles\shCore.css 
   scripts\syntaxhighlighter_3.0.83\styles\shThemeDefault.css 
   scripts\fancybox\jquery.fancybox-1.3.4.css 
   themes\Hanselman\css\screenv5.css 
   -o css\hanselman.v5.min.css
  
  
 ajaxmin -clobber 
   themes/Hanselman/scripts/activatePlaceholders.js 
   themes/Hanselman/scripts/convertListToSelect.js 
   scripts/fancybox/jquery.fancybox-1.3.4.pack.js 
   -o scripts\hanselman.header.v4.min.js
  
  
 ajaxmin -clobber 
   scripts/omni_external_blogs_v2.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shCore.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shLegacy.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushCSharp.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushPowershell.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushXml.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushCpp.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushCss.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushRuby.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushVb.js 
   scripts/syntaxhighlighter_3.0.83/scripts/shBrushPython.js 
   scripts/twitterbloggerv2.js scripts/ga_social_tracker.js 
   -o scripts\hanselman.footer.v4.min.js
  
  
 pause

底部的JS都支持我的代码荧光笔工具。这看起来很复杂,但其实只有三个文件,两个JS和一个CSS,都源自我的需要的JS文件。

这将我所有的CSS压缩到了26k,以下是输出:

CSS

原始大小:35667字节;压缩大小:26537字节(缩小25.6%)

Gzip的输出大约是5823字节(压缩78.1%)

JS

原始大小:26537字节;压缩大小:64515字节(缩小22.7%)

Gzip输出大约34415字节(压缩46.7%)

同时,22个HTTP请求减少为3个。

优化你的图片(尤其是PNG)

· 似乎我1600k(未缓存的机子)的首页上大部分都是图像,大概占了1300k。那是因为我在主页上放了很多文章,但我也会在大部分博文中添加PNG图像。我应该考虑的更周到些:人像照片等看上去“复杂”的照片要使用JPEG格式

· 图表,截屏等“清晰明了”的图片使用PNG 格式

我还可以在用PNGOUT上载之前优化PNG的大小(你知道吗你也可以这么做!)。为了博主考虑,方便起见,我推荐使用PNGGauntlet,这是一个为用户调用PNGOut的Windows应用程序。比PowerShell操作简单,虽然我有时也用PowerShell。

如果你使用Visual Studio 2010,你可以使用Mad的Beta版 图像优化扩展,它能让你在Visual Studio中直接优化图像。

为了展示其功效,我从大约一个月前的博客中下载了大小总量为7.29MB的一些图片,然后通过PNGGauntlet的PNGOut运行。

然后我选取了一些过大的PNG,以JPG格式保存。我为最小额外工作总共保存了1359k(接近1.5M或者1.2M)。

如果你觉得这种优化毫无优势,纯粹的无聊或者浪费时间,那就想想它的倍数效应。你会成千上万次地节省一个又一个1.5M图片的空间。到你死的时候,你的博客仍会为你的读者节省字节。

这很重要,不仅仅因为它节省了带宽,还因为它加快了速度。让浏览器的负担少一些,尤其像我这样,10%的用户使用的是移动设备。别让这些小手机们不堪重负,不是每个人都有无限制数据计划的。

让你的浏览器永远缓存所有的东西

Mads提醒了我关于IIS7的一个很棒的建议,让web服务器的“到期”标头设在未来一个较远的日期,有效提示浏览器长期缓存。这么做的优点在于如果你或者你的主机正在使用IIS7,那你就能在web.config里自行更改,无需改变IIS设置。

    1: <staticContent>
    2:  <clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
    3: </staticContent>

你可能觉得这简直疯了。这的确太疯狂了。我建立了网页,所以我想要控制。我在文件名中对CSS和JS文件进行了版本编号。有人使用的是有版本的QueryString,还有人用哈希。关键是你有没有行动起来,还是任凭缓存发生?就算你没有采纳这个建议,也去了解一下为什么东西要缓存,是怎么缓存的,应该怎么去控制它。

尽可能压缩

确认你发出网络服务器的东西都已经用Gzip压缩了。有IIS7这也是非常简单的事情,让我能删除一些旧的第三方库。所有这些设置都在system.webserver里。

    1: <urlCompression
    2:    doDynamicCompression="true" doStaticCompression="true"
    3:    dynamicCompressionBeforeCache="true"/>

你可以为你的网页做一件事,那就是打开HTTP压缩。对一般页面来说,像我页面上100k的HTML,压缩后可以变为20k。下载速度快多了,对于用户来说“点击显示”的速度也会加快。

当然这篇博文只是表面地陈述了些现实中性能的优化,只涉及了一点点浏览器字节的部分。你可以在Yslow中好好研究下,争取拿个“A”等,继续不断优化DOM对象的#,DNS查找,以及JavaScript等。

换句话说,你只要花5%的力气研究下这些贴士,就能从中获取80%的利益。花不了你多少时间的,而且你时时刻刻都会从中受益:

· 最小化你的JS和CSS

· 把CSS和JS合并到同一个文件以最小化HTTP请求

· 打开Gzip Compression并最大化利用

· 尽可能为所有东西设置到期标头

· 压缩你的PNG和JPEG (尤其是PNG)

· 如果你有很多小图片,使用CSS Sprites

我在用Yslow的成绩还是“D”等的,但是D至少是合格成绩。希望你们喜欢,亲爱的读者们,请在评论中留下你的或者感想。

还有,读读Steve Souders的东西吧。是他编写了Yslow。