如何优化网站的访问速度，提升网站的性能的方法！

目前，该网站在海外市场中占有重要地位，许多客户更倾向于选择独立网站的产品，因此独立网站的体验尤为重要。那么，我们的网站应该从哪些方面来提高网站的体验呢？除了网站的视觉效果和网站结构外，网站的开放速度也是其中的一个重要环节。想象一下，如果客户甚至不能打开网站，他们怎么能改变它呢？

为什么网站性能优化如此重要？

网站速度是用户在地址栏中输入完整的URL并加载网页所有功能的速度，那么为什么网站的开启速度如此重要呢？
 

1.影响客户体验。

自谷歌推出RankBrain算法以来，网站的用户体验对谷歌排名越来越重要，客户更喜欢加载速度快的网站。页面加载时间长，操作响应时差会给客户带来不良体验。我们可以考虑放弃动态内容（如视频或图像），以减少网页加载时间。
 

2.影响网站的转化率。

客户希望在最短的时间内打开他们想看到的网站。如果页面加载时间长或失败，他们可能会放弃打开网站。这将导致页面浏览量减少，转化率低。一般来说，网站加载时间每超过1秒就会流失30%的访问者。相反，快速加载的网站通常转化率更高。例如，沃尔玛研究发现，当网站页面的打开时间从1S增加到4S时，转化率下降最为明显，而网站的打开速度每增加1S，转化率就会增加2%。可见，提高转化率的方法之一就是提高网站的加载速度。
 

3.对网站跳出率的影响。

跳出率是指访问者访问我们的网站时离开的访问次数与总访问次数的百分比。如果我们的网站在3秒以上没有打开，用户很可能会直接离开我们的网站。下图显示了网站优化前的跳出率数据。当网站加载时间为8秒时，平均跳出率在80.94%以上。

后期优化网站速度，加载时间为3S时，平均跳出率降低40%。

网站的加载速度会影响网站的跳出率，加载速度快的网站跳出率也会降低。当然，影响跳出率的因素很多。要优化症状，会有更好的推广效果。
 

4.对SEO的影响。

网站加载速度影响用户体验。搜索引擎非常重视用户体验，更倾向于尽快向用户提供相关信息。如果网站打开太慢，客户会失去等待的兴趣，直接关闭网站。这样的网站很难有好的排名。随着越来越多的人使用移动设备，移动终端的流量正在向前发展。全球50%以上的在线流量来自移动设备，因此网站移动终端的用户体验也同样重要。

以下是如何优化网站开放速度，进一步提升客户体验和网站转化率。
 

1、尽量减少HTTP请求次数。

合并js。

合并css。

图片sprite。
 

2、延迟加载内容。

图片懒得加载。

数据懒加载(点击查看更多)

功能懒加载(曝光或点击后加载html模块、js功能模块)
 

3、使用离线缓存。

将常用变化较少的js、css、图片存储到localstorage中，第二次访问时直接进行本地缓存。广泛应用于移动终端。
 

4、CSS、JS放置正确的位置。

将css放在head中，确保页面看到时风格是对的。

将js放在body的最后位置，防止加载js堵塞页面。
 

5、静态资源压缩。

图片、CSS、JS应在发布前压缩。
 

6、静态资源使用多个域名。

对于图片、CSS、JS，可以使用几个域名，可以并发加载。
 

7、使用cdn存储静态资源。

用户与您的网站服务器的接近程度会影响响响应时间的长短。静态资源可以放在内容分发网络(Contentdeliverynetwork，CDN)中加快访问速度。
 

8、预加载。

在某个功能尚未显示之前，在业余时间提前加载相关图片或js代码。
 

9、DOM操作优化。

使用JavaScript访问DOM元素相对较慢，因此为了获得更多的页面，应该做到：

缓存已访问的相关元素。

在线下更新节点后，将其添加到文档树中。

避免使用JavaScript来修改页面布局。

 

10、优化算法。

在js处理中优化搜索、排序算法。尽量少用嵌套循环。
 

11、使用事件代理。

