如何通过优化前端来提升网站的速度

人们建立网站推广他们的商品和服务，吸引购物者，提供好的购物体验。所有的零售商都面对着一个相同的挑战：把客户转变成买家。在在线购物者中实际买家的百分比可以量化为“转化率”。影响转化率的因素有很多。首先，当你的网上商店有引人注目的标题和举办强有力的促销活动，一个用户友好的布局和较快的加载速度时，客户更可能购买商品。

早在2010年，谷歌就支持在众多决定搜索结果排名的因素中，以页面加载速度作为一种因素。但比搜索排名更重要的是，网站加载速度对于网站的可用性至关重要。在加载网页结果上，需要耗费的时间越多，网站的跳出率就越高，使用率就越低。

页面加载时间VS网站的速度页面加载时间

页面加载速度代表了一个网页从服务器中被加载并显示在浏览器中的速度有多快。 页面加载时间指单击一个链接并从服务器接收响应之间的时间间隔。

关于网站速度，有三个主要考虑的因素：

• 浏览器接收被请求数据的时间（页面加载时间）；
• 浏览器怎么相应页面加载；
• 浏览器呈现的速度
  
  

自然，一个快速加载的网站并不能保证你的网站排在搜索排名的前面，尽管当你的网站和另一个网站在相关性上有联系时，你会占到一些优势。

多快可以称之为快？

定义可接受的网站平均速度

现在我们来看一下一些数据数据，用这些数据算出对于网站来说“慢”和“快”意味着什么。很明显，这些定义随着时间的迁移会发生改变，而且，当谈到网站速度的时候，因特网用户的要求变得越来越高。早在1999年，当人们还在使用拨号连接因特网的时候，对于他们来说加载网页平均需要等待8秒是完全可以接受的。在2006年，因特网连接速度提高了，用户宣称他们愿意等待6秒的时间。到了2010年，如果一个网页需要超过3秒的下载时间，用户就会离开网站。

谷歌首先意识到了网站速度的重要性。Arvind Jain， 一个谷歌工程师， 宣称公司在乎新产品不会拖慢其他谷歌服务的速度。难怪谷歌的工程师们提出网站0.1秒的最优性能建议。这就是在感官记忆中存储视觉信息所需要的时间。如果一个网站加载小于0.1秒，我们会感觉页面是立刻被下载完毕的。自然，这是留住你的网站的客户的有效的方式。

你如何衡量网站加载速度？

什么样的速度计可以衡量网站加载速度？在网络上你可以找到各种各样的帮助你衡量你的网站的速度的工具。让我们来看看最有效的和最热门的选项。

Google PageSpeed

Google PageSpeed Insights 是一个衡量网站性能的很好的工具。它让你能够跟踪关键统计数据，检测可能出现的问题，并且提供如何提高你的网站速度的可能的解决方案和建议。Google PageSpeed使用分值范围1到100的分级评估体系。如果你得到的分数大于等于85，你的网站就可以看作是已优化的性能好的。它还有可以评估网站的移动版本的用户体验的额外功能。

GTmetrix

GTmetrix跟踪你的网站性能，包括Google PageSpeed Insights和YSlow（由雅虎提供的）计算出的分数和优化建议。 GTmetrix也记录总页面加载时间、页面大小和请求数量这些信息。你可以下载以报告的形式这些信息，以便于做进一步的分析。

Pingdom

另一个衡量网站性能的工具叫做Pingdom，它被定位为用于市场营销和整体性能监控的专业工具。你可以通过订阅各种计划来使用Pingdom的特性，并且在你提交购买之前有一个14天的试用版。除了利用像评价网站的性能和显示浏览器请求这样的Pingdom的必要特征之外，你还可以存储测试结果和跟踪随着时间推移的网站变化。

你如何优化你的网站的性能？

前端优化

在运行了测试来衡量你的网站性能和找出性能瓶颈之后，是时候考虑一下网页的优化了。我们会专注于前端（网站直接与用户交互的部分）的优化。下面是优化你的网站的前端的四个方法：

1. 压缩图片

