绍兴做网站：提高网站性能的最佳实践

2019.08.02 mf_web

这是一个明智的选择：表现良好的网站享有更高的访问者参与度，保留率和转换率。考虑到用户的变幻无常，以及移动设备如今非常重要这一事实，网站的速度从未如此重要！在本文中，我将重点介绍如何提高自己网站的性能。

提高网站性能

绍兴做网站多年来，网站的表现及其影响已得到充分记录。2007年亚马逊报道，亚马逊的加载时间每增加100毫秒，其销售额就下降了1％。谷歌还在2006年报告了谷歌地图产品的类似结果。谷歌发现，通过将页面大小从100KB减少到80KB，他们的流量在第一周增加了10％，然后在接下来的三周内增加了25％。

很明显，监控网站的性能是必须的，不应该被忽视，因为它是网页设计工作流程中不可或缺的一部分。

通过上述信息图表strangeloopnetworks.com说明，网站的性能对用户的影响。

您可能已经在使用我今天要讨论的一些技术，而其他技术则可能没有。虽然您可以使用服务器端的技术来加速网站，但本文将重点介绍如何从前端提高性能。我们跳吧..

最小化HTTP请求

改善网页性能的最重要方面之一是最大限度地减少浏览器需要对服务器进行的往返次数。您的网站包含的每个文件（例如CSS，JavaScript或图像）都需要下载到浏览器中。通过最小化这些请求，您将显着加快页面速度。如果您为网站的不同部分包含单独的CSS文件，那么您会发现将所有CSS包含在一个样式表中是有益的，同样适用于JavaScript或其他资源。

将文件包含到网站中的方式也会产生极大的影响。例如，如果您当前包含这样的CSS：

1	@import url('myCss.css');

那么你应该重新考虑这种方法并使用：

1	<link rel='stylesheet' href='myCSS.css'>

通过这样做，您允许CSS文件与其他资源并行下载，从而加快页面加载速度。

缩小HTML，CSS和JavaScript

为了理解我们正在编写的代码，我们经常以一种更容易阅读的方式对其进行格式化，换句话说，它是一种更人性化的格式。看看下面的示例代码：

五

<div>

<label for="name">Text Input:</label>

</div>

</form>

在上面的例子中，我们可以清楚地看到我们有一个带有label和input元素的表单，由div包围。上面的例子比阅读它更清晰：

1	<form action="#" method="post"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" value="" tabindex="1"/></div></form>

不幸的是，尽管我们可能更容易阅读，但更人性化的版本包含许多不必要的字符。在上面的示例中并不是太灾难性，但是，如果这是一个拥有成千上万行代码的大型站点，那么它将耗费我们的性能。

不必要的字符可以包括空格，注释和换行符。可以在不影响代码性能的情况下删除这些字符，通过删除这些字符，我们减少了代码的文件大小，因此需要下载到浏览器的数据量。

您可以缩小HTML，CSS和JavaScript。如果你不这样做，那么你现在应该开始考虑它。幸运的是，有许多在线工具可以帮助我们最小化和恢复我们的代码，如YUI压缩器。

优化图像

浏览器需要下载的性能最苛刻的资产之一是图像，导致某些网站的速度非常慢。尽可能尝试使用CSS生成图形而不是图像。这对于按钮等项目来说非常有用，但在某些情况下，CSS可能无法重新创建设计，例如照片或详细的装饰元素。如果是这种情况，那么可以尝试一些技巧。

通过正确格式化和压缩图像而不会丢失其外观或视觉质量，您可以节省需要下载的数据，从而为Web提供漂亮的优化图像。

精灵

如果你已经设计了很长时间，那么我相信你已经在使用精灵了。但是，如果你刚刚开始，那么这里是对它们的快速概述。

早些时候我告诉过你关于加速网站的关键是尽量减少http请求的数量。您网站上的每个图像都需要一个http请求到服务器。通常，浏览器只能同时执行几个同时请求（到同一个域），这就是队列形成的原因。通过将多个图像组合成一个图像，我们可以减少请求的数量。