有时我们会觉得页面反应迟钝，因为DOM树元素中附加了太多的事件句柄，一些事件句病经常被触发。这就是为什么使用eventdelegation(事件代理)是一个很好的方法。如果你在div中有10个按钮，你只需要在div上添加一个事件句柄，而不是为每个按钮添加一个句柄。当事件冒泡时，你可以捕捉事件并判断是哪个事件发生的。你也不必等待onload事件发生才能操作DOM树。你需要做的是等待你在树结构中访问的元素。你不必等待所有的图像都被加载。您可能希望使用DOMContloaded事件来代替事件应用程序中的onavailable方法。
 

12、减少DNS搜索次数。

减少主机名称的数量也可以减少页面中并行下载的数量。减少DNS搜索次数可以节省响应时间，但减少并行下载会增加响应时间。我的指导原则是将这些页面中的内容分为至少两部分，但不超过四部分。结果是在减少DNS搜索次数和保持高度平行下载之间的平衡。
 

13、按域名划分页面内容。

将页面内容分为几个部分，可以最大限度地实现平行下载。由于DNS搜索的影响，您应该首先确保您使用的域名数量在2到4之间。例如，您可以将HTML内容和动态内容放在www.example.org上，并将页面的各种组件（图片、脚本、CSS）存储在statics1.example.org和statics.example.org上。
 

14、正确使用跳转。

在用户和HTML文档之间添加一个跳转会延迟页面中所有元素的显示，因为在HTML文件被加载之前，任何文件(图像、Flash等)都不会被下载。).有一种跳转现象经常被网页开发者忽略，但往往浪费响应时间。这种现象发生在URL应该有斜杠(/)却被忽略的时候。例如，当我们想访问http:///astrology.yaho.com/astrology时，我们实际上会返回一个包含301代码的跳转，指向http:///astrology.yaho.com/astrology/(注意末尾的斜杠)。Alias或mod_rewrite或thedredrectoresh。

连接新网站和旧网站是跳转功能中经常使用的另一种情况。在这种情况下，通常需要连接网站的不同内容，然后根据用户的不同类型（如浏览器类型、用户帐户类型）进行跳转。使用跳转来实现两个网站的切换非常简单，而且所需的代码也很少。虽然这种方法可以降低开发人员的复杂性，但它也可以降低用户体验。一种替代方法是，如果两者在同一服务器上使用Alias和modrewrite和实现。如果跳转是由于域名的不同而使用的，则可以使用Alias或modrewirte在web服务器上跳转。
 

15、可缓存的AJAX。

在某些情况下，ajax可以使用缓存来减少网络成本。

让我们举一个例子：Web2.0Email客户端将使用Ajax自动下载用户地址薄。如果用户上次使用Emailweb应用程序后没有修改地址薄，Ajax响应通过Expire或Cacke-Control头缓存，则可以直接从上次缓存中读取地址薄。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过增加一个包含上次编辑时间的时间戳来实现，

例如，&t=11900241612等。如果上次下载后没有编辑地址薄，时间戳将保持不变，从浏览器的缓存中加载，从而减少HTTP请求过程。如果用户修改地址薄，时间戳将用于确定新的URL与缓存响应不匹配，浏览器将重要要求更新地址薄。即使你的Ajxa响应是动态的，即使它只适用于一个用户，它也应该被缓存。这将使您的Web2.0应用程序更快。

16、减少DOM元素数量。

复杂的页面意味着需要下载更多的数据，JavaScript遍历DOM的效率越慢。例如，当您添加事件句柄时，500和5000个DOM元素的循环效果肯定是不同的。大量DOM元素的存在意味着页面中有可以简化的部分，只需更换元素标签，而无需删除内容。你在页面布局中使用过表格吗？你只是为了布局而引入更多的元素吗？