在2016年， 基于HTTP档案文件的研究发现大约64%的网站页面主要由图片组成。 图片会使网站加载变慢。因此，优化图片可以是提高你的网页加载速度的最好的方式之一。在你深入研究图片压缩技术和考虑最佳格式之前，问下自己是否真的需要某些图片； 作为规则，一个网站应该减少会拖慢速度的图形，因为这些图形会导致整体的用户体验变差。如果你必须使用一张图片，考虑用更轻量级的并且在任何分辨率下都很清晰的CSS效果来替代。

此外，考虑哪个图片格式是最适合的。例如，你可以使用光栅或矢量图像。矢量格式对于logo、文本、图标是更可取的，因为矢量图像的质量不依赖于分辨率和比例尺。然而，矢量格式对于像图片这样复杂的图像来说是不适合的。对于图片，你应该考虑使用光栅图像格式，例如JPEG、GIF或者PNG。为了选择正确的格式，你可以参考谷歌提供的决策流程图：

如果你想要减小你的网页的大小，但在犹豫使用哪一种格式，那这个图表就派上用场了。

2. 最小化CSS、HTML和JavaScript

• 通过移除不需要的空白、制表符、行折叠（line folds）等来缩减CSS、HTML和JavaScript。这会使代码可读性降低，但是使文件大小减小——机器可以很好地读取这些被缩减的代码。
• 资源管道（asset pipeline）的好处。资源管道是一个默认的Ruby on Rails框架，它能够组合、缩减和压缩JavaScript和CSS 源码。它也让你能够在其他的编程语言和包括CoffeeScript、Sass和 LESS的其他预处理器创造这些源码。
• 减少的请求数量。 浏览器可以同时执行的请求数量是有限的，这也是为什么减少请求数量可以减少加载时间。资源管道组合了资源，会使浏览器请求减少。
• 缓存文件。文件缓存减少了页面加载时间——但如果你改变了一个资源，你会怎么做？考虑到可能发生的变化，管道使用fingerprint——一个用来建立文件的名称和它的内容之间的关系的工具。如果一个文件在修改内容之后重新命名了，fingerprint允许用户检查文件的两个版本是否相似。这种技术给浏览器提供了相关的文件版本。
  
  

3. 遵从折叠线以上（Above-the-Fold）原则

这是一个已经被证实了的事实：你的网站上的元素放置对于你的网站的整体速度有重要的影响。你有越多的元素，包括图像和样式表，对每个元素就需要更多的HTTP请求，这会使加载速度变慢。 适当地分配你的网站的元素会使你能够有效地改善你的前端性能。

折叠线以上（Above-the-Fold）原则说的是把最有必要的元素放在网页的上部，不需要向下滚动就能看到。以下是如何遵循折叠线以上（Above-the-Fold）原则的一些提示：

• 尽量缩小折叠线以上的数据大小。页面的上端展示越多的数据，越多的HTTP请求会被发送到托管服务器；这个过程直接影响了页面加载时间。缩小折叠线以上的数据大小会导致网站性能更好。
• 把CSS移到网页更高的位置。把CSS放到你网页的头，会使标题、logo、导航栏和其他元素循序渐进加载。当用户可以看到你的网页加载了的比特数时，他们会知道加载正在发生，体验更加舒服。
• 把脚本写在下面。 如果你的脚本在网页的上部，浏览器首先会下载它们，然后再展示用户最初请求的内容。把脚本放到底部就告诉了浏览器先加载最相关的信息，然后再下载脚本。
  
  

实现Gzip压缩

下载并传输压缩文件到Web浏览器速度更快。 Gzip压缩程序处理文本文件，包括JavaScript、CSS和HTML文档; 但是视频、图片和音频文件等元素无法通过Gzip压缩。 压缩文件占用较少的空间，需要较少的带宽。 根据调查，将Gzip压缩文件保存在服务器上可以将页面的下载速度提高3-4倍。

Gzip可在大多数新型浏览器上运行，包括Chrome、Firefox、Opera和Internet Explorer，这使得Gzip成为最具吸引力的压缩器之一。

总结

当然，确定一个会拖慢网站性能的瓶颈将花费更多的时间和精力。 继续关注我们博客即将会刊登的关于如何优化后端的文章，以提高页面加载速度。

原文链接：https://rubygarage.org/blog/how-to-improve-website-speed

译文链接：https://coyee.com/article/11435-how-to-improve-website-speed-by-optimizing-front-end