影响页面加载时间的5个常见错误

发布时间：01/01 来源：未知浏览：关键词：

假如您的网站在会员拜访时的加载时间需要很久，那么，这篇文章也许能为您的优化工作带来一些启示。不外即使没能帮您解决你的问题，您也能理解到影响了网站加载时间的几种常见错误是啥。

为什么页面加载时间这个目标很重要？

页面的加载时间直接影响到了会员对网站机能的直不雅感受。有调研数据表示，

一旦页面加载时长超越3秒，那么将会有一半的拜访会员在等候中而流失。

搜索引擎排行 — 页面加载时间是搜索引擎在搜索结果中对你的网站停止排行的重要根据之一。因此，网页的加载时间会影响会员在Web上查寻该网页的难易程度。
转化率 — 页面加载越快，会员的参与度就越高。网站速度慢，不言而喻地会致使转化率下落。假如您的网页加载时间太长，施行Call-To-Action(CTA) 将耗损大量的时间，这段期间会员的耐心和积极性会被消磨，终究关掉您的网站，而不购置您的产品或使用您供给的效劳。
会员体验 — 网站加载时间越长，会员就越中意。因此，客户的留存率和再次拜访比例会更高。

让我们看看几个基于HubSpot所做研讨的示例：

假如Yahoo将页面加载时间减少0.4秒，流量大概会增添9%。
页面慢1秒大概会使亚马逊每年亏损16亿美圆的零售额。
Bing搜索的2秒延迟将致使每位访客的收入亏损4.3%，点击量减少3.75%，查询量下落1.8%。

按照上面的数据，您可以看出页面加载时间对您的网站有多么重要。

影响页面加载时间的因素乃至优化技巧

影响页面加载时间的因素许多，在这些错误中，我列出了我在创立网站时碰到的比力有代表性的五大错误。

1.大量的HTTP恳求

每当阅读器需要从Web效劳器猎取文件、页面或图像时，都会发出一次HTTP恳求，之后您可以通过Chrome“开发人员工具”中的“Network”选项卡去监测利用程序是发出了哪些网络恳求，哪些恳求比力耗时等信息。

一样阅读器平常将同时发出的HTTP恳求数限制在4-8个之间。因此，当并发恳求数目较多时，会发生较长的等候延迟。Yahoo所做的研讨表白，您的利用程序加载时间的80%依靠于HTTP恳求，减少HTTP的恳求总量对加快页面加载时间是有帮忙的。

您可以通过下面的方式来减少Web利用的HTTP恳求总量：

合并CSS/JS文件 — 您可以尝试将CSS文件和JS文件离别合并为统一个文件，这样减少了恳求，也无需从效劳器检索多个文件。由于所有CSS文件都是渲染分块的，因此减少CSS文件将大大缩短页面加载时间。
内容按需加载 — 不一次加载利用程序的所有图像，而是只在需要时加载它们。这种办法被称为延迟加载或按需加载。当会员抵达站点时，您可以在会员滚动到该特定位置时才加载图像，而不是在点击时就一股脑全部加载。
启用阅读器缓存 — 同意缓存静态图片或网站的内容，这些内容不会经常转变。当会员第二次拜访网站时，缓存可以加载这些内容，而无需向效劳器发送新的HTTP恳求。这使得内容的加载速度更快。
效劳器支撑HTTP/2 — 使用HTTP/2，从阅读器到效劳器只需要创立一个连接就可以加载一个网站，并且同意同时多个恳求。这比为每个资源创立新连接要高效得多。

2. 没有使用CDN

假如您的网站没有启用CDN，则当会员的物理位置远离效劳器时，加载时间会增添。这些延迟会随着间隔的增添而变得更明显，并且会影响到对效劳器的所有HTTP恳求。使用CDN可以缩短页面加载时间。

CDN是啥？

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依托摆设在各地的边沿效劳器，通过中心平台的负载平衡、内容分发、调度等功效模块，使会员可以就近猎取所需内容。

使用CDN将使会员能够从间隔其位置比来的效劳器猎取网页所需的资源。CDN中的效劳器分布在不一样的地理位置。所以使用这种CDN是改善利用程序加载时间的有效办法之一。

例如，假如您的Web效劳器位于加利福尼亚州，假如您摆设了CDN，您的访客拜访网络拓补图大概是下面的模样。

大多数CDN效劳都具有本人的网络骨干，与互联网比拟，它们可以供给更高的效劳质量，更少的数据包率及更快的加载速度等有点。缺陷，就是贵。

3.文件大小和页面大小

从Web效劳器上加载大尺寸文件或加载页面尺寸较大时将消耗大量时间，所以大概会在为了猎取几个这样大的文件而使页面加载时间变长。

通过启用紧缩是减小HTTP恳求文件大小、缩短页面加载时间的常用方式。

常见的紧缩方式有两种：

第一种方式是Gzip，Gzip可以定位文件中的相似代码，并临时更换它们，使文件变小。当前，大多数Web效劳器都支撑Gzip紧缩。对HTML或CSS文件启用紧缩平常可以节约约50%或70%的文件大小，从而减少页面加载时间和使用的带宽。您可以通过减小利用程序中使用的图像的大小来进一步减少页面加载时间。

另一种紧缩方案称为Brotli，据官方介绍紧缩比力gzip要高20%~30%，并且施行效力更高效，详细的由于我这没有测试，所以没法佐证，您可以按照您的实际状况来思考。

4.同时加载所有资源

同时加载所有HTML、CSS和JS文件将增添页面加载时间，由于在加载所有这些资源此前，页面渲染的流程将被阻挠。

延迟JavaScript加载是一种在加载其他元素之后加载大型JS文件的机制。此办法可确保加载页面内容时不会因加载大型JS文件而受到影响。

假如您有一个HTML站点，则需要在</body>标志此前调取外部JS文件(defer.js)。

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

上面的代码是讲，“等候整个文档加载，然后再加载外部defer.js文件。”