Day02 X 为什麽要在前端做效能优化？

大家好！虽然今天是 Day 2，不过严格来说是系列文的第一天。今天要来谈谈「为什麽我们需要在前端做效能的优化？」，也许内容会比较乏味，然而在执行一件事情前先厘清目的与原因，是非常非常重要的，大家就忍耐一下吧！

为什麽需要在前端做效能优化？

关於这个问题我认为最主要有三个原因：

• 使用者体验 (User Experience)
• 影响营收的重要指标
• SEO

使用者体验 User Experience

我想这是最直白易懂的一个原因，然而我认为它也是最重要的一个。使用者体验强调的是使用者体验的「过程」，通常会根据使用者的习惯，安排整个应用的内容与流程规划。例如页面中哪个区块需要先显示？Call To Action 该摆在哪？用什麽颜色？或是应用的使用流程是否流畅且符合逻辑？

而前端应用的效能就大大的左右了使用者的体验，想想你在滑动脸书贴文墙的时候，如果画面超级卡顿，动一下滚轮页面就要卡顿个 2 秒，然後载入贴文又要花很长的时间，那就算这个网站功能再多，画面做得再吸引人，你也不会想要使用吧？

前端主要就是面向使用者，如何提供一个流畅且迅速的使用者体验是好的 Web 前端开发者需要去考量的，而效能则是让使用者最有感的指标。

影响营收的重要指标

不管 Web 或是 App，前端的效能，是影响企业营收的一个重大指标。
正确来说应该把它看作是使用者体验带来的後续影响。

Amazon 有一个内部统计指出：

网页载入的速度每增加100 ms，营收就减少 1%。

美国云端计算公司 Akamai 的研究也显示：

当网站没有在三秒内显示完毕，40% 的消费者会选择直接跳离网站，进而对营收造成重大影响。

读者应该透过以上两个简短的统计就知道前端效能的重要性了，数据毕竟是会说话的啊 ?

详细研究内容可以参考这个网站

SEO

网页的效能也会直接或间接的影响 SEO 的 Ranking。

Google 在 2010 年就发表过官方声明，网页的速度与效能将正式影响搜寻的排名。不过我没有办法保证效能好的网站一定就有很好的 SEO，效能不好的网站 SEO 就一定不好。原因在於 Google 搜寻引擎的排名背後其实是经过一个复杂的演算法的，而影响排名的众多指标拥有不同的「权重」或者可以说「强度」，所以如果你对强度高的指标做优化，SEO 可能会提到显着提升，对强度较低的指标优化，可能忙了半天，SEO 也不见起色。

虽然 Google 没有明确表明效能究竟是不是一个高强度的指标，但从全世界的统计经验来看，网页效能对 SEO 的影响是一直在提升的，因此我认为在现在，想要拥有好的 SEO，页面效能是一个非常重要的指标，当然，它并不是拥有良好 SEO 的保证。

我们知道搜寻引擎会透过爬虫程序去爬取网站的内容（如果不清楚网站爬取与索引的读者可以参考这篇文章，非常简单易懂），并在网页间的超连结中不断移动并爬取资料。不过以 Google 来说，它的爬虫程序有所谓的「爬取额度」，也就是说它只给有限的时间，比方说，一天只分配 5 分钟爬取你的网站，timeout 的话就不爬了，因此网页的效能其实左右着爬虫爬你网站的效率，5 分钟爬 100 个 sites 与 5 分钟爬了 1000 个 sites，这样爬虫效率的差异有可能会影响 SEO 的结果。

会将 Page Speed 纳入 SEO Ranking 考量其实也跟使用者体验有关，没有多少人可以忍受一个缓慢且卡顿的网站，龟速网站被使用者关掉的机率非常高，可能会因此失去大量潜在客户，显然搜寻引擎不希望自己列出来的页面充斥着这种类型的网站。

多参考其他效能优化的成功案例

在了解为什麽要做前端的效能优化後，我还想给大家一个建议：

站在巨人的肩膀上看事情，可以看的更高更远。

在这个系列文我们可能会学习非常多效能优化的技巧，不过效能优化这件事其实很妙，有时候过早且过度的优化反而不是一件好事。又或者有时候为了快速冲刺，产品在开发的过程没有那麽多余力可以做优化，只能最小限度的避免效能瓶颈的出现。问题就出在这个效能瓶颈不知道什麽时候会出现，就算出现了我们也许也没办法迅速找出问题出在哪里。

因此我建议除了了解效能优化的各种技巧以外，也可以多去参考一些知名企业做网页效能优化的案例。通常这些案例分享中，会先说明网页遇到的效能瓶颈，再来尝试找出出现瓶颈的原因，最後再透过优化技术试着解决问题，并在结束後做效能的前後对比。我认为这些经验是就算你了解所有优化技巧也不一定会得到的，因此我建议可以站在它人的肩膀上，学习他们的经验与寻找问题时的脉络思维，也许未来当你在开发网站遇到效能瓶颈时就不会空有一堆优化知识却不知道该怎麽用或是根本不知道网站的效能瓶颈到底出在哪里。

附上几篇知名外商的前端效能优化成功案例给各位参考：

• Netflix Web Performance Optimization Case Study
• Tinder PWA Performance Case Study
• Pinterest PWA Performance Case Study
• Making instgram.com Faster

本日小结

今天的内容应该还算简短轻松（越到後面文章会越来越长，技术深度也会提升，敬请期待），说明了为什麽我们要做前端的效能优化，我归纳出了 3 个主要原因：

• 使用者体验
• 影响营收的重要指标
• SEO

看完今天的内容後读者们应该可以理解网页前端的效能在现今是越来越重要了。另外我们也可以借镜其他企业或是应用的效能优化成功案例，看看哪些部分可能会成为网站效能的瓶颈？遇到这些瓶颈又该怎麽解决？做了优化後网站效能又能获得多少的提升？也许可以撷取一些重要的观念与经验并套用在自己的专案上。

明天将会接着讲解如何分析一个网站的效能究竟好不好？绝对不是光用眼睛看或感觉的，有专业的工具能帮我们 ? 明天见罗！

References ＆ 图片来源

https://www.gigaspaces.com/blog/amazon-found-every-100ms-of-latency-cost-them-1-in-sales

https://cognitiveseo.com/blog/22865/page-speed-seo/

https://www.loadview-testing.com/blog/user-experience-load-testing/