大家好！雖然今天是 Day 2，不過嚴格來說是系列文的第一天。今天要來談談「為什麼我們需要在前端做效能的優化？」，也許內容會比較乏味，然而在執行一件事情前先釐清目的與原因，是非常非常重要的，大家就忍耐一下吧！
關於這個問題我認為最主要有三個原因：
我想這是最直白易懂的一個原因，然而我認為它也是最重要的一個。使用者體驗強調的是使用者體驗的「過程」，通常會根據使用者的習慣，安排整個應用的內容與流程規劃。例如頁面中哪個區塊需要先顯示？Call To Action 該擺在哪？用什麼顏色？或是應用的使用流程是否流暢且符合邏輯？
而前端應用的效能就大大的左右了使用者的體驗，想想你在滑動臉書貼文牆的時候，如果畫面超級卡頓，動一下滾輪頁面就要卡頓個 2 秒，然後載入貼文又要花很長的時間，那就算這個網站功能再多，畫面做得再吸引人，你也不會想要使用吧？
前端主要就是面向使用者，如何提供一個流暢且迅速的使用者體驗是好的 Web 前端開發者需要去考量的，而效能則是讓使用者最有感的指標。
不管 Web 或是 App，前端的效能，是影響企業營收的一個重大指標。
正確來說應該把它看作是使用者體驗帶來的後續影響。
Amazon 有一個內部統計指出：
網頁載入的速度每增加100 ms，營收就減少 1%。
美國雲端計算公司 Akamai 的研究也顯示：
當網站沒有在三秒內顯示完畢，40% 的消費者會選擇直接跳離網站，進而對營收造成重大影響。
讀者應該透過以上兩個簡短的統計就知道前端效能的重要性了，數據畢竟是會說話的啊 ?
詳細研究內容可以參考這個網站
網頁的效能也會直接或間接的影響 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 考量其實也跟使用者體驗有關，沒有多少人可以忍受一個緩慢且卡頓的網站，龜速網站被使用者關掉的機率非常高，可能會因此失去大量潛在客戶，顯然搜尋引擎不希望自己列出來的頁面充斥著這種類型的網站。
在了解為什麼要做前端的效能優化後，我還想給大家一個建議：
站在巨人的肩膀上看事情，可以看的更高更遠。
在這個系列文我們可能會學習非常多效能優化的技巧，不過效能優化這件事其實很妙，有時候過早且過度的優化反而不是一件好事。又或者有時候為了快速衝刺，產品在開發的過程沒有那麼多餘力可以做優化，只能最小限度的避免效能瓶頸的出現。問題就出在這個效能瓶頸不知道什麼時候會出現，就算出現了我們也許也沒辦法迅速找出問題出在哪裡。
因此我建議除了了解效能優化的各種技巧以外，也可以多去參考一些知名企業做網頁效能優化的案例。通常這些案例分享中，會先說明網頁遇到的效能瓶頸，再來嘗試找出出現瓶頸的原因，最後再透過優化技術試著解決問題，並在結束後做效能的前後對比。我認為這些經驗是就算你了解所有優化技巧也不一定會得到的，因此我建議可以站在它人的肩膀上，學習他們的經驗與尋找問題時的脈絡思維，也許未來當你在開發網站遇到效能瓶頸時就不會空有一堆優化知識卻不知道該怎麼用或是根本不知道網站的效能瓶頸到底出在哪裡。
附上幾篇知名外商的前端效能優化成功案例給各位參考：
今天的內容應該還算簡短輕鬆（越到後面文章會越來越長，技術深度也會提升，敬請期待），說明了為什麼我們要做前端的效能優化，我歸納出了 3 個主要原因：
看完今天的內容後讀者們應該可以理解網頁前端的效能在現今是越來越重要了。另外我們也可以借鏡其他企業或是應用的效能優化成功案例，看看哪些部分可能會成為網站效能的瓶頸？遇到這些瓶頸又該怎麼解決？做了優化後網站效能又能獲得多少的提升？也許可以擷取一些重要的觀念與經驗並套用在自己的專案上。
明天將會接著講解如何分析一個網站的效能究竟好不好？絕對不是光用眼睛看或感覺的，有專業的工具能幫我們 ? 明天見囉！
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/
iThome鐵人賽
看影片追技術