Web 前端优化

为了加快网站访问速度,除了可以优化后端数据库,cache,操作系统,web 服务器,重新设计架构以外,优化前端页面性能也很重要。

建议

Yahoo 的性能小组经过长期的研究总结出了几条让网站访问更快的实战经验:Best Practices for Speeding Up Your Web Site。High Performance Web Sites 和 YSlow 的作者 Steve Souders 在其教授的 Stanford CS193H 课程里谈到了这14条建议:

Make fewer HTTP requests
Use a CDN
Add an Expires header
Gzip components
Put stylesheets at the top
Put scripts at the bottom
Avoid CSS expressions
Make JS and CSS external
Reduce DNS lookups
Minify JS
Avoid redirects
Remove duplicate scripts
Configure ETags
Make AJAX cacheable

随后 Steve Souders 在其新书 Even Faster Web Sites 谈到了更多建议:

Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance……….Doug Crockford
Creating responsive web apps…………Ben Galbraith, Dion Almaer
Writing efficient JavaScript………….Nicholas Zakas
Scaling with Comet…………………Dylan Schiemann
Going beyond gzipping……………Tony Gentilcore
Optimizing images……………….Stoyan Stefanov, Nicole Sullivan

工具

Yahoo 性能小组根据 Best Practices for Speeding Up Your Web Site 给出的建议提供了免费的 Web 前端评估工具YSlow,严格的说 YSlow 不能用来优化网站,只是用来评估网站的性能然后给出建议。Google 也提供了类似的 open source 工具Page Speed。这2个工具都需要 Firefox 并且需要安装 Firebug 插件。

CSS 在线优化工具:http://www.cleancss.com/

CSS 图片组合器:http://spritegen.website-performance.org/

JavaScript 优化工具:YUI Compressor

图片在线优化工具:Smush.it

发表评论