创造精灵的不利之处在于它们对于我们来说可能非常棘手，并且通常可能非常繁琐。还有一系列在线精灵工具可以帮助创建精灵。我使用的那个（在过去的六个月左右为我节省了大量时间）是SpritePad。使用SpritePad，您只需拖放图像并立即将它们作为一个PNG精灵+ CSS代码使用。好东西啊？！

上图显示了Facebook和Google网站上使用的精灵图像示例。

无损压缩图像

例如，如果您有某种形式的摄影展示，或者您正在设计的网站上有大量照片，那么将它们全部作为精灵服务可能并不方便或不实用。这是您必须“压缩图像”的地方。通过正确格式化和压缩图像，我们可以节省许多字节的数据。

通常，当您使用Fireworks或Photoshop等工具保存图像时，生成的文件包含额外的数据，包括甚至可能在图像中未使用的颜色数据，甚至包括元数据等。通过压缩图像而不会丢失图像的外观或视觉质量，您可以节省需要下载的数据。雅虎的smush.it服务非常擅长为您完成这项工作。只需上传您想要'smush'的图像，它就会无损压缩它们。

数据URI

减少图像所做的http请求数量的另一种方法是用作数据uris。数据URIS可以描述为

将图像和字体编码为纯数据字符串，可以直接集成到标记和样式表中

本月初，我们在网页设计中使用了“数据URI的内容，原因和方式”，提供了一个很好的教程。请完整阅读有关此主题的更多信息。只是注意，这些应该明智地使用，有时使用这种方法可能没有益处或实际。

提供缩放图像

应尽可能以原始图像尺寸提供图像。例如，您不应使用CSS调整图像大小，除非您要为同一图像的多个实例提供服务，并且该图像至少匹配一个原始大小的实例。否则你应该使用诸如photoshop之类的东西来调整你的图像大小，这将导致节省字节。

当然，这没有考虑流体图像（响应式设计），这可能比它们在小屏幕上显示的要大。

确保使用Photoshop等工具缩放正确尺寸的图像。

您还可以物理删除详细信息。

上面显示的示例来自dConstruct存档网站。在他的博客上讨论的优化技术中，杰里米基思模糊了每张照片的非必要部分。在这样做时，他减少了所需的图像数据，将文件大小切成两半。与获胜的性能收益相比，细节上的损失可以忽略不计。

高速缓存

您网站的每日访问者中有40-60％使用空缓存。让这些首次访问者快速访问页面是获得更好用户体验的关键。

Web浏览器和Web服务器都允许缓存。这些缓存将先前的请求存储在浏览器或服务器上; 请求，如图像，网页，CSS / JS文件和其他数据，如cookie。通过存储这些响应，可以减少带宽使用，并有助于提高网站的性能。

缓存通常最适用于很少更改的资产，例如CSS和JavaScript文件。您可以设置资产更改时间的到期日期，有效地告诉浏览器或服务器提取资产的新副本。详细了解在Google Developers上利用缓存的最佳做法。

推迟解析Javascript

为了将网页完全显示给用户，浏览器需要下载其所有相关文件。JavaScript文件不应该加载到HTML文档的头部，而应该加在底部附近（尽管这不会减少浏览器需要下载的总字节数），它会在JavaScript之前显示网页内容满载。

如果要将其添加到文档的头部，浏览器将等到JavaScript完全加载后再显示页面。您的JavaScript文件应该包含在结束正文标记之前。

避免做出错误的请求

你可能会问什么不好的请求？例如，您网站上的链接断开等同于错误的请求。错误的请求可归类为导致404/410错误的任何内容; 任何导致死胡同的请求。

Ramiro Galan的 '404 Sadface'举例说明了一个糟糕的请求。

不可避免的是，您的网站有时会被更改，移动或更新。这些修改可能导致旧链接不再导致其正确的目的地。虽然这些请求不会导致任何数据下载，但它仍然是一种浪费资源，因为浏览器必须首先发起请求。如果您发现您的网站上有任何“不良请求”，那么您应该通过纠正错误来尽快解决这些问题。Google网站管理员工具是查看您的网站是否有任何损坏链接的有用资源。