也许有一个适合或更合适的标签供你使用。YUICSSutilities可以给你的布局带来很大的帮助:grids.css可以帮助你实现整体布局，font.css和reset.css可以帮助你删除浏览器的默认格式。它提供了一个重新审视你页面中标签的机会，比如只在意义上有意义的时候使用，而不是因为它有换行效果。DOM元素的数量很容易计算，只需要输入Firebug的控制台:document.getelementsbytagname(**).length那么多DOM元素呢？这可以比较类似的标记使用的页面。例如，yahoo！主页是一个内容很多的页面，但只使用700个元素(HTML标签)。
 

17使iframe的数量最小化。

ifrmae元素可以在父文档中插入新的HTML文档。在更有效地使用iframe之前，了解iframe的工作原理是非常重要的。

优点:解决图标、广告等加载缓慢的第三方内容的加载问题；Securitysandbox；并行加载脚本；

缺点：即时内容为空，加载也需要时间；会阻止页面加载；无语意；
 

18、不要出现404错误。

HTTP请求的时间消耗很大，因此完全没有必要使用HTTP请求来获得无用的响应（例如，404没有找到页面），它只会减少用户体验，没有任何好处。一些网站将404错误响应页面改为“您是否想找到***”，这改善了用户体验，但也浪费了服务器资源（如数据库等）。最糟糕的情况是，外部JavaScript链接出现问题，返回404代码。首先，这种加载会破坏并行加载；其次，浏览器将试图在返回的404响应内容中找到可能有用的部分作为JavaScript代码。
 

19、指定Expires或Cache-Control作为文件头。

本规则包括两个方面：静态内容：将文件头的过期时间设置为Expires值为“永不过期”（永不过期）。对于动态内容，使用合适的Cache-Control文件头，以帮助浏览器提出有条件的请求。现在网页内容设计越来越丰富，这意味着页面应该包含更多的脚本、样式表、图片和flash。第一次访问你页面的用户意味着多次要求HTTP，但这些内容可以通过使用Expires文件头来缓存。在接下来的页面访问中，它避免了不必要的HTTP请求。Expires文件头通常用于图像文件，但应用于所有内容，包括脚本、样式表、Flash等。

为了加快页面访问速度，浏览器(和代理)使用缓存来减少HTTP请求的大小和次数。在HTTP响应中，Web服务器使用Expires文件头告诉客户缓存内容需要多长时间。下面的例子是一个长期的Expires文件头，它告诉浏览器这个响应要到2010年4月15日才会过期。Expires:Thu，15apr201020:00GMT，如果使用Apache服务器，可以使用ExpiresDefault设置相对于当前日期的过期时间。

下面的例子是使用Expiresdefault来设置请求时间后10年过期的文件头:Expiresdefault“accessplus10years”。请记住，如果使用Expires文件头，则必须在页面内容变更时更改内容的文件名。按照yahoo!我们经常使用这样的步骤:在内容的文件名中添加版本号，如yahoo_2.0.6.js。使用Expires文件头只有在用户访问了您的网站后才能工作。

由于浏览器的缓存是空的，当用户第一次访问您的网站时，这对减少HTTP请求的次数是无效的。因此，该方法应根据“预缓存”存在时的点击频率（页面中的所有内容都包含在“预缓存”中）来提高您网站的性能。是的！通过建立一套测量方法，我们发现75~85%的页面浏览量都有“预缓存”。通过使用Expires文件头，浏览器中缓存的内容数量增加，这些内容可以在用户的下一个请求中重复使用，甚至不需要通过用户发送字节请求。
 

20、Gzip压缩文件内容。

打开Gzip的服务器可减少50%以上的传输。
 

21、尽快刷新输出缓冲。

无论如何，当用户要求一个页面时，后台组织HTML文件需要200到500毫秒。在此期间，浏览器将免费等待数据返回。在PHP中，您可以使用flush()方法，允许您将部分已编译的HTML响应文件发送给浏览器。此时，浏览器可以下载文件中的内容(脚本等)。)，并在后台处理剩余的HTML页面。这种效果在后台或前台空闲时更为明显。
 

22、简单地要求使用GET方法。

