css png
Hello Dear Reader. You may feel free to add a comment at the bottom of this post, something like "Um, DUH!" after reading this. It's funny how one gets lazy with their own website. What's the old joke, "those who can't, teach." I show folks how to optimize their websites all the time but never got around to optimizing my own.
您好亲爱的读者。 您可以随时在这篇文章的底部添加评论，例如“嗯，DUH！”。 看完这篇有趣的是，人们如何懒于自己的网站。 什么是老话，“那些谁不能教”。 我向人们展示了如何一直优化他们的网站，但从未尝试过优化自己的网站。
It's important (and useful!) to send as few bytes of CSS and JS and HTML markup down the wire as possible. It's not just about size, though, it's also about the number of requests to get the bits. In fact, that's often more of a problem then file size.
重要的是(并且有用！)尽可能少地发送CSS，JS和HTML标记的字节。 但是，这不仅与大小有关，还与获取位的请求数有关。 实际上，这通常比文件大小更成问题。
首先，在您的网站上运行YSlow 。 (First, go run YSlow on your site.)
YSlow such a wonderful tool and it will totally ruin your day and make you feel horrible about yourself and your site. ;) But you can work through that. Eek. First, my images are huge. I've also got 184k of JS, 21k of CSS and 30k of markup. Note my favicon is small. It was LOT bigger before and even sucked up gigabytes of bandwidth a few years back.
YSlow如此出色的工具，它将完全毁掉您的一天，并使您对自己和您的站点感到恐惧。 ;)但是您可以解决这一问题。 真是的首先，我的影像很大。 我还拥有184k的JS，21kCSS和30k的标记。 请注意，我的网站图标很小。 它比以前更大，甚至几年前就吸收了千兆字节的带宽。
YSlow also tells me that I am making folks make too many HTTP requests:
YSlow还告诉我，我正在让人们发出太多HTTP请求：
This page has 33 external JavaScript scripts. Try combining them into one.
This page has 5 external stylesheets. Try combining them into one.此页面包含33个外部JavaScript脚本。 尝试将它们合并为一个。 此页面有5个外部样式表。 尝试将它们合并为一个。
Seems that speeding things up is not just about making things smaller, but also asking for fewer things and getting more for the asking. I want to make fewer request that may have larger payloads, but then those payloads will be minified and then compressed with GZip.
似乎加快速度不仅是使事情变小，而且要求更少的事情，而要求更多的事情。 我想发出更少的请求，而这些请求可能具有更大的有效负载，但是这些有效负载将被最小化，然后使用GZip压缩。
优化，缩小，压缩和压缩您CSS和JavaScript (Optimize, Minify, Squish and GZip your CSS and JavaScript)
CSS can look like this:
CSS可能如下所示：
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
Or like this, and it still works.
或像这样，它仍然有效。
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
There's lots of ways to "minify" CSS and JavaScript, and fortunately you don't need to care! Think about CSS/JS minifying kind of like the Great Zip File Wars of the early nineties. There's a lot of different choices, they are all within a few percentage points of each other, and everyone thinks theirs is the best one ever.
有很多方法可以“最小化” CSS和JavaScript，幸运的是，您无需在意！ 考虑一下CSS / JS的缩小，例如90年代初的Great Zip File Wars。 有很多不同的选择，它们彼此之间只有几个百分点之遥，每个人都认为他们的选择是有史以来最好的。
There are JavaScript specific compressors. You run your code through these before you put your site live.
有JavaScript专用的压缩器。 在使站点投入使用之前，您需要通过这些代码运行代码。
YUICompressor (also does CSS)
YUICompressor (也支持CSS)
YUICompressor (also does CSS)
YUICompressor (也支持CSS)
AjaxMin (also does CSS)
AjaxMin (CSS也是如此)
And there are CSS compressors:
还有CSS压缩器：
YUICompressor (also does JS)
YUICompressor (JS也是如此)
YUICompressor (also does JS)
YUICompressor (JS也是如此)
AjaxMin (also does JS)
AjaxMin (JS也是如此)
And some of these integrate nicely into your development workflow. You can put them in your build files, or minify things on the fly.
其中一些可以很好地集成到您的开发工作流程中。 您可以将它们放入构建文件中，也可以即时将其最小化。
YUICompressor - .NET Port that can compress on the fly or at build time. Also on NuGet.
YUICompressor-.NET可动态或在构建时进行压缩的端口。 同样在NuGet上。
AjaxMin - Has MSBuild tasks and can be integrated into your project's build.
AjaxMin-具有MSBuild任务，可以集成到项目的构建中。
SquishIt - Used at runtime in your ASP.NET applications' views and does magic at runtime.
SquishIt-在运行时在ASP.NET应用程序视图中使用，并在运行时产生魔力。
UPDATE: Chirpy - "Mashes, minifies, and validates your javascript, stylesheet, and dotless files."
更新： Chirpy- “混搭，缩小和验证您的javascript，样式表和无点文件。”
UPDATE: Combres - ".NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications."
更新： Combres- “ .NET库，可以为ASP.NET和ASP.NET MVC Web应用程序实现JavaScript和CSS资源的最小化，压缩，组合和缓存。”
UPDATE: Cassette by Andrew Davey - Does it all, compiles CoffeeScript, script combining, smart about debug- and release-time.
更新： Andrew Davey的Cassette-完成所有工作，编译CoffeeScript，脚本组合，精于调试和发布时间。
There's plenty of comparisons out there looking at the different choices. Ultimately when compression percentages don't matter much, you should focus on two things:
有很多比较，可以查看不同的选择。 最终，当压缩百分比无关紧要时，您应该专注于两件事：
- compatibility - does it break your CSS? It should never do this 兼容性-它会破坏CSS吗？ 它永远不应该这样做
- workflow - does it fit into your life and how you work? 工作流程-它适合您的生活和工作方式吗？
For me, I have a template language in my blog and I need to compress my CSS and JS when I deploy my new template. A batch file and command line utility works nicely so I used AjaxMin (yes, it's made by Microsoft, but it did exactly what I needed.)
对我来说，我的博客中有一种模板语言，部署新模板时需要压缩CSS和JS。 批处理文件和命令行实用程序运行良好，因此我使用了AjaxMin (是的，它是由Microsoft制造的，但确实满足了我的需要。)
I created a simple batch file that took the pile of JS from the top of my blog and the pile from the bottom and created a .header.js and a .footer.js. I also squished all the CSS, including my plugins that needed CSS, and put them in one file while being sure to maintain file order.
我创建了一个简单的批处理文件，该文件从博客顶部获取了JS堆，从底部获取了JS堆，并创建了.header.js和.footer.js。 我还压缩了所有CSS，包括需要CSS的插件，并将它们放在一个文件中，同时确保保持文件顺序。
I've split these lines up for readability only.
我将这些行分开只是为了提高可读性。
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
All those ones at the bottom support my code highlighter. This looks complex ,but it's just making three files, two JS and a CSS out of all my mess of required JS files.
This squished all my CSS down to 26k, and here's the output:
这将我所有CSS压缩到26k，这是输出：
CSS Original Size: 35667 bytes; reduced size: 26537 bytes (25.6% minification) Gzip of output approximately 5823 bytes (78.1% compression)
CSS原始大小：35667字节； 缩小的大小：26537字节(最小化25.6％)Gzip输出约5823字节(压缩率78.1％)
JS Original Size: 83505 bytes; reduced size: 64515 bytes (22.7% minification) Gzip of output approximately 34415 bytes (46.7% compression)
JS原始大小：83505字节； 减小的大小：64515字节(缩小22.7％)输出的Gzip约34415字节(压缩46.7％)
That also turned 22 HTTP requests into 3.
这也将22个HTTP请求转换为3。
优化您的图片(尤其是PNG) (Optimize your Images (particularly PNGs))
Looks like my 1600k cold (machine not cached) home page is mostly images, about 1300k. That's because I put a lot of articles on the home page but I also use PNGs for images most of my blog posts. I could be more thoughtful and:
看起来我的1600k低温(未缓存计算机)主页主要是图像，大约1300k。 那是因为我在首页上放了很多文章，但我也将PNG用于大多数博客文章的图像。 我可能会更体贴和：
- Use JPEGs for photos of people, things that are visually "busy" 使用JPEG拍摄人的照片(视觉上很忙)
- Use PNGs for charts, screenshots, things that must be "crystal clear" 使用PNG绘制图表，屏幕截图以及必须“清晰”的内容
I can also optimize the size of my PNGs (did you know you can do that!) before I upload them with PNGOUT. For bloggers and for ease I recommend PNGGauntlet, which is a Windows app that calls PNGOut for you. Easier than PowerShell, although I do that also.
在使用PNGOUT上传它们之前，我还可以优化PNG的大小(您知道可以做到吗！) 。 对于博客作者，为了方便起见，我建议使用PNGGauntlet，它是一个Windows应用程序，可以为您调用PNGOut 。 比PowerShell容易，尽管我也这样做。
If you use Visual Studio 2010, you can use Mad's Beta Image Optimizer Extension that will let you optimize images directly from Visual Studio.
如果使用Visual Studio 2010，则可以使用Mad's Beta图像优化器扩展，该扩展使您可以直接从Visual Studio优化图像。
To show you how useful this is, I downloaded the images from the last month or so of posts on this blog totaling 7.29MB and then ran them through PNGOut via PNGGauntlet.
为了向您展示这是多么有用，我从该博客上个月开始下载了大约7.29MB的帖子图像，然后通过PNGGauntlet在PNGOut中运行它们。
Then I took a few of the PNGs that were too large and saved them as JPGs. All in all, I saved 1359k (that's almost a meg and a half or almost 20%) for minimal extra work.
然后，我取了一些太大的PNG，并将它们另存为JPG。 总而言之，我省去了1359k(几乎是一个meg的一半或几乎20％)，从而减少了额外的工作。
If you think this kind of optimization is a bad idea, or boring or a waste of time, think about the multipliers. You're saving (or I am) a meg and a half of image downloads, thousands of times. When you're dead and gone your blog will still be saving bytes for your readers! ;)
如果您认为这种优化不是一个好主意，无聊或浪费时间，请考虑乘数。 您正在保存(或我保存)成千上万次的meg和一半的图像下载。 当您死了时，您的博客仍将为读者节省字节数！ ;)
This is important not just because saving bandwidth is nice, but because perception of speed is important. Give the browser less work to do, especially if, like me, almost 10% of your users are mobile. Don't make these little phones work harder than they need to and remember that not everyone has an unlimited data plan.
这很重要，不仅因为节省带宽很不错，而且因为对速度的感知很重要。 减少浏览器的工作量，尤其是像我这样的用户中，几乎有10％的用户是移动用户时。 不要让这些小巧的手机比他们需要的辛苦工作，并记住并非每个人都有无限的数据计划。
让您的浏览器永远缓存一切 (Let your browser cache everything, forever)
Mads reminded me about this great tip for IIS7 that tells the webserver to set the "Expires" header to a far future date, effectively telling the browser to cache things forever. What's nice about this is that if you or your host is using IIS7, you can change this setting yourself from web.config and don't need to touch IIS settings.
Mads提醒我有关IIS7的一个很好的技巧，该技巧告诉Web服务器将“ Expires”标头设置为较远的日期，从而有效地告诉浏览器永远缓存内容。 这样做的好处是，如果您或您的主机使用的是IIS7，则可以从web.config自己更改此设置，而无需触摸IIS设置。
<staticContent>
<clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
</staticContent>
You might think this is insane. This is, in fact, insane. Insane like a fox. I built the website so I want control. I version my CSS and JS files in the filename. Others use QueryStrings with versions and some use hashes. The point is are YOU in control or are you just letting caching happen? Even if you don't use this tip, know how and why things are cached and how you can control it.
您可能会认为这太疯狂了。 实际上，这是疯狂的。 像狐狸一样疯狂。 我建立了网站，所以我想要控制。 我用文件名对CSS和JS文件进行版本控制。 其他人使用带有版本的QueryString，而另一些人使用哈希。 关键是您在控制中还是只是让缓存发生？ 即使您不使用此技巧，也要知道如何以及为什么缓存内容以及如何对其进行控制。
压缩一切 (Compress everything)
Make sure everything is GZip'ed as it goes out of your Web Server. This is also easy with IIS7 and allowed me to get rid of some old 3rd party libraries. All these settings are in system.webServer.
确保所有内容都已从您的Web服务器中取出后进行了GZip处理。 使用IIS7也很容易，这使我摆脱了一些旧的第三方库。 所有这些设置都在system.webServer中。
<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
If there is one thing you can do to your website, it's turning on HTTP compression. For average pages, like my 100k of HTML, it can turn into 20k. It downloads faster and the perception of speed by the user from "click to render" will increase.
如果您可以对网站做一件事，那么它将打开HTTP压缩。 对于普通页面，例如我的100k HTML，它可以变成20k。 它下载速度更快，并且用户从“单击渲染”的速度感知将增加。
Certainly this post just scratches the surface of REAL performance optimization and only goes up to the point where the bits hit the browser. You can go nuts trying to get an "A" grade in YSlow, optimizing for # of DOM objects, DNS Lookups, JavaScript ordering, and on and on.
当然，这篇文章只是拉开了REAL性能优化的表面，并且只是达到了让位撞击浏览器的地步。 您可以大胆尝试在YSlow中获得“ A”等级，针对DOM对象，DNS查找，JavaScript排序等进行优化。
That said, you can get 80% of the benefit for 5% of the effort by these tips. It'll take you no time and you'll reap the benefits hourly:
也就是说，通过这些技巧的5％的努力，您可以获得80％的收益。 您无需花费时间，即可每小时获得收益：
- Minifying your JS and CSS 最小化JS和CSS
- Combining CSS and JS into single files to minimize HTTP requests 将CSS和JS合并为单个文件，以最大程度地减少HTTP请求
- Turning on Gzip Compression for as much as you can 尽可能多地启用Gzip压缩
- Set Expires Headers on everything you can 尽一切可能设置Expires Headers
- Compress your PNGs and JPEGs (but definitely your PNGs) 压缩您的PNG和JPEG(但绝对是您的PNG)
I still have a "D" on YSlow, but a D is a passing grade. ;) Enjoy, and leave your tips, and your "duh!" in the comments, Dear Reader.
我在YSlow上仍然有“ D”，但D是及格分数。 ;)尽情享受，并留下您的小费，以及您的“嘘！” 在评论中，亲爱的读者。
Also, read anything by Steve Souders. He wrote YSlow.
另外，请阅读Steve Souders的所有文章。 他写了YSlow。
css png
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
