有百万个方法提高你的网站的性能。方法各不相同，有些比其他的更复杂。这三个主要领域你可以做的是:硬件(你的web服务器)，服务器端脚本优化(PHP, Python, Java)和前端性能(web页面的肉)。
本文主要关注前端性能因为它是最简单的工作，并为您提供了最大的效益。
为什么关注前端性能?
前端(即你的HTML, CSS, JavaScript和图像)是最重要的可访问的网站的一部分。
如果你使用的是共享的网络托管计划，你可能没有根(或根类)访问服务器，因此不能调整和调整服务器设置。即使你做拥有正确的权限，web服务器和数据库工程需要的专业知识能给您带来任何直接的好处。这也是便宜的．
本文所讨论的大多数前端优化都不需要任何其他成本，只需要花费您的时间。它不仅便宜，而且是对时间的最佳利用，因为前端性能是网站响应时间的很大一部分。记住这一点，下面是一些例子简单的的方法提高的速度你的网站。
1.配置你的网页，找出罪魁祸首。
它有助于分析你的网页，找到你不需要的组件或组件可以优化。分析一个网页通常涉及一个工具，如Firebug来确定什么组件(即。
图片、CSS文件、HTML文档和JavaScript文件)被用户请求，多长时间组件开始加载，并且有多大它是。一般的经验法则是，您应该使页面组件尽可能小(在25KB以下是一个很好的目标)．Firebug的Net选项卡(如上所示)可以帮助您找到使您的网站陷入困境的巨大文件。
在上面的例子中，你可以看到它为你提供了渲染一个网页所需的所有组件的分解，包括:它是什么，它在哪里，它有多大，它需要多长时间来加载。网络上有很多工具可以帮助你配置你的网页-看看本指南您可以使用更多的工具。
2.以正确的格式保存图像以减少其文件大小。
如果您有很多图像，了解每个图像的最佳格式是必要的。有三种常见的web图像文件格式:JPEG，GIF,PNG．
一般来说，对于具有平滑渐变和色调的真实照片，应该使用JPEG。对于纯色图像(如图表和徽标)，应该使用GIF或PNG。GIF和PNG是类似的，但是PNG通常产生更小的文件大小。
读编码恐怖的权衡使用PNG而不是GIF．
3.缩小CSS和JavaScript文档以节省几个字节。
缩小从源代码中删除不需要的字符(如制表符、空格、源代码注释)以减少其文件大小的过程。例如:这个chuck的CSS:
.some-class{颜色:#ffffff;行高:20 px;字体大小:9 px;｝
可以转换为:
.some-class{颜色:# fff;行高:20 px;字体大小:9 px;}
它会工作得很好。
,不要担心-你不需要重新格式化你的代码手动．有很多免费的工具可以用来缩小CSS和JavaScript文件。对于CSS，您可以从中找到一堆易于使用的工具CSS优化工具列表．
对于JavaScript，一些流行的缩小选项是一、YUI压缩器和JavaScript代码改进器。一个好的缩小应用程序使您能够在开发过程中逆转缩小。另外，您也可以使用Firebug等浏览器内工具来查看代码的格式化版本。
4.结合CSS和JavaScript文件来减少HTTP请求
对于每个需要渲染网页的组件，一个HTTP请求创建到服务器。因此，如果一个网页有5个CSS文件，那么对于这个特定的网页，至少需要5个单独的HTTP GET请求。通过合并文件，可以减少生成web页面所需的HTTP请求开销。
请参阅Niels Leenheer关于如何使用PHP(它可以适用于其他语言)组合CSS和JS文件的文章。SitePoint讨论了类似的方法绑定CSS和JavaScript;他们能够刮掉1.6秒在响应时间上，从而减少响应时间原来时间的76%．否则，您可以使用good, old组合您的CSS和JavaScript文件复制粘贴' ing(像魔咒一样有效)。
5.使用CSS精灵来减少HTTP请求
CSS Sprite是一个小图片组合成一个大图片。要显示正确的图像，需要调整背景位置CSS属性。以这种方式组合多个映像可以减少HTTP请求。
例如,在Digg(如上所示)，您可以看到用于用户交互的单个图标。为了减少服务器请求，Digg将多个图标组合在一张大图片中，然后使用CSS对它们进行适当的定位。你可以手动完成这个操作，但是有一个基于网络的工具叫做CSS Sprite Generator，它可以让你选择上传图片并将其组合到一个CSS Sprite中，然后输出CSS代码背景位置属性)来呈现图像。
6.使用服务器端压缩来减少文件大小
如果你在一个没有服务器端压缩的共享web主机上，这可能会很棘手，但是为了充分优化页面组件的服务，它们应该被压缩。压缩页面对象类似于压缩通过电子邮件发送的大文件:你(web服务器)压缩一个大家庭的照片(页面组件)，并通过电子邮件发送到您的朋友(浏览器)-他们反过来解压缩你的ZIP文件看图片。流行的压缩方法有缩小和gzip．
压缩图像对页面加载时间。这真的会伤害一个商业网站，特别是如果他们是一个电子商务网站有很多的图片，例如汽车配件零售．如果你运行自己的专用服务器或者你有一个VPS -你很幸运-如果你没有启用压缩，安装一个应用程序来处理压缩是很容易的。
请查看关于如何安装的指南mod_gzip在Apache。
7.避免内联CSS和JavaScript
默认情况下，外部CSS和JavaScript文件由用户的浏览器缓存。当用户导航离开登录页面时，他们已经有了您的样式表和JavaScript文件，这反过来又省去了再次下载样式和脚本的需要。如果你在你的HTML文档中使用大量的CSS和JavaScript，你将无法利用网络浏览器的缓存特性。
8.卸载网站资产和功能
将站点的一些资产和特性卸载给第三方web服务大大减少了web服务器的工作。卸载站点资产和特性的原则是与另一台服务器共享服务页面组件的负担。您可以使用Feedburner处理你的RSS订阅，Flickr为您的图像服务(要意识到其中的含义卸载你的图像)，和谷歌AJAX库API提供流行的JavaScript框架/库，如MooTools、jQuery和Dojo。
例如，在Six Revisions网站上，我使用的是Amazon的Simple Storage Service (Amazon S3(简称)，来处理你在这个页面上看到的图像，以及Feedburner来处理RSS提要。这允许我自己的服务器只处理HTML、CSS和CSS图像背景。这些解决方案不仅具有成本效益，而且大大减少了网页的响应时间。
9.使用Cuzillion来规划一个最佳的网页结构
Cuzillion是一个基于web的应用程序，由Steve Souders(离开雅虎后，谷歌的前端工程师。作为首席性能)，它可以帮助你试验网页结构的不同配置，以看到最佳结构是什么。如果你已经有了一个网页设计，你可以使用Cuzillion来模拟你的网页结构，然后调整它，看看是否可以通过移动东西来提高性能。
查看InsideRIA对Steve Sounders的视频采访，讨论Cuzillion如何工作和帮助指南，让你快速开始。
10.监控web服务器性能并定期创建基准测试。
web服务器是大脑的操作-它负责获取/发送HTTP请求/响应给正确的人，并服务于你的所有网页组件。如果您的web服务器性能不佳，您将无法获得优化工作的最大收益。
经常检查web服务器的性能问题是很重要的。如果您有类似根的访问权限，并且可以在服务器上安装东西，那么就签出ab- Apache web服务器基准测试工具或来自IBM的Httperf。如果你没有访问你的web服务器(或有不知道我正在谈论的)你会想要使用一个远程工具像提琴手或HTTPWatch分析和监控HTTP流量。
他们都会指出哪些地方是你看不顺眼的。在进行重大更改之前和之后进行基准测试，还可以让您对更改的影响有一些了解。如果你的web服务器不能处理网站产生的流量，是时候升级或服务器了迁移．
进一步的阅读
- 看亚伦霍普金的优化页面加载时间研究。
- 查看Max Kiesler关于改进页面加载时间所获得的投资回报的分析。
- 通过阅读80/20规则告诉我们如何减少雅虎上的HTTP请求来理解前端性能的重要性。用户界面的博客。
- Cal Henderson关于“快速服务JavaScript”的文章向您展示了优化JavaScript文件的方法。
- artweb设计分享了一个方法和插件绑定CSS和JS在Rails。
有更多的吗?
就像我说的，有无数种方法可以提高网页性能页面优化．如果你对上面的观点有更多的见解，或者有其他你想讨论的建议，请请在评论中与我们分享．o