Yahoo！Mail团队发现，当使用XMLHTPRequest时，浏览器中的POST方法是一个“两步走”的过程:先发送文件头，再发送数据。所以使用GET是最合适的，因为它只需要发送一个TCP包(除非你有很多cookie)。URL在IE中的最大长度是2K，所以如果你想发送超过2K的数据，你不能使用GET。一个有趣的区别是POST并没有像GET那样实际发送数据。根据HTTP规范，GET意味着“获取”数据，所以当你只获取数据时，使用GET更有意义(语义上也是如此)。相反，当你在服务器上发送和保存数据时，使用POST。
 

23、避免使用CSS表达式(Expression)

CSS表达式是一种强大的(但危险的)动态设置CSS属性的方法。从第五版开始，Internetexplorer支持CSS表达式。在下面的例子中，背景颜色可以通过使用CSS表达式每小时切换一次:background-color:expression((newdate).gethours()%2?#B8D4FF:“#F08a00”;如上所示，JavaScript表达式用于expresion。根据JavaScript表达式的计算结果，设置CSS属性。expression方法在其他浏览器中不起作用，因此在设计跨浏览器时，单独设置Internetexplorer更有用。

表达式的问题是它的计算频率比我们想象的要高。不仅在页面显示和缩放时，而且在页面滚动时，甚至在移动鼠标时。将计数器添加到CSS表达式中，以跟踪表达式的计算频率。只要在页面上移动鼠标，就很容易达到1万次以上的计算量。

减少CSS表达式计算次数的一种方法是使用一次性表达式。它在第一次操作中将结果分配给指定的样式属性，并用它代替CSS表达式。当页面周期中必须动态更改样式属性时，使用事件句柄代替CSS表达式是一种可行的方法。如果你必须使用CSS表达式，记住它们要计算成千上万次，这可能会影响你页面的性能。
 

24、使用外部JavaScript和CSS。

许多性能规则都是关于如何处理外部文件的。然而，在你采取这些措施之前，你可能会问一个更基本的问题：JavaScript和CSS是应该放在外部文件中还是页面本身？由于JavaScript和CSS文件可以在浏览器中产生缓存，因此在实际应用中使用外部文件可以提高页面速度。HTML文档中内置的JavaScript和CSS将随着HTML文档在每个请求中重新下载。尽管HTTP请求的数量减少了，但HTML文档的大小也增加了。

另一方面，如果浏览器缓存外部文件中的JavaScript和CSS，HTML文件的大小可以减少，而不会增加HTTP请求的数量。关键问题是，外部JavaScript和CSS文件缓存的频率与HTML文件的请求次数有关。尽管有一些困难，但仍有一些指标可以一次测量。如果用户在对话中浏览网站中的多个页面，并在这些页面中重复使用相同的脚本和样式表，那么缓存外部文件将带来更大的好处。许多网站没有功能来建立这些指标。对于这些网站来说，最好的坚定方法是引用JavaScript和CSS作为外部文件。更适合使用内置代码的例外是网站的主页，比如Yaho！主页和Myyahoo！主页在一次对话中的浏览量较小（可能只有一次）。您可以发现，内置JavaScript和CSSSS将加快终端用户的响应时间。
 

25、使用link而不是@import。

上面提到的最佳实现中提到的CSS应该放在顶部，以便有序地加载和呈现。在IE中，@import和使用页面底部。

功能是一样的，所以最好不要使用它。
 

26、避免使用过滤器。

用于修正7.0以下版本中显示PNG图片的半透明效果的IE独特属性AlphaImageLoader。这个过滤器的问题在于，当浏览器加载图片时，它会终止内容的呈现，冻结浏览器。每一个元素(不仅仅是图片)都会计算一次，增加内存费用，所以它的问题是多方面的。完全避免使用AlphaImageLoader的最佳方法是使用PNG8格式，这种格式可以在IE中很好地工作。如果您真的需要使用AlphaImageLoader，请使用下划线_filter，使其对IE7以上版本的用户无效。
 

27、删除重复脚本。

JavaScript文件在同一页面上反复引用会影响页面的性能。您可能会认为这种情况并不常见。对美国前十大网站的调查显示，其中两个网站反复引用脚本。导致一个脚本被反复引用的奇怪现象有两个主要因素：团队规模和脚本数量。如果这种情况真的存在，重复脚本会导致不必要的HTTP请求和无用的JavaScript操作，从而降低网站的性能。

不必要的HTTP请求将在InternetExplorer中生成，但Firefox不会生成。在InternetExplorer中，如果一个脚本被引用两次，并且无法缓存，它将在页面加载过程中产生两个HTTP请求。当用户重载页面时，即时脚本可以缓存并产生额外的HTTP请求。多个操作脚本除了增加额外的HTTP请求外，还会浪费时间。

无论脚本是否可以缓存，在InternetExplorer和Firefox中，都存在JavaScript重复运算的问题。在模板中使用脚本管理模块引用脚本是一种避免偶尔两次引用相同脚本的方法。在HTML页面中使用script标签引用脚本最常见的方法是创建一个名为insertscript的PHP方法：

为了防止脚本反复引用，这种方法还应使用其他机制来处理脚本，例如检查目录并在脚本文件名中添加版本号，以便在Expire文件头上使用。
 

28、减少Cookie的体积。

HTTPcoockie可用于许多用途，如权限验证和个性化身份。通过HTTP文件头，coockie中的相关信息在web服务器和浏览器之间进行交流。所以保持coockie尽可能小，以减少用户的响应时间是非常重要的。有关更多信息，请参阅TenniTheurer和PattyChi的文章“WhentheCookieCrumbles”。这些研究主要包括：

删除不必要的coockie，使coockie的体积尽可能小，以减少对用户响应的影响。注意在适应级别的域名上设置coockie，以免影响子域名。设置合理的过期时间。早期的Expire时间和不要过早地清除coockie，都会改善用户的响应时间。
 

29、对于静态资源，使用无coockie域名。

当浏览器在请求中同时要求静态图像并发送coockie时，服务器不会对这些coockie进行任何使用。所以他们只是因为一些负面因素而创建网络传输。所有对静态内容的请求都应确定为无coockie请求。创建一个子域名，并使用它来存储所有静态内容。

假如你的域名是www.example.org，你可以在static.example.org上有静态内容。然而，如果您在顶级域名example.org中设置coockie，而不是在www.example.org上，那么所有关于static.example.org的请求都包含coockie。在这种情况下，你可以重新购买一个新的域名来存在静态内容，并且要保持这个域名不是coockie。Yahoo！使用ymig.com，YouTube使用ytimg.com，Amazon使用images-anazon.com等。

 

30、不要在HTML中缩放图像。

不要使用比实际需要更大的图片，以便在HTML中设置长宽。如果你需要：那么你的图片（mycat.jpg）应该是100×100像素，而不是缩小使用500×500像素的图片。
 

31、favicon.ico小而可缓存。

在服务器根目录下，Favicon.ico是一个图像文件。它必须存在，因为即使你不在乎它是否有用，浏览器也会要求它，所以最好不要回到404notfound的响应。因为它在同一个服务器上，所以每次被要求coockie时，它都会被发送一次。这个图像文件也会影响下载顺序。例如，在IE中，当您在onload中要求额外文件时，favicon将在加载这些额外内容之前下载它们。所以，为了减少favicon.ico带来的弊端，必须做到：

文件应尽可能小，最好小于1K；在适当的时候为它设置Expires文件头（也就是说，当你不打算再次更改favicon.ico时，因为在更改新文件时无法重命名）。您可以将Expires文件头安全地设置为未来几个月。您可以通过检查当前favicon.ico的最后一次编辑时间来做出判断。Imagemagick可以帮助您创建小型favicon。
 

32、保持单个内容小于25K。

这一限制主要是由于iPhone不能缓存超过25K的文件。请注意，这里指的是解压缩后的尺寸。简化文件是非常重要的，因为简单的gizp压缩可能达不到要求。欲了解更多信息，请参阅“PerformanceResearch、Part5:iPhoneCacheability-MakingitStick”的文件，这是WayneShea和TenniTheurer的文件。